feat: 이름, 알게된 경로 기간 입력 폼 구현

dnd-side-project · Feb 18, 2024 · 43c1eac · 43c1eac
1 parent 2d533b1
commit 43c1eac
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 86 deletions.
diff --git a/components/form-contents/InputKnowing.tsx b/components/form-contents/InputKnowing.tsx
@@ -13,7 +13,7 @@ import { FormValues } from '@/pages/surveys/hooks/useSurveyForm'
 const InputKnowing = () => {
   const { handleSubmit, trigger, control } = useFormContext<FormValues>()
 
-  const {knowingPeriod, knowingRoute } = useWatch({ control })
+  const { knowingPeriod, knowingRoute } = useWatch({ control })
 
   const onSubmit: SubmitHandler<FormValues> = (data) => {
     console.log(data)
@@ -25,60 +25,63 @@ const InputKnowing = () => {
 
   return (
     <>
-      <div className="flex flex-col space-y-4 p-4">
-        <InputLabel label="알게 된 기간">
-          <Controller
-            control={control}
-            name="knowingPeriod"
-            render={({ field }) => (
-              <ComboboxDropdown
-                placeholder="알게 된 기간을 선택해주세요"
-                options={[
-                  { label: '6개월미만', value: 'six_months' },
-                  { label: '6개월 - 1년미만', value: 'one_year' },
-                  { label: '1년 - 4년미만', value: 'four_years' },
-                  { label: '4년이상', value: 'infinite' },
-                ]}
-                {...field}
-                onChange={(value) => {
-                  field.onChange(value)
-                  trigger('knowingPeriod')
-                }}
-              />
-            )}
-          />
-        </InputLabel>
-        <InputLabel label="알게 된 경로">
-          <Controller
-            control={control}
-            name="knowingRoute"
-            render={({ field }) => (
-              <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' },
-                ]}
-                {...field}
-                onChange={(value) => {
-                  field.onChange(value)
-                  trigger('knowingRoute')
-                }}
-              />
-            )}
-          />
-        </InputLabel>
-
-        <Button
-          onClick={handleSubmit(onSubmit, onError)}
-          disabled={!knowingPeriod || !knowingRoute}
-        >
-          시작하기
-        </Button>
+      <div className="min-h-[100dvh] flex flex-col pb-[50px] px-5">
+        <div className="flex-1 flex flex-col mt-4 space-y-4">
+          <InputLabel label="알게 된 기간">
+            <Controller
+              control={control}
+              name="knowingPeriod"
+              render={({ field }) => (
+                <ComboboxDropdown
+                  placeholder="알게 된 기간을 선택해주세요"
+                  options={[
+                    { label: '6개월미만', value: 'six_months' },
+                    { label: '6개월 - 1년미만', value: 'one_year' },
+                    { label: '1년 - 4년미만', value: 'four_years' },
+                    { label: '4년이상', value: 'infinite' },
+                  ]}
+                  {...field}
+                  onChange={(value) => {
+                    field.onChange(value)
+                    trigger('knowingPeriod')
+                  }}
+                />
+              )}
+            />
+          </InputLabel>
+          <InputLabel label="알게 된 경로">
+            <Controller
+              control={control}
+              name="knowingRoute"
+              render={({ field }) => (
+                <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' },
+                  ]}
+                  {...field}
+                  onChange={(value) => {
+                    field.onChange(value)
+                    trigger('knowingRoute')
+                  }}
+                />
+              )}
+            />
+          </InputLabel>
+        </div>
+        <div className="fixed bottom-0 left-0 right-0 p-5 mb-4 bg-white flex justify-center">
+          <Button
+            onClick={handleSubmit(onSubmit, onError)}
+            disabled={!knowingPeriod || !knowingRoute}
+          >
+            시작하기
+          </Button>
+        </div>
       </div>
     </>
   )

diff --git a/components/form-contents/InputName.tsx b/components/form-contents/InputName.tsx
@@ -12,26 +12,30 @@ const InputName = () => {
   const { name } = useWatch({ control })
 
   return (
-    <div className="flex flex-col space-y-4 p-4">
-      <InputLabel label="이름">
-        <Controller
-          control={control}
-          name="name"
-          render={({ field }) => (
-            <Inputbox
-              {...field}
-              placeholder="이름을 입력해주세요"
-              onChange={(e) => {
-                setValue('name', e.target.value)
-              }}
-            />
-          )}
-        />
-      </InputLabel>
+    <div className="min-h-[100dvh] flex flex-col pb-[50px] px-5">
+      <div className="flex-1 flex flex-col mt-4 ">
+        <InputLabel label="이름">
+          <Controller
+            control={control}
+            name="name"
+            render={({ field }) => (
+              <Inputbox
+                {...field}
+                placeholder="이름을 입력해주세요"
+                onChange={(e) => {
+                  setValue('name', e.target.value)
+                }}
+              />
+            )}
+          />
+        </InputLabel>
+      </div>
 
-      <Button onClick={toNextStep} disabled={!name}>
-        다음
-      </Button>
+      <div className="fixed bottom-0 left-0 right-0 p-5 mb-4 bg-white flex justify-center">
+        <Button onClick={toNextStep} disabled={!name}>
+          다음
+        </Button>
+      </div>
     </div>
   )
 }

diff --git a/components/header/index.tsx b/components/header/index.tsx
@@ -155,7 +155,7 @@ const Header = ({ center = <Logo />, rightIcon, options }: HeaderProps) => {
       ref={headerRef}
       {...fadeInProps}
       className={cn(
-        'w-full z-10 grid grid-cols-3 items-center px-5 h-14 bg-white sticky duration-300',
+        'w-full z-10 grid grid-cols-3 items-center px-5 h-14 bg-white sticky duration-300 text-body1-bold',
         shoudFixedHeader ? 'top-0' : '-top-header',
       )}
     >

diff --git a/components/template/InfoInsertTemplate.tsx b/components/template/InfoInsertTemplate.tsx
diff --git a/pages/surveys/index.tsx b/pages/surveys/index.tsx
@@ -45,8 +45,18 @@ const Page = () => {
 }
 
 Page.getLayout = () => {
+  const { toPrevStep } = useFunnel()
   return (
-    <BaseLayout showHeader={true}>
+    <BaseLayout
+      showHeader={true}
+      header={{
+        center: '정보입력',
+        options: {
+          showRight: false,
+          onBackClick: () => toPrevStep(),
+        },
+      }}
+    >
       <Page />
     </BaseLayout>
   )