diff --git a/src/feature/album-select/components/SelectAlbumBody.tsx b/src/feature/album-select/components/SelectAlbumBody.tsx index 74cea9dd..09c4f350 100644 --- a/src/feature/album-select/components/SelectAlbumBody.tsx +++ b/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() { diff --git a/src/feature/create-album/utils/handleFileUpload.ts b/src/feature/create-album/utils/handleFileUpload.ts index 6ad8eeb5..7035c645 100644 --- a/src/feature/create-album/utils/handleFileUpload.ts +++ b/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) { diff --git a/src/global/constants/upload.ts b/src/global/constants/upload.ts new file mode 100644 index 00000000..a93937a4 --- /dev/null +++ b/src/global/constants/upload.ts @@ -0,0 +1,2 @@ +export const MIN_WAIT_TIME_MS = 3000; +export const PER_PHOTO_PROCESSING_TIME_MS = 1000; diff --git a/src/global/utils/upload.ts b/src/global/utils/upload.ts new file mode 100644 index 00000000..9e2508ee --- /dev/null +++ b/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; +};