From 1236c080f56cad15b6e8a46fb6953cb7d0cc3d56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=99=8D=EC=B0=BD=EA=B8=B0?= <hckhong@naver.com>
Date: Sun, 22 Sep 2024 04:15:01 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=99=84?=
 =?UTF-8?q?=EB=A3=8C=20=EB=98=90=EB=8A=94=20=EC=8B=A4=ED=8C=A8=20=EC=8B=9C?=
 =?UTF-8?q?=20=EB=8B=AB=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/imageApi.ts                  |   5 +-
 .../ImageFolderUploadForm.tsx                 | 116 ++++++++++++------
 .../ImageFolderUploadModal/index.tsx          |   3 +-
 3 files changed, 83 insertions(+), 41 deletions(-)

diff --git a/frontend/src/api/imageApi.ts b/frontend/src/api/imageApi.ts
index 3354d49..460b4de 100644
--- a/frontend/src/api/imageApi.ts
+++ b/frontend/src/api/imageApi.ts
@@ -60,5 +60,8 @@ export async function uploadImageFolder(memberId: number, projectId: number, fil
         params: { memberId },
       }
     )
-    .then(({ data }) => data);
+    .then(({ data }) => data)
+    .catch((error) => {
+      return Promise.reject(error);
+    });
 }
diff --git a/frontend/src/components/ImageFolderUploadModal/ImageFolderUploadForm.tsx b/frontend/src/components/ImageFolderUploadModal/ImageFolderUploadForm.tsx
index 22f400d..ef355d7 100644
--- a/frontend/src/components/ImageFolderUploadModal/ImageFolderUploadForm.tsx
+++ b/frontend/src/components/ImageFolderUploadModal/ImageFolderUploadForm.tsx
@@ -4,13 +4,27 @@ import { cn } from '@/lib/utils';
 import { uploadImageFolder } from '@/api/imageApi';
 import useAuthStore from '@/stores/useAuthStore';
 
-export default function ImageFolderUploadForm({ projectId, parentId }: { projectId: number; parentId: number }) {
+export default function ImageFolderUploadForm({
+  onClose,
+  projectId,
+  parentId,
+}: {
+  onClose: () => void;
+  projectId: number;
+  parentId: number;
+}) {
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
 
   const [files, setFiles] = useState<File[]>([]);
   const [isDragging, setIsDragging] = useState<boolean>(false);
   const [isUploading, setIsUploading] = useState<boolean>(false);
+  const [progress, setProgress] = useState<number>(0);
+  const [isFailed, setIsFailed] = useState<boolean>(false);
+
+  const handleClose = () => {
+    onClose();
+  };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const newFiles = event.target.files;
@@ -34,55 +48,79 @@ export default function ImageFolderUploadForm({ projectId, parentId }: { project
     setIsDragging(false);
   };
 
-  const handleClick = async () => {
+  const handleUpload = async () => {
     setIsUploading(true);
-    await uploadImageFolder(memberId, projectId, files, parentId);
-    setFiles([]);
-    setIsUploading(false);
+    setProgress(0);
+
+    await uploadImageFolder(memberId, projectId, files, parentId)
+      .then(() => {
+        setProgress(100);
+      })
+      .catch(() => {
+        setProgress(100);
+        setIsFailed(true);
+      });
   };
 
   return (
     <div className="flex flex-col gap-5">
-      <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
-          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>
+      {!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
+            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 && (
         <ul>
           {files.map((file, index) => (
-            <li key={index}>{file.webkitRelativePath}</li>
+            <li key={index}>{file.webkitRelativePath || file.name}</li>
           ))}
         </ul>
       )}
-      <Button
-        onClick={handleClick}
-        variant="outlinePrimary"
-        disabled={files.length === 0 || isDragging || isUploading}
-      >
-        {isUploading ? `업로드 중... 0%` : '업로드'}
-      </Button>
+      {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={progress != 100}
+        >
+          {progress === 100 ? (isFailed ? '업로드 실패 (닫기)' : '업로드 완료 (닫기)') : `업로드 중... ${progress}%`}
+        </Button>
+      ) : (
+        <Button
+          onClick={handleUpload}
+          variant="outlinePrimary"
+          disabled={files.length === 0}
+        >
+          업로드
+        </Button>
+      )}
     </div>
   );
 }
diff --git a/frontend/src/components/ImageFolderUploadModal/index.tsx b/frontend/src/components/ImageFolderUploadModal/index.tsx
index 3cfd456..96f737c 100644
--- a/frontend/src/components/ImageFolderUploadModal/index.tsx
+++ b/frontend/src/components/ImageFolderUploadModal/index.tsx
@@ -7,7 +7,7 @@ export default function WorkSpaceCreateModal({ projectId, parentId = 0 }: { proj
   const [isOpen, setIsOpen] = React.useState(false);
 
   const handleOpen = () => setIsOpen(true);
-  // const handleClose = () => setIsOpen(false);
+  const handleClose = () => setIsOpen(false);
 
   return (
     <Dialog
@@ -25,6 +25,7 @@ export default function WorkSpaceCreateModal({ projectId, parentId = 0 }: { proj
       <DialogContent className="max-w-2xl">
         <DialogHeader title="폴더 업로드" />
         <ImageFolderUploadForm
+          onClose={handleClose}
           projectId={projectId}
           parentId={parentId}
         />