diff --git a/frontend/src/api/upload.ts b/frontend/src/api/upload.ts new file mode 100644 index 0000000..34a565c --- /dev/null +++ b/frontend/src/api/upload.ts @@ -0,0 +1,34 @@ +import axios, { AxiosProgressEvent } from 'axios'; + +export async function uploadFiles( + files: File[], + onUploadProgress: (progress: number) => void, + onComplete: () => void, + onError: (error: Error) => void +): Promise { + alert('개발 중 입니다.'); + + const formData = new FormData(); + files.forEach((file) => { + formData.append('files', file); + }); + + try { + const response = await axios.post('/api/projects/{project_id}', formData, { + onUploadProgress: (progressEvent: AxiosProgressEvent) => { + if (progressEvent.total) { + const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total); + onUploadProgress(progress); + } + }, + }); + + if (response.status === 200) { + onComplete(); + } else { + throw new Error('Upload failed'); + } + } catch (error) { + onError(error as Error); + } +} diff --git a/frontend/src/components/ImageUploadModal/index.tsx b/frontend/src/components/ImageUploadModal/index.tsx index f815246..30a0d80 100644 --- a/frontend/src/components/ImageUploadModal/index.tsx +++ b/frontend/src/components/ImageUploadModal/index.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import CloseButton from './CloseButton'; import Button from './Button'; import FileList from './FileList'; -import axios, { AxiosProgressEvent } from 'axios'; +import { uploadFiles } from '@/api/upload'; interface ImageUploadModalProps { title: string; @@ -37,42 +37,24 @@ export default function ImageUploadModal({ title, buttonText, onClose }: ImageUp }; const handleUpload = async () => { - // 개발 중 알림 - alert('파일 업로드 기능은 현재 개발 중입니다.'); + setIsUploading(true); - const formData = new FormData(); - files.forEach((file) => { - formData.append('files', file); - }); - - try { - const response = await axios.post('/api/projects/{project_id}', formData, { - onUploadProgress: (progressEvent: AxiosProgressEvent) => { - if (progressEvent.total) { - const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total); - setUploadProgress(progress); - } - }, - }); - - if (response.status === 200) { + await uploadFiles( + files, + setUploadProgress, + () => { setIsUploading(false); setUploadProgress(100); setTimeout(() => { setFiles([]); onClose(); }, 2000); - } else { - throw new Error('Upload failed'); + }, + (error: Error) => { + console.error('Upload error:', error); + setIsUploading(false); } - } catch (error) { - console.error('Upload error:', error); - } - }; - - const startUpload = async () => { - setIsUploading(true); - await handleUpload(); + ); }; const handleClose = () => { @@ -82,7 +64,7 @@ export default function ImageUploadModal({ title, buttonText, onClose }: ImageUp return (
-
+
{title} @@ -97,7 +79,7 @@ export default function ImageUploadModal({ title, buttonText, onClose }: ImageUp

@@ -120,7 +102,7 @@ export default function ImageUploadModal({ title, buttonText, onClose }: ImageUp