fix-fe: 지원자 지원시 confirm 여러번 나타나는 버그 수정

frontend/.eslintrc.json

@@ -54,7 +54,16 @@
     "no-confusing-arrow": 0,
     "indent": 0,
     "consistent-return": "off",
-    "function-paren-newline": "off"
+    "function-paren-newline": "off",
+    "@typescript-eslint/no-use-before-define": [
+      "error",
+      {
+        "functions": false,
+        "classes": true,
+        "variables": true
+      }
+    ],
+    "no-use-before-define": "off"
   },
   "overrides": [
     {

frontend/src/components/recruitmentPost/ApplyForm/index.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import Button from '@components/_common/atoms/Button';
 import InputField from '@components/_common/molecules/InputField';
 import CustomQuestion from '@components/recruitmentPost/CustomQuestion';
-import { FormEventHandler, useState } from 'react';
+import { FormEventHandler, useEffect, useState } from 'react';
 
 import { validateEmail, validateName, validatePhoneNumber } from '@domain/validations/apply';
 
@@ -32,6 +33,7 @@ export default function ApplyForm({ questions, isClosed }: ApplyFormProps) {
   const {
     formData: applicant,
     register,
+    errors,
     hasErrors,
   } = useForm<ApplicantData>({
     initialValues,
@@ -81,69 +83,30 @@ export default function ApplyForm({ questions, isClosed }: ApplyFormProps) {
     setPersonalDataCollection(checked);
   };
 
-  const { onChange: onNameChange, ...nameRegister } = register('name', {
-    validate: { onBlur: validateName.onBlur, onChange: validateName.onChange },
-  });
-
-  const { onChange: onEmailChange, ...emailRegister } = register('email', {
-    validate: { onBlur: validateEmail.onBlur },
-  });
-
-  const { onChange: onPhoneChange, ...phoneRegister } = register('phone', {
-    validate: {
-      onBlur: validatePhoneNumber.onBlur,
-      onChange: validatePhoneNumber.onChange,
-    },
-  });
-
   return (
     <C.ContentContainer>
       <S.Form onSubmit={handleSubmit}>
-        <S.AriaCustomQuestion aria-label={`총 ${questionCount}의 입력 중 1번째 입력입니다.`}>
-          <InputField
-            {...nameRegister}
-            name="name"
-            label="이름"
-            placeholder="이름을 입력해 주세요."
-            maxLength={32}
-            required
-            value={initialValues.name}
-            onChange={(e) => {
-              onNameChange(e);
-              baseInfoHandlers.handleName(e);
-            }}
-          />
-        </S.AriaCustomQuestion>
-
-        <S.AriaCustomQuestion aria-label={`총 ${questionCount}의 입력 중 2번째 입력입니다.`}>
-          <InputField
-            {...emailRegister}
-            label="이메일"
-            placeholder="지원 결과를 안내받을 이메일 주소를 입력해 주세요."
-            required
-            value={initialValues.email}
-            onChange={(e) => {
-              onEmailChange(e);
-              baseInfoHandlers.handleEmail(e);
-            }}
-          />
-        </S.AriaCustomQuestion>
-
-        <S.AriaCustomQuestion aria-label={`총 ${questionCount}의 입력 중 3번째 입력입니다.`}>
-          <InputField
-            {...phoneRegister}
-            inputMode="numeric"
-            label="전화 번호"
-            placeholder="번호만 입력해 주세요."
-            maxLength={11}
-            required
-            value={initialValues.phone}
-            onChange={(e) => {
-              onPhoneChange(e);
-              baseInfoHandlers.handlePhone(e);
-            }}
-          />
-        </S.AriaCustomQuestion>
+        <NameInput
+          questionCount={questionCount}
+          register={register}
+          value={applicant.name}
+          error={errors.name}
+          baseInfoHandlers={baseInfoHandlers}
+        />
+        <EmailInput
+          questionCount={questionCount}
+          register={register}
+          value={applicant.email}
+          error={errors.email}
+          baseInfoHandlers={baseInfoHandlers}
+        />
+        <PhoneInput
+          questionCount={questionCount}
+          register={register}
+          value={applicant.phone}
+          error={errors.phone}
+          baseInfoHandlers={baseInfoHandlers}
+        />
 
         {questions.map((question, index) => (
           <S.AriaCustomQuestion
@@ -190,3 +153,104 @@ export default function ApplyForm({ questions, isClosed }: ApplyFormProps) {
     </C.ContentContainer>
   );
 }
+
+interface BaseInputProps {
+  questionCount: number;
+  register: any;
+  baseInfoHandlers: {
+    handleName: (value: string) => void;
+    handleEmail: (value: string) => void;
+    handlePhone: (value: string) => void;
+  };
+}
+
+interface NameInputProps extends BaseInputProps {
+  value: string;
+  error: string;
+}
+
+interface EmailInputProps extends BaseInputProps {
+  value: string;
+  error: string;
+}
+
+interface PhoneInputProps extends BaseInputProps {
+  value: string;
+  error: string;
+}
+
+function NameInput({ questionCount, register, value, error, baseInfoHandlers }: NameInputProps) {
+  const nameRegister = register('name', {
+    validate: { onBlur: validateName.onBlur, onChange: validateName.onChange },
+  });
+
+  useEffect(() => {
+    if (error) baseInfoHandlers.handleName('');
+    else baseInfoHandlers.handleName(value);
+  }, [error, value]);
+
+  return (
+    <S.AriaCustomQuestion aria-label={`총 ${questionCount}의 입력 중 1번째 입력입니다.`}>
+      <InputField
+        {...nameRegister}
+        name="name"
+        label="이름"
+        placeholder="이름을 입력해 주세요."
+        maxLength={32}
+        required
+        value={value}
+      />
+    </S.AriaCustomQuestion>
+  );
+}
+
+function EmailInput({ questionCount, register, value, error, baseInfoHandlers }: EmailInputProps) {
+  const emailRegister = register('email', {
+    validate: { onBlur: validateEmail.onBlur },
+  });
+
+  useEffect(() => {
+    if (error) baseInfoHandlers.handleEmail('');
+    else baseInfoHandlers.handleEmail(value);
+  }, [error, value]);
+
+  return (
+    <S.AriaCustomQuestion aria-label={`총 ${questionCount}의 입력 중 2번째 입력입니다.`}>
+      <InputField
+        {...emailRegister}
+        label="이메일"
+        placeholder="지원 결과를 안내받을 이메일 주소를 입력해 주세요."
+        required
+        value={value}
+      />
+    </S.AriaCustomQuestion>
+  );
+}
+
+function PhoneInput({ questionCount, register, value, error, baseInfoHandlers }: PhoneInputProps) {
+  const phoneRegister = register('phone', {
+    validate: {
+      onBlur: validatePhoneNumber.onBlur,
+      onChange: validatePhoneNumber.onChange,
+    },
+  });
+
+  useEffect(() => {
+    if (error) baseInfoHandlers.handlePhone('');
+    else baseInfoHandlers.handlePhone(value);
+  }, [error, value]);
+
+  return (
+    <S.AriaCustomQuestion aria-label={`총 ${questionCount}의 입력 중 3번째 입력입니다.`}>
+      <InputField
+        {...phoneRegister}
+        inputMode="numeric"
+        label="전화 번호"
+        placeholder="번호만 입력해 주세요."
+        maxLength={11}
+        required
+        value={value}
+      />
+    </S.AriaCustomQuestion>
+  );
+}

frontend/src/components/recruitmentPost/ApplyForm/useAnswers.ts

@@ -1,29 +1,11 @@
 import { Question } from '@customTypes/apply';
 import useLocalStorageState from '@hooks/useLocalStorageState';
-import { useState } from 'react';
 
 interface AnswerFormData {
   [key: string]: string[];
 }
 
-export const useAnswers = (questions: Question[], applyFormId: string) => {
-  const LOCALSTORAGE_KEY = `${applyFormId}-apply-form`;
-
-  const [enableStorage] = useState(() => {
-    const prevSavedAnswer = window.localStorage.getItem(LOCALSTORAGE_KEY);
-    if (!prevSavedAnswer) return false;
-
-    const prevSavedAnswerIds = Object.keys(JSON.parse(prevSavedAnswer));
-    if (prevSavedAnswerIds.every((id) => questions.some(({ questionId }) => questionId === id))) {
-      return window.confirm('이전 작성중인 지원서가 있습니다. 이어서 진행하시겠습니까?');
-    }
-    return false;
-  });
-
-  const resetAnswerStorage = () => {
-    window.localStorage.removeItem(LOCALSTORAGE_KEY);
-  };
-
+export const useAnswers = (questions: Question[], LOCALSTORAGE_KEY: string, enableStorage: boolean) => {
   const [answers, setAnswers] = useLocalStorageState<AnswerFormData>(
     (() => questions.reduce((acc, question) => ({ ...acc, [question.questionId]: [] }), {} as AnswerFormData))(),
     {
@@ -62,6 +44,5 @@ export const useAnswers = (questions: Question[], applyFormId: string) => {
       SINGLE_CHOICE: handleRadio,
     },
     isRequiredFieldsIncomplete,
-    resetAnswerStorage,
   };
 };

frontend/src/components/recruitmentPost/RecruitmentPostTab/index.tsx

@@ -12,7 +12,7 @@ import ApplyForm from '../ApplyForm';
 export type RecruitmentPostTabItems = '모집 공고' | '지원하기';
 
 export default function RecruitmentPostTab() {
-  const { currentMenu, moveTab, moveTabByParam } = useTab<RecruitmentPostTabItems>({ defaultValue: '모집 공고' });
+  const { currentMenu, moveTab } = useTab<RecruitmentPostTabItems>({ defaultValue: '모집 공고' });
 
   const { applyFormId } = useParams<{ applyFormId: string }>() as { applyFormId: string };
   const { data: questions } = applyQueries.useGetApplyForm({ applyFormId: applyFormId ?? '' });
@@ -47,7 +47,6 @@ export default function RecruitmentPostTab() {
             <ApplyAnswerProvider
               applyFormId={applyFormId}
               questions={questions}
-              moveTabByParam={moveTabByParam}
             >
               <ApplyForm
                 isClosed={isClosed}