[REFACTOR] react hook form register naming 통일

package.json

@@ -80,4 +80,4 @@
     "webpack": "^5.95.0"
   },
   "packageManager": "yarn@4.5.0"
-}
+}

src/components/org/OrgAdmin/CommonSection/BrandingColor.tsx

@@ -22,9 +22,9 @@ const BrandingColor = () => {
           <StDescription>다크 모드를 고려하여 선정해주세요.</StDescription>
         </StTitleWrapper>
         <StInputWrapper>
-          <ColorInputField label="키컬러 (메인)" id="brandingColor_main" />
-          <ColorInputField label="키컬러 (저명도)" id="brandingColor_low" />
-          <ColorInputField label="키컬러 (고명도)" id="brandingColor_high" />
+          <ColorInputField label="키컬러 (메인)" id="brandingColor.main" />
+          <ColorInputField label="키컬러 (저명도)" id="brandingColor.low" />
+          <ColorInputField label="키컬러 (고명도)" id="brandingColor.high" />
           <BrandingSubColor onInfoToggle={onInfoToggle} />
         </StInputWrapper>
       </StWrapper>{' '}

src/components/org/OrgAdmin/CommonSection/BrandingSubColor.tsx

@@ -27,7 +27,7 @@ const BrandingSubColor = ({
           <IconInfoCircle />
         </StInfoButton>
         <StInput
-          {...register('brandingColor_point', {
+          {...register('brandingColor.point', {
             required: true && VALIDATION_CHECK.required.errorText,
           })}
           required
@@ -37,13 +37,13 @@ const BrandingSubColor = ({
           type="text"
           maxLength={9}
           placeholder="ex. #ffffff"
-          isError={errors.brandingColor_point?.message != undefined}
-          errorMessage={errors.brandingColor_point?.message as string}
+          isError={!!(errors as any).brandingColor?.point?.message}
+          errorMessage={(errors as any).brandingColor?.point?.message as string}
         />
         <StColorPreview
           type="color"
-          value={expandHexColor(watch('brandingColor_point'))}
-          onChange={(e) => setValue('brandingColor_point', e.target.value)}
+          value={expandHexColor(watch('brandingColor.point'))}
+          onChange={(e) => setValue('brandingColor.point', e.target.value)}
         />
       </StColorWrapper>
     </StInputBox>

src/components/org/OrgAdmin/CommonSection/ColorInputField.tsx

@@ -18,6 +18,7 @@ const ColorInputField = ({ label, id }: ColorInputFieldProps) => {
     watch,
     setValue,
   } = useFormContext();
+  const [brandingColor, color] = id.split('.');
 
   return (
     <StColorWrapper>
@@ -31,8 +32,10 @@ const ColorInputField = ({ label, id }: ColorInputFieldProps) => {
         type="text"
         maxLength={9}
         placeholder="ex. #ffffff"
-        isError={errors[id]?.message != undefined}
-        errorMessage={errors[id]?.message as string}
+        isError={!!(errors as any)[brandingColor]?.[color]?.message}
+        errorMessage={
+          (errors as any)[brandingColor]?.[color]?.message as string
+        }
       />
       <StColorPreview
         type="color"

src/components/org/OrgAdmin/CommonSection/RecruitSchedule.tsx

@@ -24,6 +24,7 @@ const ScheduleInput = ({ id, label }: ScheduleInputProps) => {
     formState: { errors },
     watch,
   } = useFormContext();
+  const [recruitSchedule, group, time] = id.split('.');
 
   return (
     <StInput
@@ -34,9 +35,11 @@ const ScheduleInput = ({ id, label }: ScheduleInputProps) => {
       labelText={label}
       id={id}
       type="datetime-local"
-      hasValue={!!watch(id)}
-      isError={!!errors[id]?.message}
-      errorMessage={errors[id]?.message as string}
+      hasValue={!!watch(`${recruitSchedule}.${group}.${time}`)}
+      isError={!!(errors as any)[recruitSchedule]?.[group]?.[time]?.message}
+      errorMessage={
+        (errors as any)[recruitSchedule]?.[group]?.[time]?.message as string
+      }
     />
   );
 };

src/components/org/OrgAdmin/RecruitSection/Fna.tsx

@@ -49,12 +49,9 @@ const Fna = ({ fnaPart, onChangeFnaPart }: FnaProps) => {
         {QUESTION_NUMBERS.map((index) => (
           <StFnaWrapper key={index}>
             <StTextArea
-              {...register(
-                `recruitQuestion_${fnaPart}_questions_${index}_question`,
-                {
-                  required: VALIDATION_CHECK.required.errorText,
-                },
-              )}
+              {...register(`recruitQuestion.${fnaPart}.question${index}`, {
+                required: VALIDATION_CHECK.required.errorText,
+              })}
               topAddon={{
                 labelText: `질문 ${index + 1}`,
               }}
@@ -64,41 +61,39 @@ const Fna = ({ fnaPart, onChangeFnaPart }: FnaProps) => {
               placeholder="질문을 입력해주세요."
               onChange={(e) =>
                 handleValidation(
-                  `recruitQuestion_${fnaPart}_questions_${index}_question`,
+                  `recruitQuestion.${fnaPart}.question${index}`,
                   e.currentTarget.value,
                 )
               }
               isError={
-                !!errors[
-                  `recruitQuestion_${fnaPart}_questions_${index}_question`
-                ]
+                !!(errors as any).recruitQuestion?.[fnaPart]?.[
+                  `question${index}`
+                ]?.message
               }
               errorMessage={
-                errors[`recruitQuestion_${fnaPart}_questions_${index}_question`]
+                (errors as any).recruitQuestion?.[fnaPart]?.[`question${index}`]
                   ?.message as string
               }
             />
             <StTextArea
-              {...register(
-                `recruitQuestion_${fnaPart}_questions_${index}_answer`,
-                {
-                  required: VALIDATION_CHECK.required.errorText,
-                },
-              )}
+              {...register(`recruitQuestion.${fnaPart}.answer${index}`, {
+                required: VALIDATION_CHECK.required.errorText,
+              })}
               fixedHeight={74}
               maxHeight={74}
               placeholder="답변을 입력해주세요."
               onChange={(e) =>
                 handleValidation(
-                  `recruitQuestion_${fnaPart}_questions_${index}_answer`,
+                  `recruitQuestion.${fnaPart}.answer${index}`,
                   e.currentTarget.value,
                 )
               }
               isError={
-                !!errors[`recruitQuestion_${fnaPart}_questions_${index}_answer`]
+                !!(errors as any).recruitQuestion?.[fnaPart]?.[`answer${index}`]
+                  ?.message
               }
               errorMessage={
-                errors[`recruitQuestion_${fnaPart}_questions_${index}_answer`]
+                (errors as any).recruitQuestion?.[fnaPart]?.[`answer${index}`]
                   ?.message as string
               }
             />

src/components/org/OrgAdmin/RecruitSection/PartCurriculum.tsx

@@ -37,7 +37,7 @@ const PartCurriculum = ({
       />
       <StTextAreaWrapper key={curriculumPart}>
         <StTextArea
-          {...register(`recruitPartCurriculum_${curriculumPart}_content`, {
+          {...register(`recruitPartCurriculum.${curriculumPart}.content`, {
             required: true && VALIDATION_CHECK.required.errorText,
           })}
           topAddon={{
@@ -49,25 +49,25 @@ const PartCurriculum = ({
           placeholder="파트별 설명을 작성해주세요."
           onChange={(e) => {
             if (e.currentTarget.value) {
-              clearErrors(`recruitPartCurriculum_${curriculumPart}_content`);
+              clearErrors(`recruitPartCurriculum.${curriculumPart}.content`);
             } else {
-              setError(`recruitPartCurriculum_${curriculumPart}_content`, {
+              setError(`recruitPartCurriculum.${curriculumPart}.content`, {
                 type: 'required',
                 message: VALIDATION_CHECK.required.errorText,
               });
             }
           }}
           isError={
-            errors[`recruitPartCurriculum_${curriculumPart}_content`]
-              ?.message != undefined
+            !!(errors as any).recruitPartCurriculum?.[curriculumPart]?.content
+              ?.message
           }
           errorMessage={
-            errors[`recruitPartCurriculum_${curriculumPart}_content`]
+            (errors as any).recruitPartCurriculum?.[curriculumPart]?.content
               ?.message as string
           }
         />
         <StTextArea
-          {...register(`recruitPartCurriculum_${curriculumPart}_preference`, {
+          {...register(`recruitPartCurriculum.${curriculumPart}.preference`, {
             required: true && VALIDATION_CHECK.required.errorText,
           })}
           topAddon={{
@@ -82,20 +82,20 @@ ex.
 - 타 파트와 협업하며 존중과 신뢰를 바탕으로 원활한 팀워크를 만들어갈 수 있는 분`}
           onChange={(e) => {
             if (e.currentTarget.value) {
-              clearErrors(`recruitPartCurriculum_${curriculumPart}_preference`);
+              clearErrors(`recruitPartCurriculum.${curriculumPart}.preference`);
             } else {
-              setError(`recruitPartCurriculum_${curriculumPart}_preference`, {
+              setError(`recruitPartCurriculum.${curriculumPart}.preference`, {
                 type: 'required',
                 message: VALIDATION_CHECK.required.errorText,
               });
             }
           }}
           isError={
-            errors[`recruitPartCurriculum_${curriculumPart}_preference`]
-              ?.message != undefined
+            !!(errors as any).recruitPartCurriculum?.[curriculumPart]
+              ?.preference?.message
           }
           errorMessage={
-            errors[`recruitPartCurriculum_${curriculumPart}_preference`]
+            (errors as any).recruitPartCurriculum?.[curriculumPart]?.preference
               ?.message as string
           }
         />