feat: 드래그앤드롭 기능구현

SVTeamJ · Jan 11, 2023 · 3cddfbd · 3cddfbd
1 parent daa38a7
commit 3cddfbd
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 11 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,6 +16,7 @@
     "postcss": "8.4.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-router-dom": "6.6.1",
     "recoil": "0.7.6",
     "tailwindcss": "3.2.4"

diff --git a/frontend/src/page/insertImage/index.tsx b/frontend/src/page/insertImage/index.tsx
@@ -1,9 +1,10 @@
 import Nav from '@/components/nav';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import download from '@/assets/download.png';
 import smallFish from '@/assets/smallFish.png';
 import seaweeds from '@/assets/seaweeds.png';
 import './index.scss';
+import { useDropzone } from 'react-dropzone';
 const InsertImage = () => {
   const imageRef = useRef<HTMLInputElement>(null);
   const [imagefile, setImageFile] = useState<File>();
@@ -35,12 +36,27 @@ const InsertImage = () => {
     }
   }, [imagefile]);
 
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    setImageFile(acceptedFiles[0]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    accept: {
+      'image/*': [],
+    },
+    onDrop,
+  });
+
   return (
     <div className="img-view">
       <Nav />
       <div className="insertImage-view">
         <div className="insert_box">
-          <div onClick={openFile} className="insert_picture">
+          <div
+            {...getRootProps()}
+            onClick={openFile}
+            className="insert_picture"
+          >
             {preview && (
               <div>
                 <img className="insert_picture-previewImg" src={preview}></img>
@@ -54,6 +70,7 @@ const InsertImage = () => {
             )}
           </div>
           <input
+            {...getInputProps()}
             onChange={raiseImg}
             ref={imageRef}
             type="file"