[TIL] 2024-03-11 input[file] 버튼 영역 커스텀

ㅎ ㅏ... 아니 분명 잘 만들어놨다고 생각했는데 말이죠?
이상하게도 커스텀한 영역이 한 번 눌려서 사진이 로딩되면 그 다음부터는 눌리지 않는 것이었습니다...
왜...? 왜 그러는 거야 넌...? 난 정말 네 마음을 모르겠어...(내 잘못이겠지만)

그래서 이것저것 우당탕탕 하고 열심히 찾아보고서는 해결하였다...
사진을 1개만 넣을 때 잘 됐던 이유는 reader.onloadend 할 때 e.target.value를 비워버려서 아예 초기화되니까 완전 새것의 상태로 돌아와서였던 것 같다.
근데 multiple로 여러개를 받으니까 어쩐지... 뭔가 안 돼...
그치만 콘솔을 미친듯이 찍어봐도 e.target.value는 잘 비워지고 있어...
이걸 안 비우면 안 될 것 같다는 느낌적인 느낌은 또 있었단 말이죠?

• 원인
  이미지 1개 짜리를 등록하는 부분 커스텀 할 때는 input[type='file'] 로 스타일링을 커스텀 했었다.
  근데 이걸 multiple 할 때도 똑같이 쓰면서 뭔가... 화면 영역에서 사라지는지 뭔지?! 그랬던 것 같았다. 이 부분에다가 배경색깔 넣어서 보니까 색이 보일 때는 눌리는데 안 보일 때는 안 눌리니까 이러면 display: none이나 hidden을 쓸 수 없는 걸!
  근데 이걸 못 쓰면 이 못생긴 파일선택 버튼이 계속 보이는 걸!

// 원래
<ImageEnrollBox>
  <div>
    <div className="container-center">
      <img role="presentation" src={emptyImgIcon} alt="img-preview" />
      <div className="image-count">{representativeImgArr ? representativeImgArr.length : 0}/7</div>
      <input
        id="thumbnail-file"
        className="thumbnail-file"
        ref={filePhotoRef}
        type="file"
        accept=".jpg, .png, .jpeg"
        onChange={handleFileChange}
        multiple
      />
    </div>
  </div>
 </ImageEnrollBox>

• 해결
  알고보니 input[file] 버튼 자체를 스타일링 해도 되지만 label 태그로 스타일링을 해도 된다고 하더군요.
  몇몇 예제들에서는 input 태그 밑에 label 태그가 있길래 그렇게 했고 for를 써서 그렇게 했는데...
  esLint가 날 그렇게 개발하지 못하게 해 주었습니다...

jsx-a11y/label-has-associated-control 이라는 에러를 띄우며 고치라고 했다.

그래서 label 태그로 input 태그를 감싸고 label에도 for 말고 htmlFor로 input의 id를 라벨의 htmlFor과 맞춰주어서 서로 연결해주었다.

그리고 사진아이콘 이미지랑 몇 개 등록했고, 몇 개까지 등록할 수 있는지 나타내 주는 글자가 위에 있었으면 좋겠어서 위치를 input 위로 수정했다.

// 수정
<ImageEnrollBox>
  <div>
    <label htmlFor="thumbnail-file">
      <div className="container-center">
        <img src={emptyImgIcon} alt="img-preview" />
        <div className="image-count">
          <span>{representativeImgArr ? representativeImgArr.length : 0}</span>
          <span>/7</span>
        </div>
      </div>
      <input
        id="thumbnail-file"
        className="thumbnail-file"
        ref={filePhotoRef}
        type="file"
        accept=".jpg, .png, .jpeg"
        onChange={handleFileChange}
        multiple
      />
    </label>
  </div>
</ImageEnrollBox>