From c6e45cad635d14cfe32d10821ffd702fe99d22b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=A1=B0?= Date: Tue, 8 Oct 2024 06:55:02 +0900 Subject: [PATCH] =?UTF-8?q?Refactor:=20=ED=8D=BC=EC=84=BC=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B3=B5=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/ImagePreSignedForm/index.tsx | 188 ++++++++---------- frontend/src/hooks/useUploadFiles.ts | 69 ++++--- 2 files changed, 126 insertions(+), 131 deletions(-) diff --git a/frontend/src/components/ImagePreSignedForm/index.tsx b/frontend/src/components/ImagePreSignedForm/index.tsx index 1e4ed02..dc84263 100644 --- a/frontend/src/components/ImagePreSignedForm/index.tsx +++ b/frontend/src/components/ImagePreSignedForm/index.tsx @@ -5,7 +5,6 @@ import useAuthStore from '@/stores/useAuthStore'; import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react'; import { FixedSizeList } from 'react-window'; import useUploadFiles from '@/hooks/useUploadFiles'; -import useUploadImagePresignedQuery from '@/queries/images/useUploadImagePresignedQuery'; import { unzipFilesWithPath, extractFilesRecursivelyWithPath } from '@/utils/fileUtils'; interface ImagePreSignedFormProps { @@ -34,20 +33,16 @@ export default function ImagePreSignedForm({ const [isUploading, setIsUploading] = useState(false); const [isUploaded, setIsUploaded] = useState(false); const [isFailed, setIsFailed] = useState(false); - const [progress, setProgress] = useState(0); - const [uploadStatus, setUploadStatus] = useState<(boolean | null)[]>([]); + const [uploadStatus, setUploadStatus] = useState<('uploading' | 'success' | 'failed' | null)[]>([]); - // Ensure to destructure the uploadFiles function properly from the hook const { uploadFiles } = useUploadFiles(); - const uploadImageFile = useUploadImagePresignedQuery(); + const handleClose = () => { onClose(); setFiles([]); setInputKey((prevKey) => prevKey + 1); - setIsUploading(false); - setIsUploaded(false); setIsFailed(false); - setProgress(0); + setIsUploaded(false); setUploadStatus([]); }; @@ -92,9 +87,10 @@ export default function ImagePreSignedForm({ event.stopPropagation(); setIsDragging(false); + let processedFiles: { path: string; file: File }[] = []; + if (uploadType === 'folder') { const droppedItems = event.dataTransfer.items; - let processedFiles: { path: string; file: File }[] = []; for (let i = 0; i < droppedItems.length; i++) { const item = droppedItems[i]; @@ -106,20 +102,17 @@ export default function ImagePreSignedForm({ } } } - - setFiles((prevFiles) => [...prevFiles, ...processedFiles]); - setUploadStatus((prevStatus) => [...prevStatus, ...processedFiles.map(() => null)]); } else { const droppedFiles = event.dataTransfer.files; if (droppedFiles) { - const processedFiles: { path: string; file: File }[] = []; for (const file of Array.from(droppedFiles)) { processedFiles.push({ path: file.name, file }); } - setFiles((prevFiles) => [...prevFiles, ...processedFiles]); - setUploadStatus((prevStatus) => [...prevStatus, ...processedFiles.map(() => null)]); } } + + setFiles((prevFiles) => [...prevFiles, ...processedFiles]); + setUploadStatus((prevStatus) => [...prevStatus, ...processedFiles.map(() => null)]); }; const handleRemoveFile = (index: number) => { @@ -130,72 +123,52 @@ export default function ImagePreSignedForm({ const handleUpload = async () => { if (files.length > 0) { setIsUploading(true); - setIsUploaded(false); setIsFailed(false); + setIsUploaded(false); + + setUploadStatus(files.map(() => 'uploading')); let finalFiles: { path: string; file: File }[] = []; for (const file of files) { if (file.file.type === 'application/zip' || file.file.type === 'application/x-zip-compressed') { - console.log('업로드 전에 ZIP 파일 해제:', file.file.name); const unzippedFiles = await unzipFilesWithPath(file.file); - console.log('해제된 파일:', unzippedFiles); finalFiles = [...finalFiles, ...unzippedFiles]; } else { finalFiles.push(file); } } - if (uploadType === 'file') { - uploadImageFile.mutate( - { - memberId, - projectId, - folderId, - files: finalFiles.map(({ file }) => file), // Extract only the file - progressCallback: (index: number) => { - setUploadStatus((prevStatus) => { - const newStatus = [...prevStatus]; - newStatus[index] = true; // Mark as uploaded - return newStatus; - }); - }, + try { + await uploadFiles({ + files: finalFiles, + projectId, + folderId, + memberId, + onProgress: (progress) => { + setUploadStatus((prevStatus) => { + const completedFiles = Math.round((progress / 100) * files.length); + const newStatus = prevStatus.map((status, index) => (index < completedFiles ? 'success' : status)); + return newStatus; + }); }, - { - onSuccess: () => { - handleRefetch(); - setIsUploaded(true); - }, - onError: () => { - setIsFailed(true); - setUploadStatus((prevStatus) => prevStatus.map((status) => (status === null ? false : status))); - }, - } - ); - } else { - try { - await uploadFiles({ - files: finalFiles, - projectId, - folderId, - memberId, - onProgress: (progressValue: number) => { - setProgress(progressValue); - }, - }); + useSingleUpload: uploadType === 'file', + }); - setUploadStatus(finalFiles.map(() => true)); - setIsUploaded(true); - handleRefetch(); - } catch (error) { - setIsFailed(true); - setUploadStatus(finalFiles.map(() => false)); - console.error('업로드 실패:', error); - } + setUploadStatus((prevStatus) => prevStatus.map(() => 'success')); + setIsUploaded(true); + handleRefetch(); + } catch (error) { + setUploadStatus((prevStatus) => prevStatus.map((status) => (status === 'uploading' ? 'failed' : status))); + setIsFailed(true); + console.error('업로드 실패:', error); } } }; + // 전체 진행 상황 계산 + const totalProgress = Math.round((uploadStatus.filter((status) => status !== null).length / files.length) * 100); + useEffect(() => { onFileCount(files.length); }, [files, onFileCount]); @@ -237,46 +210,44 @@ export default function ImagePreSignedForm({ )} {files.length > 0 && ( -
    - - {({ index, style }) => ( -
  • - {files[index].path} - {isUploading ? ( -
    - {uploadStatus[index] === true ? ( - - ) : uploadStatus[index] === false ? ( - - ) : ( - - )} -
    - ) : ( + + {({ index, style }) => ( +
    + {files[index].path} +
    + {uploadStatus[index] === 'success' ? ( + + ) : uploadStatus[index] === 'failed' ? ( + + ) : uploadStatus[index] === 'uploading' ? ( + + ) : null} + {!isUploading && ( )} -
    • - )} -     -
+ + + )} + )} {isUploading ? ( ) : (