diff --git a/src/components/Uploader/FileUploader.tsx b/src/components/Uploader/FileUploader.tsx
index 80e411b5..de81cfd5 100644
--- a/src/components/Uploader/FileUploader.tsx
+++ b/src/components/Uploader/FileUploader.tsx
@@ -1,8 +1,10 @@
import React from 'react';
import { useDropzone } from 'react-dropzone';
+import toast from 'react-hot-toast';
import { Typography } from '@mui/material';
import { VscNewFile } from 'react-icons/vsc';
+import { FILE, MAX_FILE_SIZE } from '@constants/apiResponseMessage';
import FileUploadListTable from './FileUploadList';
interface FileUploaderProps {
@@ -24,7 +26,45 @@ const FileUploader = ({
setFilesToAdd((prevFiles) => [...prevFiles, ...acceptedFiles]);
};
- const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+ const onDropRejected = (rejectedFiles: { file: File; errors: { code: string }[] }[]) => {
+ rejectedFiles.forEach(({ errors }) => {
+ errors.forEach((error) => {
+ if (error.code === 'file-too-large') {
+ toast.error(FILE.error.exceedFileSize, {
+ style: {
+ maxWidth: 1500,
+ },
+ });
+ } else if (error.code === 'file-invalid-type') {
+ toast.error(FILE.error.disallowedFileExtension, {
+ style: {
+ maxWidth: 1500,
+ },
+ });
+ }
+ });
+ });
+ };
+
+ const { getRootProps, getInputProps, isDragActive } = useDropzone({
+ onDrop,
+ onDropRejected,
+ maxSize: MAX_FILE_SIZE,
+ accept: {
+ 'image/jpg': ['.jpg', '.jpeg', '.png', '.gif', '.svg', '.bmp', '.ico'],
+ 'video/mp4': ['.mp4'],
+ 'audio/mp3': ['.mp3'],
+ 'audio/wav': ['.wav'],
+ 'text/plain': ['.txt'],
+ 'application/pdf': ['.pdf'],
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.doc', '.docx'],
+ 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xls', '.xlsx'],
+ 'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['.ppt', '.pptx'],
+ 'application/zip': ['.zip'],
+ 'application/x-7z-compressed': ['.7z'],
+ 'application/vnd.hancom.hwpx': ['.hwp', '.hwpx'],
+ },
+ });
const handleDeleteUploadFileClick = (fileName: string, fileId?: number) => {
if (fileId && setFileIdsToDelete && setExistingFiles) {
@@ -53,7 +93,13 @@ const FileUploader = ({
- 클릭 또는 드래그하여 파일을 첨부하세요
+
+ 클릭 또는 드래그하여 파일을 첨부하세요
+
+ 지원하는 파일: .jpg, .jpeg, .png, .gif, .svg, .mp4, .mp3, .txt, .pdf, .docx, .xlsx, .pptx, .zip, .7z,
+ .hwpx, etc.
+
+
diff --git a/src/constants/apiResponseMessage.ts b/src/constants/apiResponseMessage.ts
index e05fd888..4d9979fb 100644
--- a/src/constants/apiResponseMessage.ts
+++ b/src/constants/apiResponseMessage.ts
@@ -64,5 +64,6 @@ export const FILE = {
error: {
uploadFail: '업로드가 실패하였습니다.',
exceedFileSize: `파일이 제한된 크기(${formatFileSize(MAX_FILE_SIZE)})를 초과하였습니다.`,
+ disallowedFileExtension: '해당 파일 확장자는 허용되지 않습니다.',
},
} as const;