[TIL] 심화 프로젝트 (2)

이미지 드래그 앤 드롭

파일 드래그 앤 드롭을 구현하기 위해 react-dropzone이라는 라이브러리를 사용했다.

// components/ImageUploader.tsx
import React, { useCallback, useState } from "react";
import { useDropzone } from "react-dropzone";

interface ImageUploaderProps {
  onUpload: (file: File[]) => void;
}

const ImageUploader: React.FC<ImageUploaderProps> = ({ onUpload }) => {
  const [previewImages, setPreviewImages] = useState<string[]>([]);

  const onDrop = useCallback(
    (acceptedFiles: File[]) => {
      onUpload(acceptedFiles);

      // 이미지 파일을 미리보기용으로 저장
      const imageUrls = acceptedFiles.map((file) => URL.createObjectURL(file));
      setPreviewImages((prevImages) => [...prevImages, ...imageUrls]);
    },
    [onUpload]
  );

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: {
      "image/*": ["image/*"]
    },
    multiple: true
  });

  return (
    <div {...getRootProps()} className="border-dashed rounded border-2 border-gray-400 p-5 text-center cursor-pointer">
      <input {...getInputProps()} />
      <p>이미지를 드래그 앤 드롭하거나 클릭하여 업로드하세요.</p>
      {/* 이미지 프리뷰 렌더링 */}
      <div className="flex mt-[20px]">
        {previewImages.map((imageUrl, index) => (
          <img
            key={index}
            src={imageUrl}
            alt={`Preview ${index + 1}`}
            className="w-[100px] h-[100px] object-cover mr-[10px]"
          />
        ))}
      </div>
    </div>
  );
};

export default ImageUploader;

<ImageUploader onUpload={handleUpload} /> 이렇게 사용한다.

supabase 연결하고 테이블에 값을 넣는데 오래걸렸다.. 갈길이 구만리..🌋
🏃‍♀️ 여전히 오류 투성이.. 조금씩 조금씩 나아가야겠다..ㅠ