feat: 유효성 검사용 enum 생성

dnd-side-project · Feb 18, 2024 · 32b3267 · 32b3267
1 parent f200002
commit 32b3267
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 33 deletions.
diff --git a/components/form-contents/InputKnowing.tsx b/components/form-contents/InputKnowing.tsx
@@ -35,10 +35,16 @@ const InputKnowing = () => {
                 <ComboboxDropdown
                   placeholder="알게 된 기간을 선택해주세요"
                   options={[
-                    { label: '6개월미만', value: 'six_months' },
-                    { label: '6개월 - 1년미만', value: 'one_year' },
-                    { label: '1년 - 4년미만', value: 'four_years' },
-                    { label: '4년이상', value: 'infinite' },
+                    { label: '6개월미만', value: 'six_months'.toUpperCase() },
+                    {
+                      label: '6개월 - 1년미만',
+                      value: 'one_year'.toUpperCase(),
+                    },
+                    {
+                      label: '1년 - 4년미만',
+                      value: 'four_years'.toUpperCase(),
+                    },
+                    { label: '4년이상', value: 'infinite'.toUpperCase() },
                   ]}
                   {...field}
                   onChange={(value) => {
@@ -57,12 +63,18 @@ const InputKnowing = () => {
                 <ComboboxDropdown
                   placeholder="알게 된 경로를 선택해주세요"
                   options={[
-                    { label: '초등학교', value: 'elementary_school' },
-                    { label: '중·고등학교', value: 'middle_and_high_school' },
-                    { label: '대학교', value: 'university' },
-                    { label: '직장', value: 'work' },
-                    { label: '친목모임', value: 'social' },
-                    { label: '기타', value: 'etc' },
+                    {
+                      label: '초등학교',
+                      value: 'elementary_school'.toUpperCase(),
+                    },
+                    {
+                      label: '중·고등학교',
+                      value: 'middle_and_high_school'.toUpperCase(),
+                    },
+                    { label: '대학교', value: 'university'.toUpperCase() },
+                    { label: '직장', value: 'work'.toUpperCase() },
+                    { label: '친목모임', value: 'social'.toUpperCase() },
+                    { label: '기타', value: 'etc'.toUpperCase() },
                   ]}
                   {...field}
                   onChange={(value) => {

diff --git a/pages/surveys/hooks/useSurveyForm.ts b/pages/surveys/hooks/useSurveyForm.ts
@@ -2,10 +2,33 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 
+export const period = [
+  '',
+  'ALL',
+  'SIX_MONTHS',
+  'ONE_YEAR',
+  'FOUR_YEARS',
+  'INFINITE',
+] as const
+
+export const route = [
+  '',
+  'ALL',
+  'ELEMENTARY_SCHOOL',
+  'MIDDLE_AND_HIGH_SCHOOL',
+  'UNIVERSITY',
+  'WORK',
+  'SOCIAL',
+  'ETC',
+] as const
+
 const FormSchema = z.object({
-  name: z.string().min(2).max(6),
-  knowingRoute: z.string(),
-  knowingPeriod: z.string(),
+  name: z
+    .string()
+    .min(2, { message: '2-6자로 입력해주세요' })
+    .max(6, { message: '2-6자로 입력해주세요' }),
+  knowingRoute: z.enum(route),
+  knowingPeriod: z.enum(period),
 })
 
 export type FormValues = z.infer<typeof FormSchema>

diff --git a/pages/surveys/index.tsx b/pages/surveys/index.tsx
@@ -5,6 +5,7 @@ import { FunnelProvider } from '@/contexts/useFunnelContext'
 import InputName from '@/components/form-contents/InputName'
 import InputKnowing from '@/components/form-contents/InputKnowing'
 import useSurveyForm from './hooks/useSurveyForm'
+import { ReactNode } from 'react'
 
 const { Funnel, Step, useFunnel } = createFunnel([
   'inputName',
@@ -17,7 +18,16 @@ const Page = () => {
   const form = useSurveyForm()
 
   return (
-    <>
+    <BaseLayout
+      showHeader={true}
+      header={{
+        center: '정보입력',
+        options: {
+          showRight: false,
+          onBackClick: () => toPrevStep(),
+        },
+      }}
+    >
       <FunnelProvider
         value={{
           toPrevStep,
@@ -40,26 +50,9 @@ const Page = () => {
           </Funnel>
         </FormProvider>
       </FunnelProvider>
-    </>
-  )
-}
-
-Page.getLayout = () => {
-  //eslint-disable-next-line
-  const { toPrevStep } = useFunnel()
-  return (
-    <BaseLayout
-      showHeader={true}
-      header={{
-        center: '정보입력',
-        options: {
-          showRight: false,
-          onBackClick: () => toPrevStep(),
-        },
-      }}
-    >
-      <Page />
     </BaseLayout>
   )
 }
+
+Page.getLayout = (page: ReactNode) => page
 export default Page