From db5d243fb10041fd2db5022504cbf65241308359 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= <hckhong@naver.com>
Date: Mon, 30 Sep 2024 14:05:41 +0900
Subject: [PATCH 1/3] =?UTF-8?q?Refactor:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20console=20=EC=B6=9C=EB=A0=A5=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/WorkspaceDropdownMenu/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/WorkspaceDropdownMenu/index.tsx b/frontend/src/components/WorkspaceDropdownMenu/index.tsx
index f6c836e..c77eaa5 100644
--- a/frontend/src/components/WorkspaceDropdownMenu/index.tsx
+++ b/frontend/src/components/WorkspaceDropdownMenu/index.tsx
@@ -45,7 +45,6 @@ export default function WorkspaceDropdownMenu({
   };
 
   const handleFileCount = (fileCount: number) => {
-    console.log(fileCount);
     setFileCount(fileCount);
   };
 

From 8fbc2b92213901fdf6c3ea50e688065080d13fbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= <hckhong@naver.com>
Date: Mon, 30 Sep 2024 14:11:54 +0900
Subject: [PATCH 2/3] =?UTF-8?q?Fix:=20=EA=B0=99=EC=9D=80=20=ED=8F=B4?=
 =?UTF-8?q?=EB=8D=94=20=EB=8B=A4=EC=8B=9C=20=EC=B6=94=EA=B0=80=ED=95=98?=
 =?UTF-8?q?=EB=A9=B4=20=EC=84=A0=ED=83=9D=20=EC=95=88=EB=90=98=EB=8A=94=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95,=20=ED=8C=8C=EC=9D=BC?=
 =?UTF-8?q?=20=EB=AA=A9=EB=A1=9D=20=EB=8C=80=EC=8B=A0=20=ED=8F=B4=EB=8D=94?=
 =?UTF-8?q?=20=EC=9D=B4=EB=A6=84=EB=A7=8C=20=EB=B3=B4=EC=9D=B4=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ImageUploadFolderForm.tsx                 | 88 +++++++++----------
 1 file changed, 42 insertions(+), 46 deletions(-)

diff --git a/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx b/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
index aaaae3a..be704f9 100644
--- a/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
+++ b/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
@@ -20,6 +20,7 @@ export default function ImageUploadFolderForm({
   const memberId = profile?.id || 0;
 
   const [files, setFiles] = useState<File[]>([]);
+  const [inputKey, setInputKey] = useState<number>(0);
   const [isDragging, setIsDragging] = useState<boolean>(false);
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const [isUploaded, setIsUploaded] = useState<boolean>(false);
@@ -44,8 +45,6 @@ export default function ImageUploadFolderForm({
     if (newFiles) {
       setFiles((prevFiles) => [...prevFiles, ...Array.from(newFiles)]);
     }
-
-    event.target.value = '';
   };
 
   const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@@ -62,8 +61,9 @@ export default function ImageUploadFolderForm({
     setIsDragging(false);
   };
 
-  const handleRemoveFile = (index: number) => {
-    setFiles(files.filter((_, i) => i != index));
+  const handleRemoveFile = () => {
+    setFiles([]);
+    setInputKey((prevKey) => prevKey + 1);
   };
 
   const handleUpload = async () => {
@@ -101,6 +101,7 @@ export default function ImageUploadFolderForm({
           )}
         >
           <input
+            key={inputKey}
             type="file"
             webkitdirectory=""
             // multiple
@@ -122,50 +123,45 @@ export default function ImageUploadFolderForm({
         </div>
       )}
       {files.length > 0 && (
-        <ul className="m-0 max-h-[260px] list-none overflow-y-auto p-0">
-          {files.map((file, index) => (
-            <li
-              key={index}
-              className="flex items-center justify-between p-1"
-            >
-              <span className="truncate">{file.webkitRelativePath || file.name}</span>
-              {isUploading ? (
-                <div className="p-2">
-                  {isUploaded ? (
-                    <CircleCheckBig
-                      className="stroke-green-500"
-                      size={16}
-                      strokeWidth="2"
-                    />
-                  ) : isFailed ? (
-                    <CircleX
-                      className="stroke-red-500"
-                      size={16}
-                      strokeWidth="2"
-                    />
-                  ) : (
-                    <CircleDashed
-                      className="stroke-gray-500"
-                      size={16}
-                      strokeWidth="2"
-                    />
-                  )}
-                </div>
+        <div className={'flex items-center justify-between p-1'}>
+          <span className="truncate">
+            {files[0].webkitRelativePath.substring(0, files[0].webkitRelativePath.indexOf('/'))} {}
+          </span>
+          {isUploading ? (
+            <div className="p-2">
+              {isUploaded ? (
+                <CircleCheckBig
+                  className="stroke-green-500"
+                  size={16}
+                  strokeWidth="2"
+                />
+              ) : isFailed ? (
+                <CircleX
+                  className="stroke-red-500"
+                  size={16}
+                  strokeWidth="2"
+                />
               ) : (
-                <button
-                  className={'cursor-pointer p-2'}
-                  onClick={() => handleRemoveFile(index)}
-                >
-                  <X
-                    color="red"
-                    size={16}
-                    strokeWidth="2"
-                  />
-                </button>
+                <CircleDashed
+                  className="stroke-gray-500"
+                  size={16}
+                  strokeWidth="2"
+                />
               )}
-            </li>
-          ))}
-        </ul>
+            </div>
+          ) : (
+            <button
+              className={'cursor-pointer p-2'}
+              onClick={handleRemoveFile}
+            >
+              <X
+                color="red"
+                size={16}
+                strokeWidth="2"
+              />
+            </button>
+          )}
+        </div>
       )}
       {isUploading ? (
         <Button

From aee8fbd054b3f958bc1d16fd51b030d987f03c77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= <hckhong@naver.com>
Date: Mon, 30 Sep 2024 14:25:08 +0900
Subject: [PATCH 3/3] =?UTF-8?q?Refactor:=20=ED=8F=B4=EB=8D=94=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EB=B0=A9=EC=8B=9D=EC=9D=84=202=EA=B0=80?=
 =?UTF-8?q?=EC=A7=80=EB=A1=9C=20=EA=B5=AC=EB=B6=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/imageApi.ts                  |  27 ++-
 .../ImageUploadFolderFileForm.tsx             | 190 ++++++++++++++++++
 .../ImageUploadFolderFileModal/index.tsx      |  35 ++++
 .../ImageUploadFolderModal/index.tsx          |   2 +-
 .../WorkspaceDropdownMenu/index.tsx           |  29 ++-
 .../projects/useUploadImageFolderFileQuery.ts |  20 ++
 6 files changed, 299 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/ImageUploadFolderFileModal/ImageUploadFolderFileForm.tsx
 create mode 100644 frontend/src/components/ImageUploadFolderFileModal/index.tsx
 create mode 100644 frontend/src/queries/projects/useUploadImageFolderFileQuery.ts

diff --git a/frontend/src/api/imageApi.ts b/frontend/src/api/imageApi.ts
index f3a21cc..d7c1ecf 100644
--- a/frontend/src/api/imageApi.ts
+++ b/frontend/src/api/imageApi.ts
@@ -56,7 +56,7 @@ export async function uploadImageFile(
     .then(({ data }) => data);
 }
 
-export async function uploadImageFolder(
+export async function uploadImageFolderFile(
   memberId: number,
   projectId: number,
   folderId: number,
@@ -81,6 +81,31 @@ export async function uploadImageFolder(
     .then(({ data }) => data);
 }
 
+export async function uploadImageFolder(
+  memberId: number,
+  projectId: number,
+  folderId: number,
+  files: File[],
+  processCallback: (progress: number) => void
+) {
+  const formData = new FormData();
+  files.forEach((file) => {
+    formData.append('imageList', file);
+  });
+
+  return api
+    .post(`/projects/${projectId}/folders/${folderId}/images/folder`, formData, {
+      params: { memberId },
+      onUploadProgress: (progressEvent) => {
+        if (progressEvent.total) {
+          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          processCallback(progress);
+        }
+      },
+    })
+    .then(({ data }) => data);
+}
+
 export async function uploadImageZip(
   memberId: number,
   projectId: number,
diff --git a/frontend/src/components/ImageUploadFolderFileModal/ImageUploadFolderFileForm.tsx b/frontend/src/components/ImageUploadFolderFileModal/ImageUploadFolderFileForm.tsx
new file mode 100644
index 0000000..04bd592
--- /dev/null
+++ b/frontend/src/components/ImageUploadFolderFileModal/ImageUploadFolderFileForm.tsx
@@ -0,0 +1,190 @@
+import { useState } from 'react';
+import { Button } from '../ui/button';
+import { cn } from '@/lib/utils';
+import useAuthStore from '@/stores/useAuthStore';
+import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
+import useUploadImageFolderFileQuery from '@/queries/projects/useUploadImageFolderFileQuery';
+
+export default function ImageUploadFolderFileForm({
+  onClose,
+  onRefetch,
+  projectId,
+  folderId,
+}: {
+  onClose: () => void;
+  onRefetch?: () => void;
+  projectId: number;
+  folderId: number;
+}) {
+  const profile = useAuthStore((state) => state.profile);
+  const memberId = profile?.id || 0;
+
+  const [files, setFiles] = useState<File[]>([]);
+  const [inputKey, setInputKey] = useState<number>(0);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [isUploaded, setIsUploaded] = useState<boolean>(false);
+  const [isFailed, setIsFailed] = useState<boolean>(false);
+  const [progress, setProgress] = useState<number>(0);
+
+  const uploadImageFolderFile = useUploadImageFolderFileQuery();
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  const handleRefetch = () => {
+    if (onRefetch) {
+      onRefetch();
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newFiles = event.target.files;
+
+    if (newFiles) {
+      setFiles((prevFiles) => [...prevFiles, ...Array.from(newFiles)]);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = () => {
+    setIsDragging(false);
+  };
+
+  const handleRemoveFile = () => {
+    setFiles([]);
+    setInputKey((prevKey) => prevKey + 1);
+  };
+
+  const handleUpload = async () => {
+    setIsUploading(true);
+
+    uploadImageFolderFile.mutate(
+      {
+        memberId,
+        projectId,
+        folderId,
+        files,
+        progressCallback: (progress: number) => {
+          setProgress(progress);
+        },
+      },
+      {
+        onSuccess: () => {
+          handleRefetch();
+          setIsUploaded(true);
+        },
+        onError: () => {
+          setIsFailed(true);
+        },
+      }
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-5">
+      {!isUploading && (
+        <div
+          className={cn(
+            'relative flex h-[200px] w-full cursor-pointer items-center justify-center rounded-lg border-2 text-center',
+            isDragging ? 'border-solid border-primary bg-blue-200' : 'border-dashed border-gray-500 bg-gray-100'
+          )}
+        >
+          <input
+            key={inputKey}
+            type="file"
+            webkitdirectory=""
+            // multiple
+            className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+            onChange={handleChange}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+          />
+          {isDragging ? (
+            <p className="text-primary">드래그한 폴더를 여기에 놓으세요</p>
+          ) : (
+            <p className="text-gray-500">
+              폴더를 업로드하려면 여기를 클릭하거나
+              <br />
+              폴더를 드래그하여 여기에 놓으세요
+            </p>
+          )}
+        </div>
+      )}
+      {files.length > 0 && (
+        <div className={'flex items-center justify-between p-1'}>
+          <span className="truncate">
+            {files[0].webkitRelativePath.substring(0, files[0].webkitRelativePath.indexOf('/'))} {}
+          </span>
+          {isUploading ? (
+            <div className="p-2">
+              {isUploaded ? (
+                <CircleCheckBig
+                  className="stroke-green-500"
+                  size={16}
+                  strokeWidth="2"
+                />
+              ) : isFailed ? (
+                <CircleX
+                  className="stroke-red-500"
+                  size={16}
+                  strokeWidth="2"
+                />
+              ) : (
+                <CircleDashed
+                  className="stroke-gray-500"
+                  size={16}
+                  strokeWidth="2"
+                />
+              )}
+            </div>
+          ) : (
+            <button
+              className={'cursor-pointer p-2'}
+              onClick={handleRemoveFile}
+            >
+              <X
+                color="red"
+                size={16}
+                strokeWidth="2"
+              />
+            </button>
+          )}
+        </div>
+      )}
+      {isUploading ? (
+        <Button
+          onClick={handleClose}
+          variant="outlinePrimary"
+          className={
+            isFailed
+              ? 'border-red-500 text-red-500 hover:bg-red-500 dark:border-red-500 dark:text-red-500 dark:hover:bg-red-500'
+              : ''
+          }
+          disabled={!isUploaded && !isFailed}
+        >
+          {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
+        </Button>
+      ) : (
+        <Button
+          onClick={handleUpload}
+          variant="outlinePrimary"
+          disabled={files.length === 0}
+        >
+          업로드
+        </Button>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/ImageUploadFolderFileModal/index.tsx b/frontend/src/components/ImageUploadFolderFileModal/index.tsx
new file mode 100644
index 0000000..73992b9
--- /dev/null
+++ b/frontend/src/components/ImageUploadFolderFileModal/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
+import { Plus } from 'lucide-react';
+import ImageUploadFolderFileForm from './ImageUploadFolderFileForm';
+
+export default function ImageUploadFolderFileModal({ projectId, folderId }: { projectId: number; folderId: number }) {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const handleOpen = () => setIsOpen(true);
+  const handleClose = () => setIsOpen(false);
+
+  return (
+    <Dialog
+      open={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <DialogTrigger asChild>
+        <button
+          className="flex items-center justify-center p-2"
+          onClick={handleOpen}
+        >
+          <Plus size={20} />
+        </button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader title="폴더 업로드 (파일 업로드 API 이용)" />
+        <ImageUploadFolderFileForm
+          onClose={handleClose}
+          projectId={projectId}
+          folderId={folderId}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/frontend/src/components/ImageUploadFolderModal/index.tsx b/frontend/src/components/ImageUploadFolderModal/index.tsx
index 2bfbd72..d07494d 100644
--- a/frontend/src/components/ImageUploadFolderModal/index.tsx
+++ b/frontend/src/components/ImageUploadFolderModal/index.tsx
@@ -23,7 +23,7 @@ export default function ImageUploadFolderModal({ projectId, folderId }: { projec
         </button>
       </DialogTrigger>
       <DialogContent className="max-w-2xl">
-        <DialogHeader title="폴더 업로드" />
+        <DialogHeader title="폴더 업로드 (백엔드 구현 필요)" />
         <ImageUploadFolderForm
           onClose={handleClose}
           projectId={projectId}
diff --git a/frontend/src/components/WorkspaceDropdownMenu/index.tsx b/frontend/src/components/WorkspaceDropdownMenu/index.tsx
index c77eaa5..0800ae3 100644
--- a/frontend/src/components/WorkspaceDropdownMenu/index.tsx
+++ b/frontend/src/components/WorkspaceDropdownMenu/index.tsx
@@ -9,6 +9,7 @@ import {
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
 import ImageUploadFileForm from '../ImageUploadFileModal/ImageUploadFileForm';
 import React from 'react';
+import ImageUploadFolderFileForm from '../ImageUploadFolderFileModal/ImageUploadFolderFileForm';
 import ImageUploadFolderForm from '../ImageUploadFolderModal/ImageUploadFolderForm';
 import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm';
 
@@ -23,6 +24,7 @@ export default function WorkspaceDropdownMenu({
 }) {
   const [isOpenUploadFile, setIsOpenUploadFile] = React.useState<boolean>(false);
   const [fileCount, setFileCount] = React.useState<number>(0);
+  const [isOpenUploadFolderFile, setIsOpenUploadFolderFile] = React.useState<boolean>(false);
   const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState<boolean>(false);
   const [isOpenUploadZip, setIsOpenUploadZip] = React.useState<boolean>(false);
 
@@ -32,6 +34,12 @@ export default function WorkspaceDropdownMenu({
     setIsOpenUploadFile(false);
   };
 
+  const handleOpenUploadFolderFile = () => setIsOpenUploadFolderFile(true);
+
+  const handleCloseUploadFolderFile = () => {
+    setIsOpenUploadFolderFile(false);
+  };
+
   const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
 
   const handleCloseUploadFolder = () => {
@@ -67,7 +75,8 @@ export default function WorkspaceDropdownMenu({
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={handleOpenUploadFile}>파일 업로드</DropdownMenuItem>
-          <DropdownMenuItem onClick={handleOpenUploadFolder}>폴더 업로드 (임시)</DropdownMenuItem>
+          <DropdownMenuItem onClick={handleOpenUploadFolderFile}>폴더 업로드 (파일 업로드 API 이용)</DropdownMenuItem>
+          <DropdownMenuItem onClick={handleOpenUploadFolder}>폴더 업로드 (백엔드 구현 필요)</DropdownMenuItem>
           <DropdownMenuItem onClick={handleOpenUploadZip}>폴더 압축파일 업로드</DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
@@ -89,13 +98,29 @@ export default function WorkspaceDropdownMenu({
         </DialogContent>
       </Dialog>
 
+      <Dialog
+        open={isOpenUploadFolderFile}
+        onOpenChange={setIsOpenUploadFolderFile}
+      >
+        <DialogTrigger asChild></DialogTrigger>
+        <DialogContent className="max-w-2xl">
+          <DialogHeader title="폴더 업로드 (파일 업로드 API 이용)" />
+          <ImageUploadFolderFileForm
+            onClose={handleCloseUploadFolderFile}
+            onRefetch={onRefetch}
+            projectId={projectId}
+            folderId={folderId}
+          />
+        </DialogContent>
+      </Dialog>
+
       <Dialog
         open={isOpenUploadFolder}
         onOpenChange={setIsOpenUploadFolder}
       >
         <DialogTrigger asChild></DialogTrigger>
         <DialogContent className="max-w-2xl">
-          <DialogHeader title="폴더 업로드 (임시)" />
+          <DialogHeader title="폴더 업로드 (백엔드 구현 필요)" />
           <ImageUploadFolderForm
             onClose={handleCloseUploadFolder}
             onRefetch={onRefetch}
diff --git a/frontend/src/queries/projects/useUploadImageFolderFileQuery.ts b/frontend/src/queries/projects/useUploadImageFolderFileQuery.ts
new file mode 100644
index 0000000..a1535a4
--- /dev/null
+++ b/frontend/src/queries/projects/useUploadImageFolderFileQuery.ts
@@ -0,0 +1,20 @@
+import { uploadImageFolderFile } from '@/api/imageApi';
+import { useMutation } from '@tanstack/react-query';
+
+export default function useUploadImageFolderFileQuery() {
+  return useMutation({
+    mutationFn: ({
+      memberId,
+      projectId,
+      folderId,
+      files,
+      progressCallback,
+    }: {
+      memberId: number;
+      projectId: number;
+      folderId: number;
+      files: File[];
+      progressCallback: (progress: number) => void;
+    }) => uploadImageFolderFile(memberId, projectId, folderId, files, progressCallback),
+  });
+}