🔨 그룹명 useController 적용

boostcampwm2023 · Feb 1, 2024 · 65a6c02 · 65a6c02
1 parent 70709fa
commit 65a6c02
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/app/frontend/src/pages/Groups/Create/index.tsx b/app/frontend/src/pages/Groups/Create/index.tsx
@@ -1,4 +1,4 @@
-import { useForm } from 'react-hook-form';
+import { useController, useForm } from 'react-hook-form';
 
 import { TextLabel, Button } from '@morak/ui';
 
@@ -22,13 +22,27 @@ export function GroupCreatePage() {
     mode: 'all',
   });
 
+  const {
+    field: { value: nameValue, onChange: onChangeName },
+  } = useController({
+    name: 'name',
+    control,
+    rules: {
+      required: true,
+    },
+  });
   return (
     <form
       className={styles.container}
       // TODO: POST 요청
       onSubmit={handleSubmit((data) => console.log(data))}
     >
-      <FormInput label="그룹명" required />
+      <FormInput
+        label="그룹명"
+        required
+        value={nameValue}
+        onChange={onChangeName}
+      />
       <div className={styles.inputWrapper}>
         <TextLabel label="그룹 유형" required />
         <GroupTypeRadio control={control} />