From c945f0029df164b3ffb2eeecce75184aafecdcb5 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 03:56:53 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=97=85?=
 =?UTF-8?q?=EB=A1=9C=EB=93=9C=20=EC=8B=9C=20=EC=A7=84=ED=96=89=EB=8F=84=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C=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                  | 46 +++++++++++++++++--
 .../ImageUploadFileForm.tsx                   | 16 ++++---
 .../ImageUploadFolderForm.tsx                 | 17 ++++++-
 .../ImageUploadFolderModal/index.tsx          |  3 +-
 .../ImageUploadZipForm.tsx                    | 17 ++++++-
 .../components/ImageUploadZipModal/index.tsx  |  3 +-
 .../WorkspaceDropdownMenu/index.tsx           |  2 +
 .../projects/useUploadImageFileQuery.ts       |  4 +-
 .../projects/useUploadImageFolderQuery.ts     | 15 +++++-
 .../projects/useUploadImageZipQuery.ts        | 15 +++++-
 10 files changed, 116 insertions(+), 22 deletions(-)

diff --git a/frontend/src/api/imageApi.ts b/frontend/src/api/imageApi.ts
index aaa0aec..f3a21cc 100644
--- a/frontend/src/api/imageApi.ts
+++ b/frontend/src/api/imageApi.ts
@@ -31,7 +31,13 @@ export async function changeImageStatus(
     .then(({ data }) => data);
 }
 
