Refactor: api 변경에 따른 수정, 컴포넌트 이름 수정

frontend/src/api/imageApi.ts

@@ -42,7 +42,7 @@ export async function changeImageStatus(
 export async function uploadImageList(projectId: number, folderId: number, memberId: number, imageList: File[]) {
   return api
     .post(
-      `/projects/${projectId}/folders/${folderId}/images`,
+      `/projects/${projectId}/folders/${folderId}/images/file`,
       { imageList },
       {
         params: { memberId },
@@ -51,43 +51,26 @@ export async function uploadImageList(projectId: number, folderId: number, membe
     .then(({ data }) => data);
 }
 
-export async function uploadImageFolder(memberId: number, projectId: number, files: File[], parentId: number = 0) {
+export async function uploadImageFolder(memberId: number, projectId: number, files: File[]) {
   const formData = new FormData();
   files.forEach((file) => {
-    formData.append('files', file);
+    formData.append('folderZip', file);
   });
 
   return api
-    .post(
-      `/projects/${projectId}/folders/${0}/images/upload`,
-      { folderZip: files, parentId },
-      {
-        params: { memberId },
-      }
-    )
-    .then(({ data }) => data)
-    .catch((error) => {
-      return Promise.reject(error);
-    });
-}
-
-export async function uploadImageFolderZip(memberId: number, projectId: number, file: File, parentId: number = 0) {
-  const formData = new FormData();
-  formData.append('folderZip', file);
-  formData.append('parentId', parentId.toString());
-
-  // const jsonData = {
-  //   parentId,
-  // };
-  // const blob = new Blob([JSON.stringify(jsonData)], { type: 'application/json' });
-  // formData.append('parentId', blob);
-
-  return api
-    .post(`/projects/${projectId}/folders/${0}/images/upload`, formData, {
+    .post(`/projects/${projectId}/folders/${0}/images/zip`, formData, {
       params: { memberId },
     })
-    .then(({ data }) => data)
-    .catch((error) => {
-      return Promise.reject(error);
-    });
+    .then(({ data }) => data);
+}
+
+export async function uploadImageZip(memberId: number, projectId: number, file: File) {
+  const formData = new FormData();
+  formData.append('folderZip', file);
+
+  return api
+    .post(`/projects/${projectId}/folders/${0}/images/zip`, formData, {
+      params: { memberId },
+    })
+    .then(({ data }) => data);
 }

frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx

@@ -5,15 +5,7 @@ import { uploadImageFolder } from '@/api/imageApi';
 import useAuthStore from '@/stores/useAuthStore';
 import { X } from 'lucide-react';
 
-export default function ImageFolderUploadForm({
-  onClose,
-  projectId,
-  parentId,
-}: {
-  onClose: () => void;
-  projectId: number;
-  parentId: number;
-}) {
+export default function ImageUploadFolderForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
 
@@ -57,7 +49,7 @@ export default function ImageFolderUploadForm({
     setIsUploading(true);
     setProgress(0);
 
-    await uploadImageFolder(memberId, projectId, files, parentId)
+    await uploadImageFolder(memberId, projectId, files)
       .then(() => {
         setProgress(100);
       })

frontend/src/components/ImageUploadFolderModal/index.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
 import { Plus } from 'lucide-react';
-import ImageFolderUploadForm from './ImageFolderUploadForm';
+import ImageUploadFolderForm from './ImageUploadFolderForm';
 
-export default function ImageFolderUploadModal({ projectId, parentId = 0 }: { projectId: number; parentId: number }) {
+export default function ImageUploadFolderModal({ projectId }: { projectId: number }) {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const handleOpen = () => setIsOpen(true);
@@ -24,10 +24,9 @@ export default function ImageFolderUploadModal({ projectId, parentId = 0 }: { pr
       </DialogTrigger>
       <DialogContent className="max-w-2xl">
         <DialogHeader title="폴더 업로드" />
-        <ImageFolderUploadForm
+        <ImageUploadFolderForm
           onClose={handleClose}
           projectId={projectId}
-          parentId={parentId}
         />
       </DialogContent>
     </Dialog>

frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx

@@ -1,19 +1,11 @@
 import { useState } from 'react';
 import { Button } from '../ui/button';
 import { cn } from '@/lib/utils';
-import { uploadImageFolderZip } from '@/api/imageApi';
+import { uploadImageZip } from '@/api/imageApi';
 import useAuthStore from '@/stores/useAuthStore';
 import { X } from 'lucide-react';
 
-export default function ImageFolderZipUploadForm({
-  onClose,
-  projectId,
-  parentId,
-}: {
-  onClose: () => void;
-  projectId: number;
-  parentId: number;
-}) {
+export default function ImageUploadZipForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
   const profile = useAuthStore((state) => state.profile);
   const memberId = profile?.id || 0;
 
@@ -58,7 +50,7 @@ export default function ImageFolderZipUploadForm({
       setIsUploading(true);
       setProgress(0);
 
-      await uploadImageFolderZip(memberId, projectId, file, parentId)
+      await uploadImageZip(memberId, projectId, file)
         .then(() => {
           setProgress(100);
         })

frontend/src/components/ImageUploadZipModal/index.tsx

@@ -1,15 +1,9 @@
 import React from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
 import { Plus } from 'lucide-react';
-import ImageFolderZipUploadForm from './ImageFolderZipUploadForm';
+import ImageUploadZipForm from './ImageUploadZipForm';
 
-export default function ImageFolderZipUploadModal({
-  projectId,
-  parentId = 0,
-}: {
-  projectId: number;
-  parentId: number;
-}) {
+export default function ImageUploadZipModal({ projectId }: { projectId: number }) {
   const [isOpen, setIsOpen] = React.useState(false);
 
   const handleOpen = () => setIsOpen(true);
@@ -30,10 +24,9 @@ export default function ImageFolderZipUploadModal({
       </DialogTrigger>
       <DialogContent className="max-w-2xl">
         <DialogHeader title="폴더 압축파일 업로드" />
-        <ImageFolderZipUploadForm
+        <ImageUploadZipForm
           onClose={handleClose}
           projectId={projectId}
-          parentId={parentId}
         />
       </DialogContent>
     </Dialog>

frontend/src/pages/ImageFolderUploadTest.tsx

@@ -1,5 +1,5 @@
-import ImageFolderUploadModal from '@/components/ImageFolderUploadModal';
-import ImageFolderZipUploadModal from '@/components/ImageFolderZipUploadModal';
+import ImageUploadFolderModal from '@/components/ImageUploadFolderModal';
+import ImageUploadZipModal from '@/components/ImageUploadZipModal';
 import { useParams } from 'react-router-dom';
 
 export default function ImageFolderUploadTest() {
@@ -8,14 +8,8 @@ export default function ImageFolderUploadTest() {
 
   return (
     <div className="min-h-screen w-full">
-      <ImageFolderUploadModal
-        projectId={projectId}
-        parentId={0}
-      />
-      <ImageFolderZipUploadModal
-        projectId={projectId}
-        parentId={0}
-      />
+      <ImageUploadFolderModal projectId={projectId} />
+      <ImageUploadZipModal projectId={projectId} />
     </div>
   );
 }