Feature/파일 업로더 세부 기능 구현 #479

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, EXTENSION_NOTICE } 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,
+    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'],
+    },
+    maxSize: MAX_FILE_SIZE,
+  });
 
   const handleDeleteUploadFileClick = (fileName: string, fileId?: number) => {
     if (fileId && setFileIdsToDelete && setExistingFiles) {
@@ -53,7 +93,11 @@ const FileUploader = ({
         <input {...getInputProps()} />
         <span className="text-center">
           <VscNewFile size={30} className="mr-2 inline" />
-          <Typography className="inline">클릭 또는 드래그하여 파일을 첨부하세요</Typography>
+          <Typography className="inline">
+            클릭 또는 드래그하여 파일을 첨부하세요
+            <br />
+            <span style={{ fontSize: '12px' }}>{EXTENSION_NOTICE}</span>
+          </Typography>
         </span>
       </div>
     </div>

src/constants/apiResponseMessage.ts

@@ -59,10 +59,28 @@ export const STUDENT_ID = {
 } as const;
 
 export const MAX_FILE_SIZE = 30 * 1024 * 1024; // Byte
+export const ALLOWED_FILE_EXTENSIONS = [
+  '.jpg',
+  '.jpeg',
+  '.png',
+  '.gif',
+  '.svg',
+  '.mp4',
+  '.mp3',
+  '.txt',
+  '.pdf',
+  '.docx',
+  '.xlsx',
+  '.pptx',
+  '.zip',
+  '.7z',
+  '.hwpx',
+];
 export const FILE = {
   success: {},
   error: {
     uploadFail: '업로드가 실패하였습니다.',
     exceedFileSize: `파일이 제한된 크기(${formatFileSize(MAX_FILE_SIZE)})를 초과하였습니다.`,
+    disallowedFileExtension: '해당 파일 확장자는 허용되지 않습니다.',
   },
 } as const;