Merge branch 'fe/refactor/image' into 'fe/develop'

Refactor: 병렬 업로드

See merge request s11-s-project/S11P21S002!276

frontend/src/api/imageApi.ts

@@ -151,8 +151,30 @@ export async function uploadImagePresigned(
     }
   );
 
-  // 각 파일을 presigned URL에 맞춰서 업로드 (axios 직접 사용)
-  for (const presignedUrlInfo of presignedUrlList) {
+  // // 각 파일을 presigned URL에 맞춰서 업로드 (axios 직접 사용)
+  // for (const presignedUrlInfo of presignedUrlList) {
+  //   const file = files[presignedUrlInfo.id];
+  //
+  //   try {
+  //     // S3 presigned URL로 개별 파일 업로드
+  //     await axios.put(presignedUrlInfo.presignedUrl, file, {
+  //       headers: {
+  //         'Content-Type': file.type, // 파일의 타입 설정
+  //       },
+  //       onUploadProgress: (progressEvent) => {
+  //         if (progressEvent.total) {
+  //           processCallback(presignedUrlInfo.id); // 성공 시 진행 상황 업데이트
+  //         }
+  //       },
+  //     });
+  //   } catch (error) {
+  //     // 업로드 실패 시 로그 출력
+  //     console.error(`업로드 실패: ${file.name}`, error);
+  //   }
+  // }
+
+  // 모든 파일을 병렬로 presigned URL에 맞춰서 업로드
+  const uploadPromises = presignedUrlList.map(async (presignedUrlInfo) => {
     const file = files[presignedUrlInfo.id];
 
     try {
@@ -167,13 +189,14 @@ export async function uploadImagePresigned(
           }
         },
       });
-
-      // 파일이 성공적으로 업로드되면 로그 출력
     } catch (error) {
       // 업로드 실패 시 로그 출력
       console.error(`업로드 실패: ${file.name}`, error);
     }
-  }
+  });
+
+  // 모든 업로드가 병렬로 완료될 때까지 기다림
+  await Promise.all(uploadPromises);
 
   // 업로드 완료 시간 기록
   const endTime = new Date().getTime();