UI: #127 프로젝트 상태 radio input 컴포넌트 분리

GU-99 · Sep 13, 2024 · cf87f0d · cf87f0d
1 parent a4579b8
commit cf87f0d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 28 deletions.
diff --git a/src/components/common/StatusRadio.tsx b/src/components/common/StatusRadio.tsx
@@ -0,0 +1,44 @@
+import type { UseFormRegisterReturn } from 'react-hook-form';
+import type { ProjectStatus } from '@/types/ProjectStatusType';
+
+type StatusRadioProps = {
+  statusList: ProjectStatus[];
+  selectedStatusId: ProjectStatus['statusId'];
+  errorMessage?: string;
+  register: UseFormRegisterReturn;
+};
+
+export default function StatusRadio({ statusList, selectedStatusId, errorMessage, register }: StatusRadioProps) {
+  return (
+    <>
+      {/* ToDo: 상태 선택 리팩토링 할 것 */}
+      <div className="flex items-center justify-start gap-4">
+        {statusList.map((status) => {
+          const { statusId, statusName, colorCode } = status;
+          const isChecked = selectedStatusId === statusId;
+          return (
+            <label
+              key={statusId}
+              htmlFor={statusName}
+              className={`flex cursor-pointer items-center rounded-lg border px-5 py-3 text-emphasis ${isChecked ? 'border-input bg-white' : 'bg-button'}`}
+            >
+              <input
+                id={statusName}
+                type="radio"
+                className="invisible h-0 w-0"
+                value={statusId}
+                checked={isChecked}
+                {...register}
+              />
+              <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>
+    </>
+  );
+}
diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx
@@ -9,6 +9,7 @@ import { TASK_SETTINGS } from '@constants/settings';
 import { TASK_VALIDATION_RULES } from '@constants/formValidationRules';
 import Spinner from '@components/common/Spinner';
 import RoleIcon from '@components/common/RoleIcon';
+import StatusRadio from '@components/common/StatusRadio';
 import ToggleButton from '@components/common/ToggleButton';
 import CustomMarkdown from '@components/common/CustomMarkdown';
 import DuplicationCheckInput from '@components/common/DuplicationCheckInput';
@@ -174,34 +175,12 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
 
   return (
     <form id={formId} className="mb-20 flex w-4/5 grow flex-col justify-center" onSubmit={handleSubmit(onSubmit)}>
-      {/* ToDo: 상태 선택 리팩토링 할 것 */}
-      <div className="flex items-center justify-start gap-4">
-        {statusList.map((status) => {
-          const { statusId, statusName, colorCode } = status;
-          const isChecked = +watch('statusId') === statusId;
-          return (
-            <label
-              key={statusId}
-              htmlFor={statusName}
-              className={`flex cursor-pointer items-center rounded-lg border px-5 py-3 text-emphasis ${isChecked ? 'border-input bg-white' : 'bg-button'}`}
-            >
-              <input
-                id={statusName}
-                type="radio"
-                className="invisible h-0 w-0"
-                value={statusId}
-                checked={isChecked}
-                {...register('statusId', 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 ${errors.statusId ? 'visible' : 'invisible'}`}>
-        {errors.statusId?.message}
-      </div>
+      <StatusRadio
+        statusList={statusList}
+        selectedStatusId={Number(watch('statusId'))}
+        errorMessage={errors.statusId?.message}
+        register={register('statusId', TASK_VALIDATION_RULES.STATUS)}
+      />
 
       <DuplicationCheckInput
         id="name"