Feat: 업로드 완료 또는 실패 시 닫기 버튼 추가

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);
+    });
 }

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);
+    setProgress(0);
-    setFiles([]);
+
-    setIsUploading(false);
+    await uploadImageFolder(memberId, projectId, files, parentId)
+      .then(() => {
+        setProgress(100);
+      })
+      .catch(() => {
+        setProgress(100);
+        setIsFailed(true);
+      });
   };
 
   return (
     <div className="flex flex-col gap-5">
-      <div
+      {!isUploading && (
-        className={cn(
+        <div
-          'relative flex h-[200px] w-full cursor-pointer items-center justify-center rounded-lg border-2 text-center',
+          className={cn(
-          isDragging ? 'border-solid border-primary bg-blue-200' : 'border-dashed border-gray-500 bg-gray-100'
+            '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"
+          <input
-          webkitdirectory=""
+            type="file"
-          multiple
+            webkitdirectory=""
-          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+            // multiple
-          onChange={handleChange}
+            className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
-          onDragOver={handleDragOver}
+            onChange={handleChange}
-          onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
-          onDrop={handleDrop}
+            onDragLeave={handleDragLeave}
-        />
+            onDrop={handleDrop}
-        {isDragging ? (
+          />
-          <p className="text-primary">드래그한 파일을 여기에 놓으세요</p>
+          {isDragging ? (
-        ) : (
+            <p className="text-primary">드래그한 폴더를 여기에 놓으세요</p>
-          <p className="text-gray-500">
+          ) : (
-            파일을 업로드하려면 여기를 클릭하거나
+            <p className="text-gray-500">
-            <br />
+              폴더를 업로드하려면 여기를 클릭하거나
-            파일을 드래그하여 여기에 놓으세요
+              <br />
-          </p>
+              폴더를 드래그하여 여기에 놓으세요
-        )}
+            </p>
-      </div>
+          )}
+        </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
+      {isUploading ? (
-        onClick={handleClick}
+        <Button
-        variant="outlinePrimary"
+          onClick={handleClose}
-        disabled={files.length === 0 || isDragging || isUploading}
+          variant="outlinePrimary"
-      >
+          className={
-        {isUploading ? `업로드 중... 0%` : '업로드'}
+            isFailed
-      </Button>
+              ? '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>
   );
 }

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}
         />