2024.04.08 TIL - 최종프로젝트 14일차(이미지 드래그 앤 드롭, 디자이너 회의)

Innes·2024년 4월 8일

TIL(Today I Learned)

목록 보기

110/127

📝 오늘 한 일

✔️ hook으로 리팩토링 - 게시글 수정, 게시글 글쓰기, 개인액션 수정
✔️ 개인액션 수정 - 이미지 삭제버튼 변경
✔️ 이미지 드래그 앤 드랍
✔️ 상세모달창 로딩처리

이미지 드래그 앤 드롭

사용처

개인액션 등록, 수정 페이지

커뮤니티 게시글 등록, 수정 모달창

참고 : https://guiyomi.tistory.com/148

기존에 있던 이미지 미리보기, 이미지 삭제 로직

  // 이미지 미리보기 띄우기
  const handleShowPreview = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) {
      return;
    }
    const imageUrl = URL.createObjectURL(file);
    setUploadedFileUrls((prev) => [...prev, imageUrl]);
    setFiles((prev) => [...prev, file]);
  };

  // 미리보기 이미지 삭제
  const handleDeleteImage = (index: number) => {
    setUploadedFileUrls((prev) => {
      const updatedUrls = [...prev];
      updatedUrls.splice(index, 1);
      return updatedUrls;
    });
    setFiles((prev) => {
      const updateFiles = [...prev];
      updateFiles.splice(index, 1);
      return updateFiles;
    });
  };

드래그, 드롭 로직 추가
- 드래그 상태를 useState로 관리, 드래그 중, 드래그 멈췄을 때, 드롭 했을 때 를 모두 함수로 관리하고, event를 받아서 브라우저 기본동작(페이지 새로고침)을 막아주고, 함수를 통해 드래그 상태를 변경한다.
- 드롭할 경우 이미지 url과 file을 state에 set해준다.

  // 드래그 앤 드랍 상태
  const [isDragging, setIsDragging] = useState(false);

  // 드래그 앤 드랍 이벤트 핸들러
  const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(true);
  };

  // 드래그 중인 아이템이 요소 위로 이동할 때 발생하는 이벤트를 처리
  // (기본적으로 브라우저의 기본 동작을 막음)
  // (드래그한 아이템을 요소 위에 올렸을 때 특정 스타일을 적용, 드롭이 허용되는 영역임을 시각적으로 표시할 수 있음)
  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
  };

  const handleDragEnd = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(false);
  };

  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    setIsDragging(false);

    // ⭐️ e.target.files가 아니라, dataTransfer라는 점 주의!
    const files = e.dataTransfer.files;
    if (!files || files.length === 0) {
      return;
    }
    const file = files[0];
    const imageUrl = URL.createObjectURL(file);
    setUploadedFileUrls((prev) => [...prev, imageUrl]);
    setFiles((prev) => [...prev, file]);
  };

컴포넌트에서 사용하는 법 - onDragEnter 등 속성에 주목!

<div
        className={`flex gap-2 w-full h-auto mb-8 ${
          isDragging ? "border-blue-400" : "border-gray-300"
        }`}
        onDragEnter={handleDragStart}
        onDragOver={handleDragOver}
        onDragLeave={handleDragEnd}
        onDrop={handleDrop}
      >
        {[...Array(4)].map((_, index) => (
          <div
            key={index}
          >
      
      // ... 생략