UI: #127 프로젝트 상태 컴포넌트 props 변경

GU-99 · Sep 14, 2024 · 7c9d918 · 7c9d918
1 parent afea302
commit 7c9d918
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/src/components/common/StatusRadio.tsx b/src/components/common/StatusRadio.tsx
@@ -1,21 +1,28 @@
-import type { UseFormRegisterReturn } from 'react-hook-form';
+import { useFormContext } from 'react-hook-form';
+import { TASK_VALIDATION_RULES } from '@constants/formValidationRules';
+
+import type { FieldError } from 'react-hook-form';
 import type { ProjectStatus } from '@/types/ProjectStatusType';
 
 type StatusRadioProps = {
+  statusFieldName: string;
   statusList: ProjectStatus[];
-  selectedStatusId: ProjectStatus['statusId'];
-  errorMessage?: string;
-  register: UseFormRegisterReturn;
 };
 
-export default function StatusRadio({ statusList, selectedStatusId, errorMessage, register }: StatusRadioProps) {
+export default function StatusRadio({ statusFieldName, statusList }: StatusRadioProps) {
+  const {
+    watch,
+    register,
+    formState: { errors },
+  } = useFormContext();
+
   return (
     <>
       {/* ToDo: 상태 선택 리팩토링 할 것 */}
       <div className="flex items-center justify-start gap-4">
         {statusList.map((status) => {
           const { statusId, statusName, colorCode } = status;
-          const isChecked = selectedStatusId === statusId;
+          const isChecked = Number(watch('statusId')) === statusId;
           return (
             <label
               key={statusId}
@@ -28,16 +35,16 @@ export default function StatusRadio({ statusList, selectedStatusId, errorMessage
                 className="invisible h-0 w-0"
                 value={statusId}
                 checked={isChecked}
-                {...register}
+                {...register(statusFieldName, TASK_VALIDATION_RULES.STATUS)}
               />
               <div style={{ borderColor: colorCode }} className="mr-3 h-8 w-8 rounded-full border" />
               <h3 className="text-xs">{statusName}</h3>
             </label>
           );
         })}
       </div>
-      <div className={`my-5 h-10 grow text-xs text-error ${errorMessage ? 'visible' : 'invisible'}`}>
-        {errorMessage}
+      <div className={`my-5 h-10 grow text-xs text-error ${errors[statusFieldName] ? 'visible' : 'invisible'}`}>
+        {(errors[statusFieldName] as FieldError | undefined)?.message}
       </div>
     </>
   );

diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx
@@ -165,12 +165,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
   return (
     <FormProvider {...methods}>
       <form id={formId} className="mb-20 flex w-4/5 grow flex-col justify-center" onSubmit={handleSubmit(onSubmit)}>
-        <StatusRadio
-          statusList={statusList}
-          selectedStatusId={Number(watch('statusId'))}
-          errorMessage={errors.statusId?.message}
-          register={register('statusId', TASK_VALIDATION_RULES.STATUS)}
-        />
+        <StatusRadio statusFieldName="statusId" statusList={statusList} />
 
         <DuplicationCheckInput
           id="name"