feat: zod 추가

components/form-contents/InputName.tsx

@@ -8,9 +8,13 @@ import { FormValues } from '@/pages/surveys/hooks/useSurveyForm'
 const InputName = () => {
   const { toNextStep } = useFunnelContext()
 
-  const { setValue, control } = useFormContext<FormValues>()
-  const { name } = useWatch({ control })
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<FormValues>()
 
+  const { name } = useWatch({ control })
+  const isNameValid = !errors.name && name
   return (
     <div className="min-h-[100dvh] flex flex-col pb-[50px] px-5">
       <div className="flex-1 flex flex-col mt-4 ">
@@ -22,17 +26,21 @@ const InputName = () => {
               <Inputbox
                 {...field}
                 placeholder="이름을 입력해주세요"
-                onChange={(e) => {
-                  setValue('name', e.target.value)
-                }}
+                maxLength={6}
               />
             )}
           />
         </InputLabel>
+        {errors.name && (
+          <span className="text-red-500">{errors.name.message}</span>
+        )}
+        <p className="ml-2 mt-2 text-body3-medium text-text-sub-gray76">
+          2-6자로 입력해주세요
+        </p>
       </div>
 
       <div className="fixed bottom-0 left-0 right-0 p-5 mb-4 bg-white flex justify-center">
-        <Button onClick={toNextStep} disabled={!name}>
+        <Button onClick={toNextStep} disabled={!isNameValid}>
           다음
         </Button>
       </div>

package.json

@@ -13,6 +13,7 @@
     "test-storybook": "test-storybook"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@tanstack/react-query": "^5.17.19",
     "axios": "^1.6.7",

pages/surveys/hooks/useSurveyForm.ts

@@ -1,10 +1,14 @@
 import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
 
-export interface FormValues {
-  name: string
-  knowingRoute: string
-  knowingPeriod: string
-}
+const FormSchema = z.object({
+  name: z.string().min(2).max(6),
+  knowingRoute: z.string(),
+  knowingPeriod: z.string(),
+})
+
+export type FormValues = z.infer<typeof FormSchema>
 
 const useSurveyForm = () => {
   return useForm<FormValues>({
@@ -13,6 +17,7 @@ const useSurveyForm = () => {
       knowingRoute: '',
       knowingPeriod: '',
     },
+    resolver: zodResolver(FormSchema),
   })
 }
 

yarn.lock

@@ -2114,6 +2114,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@hookform/resolvers@npm:^3.3.4":
+  version: 3.3.4
+  resolution: "@hookform/resolvers@npm:3.3.4"
+  peerDependencies:
+    react-hook-form: ^7.0.0
+  checksum: f7a5b8ba59cbb0859e7a212bd5cbcbc70bbdddd21d4fbe9f4a96d149b5756470cb29857a50334d8c1c64392e21007ccf5288d26aa407431784d4006a2570cb36
+  languageName: node
+  linkType: hard
+
 "@humanwhocodes/config-array@npm:^0.11.13":
   version: 0.11.14
   resolution: "@humanwhocodes/config-array@npm:0.11.14"
@@ -13985,6 +13994,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "namui-wiki@workspace:."
   dependencies:
+    "@hookform/resolvers": "npm:^3.3.4"
     "@playwright/test": "npm:^1.41.1"
     "@radix-ui/react-dialog": "npm:^1.0.5"
     "@storybook/addon-essentials": "npm:7.6.11"