From b5b476170a769de1fc097f9b530140cf9739ae4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= <j96263732@gmail.com>
Date: Sun, 6 Oct 2024 20:09:39 +0900
Subject: [PATCH] =?UTF-8?q?"Fix:=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EB=93=9C?=
 =?UTF-8?q?=EB=9E=8D=EC=9C=BC=EB=A1=9C=20=ED=8F=B4=EB=8D=94=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EC=8B=9C=ED=82=B4"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ImageUploadModal/ImageUploadForm.tsx      | 42 +++++++++++++++++--
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/ImageUploadModal/ImageUploadForm.tsx b/frontend/src/components/ImageUploadModal/ImageUploadForm.tsx
index 610cca7..d6a0fd6 100644
--- a/frontend/src/components/ImageUploadModal/ImageUploadForm.tsx
+++ b/frontend/src/components/ImageUploadModal/ImageUploadForm.tsx
@@ -85,13 +85,47 @@ export default function ImageUploadForm({
     setIsDragging(false);
   };
 
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     event.stopPropagation();
     setIsDragging(false);
-    const droppedFiles = event.dataTransfer.files;
-    if (droppedFiles) {
-      setFiles((prevFiles) => [...prevFiles, ...Array.from(droppedFiles)]);
+
+    const droppedItems = event.dataTransfer.items;
+
+    if (droppedItems) {
+      const allFiles: File[] = [];
+
+      const traverseFileTree = async (item: FileSystemEntry) => {
+        if (item.isFile) {
+          const file = await new Promise<File>((resolve, reject) => {
+            (item as FileSystemFileEntry).file(resolve, reject);
+          });
+          allFiles.push(file);
+        } else if (item.isDirectory) {
+          const directoryReader = (item as FileSystemDirectoryEntry).createReader();
+          const readEntries = () =>
+            new Promise<FileSystemEntry[]>((resolve, reject) => {
+              directoryReader.readEntries(resolve, reject);
+            });
+
+          let entries = await readEntries();
+          while (entries.length > 0) {
+            for (const entry of entries) {
+              await traverseFileTree(entry);
+            }
+            entries = await readEntries();
+          }
+        }
+      };
+
+      for (let i = 0; i < droppedItems.length; i++) {
+        const item = droppedItems[i].webkitGetAsEntry();
+        if (item) {
+          await traverseFileTree(item);
+        }
+      }
+
+      setFiles((prevFiles) => [...prevFiles, ...allFiles]);
     }
   };