[Fend] 이미지 파일 drag&drop

1. 구현하고 싶은 내용

: input은 컴포넌트(별도의 파일안에서)로 관리하고 있기 때문에
drag&drop에 대한 처리를 추가하기 보다
input 상위 태그 영역에서 drag&drop 이벤트를 인식했으면 좋겠음.

2. input 상위 태그에서 drag&drop처리

2-1. div태그에서 onDrop, onDrageOver 이벤트처리

1. 🌺 drop이벤트가 발생하기 위해서는
   dragOver이벤트를 추가해줘야함 !

2. ⭐️ 웹 브라우저에 파일을 드롭하면 "기본적"으로 새 창으로 열어준다.
   그렇기 때문에 event.preventDefault()를 해줘야 한다.

<div // -----> 🌺 1. div태그에서 처리
  onDrop={handleDragoverProfile} 
  onDragOver={(event) => {
    event.preventDefault(); // -----> ⭐️
  }}>
  <Input
  id="profile"
  label="프로필"
  type="file"
  style={{display: 'none'}}
  {...rest}
  ref={(e) => {
    profileRegisterRef(e);
    hiddenInputRef.current = e;
  }}
  onChange={handleUploadProfile}
  
  />
  <img src={previewImg} alt="프로필 이미지" />
  <button type="button" onClick={handleUploadButton}>업로드</button>
</div>

2-2. file에 대한 정보는 dataTransfer에서!

: 드래그앤드롭 중에 드래그되고 있는 데이터에 대한 정보를 보관하기 위해서 사용한다.

const handleDragoverProfile = (event: React.DragEvent<HTMLDivElement>) => {
  event.preventDefault();
  const file: File | undefined = event.dataTransfer.files?.[0]; // ⭐️
  
  if (file) {
    uploadPreviewProfile(file)
  }
}

참고

드래그-앤-드롭-이벤트
React Drag and Drop 기능구현 시 주의 할 점(드래그 앤 드롭)
DataTransfer