Feat: 이미지 업로드 구현 중, 테스트 컴포넌트 생성

frontend/src/api/imageApi.ts

@@ -39,7 +39,7 @@ export async function changeImageStatus(
     .then(({ data }) => data);
 }
 
-export async function uploadImageList(projectId: number, folderId: number, memberId: number, imageList: string[]) {
+export async function uploadImageList(projectId: number, folderId: number, memberId: number, imageList: File[]) {
   return api
     .post(
       `/projects/${projectId}/folders/${folderId}/images`,
@@ -50,3 +50,15 @@ export async function uploadImageList(projectId: number, folderId: number, membe
     )
     .then(({ data }) => data);
 }
+
+export async function uploadImageFolder(projectId: number, folderZip: File[], parentId: number, memberId: number) {
+  return api
+    .post(
+      `/projects/${projectId}/folders/0/images/upload`,
+      { folderZip, parentId },
+      {
+        params: { memberId },
+      }
+    )
+    .then(({ data }) => data);
+}

frontend/src/components/FolderUploadTest/index.tsx

@@ -0,0 +1,59 @@
+import { uploadImageFolder, uploadImageList } from '@/api/imageApi';
+import useAuthStore from '@/stores/useAuthStore';
+import { useState } from 'react';
+import { useParams } from 'react-router-dom';
+
+export default function FolderUploadTest() {
+  const params = useParams<{ workspaceId: string; projectId: string }>();
+  const projectId = Number(params.projectId);
+  const profile = useAuthStore((state) => state.profile);
+  const memberId = profile?.id || 0;
+  const [files, setFiles] = useState<Array<File>>([]);
+  const [isUploading, setIsUploading] = useState<boolean>(false);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = e.target.files;
+    if (selectedFiles) {
+      setFiles(Array.from(selectedFiles));
+    }
+  };
+
+  const handleUpload = async () => {
+    if (!files || files.length === 0) {
+      console.log('No selected files');
+      return;
+    }
+
+    setIsUploading(true);
+    // uploadImageFolder(projectId, files, 0, memberId);
+    uploadImageList(projectId, 0, memberId, files);
+  };
+
+  return (
+    <div className="min-h-screen w-full bg-blue-300">
+      <h1>hello infikei</h1>
+      <input
+        type="file"
+        id="folderInput"
+        // webkitdirectory=""
+        multiple
+        onChange={handleFileChange}
+      />
+      <button
+        onClick={handleUpload}
+        disabled={isUploading}
+      >
+        {isUploading ? '업로드하는 중...' : '폴더 업로드'}
+      </button>
+      <div>
+        {files.length > 0 && (
+          <ul>
+            {files.map((file, index) => (
+              <li key={index}>{file.webkitRelativePath}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/router/index.tsx

@@ -14,6 +14,7 @@ import WorkspaceBrowseIndex from '@/pages/WorkspaceBrowseIndex';
 import AdminIndex from '@/pages/AdminIndex';
 import LabelCanvas from '@/pages/LabelCanvas';
 import ReviewDetail from '@/components/ReviewDetail';
+import FolderUploadTest from '@/components/FolderUploadTest';
 
 export const webPath = {
   home: () => '/',
@@ -21,6 +22,7 @@ export const webPath = {
   workspace: () => '/workspace',
   admin: () => `/admin`,
   oauthCallback: () => '/redirect/oauth2',
+  folderUploadTest: () => '/folderuploadtest',
 };
 
 const router = createBrowserRouter([
@@ -106,6 +108,10 @@ const router = createBrowserRouter([
       </Suspense>
     ),
   },
+  {
+    path: `${webPath.folderUploadTest()}/:projectId`,
+    element: <FolderUploadTest />,
+  },
 ]);
 
 export default router;