-export async function uploadImageFile(memberId: number, projectId: number, folderId: number, files: File[]) {
+export async function uploadImageFile(
+  memberId: number,
+  projectId: number,
+  folderId: number,
+  files: File[],
+  processCallback: (progress: number) => void
+) {
   const formData = new FormData();
   files.forEach((file) => {
     formData.append('imageList', file);
@@ -40,30 +46,60 @@ export async function uploadImageFile(memberId: number, projectId: number, folde
   return api
     .post(`/projects/${projectId}/folders/${folderId}/images/file`, 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 uploadImageFolder(memberId: number, projectId: number, files: File[]) {
+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/${0}/images/file`, formData, {
+    .post(`/projects/${projectId}/folders/${folderId}/images/file`, 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, file: File) {
+export async function uploadImageZip(
+  memberId: number,
+  projectId: number,
+  folderId: number,
+  file: File,
+  processCallback: (progress: number) => void
+) {
   const formData = new FormData();
   formData.append('folderZip', file);
 
   return api
-    .post(`/projects/${projectId}/folders/${0}/images/zip`, formData, {
+    .post(`/projects/${projectId}/folders/${folderId}/images/zip`, formData, {
       params: { memberId },
+      onUploadProgress: (progressEvent) => {
+        if (progressEvent.total) {
+          const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+          processCallback(progress);
+        }
+      },
     })
     .then(({ data }) => data);
 }
diff --git a/frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx b/frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx
index dd64af4..71c5569 100644
--- a/frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx
+++ b/frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx
@@ -22,6 +22,7 @@ export default function ImageUploadFileForm({
   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 uploadImageFile = useUploadImageFileQuery();
 
@@ -71,6 +72,9 @@ export default function ImageUploadFileForm({
         projectId,
         folderId,
         files,
+        progressCallback: (progress: number) => {
+          setProgress(progress);
+        },
       },
       {
         onSuccess: () => {
@@ -115,11 +119,11 @@ export default function ImageUploadFileForm({
         </div>
       )}
       {files.length > 0 && (
-        <ul className="m-0 max-h-[200px] list-none overflow-y-auto p-0">
+        <ul className="m-0 max-h-[260px] list-none overflow-y-auto p-0">
           {files.map((file, index) => (
             <li
               key={index}
-              className={cn('flex items-center justify-between p-1')}
+              className="flex items-center justify-between p-1"
             >
               <span className="truncate">{file.webkitRelativePath || file.name}</span>
               {isUploading ? (
@@ -127,19 +131,19 @@ export default function ImageUploadFileForm({
                   {isUploaded ? (
                     <CircleCheckBig
                       className="stroke-green-500"
-                      size={20}
+                      size={16}
                       strokeWidth="2"
                     />
                   ) : isFailed ? (
                     <CircleX
                       className="stroke-red-500"
-                      size={20}
+                      size={16}
                       strokeWidth="2"
                     />
                   ) : (
                     <CircleDashed
                       className="stroke-gray-500"
-                      size={20}
+                      size={16}
                       strokeWidth="2"
                     />
                   )}
@@ -171,7 +175,7 @@ export default function ImageUploadFileForm({
           }
           disabled={!isUploaded && !isFailed}
         >
-          {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : '업로드 중...'}
+          {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
         </Button>
       ) : (
         <Button
diff --git a/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx b/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
index 04e80ef..bdb7851 100644
--- a/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
+++ b/frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
@@ -5,7 +5,15 @@ import useAuthStore from '@/stores/useAuthStore';
 import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
 import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQuery';
 
-export default function ImageUploadFolderForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
+export default function ImageUploadFolderForm({
+  onClose,
+  projectId,
+  folderId,
+}: {
+  onClose: () => void;
+  projectId: number;
+  folderId: number;
+}) {
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
 
@@ -14,6 +22,7 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
   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 uploadImageFolder = useUploadImageFolderQuery();
 
@@ -56,7 +65,11 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
       {
         memberId,
         projectId,
+        folderId,
         files,
+        progressCallback: (progress: number) => {
+          setProgress(progress);
+        },
       },
       {
         onSuccess: () => {
@@ -156,7 +169,7 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
           }
           disabled={!isUploaded && !isFailed}
         >
-          {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : '업로드 중...'}
+          {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
         </Button>
       ) : (
         <Button
diff --git a/frontend/src/components/ImageUploadFolderModal/index.tsx b/frontend/src/components/ImageUploadFolderModal/index.tsx
index 3bf0a10..2bfbd72 100644
--- a/frontend/src/components/ImageUploadFolderModal/index.tsx
+++ b/frontend/src/components/ImageUploadFolderModal/index.tsx
@@ -3,7 +3,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialog
 import { Plus } from 'lucide-react';
 import ImageUploadFolderForm from './ImageUploadFolderForm';
 
-export default function ImageUploadFolderModal({ projectId }: { projectId: number }) {
+export default function ImageUploadFolderModal({ projectId, folderId }: { projectId: number; folderId: number }) {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const handleOpen = () => setIsOpen(true);
@@ -27,6 +27,7 @@ export default function ImageUploadFolderModal({ projectId }: { projectId: numbe
         <ImageUploadFolderForm
           onClose={handleClose}
           projectId={projectId}
+          folderId={folderId}
         />
       </DialogContent>
     </Dialog>
diff --git a/frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx b/frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
index 647bdf4..17e63d7 100644
--- a/frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
+++ b/frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
@@ -5,7 +5,15 @@ import useAuthStore from '@/stores/useAuthStore';
 import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
 import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
 
-export default function ImageUploadZipForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
+export default function ImageUploadZipForm({
+  onClose,
+  projectId,
+  folderId,
+}: {
+  onClose: () => void;
+  projectId: number;
+  folderId: number;
+}) {
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
 
@@ -14,6 +22,7 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
   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 uploadImageZip = useUploadImageZipQuery();
 
@@ -57,7 +66,11 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
         {
           memberId,
           projectId,
+          folderId,
           file,
+          progressCallback: (progress: number) => {
+            setProgress(progress);
+          },
         },
         {
           onSuccess: () => {
@@ -152,7 +165,7 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
           }
           disabled={!isUploaded && !isFailed}
         >
-          {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : '업로드 중...'}
+          {isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
         </Button>
       ) : (
         <Button
diff --git a/frontend/src/components/ImageUploadZipModal/index.tsx b/frontend/src/components/ImageUploadZipModal/index.tsx
index b0a1e17..8c0c25a 100644
--- a/frontend/src/components/ImageUploadZipModal/index.tsx
+++ b/frontend/src/components/ImageUploadZipModal/index.tsx
@@ -3,7 +3,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialog
 import { Plus } from 'lucide-react';
 import ImageUploadZipForm from './ImageUploadZipForm';
 
-export default function ImageUploadZipModal({ projectId }: { projectId: number }) {
+export default function ImageUploadZipModal({ projectId, folderId }: { projectId: number; folderId: number }) {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const handleOpen = () => setIsOpen(true);
@@ -27,6 +27,7 @@ export default function ImageUploadZipModal({ projectId }: { projectId: number }
         <ImageUploadZipForm
           onClose={handleClose}
           projectId={projectId}
+          folderId={folderId}
         />
       </DialogContent>
     </Dialog>
diff --git a/frontend/src/components/WorkspaceDropdownMenu/index.tsx b/frontend/src/components/WorkspaceDropdownMenu/index.tsx
index b558029..21c4e7b 100644
--- a/frontend/src/components/WorkspaceDropdownMenu/index.tsx
+++ b/frontend/src/components/WorkspaceDropdownMenu/index.tsx
@@ -90,6 +90,7 @@ export default function WorkspaceDropdownMenu({
           <ImageUploadFolderForm
             onClose={handleCloseUploadFolder}
             projectId={projectId}
+            folderId={folderId}
           />
         </DialogContent>
       </Dialog>
@@ -104,6 +105,7 @@ export default function WorkspaceDropdownMenu({
           <ImageUploadZipForm
             onClose={handleCloseUploadZip}
             projectId={projectId}
+            folderId={folderId}
           />
         </DialogContent>
       </Dialog>
diff --git a/frontend/src/queries/projects/useUploadImageFileQuery.ts b/frontend/src/queries/projects/useUploadImageFileQuery.ts
index 4278a91..eb7c095 100644
--- a/frontend/src/queries/projects/useUploadImageFileQuery.ts
+++ b/frontend/src/queries/projects/useUploadImageFileQuery.ts
@@ -8,11 +8,13 @@ export default function useUploadImageFileQuery() {
       projectId,
       folderId,
       files,
+      progressCallback,
     }: {
       memberId: number;
       projectId: number;
       folderId: number;
       files: File[];
-    }) => uploadImageFile(memberId, projectId, folderId, files),
+      progressCallback: (progress: number) => void;
+    }) => uploadImageFile(memberId, projectId, folderId, files, progressCallback),
   });
 }
diff --git a/frontend/src/queries/projects/useUploadImageFolderQuery.ts b/frontend/src/queries/projects/useUploadImageFolderQuery.ts
index 0e2a5e0..8f9d7d0 100644
--- a/frontend/src/queries/projects/useUploadImageFolderQuery.ts
+++ b/frontend/src/queries/projects/useUploadImageFolderQuery.ts
@@ -3,7 +3,18 @@ import { useMutation } from '@tanstack/react-query';
 
 export default function useUploadImageFolderQuery() {
   return useMutation({
-    mutationFn: ({ memberId, projectId, files }: { memberId: number; projectId: number; files: File[] }) =>
-      uploadImageFolder(memberId, projectId, files),
+    mutationFn: ({
+      memberId,
+      projectId,
+      folderId,
+      files,
+      progressCallback,
+    }: {
+      memberId: number;
+      projectId: number;
+      folderId: number;
+      files: File[];
+      progressCallback: (progress: number) => void;
+    }) => uploadImageFolder(memberId, projectId, folderId, files, progressCallback),
   });
 }
diff --git a/frontend/src/queries/projects/useUploadImageZipQuery.ts b/frontend/src/queries/projects/useUploadImageZipQuery.ts
index 72bde63..c342dd7 100644
--- a/frontend/src/queries/projects/useUploadImageZipQuery.ts
+++ b/frontend/src/queries/projects/useUploadImageZipQuery.ts
@@ -3,7 +3,18 @@ import { useMutation } from '@tanstack/react-query';
 
 export default function useUploadImageZipQuery() {
   return useMutation({
-    mutationFn: ({ memberId, projectId, file }: { memberId: number; projectId: number; file: File }) =>
-      uploadImageZip(memberId, projectId, file),
+    mutationFn: ({
+      memberId,
+      projectId,
+      folderId,
+      file,
+      progressCallback,
+    }: {
+      memberId: number;
+      projectId: number;
+      folderId: number;
+      file: File;
+      progressCallback: (progress: number) => void;
+    }) => uploadImageZip(memberId, projectId, folderId, file, progressCallback),
   });
 }