이거에서
이걸로
바꾸고자 한다.
이를 위해서는 input tag customizing이 필요하다.
이거에서
<div>Change profile</div>
<form type="file" name="img" encType="multipart/form-data" className="flex items-center">
<label htmlFor="file-upload-button" className="border-ducks-gray-666 border border-solid w-90 h-32 ">
Choose File
<input type="file" name="img" id="file-upload-button" onChange={fileChangeHandler} style={{ display: "none" }} />
</label>
</form>
<OrangeBtn callback={onSubmitHandler} text="Save"></OrangeBtn>
</div>
input 태그 클릭의 유효범위가 헷갈려서 구글링을 해보았다.
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=haakuz&logNo=221341716499
이걸로
<form type="file" name="img" encType="multipart/form-data" className="flex flex-col items-center">
<label htmlFor="file-upload-button" className="flex flex-col border border-solid w-140 h-60 mt-18 mb-18 p-2 rounded-16 items-center text-ducks-blue-6667ab bg-white hover:bg-ducks-blue-6667ab hover:text-white cursor-pointer">
<FiUpload className="flex flex-col" />
Change Profile
<input type="file" name="img" id="file-upload-button" onChange={fileChangeHandler} style={{ display: "none" }} />
</label>
</form>
<div className="w-92 h-92 ml-90">
<OrangeBtn callback={onSubmitHandler} text="Save"></OrangeBtn>
</div>
(Tailwind CSS를 사용했고, OrangeBtn은 타 파일에서 불러온 컴포넌트이다.)
https://helloinyong.tistory.com/275
블로그에서는 다들 <label for
로 하라고 했는데 내 경우에는 <label htmlFor
로 써야 에러가 생기지 않았다.
react 상의 문제인지, eslint 에러인지?
이걸 빨리 깨닫지 못해서 시간 좀 걸렸다.
<label htmlFor="file-upload-button"
<input id="file-upload-button"
<input style={{ display: "none" }}
Input태그에 fileChangeHandler가 작동한다. 여기서 포인트는, input 태그는 customizing이 힘들기 때문에, label태그를 input태그와 같은 기능을 하게 하고, input태그는 안보이게 하고 label 태그를 customizing 해주면 된다는 것이다.
버튼을 약간 더 밸런스 맞게 수정했다.
파일 업로드 기능이 잘 적용되는 것을 볼 수 있다.
추가적으로는, 프로젝트 리팩토링을 하면서, 이미지 미리보기 기능도 구현해보고자 한다.