Refactor: 통합 모달 기반으로 추가

frontend/src/components/WorkspaceDropdownMenu/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Menu } from 'lucide-react';
 import {
   DropdownMenu,
@@ -7,12 +8,12 @@ import {
   DropdownMenuTrigger,
 } from '../ui/dropdown-menu';
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
-import React from 'react';
-import ImageUploadFileForm from '../ImageUploadFileModal/ImageUploadFileForm';
-import ImageUploadFolderFileForm from '../ImageUploadFolderFileModal/ImageUploadFolderFileForm';
-import ImageUploadFolderForm from '../ImageUploadFolderModal/ImageUploadFolderForm';
-import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm';
-import ImageUploadPresignedForm from '../ImageUploadPresignedModal/ImageUploadPresignedForm.tsx';
+import ImageUploadForm from '../ImageUploadModal/ImageUploadForm';
+import ImageUploadPresignedForm from '../ImageUploadPresignedModal/ImageUploadPresignedForm';
+import useUploadImageFileQuery from '@/queries/projects/useUploadImageFileQuery';
+import useUploadImageFolderFileQuery from '@/queries/projects/useUploadImageFolderFileQuery';
+import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
+import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQuery';
 
 export default function WorkspaceDropdownMenu({
   projectId,
@@ -31,44 +32,30 @@ export default function WorkspaceDropdownMenu({
   const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState<boolean>(false);
   const [isOpenUploadZip, setIsOpenUploadZip] = React.useState<boolean>(false);
 
-  const handleOpenUploadFile = () => setIsOpenUploadFile(true);
+  const uploadImageZipMutation = useUploadImageZipQuery();
+  const uploadImageFolderFileMutation = useUploadImageFolderFileQuery();
+  const uploadImageFileMutation = useUploadImageFileQuery();
+  const uploadImageFolderMutation = useUploadImageFolderQuery();
 
-  const handleCloseUploadFile = () => {
-    setIsOpenUploadFile(false);
-  };
+  const handleOpenUploadFile = () => setIsOpenUploadFile(true);
+  const handleCloseUploadFile = () => setIsOpenUploadFile(false);
+  const handleOpenUploadPresigned = () => setIsOpenUploadPresigned(true);
+  const handleCloseUploadPresigned = () => setIsOpenUploadPresigned(false);
+  const handleOpenUploadFolderFile = () => setIsOpenUploadFolderFile(true);
+  const handleCloseUploadFolderFile = () => setIsOpenUploadFolderFile(false);
+  const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
+  const handleCloseUploadFolder = () => setIsOpenUploadFolder(false);
+  const handleOpenUploadZip = () => setIsOpenUploadZip(true);
+  const handleCloseUploadZip = () => setIsOpenUploadZip(false);
 
   const handleFileCount = (fileCount: number) => {
     setFileCount(fileCount);
   };
 
-  const handleOpenUploadPresigned = () => setIsOpenUploadPresigned(true);
-
-  const handleCloseUploadPresigned = () => {
-    setIsOpenUploadPresigned(false);
-  };
-
   const handlePresignedCount = (fileCount: number) => {
     setPresignedCount(fileCount);
   };
 
-  const handleOpenUploadFolderFile = () => setIsOpenUploadFolderFile(true);
-
-  const handleCloseUploadFolderFile = () => {
-    setIsOpenUploadFolderFile(false);
-  };
-
-  const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
-
-  const handleCloseUploadFolder = () => {
-    setIsOpenUploadFolder(false);
-  };
-
-  const handleOpenUploadZip = () => setIsOpenUploadZip(true);
-
-  const handleCloseUploadZip = () => {
-    setIsOpenUploadZip(false);
-  };
-
   return (
     <>
       <DropdownMenu>
@@ -79,13 +66,7 @@ export default function WorkspaceDropdownMenu({
           />
         </DropdownMenuTrigger>
         <DropdownMenuContent className="w-56">
-          <DropdownMenuItem
-            onClick={() => {
-              console.log('프로젝트 이름 수정');
-            }}
-          >
-            프로젝트 이름 수정
-          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => console.log('프로젝트 이름 수정')}>프로젝트 이름 수정</DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={handleOpenUploadFile}>파일 업로드</DropdownMenuItem>
           <DropdownMenuItem onClick={handleOpenUploadPresigned}>파일 업로드 (PresignedUrl 이용)</DropdownMenuItem>
@@ -102,12 +83,16 @@ export default function WorkspaceDropdownMenu({
         <DialogTrigger asChild></DialogTrigger>
         <DialogContent className="max-w-2xl">
           <DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount})` : '파일 업로드'} />
-          <ImageUploadFileForm
+          <ImageUploadForm
             onClose={handleCloseUploadFile}
             onRefetch={onRefetch}
             onFileCount={handleFileCount}
             projectId={projectId}
             folderId={folderId}
+            uploadImageZipMutation={uploadImageZipMutation}
+            uploadImageFolderFileMutation={uploadImageFolderFileMutation}
+            uploadImageFileMutation={uploadImageFileMutation}
+            uploadImageFolderMutation={uploadImageFolderMutation}
           />
         </DialogContent>
       </Dialog>
@@ -138,11 +123,17 @@ export default function WorkspaceDropdownMenu({
         <DialogTrigger asChild></DialogTrigger>
         <DialogContent className="max-w-2xl">
           <DialogHeader title="폴더 업로드 (파일 업로드 API 이용)" />
-          <ImageUploadFolderFileForm
+          <ImageUploadForm
             onClose={handleCloseUploadFolderFile}
             onRefetch={onRefetch}
+            onFileCount={handleFileCount}
             projectId={projectId}
             folderId={folderId}
+            isFolderUpload={true}
+            uploadImageZipMutation={uploadImageZipMutation}
+            uploadImageFolderFileMutation={uploadImageFolderFileMutation}
+            uploadImageFileMutation={uploadImageFileMutation}
+            uploadImageFolderMutation={uploadImageFolderMutation}
           />
         </DialogContent>
       </Dialog>
@@ -154,11 +145,17 @@ export default function WorkspaceDropdownMenu({
         <DialogTrigger asChild></DialogTrigger>
         <DialogContent className="max-w-2xl">
           <DialogHeader title="폴더 업로드 (백엔드 구현 필요)" />
-          <ImageUploadFolderForm
+          <ImageUploadForm
             onClose={handleCloseUploadFolder}
             onRefetch={onRefetch}
+            onFileCount={handleFileCount}
             projectId={projectId}
             folderId={folderId}
+            isFolderBackendUpload={true}
+            uploadImageZipMutation={uploadImageZipMutation}
+            uploadImageFolderFileMutation={uploadImageFolderFileMutation}
+            uploadImageFileMutation={uploadImageFileMutation}
+            uploadImageFolderMutation={uploadImageFolderMutation}
           />
         </DialogContent>
       </Dialog>
@@ -170,11 +167,17 @@ export default function WorkspaceDropdownMenu({
         <DialogTrigger asChild></DialogTrigger>
         <DialogContent className="max-w-2xl">
           <DialogHeader title="폴더 압축파일 업로드" />
-          <ImageUploadZipForm
+          <ImageUploadForm
             onClose={handleCloseUploadZip}
             onRefetch={onRefetch}
+            onFileCount={handleFileCount}
             projectId={projectId}
             folderId={folderId}
+            isZipUpload={true}
+            uploadImageZipMutation={uploadImageZipMutation}
+            uploadImageFolderFileMutation={uploadImageFolderFileMutation}
+            uploadImageFileMutation={uploadImageFileMutation}
+            uploadImageFolderMutation={uploadImageFolderMutation}
           />
         </DialogContent>
       </Dialog>