feat: Select 앨범 시 이모지 로딩 시간 통일

src/feature/album-select/components/SelectAlbumBody.tsx

@@ -12,6 +12,8 @@ import { useUploadingStore } from '@/store/useUploadingStore';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
 
+import { calculateUploadWaitTime } from '@/global/utils/upload';
+
 type ImageWithUrl = {
   id: string;
   file: File;
@@ -61,8 +63,8 @@ export default function SelectAlbumBody() {
 
   const { mutate: reportFailed } = useReportFailed();
 
-  const { mutate: uploadMutate } = usePresignedAndUploadToNCP({
-    onSuccess: (result) => {
+  const { mutate: uploadMutate, isPending } = usePresignedAndUploadToNCP({
+    onSuccess: async (result) => {
       if (result.failed > 0) {
         Toast.alert(`${result.failed}개 파일 업로드에 실패했어요`);
         if (
@@ -73,13 +75,23 @@ export default function SelectAlbumBody() {
         }
       } else {
         revokeAllObjectUrls();
-        useUploadingStore.getState().setUploaded(true);
-        useUploadingStore.getState().setUploadedCount(result.success);
-        router.replace(`/album/detail/${albumId}`);
+        try {
+          useUploadingStore.getState().setUploaded(true);
+          useUploadingStore.getState().setUploadedCount(result.success);
+
+          // 백엔드 이미지 처리를 위해 인위적인 대기 시간 추가 (handleFileUpload와 동일)
+          const waitTime = calculateUploadWaitTime(result.success);
+          await new Promise((resolve) => setTimeout(resolve, waitTime));
+
+          router.replace(`/album/detail/${albumId}`);
+        } finally {
+          useUploadingStore.getState().setUploaded(false);
+        }
       }
     },
     onError: (e) => {
       revokeAllObjectUrls();
+      useUploadingStore.getState().setUploaded(false);
       console.error('에러 발생', e);
       alert('사진을 업로드하는 중 오류가 발생했습니다. 다시 시도해주세요.');
     },
@@ -225,7 +237,9 @@ export default function SelectAlbumBody() {
       <LongButton
         text={`앨범에 ${selectedIds.size}장 채우기`}
         noFixed={false}
-        disabled={isUploaded || isOverCount || selectedIds.size === 0}
+        disabled={
+          isUploaded || isPending || isOverCount || selectedIds.size === 0
+        }
         onClick={handleUpload}
       />
     </div>

src/feature/create-album/utils/handleFileUpload.ts

@@ -1,6 +1,8 @@
 import { EP } from '@/global/api/ep';
 import { presignedAndUploadToNCP } from '@/global/api/presignedAndUploadToNCP';
 import Toast from '@/global/components/toast/Toast';
+import { MIN_WAIT_TIME_MS } from '@/global/constants/upload';
+import { calculateUploadWaitTime } from '@/global/utils/upload';
 import { useUploadingStore } from '@/store/useUploadingStore';
 import { QueryClient } from '@tanstack/react-query';
 import { ChangeEvent } from 'react';
@@ -10,9 +12,6 @@ import { saveFilesToStore } from './saveFilesToStore';
 import { sortImagesByDate } from './sortImagesByDate';
 import { validateUpload } from './validateUpload';
 
-const MIN_WAIT_TIME_MS = 3000;
-const PER_PHOTO_PROCESSING_TIME_MS = 1000;
-
 async function refreshAlbumQueries(
   queryClient: QueryClient,
   albumId: string,
@@ -100,8 +99,7 @@ export async function handleFileUpload(
 
       // 백엔드 이미지 처리를 위한 추가 대기 시간
       // 기본 로딩 애니메이션을 위해 최소 대기 시간을 유지합니다.
-      const backendProcessingTime = files.length * PER_PHOTO_PROCESSING_TIME_MS;
-      const waitTime = Math.max(MIN_WAIT_TIME_MS, backendProcessingTime);
+      const waitTime = calculateUploadWaitTime(files.length);
       await new Promise((resolve) => setTimeout(resolve, waitTime));
 
       if (options?.queryClient) {

src/global/constants/upload.ts

@@ -0,0 +1,2 @@
+export const MIN_WAIT_TIME_MS = 3000;
+export const PER_PHOTO_PROCESSING_TIME_MS = 1000;

src/global/utils/upload.ts

@@ -0,0 +1,13 @@
+import {
+  MIN_WAIT_TIME_MS,
+  PER_PHOTO_PROCESSING_TIME_MS,
+} from '../constants/upload';
+
+/**
+ * 전송 완료 후 백엔드 이미지 처리를 위해 필요한 대기 시간을 계산합니다.
+ * @param fileCount 업로드된 파일 개수
+ * @returns 대기 시간 (ms)
+ */
+export const calculateUploadWaitTime = (fileCount: number): number => {
+  return MIN_WAIT_TIME_MS + fileCount * PER_PHOTO_PROCESSING_TIME_MS;
+};