[Fix] 파일 관련 에러 해결

src/common/constants/validationCheck.ts

@@ -59,4 +59,7 @@ export const VALIDATION_CHECK = {
     maxLength: 40,
     errorText: '잘못된 입력 형식이에요.',
   },
+  fileInput: {
+    errorText: '파일 크기가 너무 커요. 50MB 이하로 선택해주세요.',
+  },
 };

src/views/ApplyPage/components/FileInput/index.tsx

@@ -5,6 +5,7 @@ import { useFormContext } from 'react-hook-form';
 
 import 'firebase/compat/storage';
 import { STATE_CHANGED, storage } from '@constants/firebase.ts';
+import { VALIDATION_CHECK } from '@constants/validationCheck';
 
 import IconPlusButton from './icons/IconPlusButton';
 import { container, errorText, fileInput, fileLabelVar, fileNameVar, textWrapper } from './style.css';
@@ -18,22 +19,33 @@ interface FileInputProps {
 }
 
 const LIMIT_SIZE = 1024 ** 2 * 50; // 50MB
-const ACCEPTED_FORMATS = '.pdf, .pptx';
+const ACCEPTED_FORMATS = '.pdf';
 
 const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputProps) => {
-  const [isError, setIsError] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
   const [uploadPercent, setUploadPercent] = useState(-1);
-  const [file, setFile] = useState<File | null>(null);
+  const [fileName, setFileName] = useState('');
 
-  const fileName = file ? file.name : '';
-  const inputRef = useRef<HTMLInputElement>(null);
+  const isFileUploading = uploadPercent < 100 && uploadPercent >= 0;
+  const isFileSending = uploadPercent === 100;
+  const disabledStatus = disabled || isReview || isFileUploading || isFileSending;
+
+  const {
+    register,
+    setValue,
+    setError,
+    clearErrors,
+    getValues,
+    formState: { errors },
+  } = useFormContext();
 
-  const { register, setValue, clearErrors, getValues } = useFormContext();
   const { id: defaultFileId, file: defaultFileUrl, fileName: defaultFileName } = defaultFile || {};
 
   const handleFileUpload = (file: File, id: number) => {
     const storageRef = storage.ref();
     const uploadTask = storageRef.child(`recruiting/applicants/question/${file.name}${nanoid(7)}`).put(file);
+
     track(`click-apply-add_file${id}`);
 
     uploadTask.on(
@@ -49,13 +61,15 @@ const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputPr
       () => {
         uploadTask.snapshot.ref.getDownloadURL().then((url) => {
           const urlWithoutToken = url.split('&token=')[0];
-          setFile(file);
+
+          setFileName(file.name);
           setValue(`file${id}`, {
             recruitingQuestionId: id,
             file: urlWithoutToken,
             fileName: file.name,
           });
           getValues(`${section}${id}`) === '' && setValue(`${section}${id}`, '파일 제출');
+          setUploadPercent(-2);
           clearErrors(`${section}${id}`);
           track(`done-apply-add_file${id}`);
         });
@@ -65,26 +79,30 @@ const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputPr
 
   const handleFileChange = (e: ChangeEvent<HTMLInputElement>, id: number) => {
     const file = e.target.files?.[0];
+
     if (file) {
       if (LIMIT_SIZE < file.size) {
-        setIsError(true);
+        setError(`file${id}`, { type: 'maxLength', message: VALIDATION_CHECK.fileInput.errorText });
+        setUploadPercent(-1);
+        setValue(`file${id}`, undefined);
+        getValues(`${section}${id}`) === '파일 제출' && setValue(`${section}${id}`, '');
+
         if (inputRef.current) {
           inputRef.current.value = '';
         }
-        setFile(null);
+        setFileName('delete-file');
       } else {
-        setIsError(false);
-        setFile(null);
+        clearErrors(`file${id}`);
         handleFileUpload(file, id);
       }
     }
   };
 
   const handleClickIcon = () => {
     if (inputRef.current) {
-      if (file) {
+      if (fileName) {
         inputRef.current.value = '';
-        setFile(null);
+        setFileName('delete-file');
         setValue(`file${id}`, undefined);
         setUploadPercent(-1);
         getValues(`${section}${id}`) === '파일 제출' && setValue(`${section}${id}`, '');
@@ -100,6 +118,25 @@ const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputPr
     }
   };
 
+  const getFileNameClass = () => {
+    if (uploadPercent === -1 && defaultFileName) {
+      return fileName === 'delete-file' ? 'default' : 'selected';
+    } else {
+      return fileName === '' ? 'default' : 'selected';
+    }
+  };
+
+  const getDisplayText = () => {
+    if (uploadPercent === -1 && defaultFileName) {
+      return fileName === 'delete-file' ? '50mb 이하 | pdf' : defaultFileName;
+    } else {
+      if (uploadPercent < 0 && fileName === '') return '50mb 이하 | pdf';
+      else if (isFileUploading) return `업로드 중... ${uploadPercent}/100% 완료`;
+      else if (isFileSending) return '파일을 전송하고 있어요... 잠시만 기다려주세요...';
+      else return fileName;
+    }
+  };
+
   useEffect(() => {
     if (defaultFileId && defaultFileUrl && defaultFileName) {
       setValue(`file${defaultFileId}`, {
@@ -108,7 +145,14 @@ const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputPr
         recruitingQuestionId: defaultFileId,
       });
     }
-  }, [defaultFileId, defaultFileUrl, defaultFileName, setValue]);
+
+    if (getValues(`file${id}`) && getValues(`${section}${id}`) === '') setValue(`${section}${id}`, '파일 제출');
+
+    return () => {
+      setValue(`file${id}`, undefined);
+      getValues(`${section}${id}`) === '파일 제출' && setValue(`${section}${id}`, '');
+    };
+  }, [section, id, defaultFileId, defaultFileUrl, defaultFileName, getValues, setValue]);
 
   return (
     <div className={container}>
@@ -120,42 +164,23 @@ const FileInput = ({ section, id, isReview, disabled, defaultFile }: FileInputPr
         onChange={(e) => handleFileChange(e, id)}
         ref={inputRef}
         className={`amp-unmask ${fileInput}`}
-        disabled={
-          disabled ||
-          isReview ||
-          (uploadPercent >= 0 && uploadPercent < 100) ||
-          (uploadPercent === 100 && fileName === '')
-        }
+        disabled={disabledStatus}
       />
       <label
         htmlFor={`file-${id}`}
-        className={fileLabelVar[isError ? 'error' : fileName === '' ? 'default' : 'selected']}>
+        className={fileLabelVar[errors[`file${id}`] ? 'error' : fileName === '' ? 'default' : 'selected']}>
         <div className={textWrapper}>
           <span>파일</span>
-          {(uploadPercent !== -1 || !defaultFileName) && (
-            <span className={fileNameVar[fileName === '' ? 'default' : 'selected']}>
-              {uploadPercent < 0 && fileName === ''
-                ? '50mb 이하 | pdf, pptx'
-                : uploadPercent < 100
-                  ? `업로드 중... ${uploadPercent}/100% 완료`
-                  : uploadPercent === 100 && fileName === ''
-                    ? '파일을 전송하고 있어요... 잠시만 기다려주세요...'
-                    : fileName}
-            </span>
-          )}
-          {uploadPercent === -1 && defaultFileName && (
-            <span className={fileNameVar['selected']}>{defaultFileName}</span>
-          )}
+          <span className={fileNameVar[getFileNameClass()]}>{getDisplayText()}</span>
         </div>
         <IconPlusButton
-          isSelected={getValues()[`file${id}`]}
+          isSelected={fileName !== 'delete-file' && getValues(`file${id}`)}
           onClickIcon={handleClickIcon}
-          disabled={disabled || isReview}
+          disabled={disabledStatus}
         />
       </label>
-      {isError && <p className={errorText}>첨부파일 용량을 초과했어요</p>}
+      {errors[`file${id}`] && <p className={errorText}>{errors[`file${id}`]?.message as string}</p>}
     </div>
   );
 };
-
 export default FileInput;

src/views/ApplyPage/components/Info/index.tsx

@@ -4,8 +4,8 @@ const Info = ({ value }: { value: string }) => {
   return (
     <article>
       <ol className={container}>
-        {value?.split('\n').map((text) => (
-          <li className={info} key={text}>
+        {value?.split('\n').map((text, idx) => (
+          <li className={info} key={`${idx},${text}`}>
             {text}
           </li>
         ))}