From 024bcf63237a478c1d32c3b8da4037f9ba6c2606 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=ED=98=84=EC=9A=B0?= <hw.choi@okestro.com>
Date: Mon, 11 Dec 2023 20:18:06 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat(login):=20login=ED=8D=BC=EB=84=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs:[#13, #14]
---
 component/Funnel/LoginFunnel.tsx | 46 +++++++++++++++++++++
 component/Funnel/MainFunnel.tsx  | 69 ++++++++++++++++++++++++++++++++
 src/app/page.tsx                 | 60 ++++-----------------------
 src/app/signup/page.tsx          |  2 +-
 utils/hooks/useFunnel.ts         |  4 +-
 5 files changed, 125 insertions(+), 56 deletions(-)
 create mode 100644 component/Funnel/LoginFunnel.tsx
 create mode 100644 component/Funnel/MainFunnel.tsx

diff --git a/component/Funnel/LoginFunnel.tsx b/component/Funnel/LoginFunnel.tsx
new file mode 100644
index 0000000..cfa4d77
--- /dev/null
+++ b/component/Funnel/LoginFunnel.tsx
@@ -0,0 +1,46 @@
+"use client";
+import { ButtonGroup, Text } from "@chakra-ui/react";
+import MainButton from "../button/MainButton";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+const LoginFunnel = () => {
+  const router = useRouter();
+  return (
+    <>
+      <Image
+        src={"https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg"}
+        alt="식선생"
+        width={100}
+        height={100}
+      />
+
+      <ButtonGroup
+        width={"90%"}
+        pos={"fixed"}
+        bottom={"50px"}
+        margin={"0 auto"}
+        display={"flex"}
+        flexDir={"column"}
+        textAlign={"center"}
+        gap={"10px"}
+      >
+        <MainButton w={"100%"} h={"52px"} onClick={() => {}}>
+          다음으로
+        </MainButton>
+        <Text
+          as={"u"}
+          fontSize={"17px"}
+          color={"#9D9D9D"}
+          margin={"0.5rem"}
+          onClick={() => router.push("/signup")}
+          cursor={"pointer"}
+        >
+          체험하기
+        </Text>
+      </ButtonGroup>
+    </>
+  );
+};
+
+export default LoginFunnel;
diff --git a/component/Funnel/MainFunnel.tsx b/component/Funnel/MainFunnel.tsx
new file mode 100644
index 0000000..d1b92eb
--- /dev/null
+++ b/component/Funnel/MainFunnel.tsx
@@ -0,0 +1,69 @@
+"use client";
+import { Box, ButtonGroup, Heading, Text } from "@chakra-ui/react";
+import Image from "next/image";
+import MainButton from "../../component/button/MainButton";
+import { useRouter } from "next/navigation";
+import { Dispatch, SetStateAction } from "react";
+
+interface MainFunnelPropsType {
+  setFunnel: Dispatch<SetStateAction<string>>;
+}
+
+const MainFunnel = ({ setFunnel }: MainFunnelPropsType) => {
+  const router = useRouter();
+
+  return (
+    <>
+      <Image
+        src={"https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg"}
+        alt="식선생"
+        width={100}
+        height={100}
+      />
+      <Box as="section" paddingBottom={"100px"}>
+        <Heading
+          as={"h1"}
+          color={"#000000"}
+          fontSize={"24px"}
+          fontWeight={"semibold"}
+          textAlign={"center"}
+          lineHeight={10}
+          padding={"15px"}
+        >
+          살빼려면
+          <br />
+          오늘 얼마만큼 운동해야하지?
+        </Heading>
+        <Text
+          as={"h2"}
+          color={"#787878"}
+          fontSize={"17px"}
+          textAlign={"center"}
+          lineHeight={7}
+        >
+          오늘 먹은 음식을 식선생에게 외쳐보세요! <br />
+          필요 운동량과 안찌는 식단을 한번에 알려드려요
+        </Text>
+      </Box>
+
+      <ButtonGroup
+        width={"90%"}
+        pos={"fixed"}
+        bottom={"30px"}
+        margin={"0 auto"}
+      >
+        <MainButton
+          w={"100%"}
+          h={"52px"}
+          onClick={() => {
+            setFunnel("login");
+          }}
+        >
+          다음으로
+        </MainButton>
+      </ButtonGroup>
+    </>
+  );
+};
+
+export default MainFunnel;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 879ef97..dcd5c3a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,11 +1,11 @@
 "use client";
-import { Box, ButtonGroup, Flex, Heading, Text } from "@chakra-ui/react";
-import MainButton from "../../component/button/MainButton";
-import { useRouter } from "next/navigation";
-import Image from "next/image";
+import { Flex } from "@chakra-ui/react";
+import { useFunnel } from "../../utils/hooks/useFunnel";
+import MainFunnel from "../../component/Funnel/MainFunnel";
+import LoginFunnel from "../../component/Funnel/LoginFunnel";
 
 export default function Home() {
-  const router = useRouter();
+  const { funnel, setFunnel } = useFunnel("main");
   return (
     <Flex
       as={"main"}
@@ -16,54 +16,8 @@ export default function Home() {
       justifyContent={"center"}
       alignItems={"center"}
     >
-      <Image
-        src={"https://images.pexels.com/photos/842711/pexels-photo-842711.jpeg"}
-        alt="식선생"
-        width={100}
-        height={100}
-      />
-      <Box as="section" paddingBottom={"100px"}>
-        <Heading
-          as={"h1"}
-          color={"#000000"}
-          fontSize={"24px"}
-          fontWeight={"semibold"}
-          textAlign={"center"}
-          lineHeight={10}
-          padding={"15px"}
-        >
-          살빼려면
-          <br />
-          오늘 얼마만큼 운동해야하지?
-        </Heading>
-        <Text
-          as={"h2"}
-          color={"#787878"}
-          fontSize={"17px"}
-          textAlign={"center"}
-          lineHeight={7}
-        >
-          오늘 먹은 음식을 식선생에게 외쳐보세요! <br />
-          필요 운동량과 안찌는 식단을 한번에 알려드려요
-        </Text>
-      </Box>
-
-      <ButtonGroup
-        width={"90%"}
-        pos={"fixed"}
-        bottom={"30px"}
-        margin={"0 auto"}
-      >
-        <MainButton
-          w={"100%"}
-          h={"52px"}
-          onClick={() => {
-            router.push("/signup");
-          }}
-        >
-          다음으로
-        </MainButton>
-      </ButtonGroup>
+      {funnel === "main" && <MainFunnel setFunnel={setFunnel} />}
+      {funnel === "login" && <LoginFunnel />}
     </Flex>
   );
 }
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index e8e4145..3531524 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -8,7 +8,7 @@ import UserAgreementForm from "../../../component/form/UserAgreementForm";
 
 const Page = () => {
   const [progress, setProgress] = useState<number>(33.3);
-  const { funnel, setFunnel } = useFunnel();
+  const { funnel, setFunnel } = useFunnel("userInfo");
   return (
     <>
       <Progress
diff --git a/utils/hooks/useFunnel.ts b/utils/hooks/useFunnel.ts
index 344c80c..41a4d10 100644
--- a/utils/hooks/useFunnel.ts
+++ b/utils/hooks/useFunnel.ts
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
-export const useFunnel = () => {
-  const [funnel, setFunnel] = useState("userInfo");
+export const useFunnel = (state: string) => {
+  const [funnel, setFunnel] = useState(state);
 
   return { funnel, setFunnel };
 };

From 93dda4f2d2c7cf2aaafaeeccb2a7cde1d2838692 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=ED=98=84=EC=9A=B0?= <hw.choi@okestro.com>
Date: Mon, 11 Dec 2023 20:56:41 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat(agreement)=20:=20=EC=95=BD=EA=B4=80?=
 =?UTF-8?q?=EB=8F=99=EC=9D=98=20checkbox?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs:[#4,#5]
---
 component/button/MainButton.tsx      |  1 +
 component/form/UserAgreementForm.tsx | 88 +++++++++++++++++++++++++++-
 src/app/signup/page.tsx              | 10 +++-
 3 files changed, 94 insertions(+), 5 deletions(-)

diff --git a/component/button/MainButton.tsx b/component/button/MainButton.tsx
index 30221cb..b99db25 100644
--- a/component/button/MainButton.tsx
+++ b/component/button/MainButton.tsx
@@ -9,6 +9,7 @@ const MainButton = ({ children, w, h, onClick }: ButtonProps) => {
       borderRadius={"12px"}
       w={w}
       h={h}
+      maxW={"390px"}
       onClick={onClick}
     >
       {children}
diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
index 5d8cded..cd3ddeb 100644
--- a/component/form/UserAgreementForm.tsx
+++ b/component/form/UserAgreementForm.tsx
@@ -1,5 +1,12 @@
-import { Box, ButtonGroup, Flex, Heading, RadioGroup } from "@chakra-ui/react";
-import React from "react";
+import {
+  Box,
+  ButtonGroup,
+  Checkbox,
+  Flex,
+  Heading,
+  VStack,
+} from "@chakra-ui/react";
+import React, { useState } from "react";
 import MainButton from "../button/MainButton";
 
 interface UserAgreementFormPropsType {
@@ -7,6 +14,10 @@ interface UserAgreementFormPropsType {
 }
 
 const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
+  const [checkedItems, setCheckedItems] = useState([false, false, false]);
+  const allChecked = checkedItems.every(Boolean);
+  const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
+
   return (
     <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
       <Box as="section">
@@ -15,13 +26,84 @@ const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
           color={"#000000"}
           fontSize={"24px"}
           fontWeight={"semibold"}
+          lineHeight={"35px"}
         >
-          서비스를 이용하시려면
+          식선생을 이용하시려면
           <br />
           약관 동의가 필요해요.
         </Heading>
       </Box>
 
+      <VStack alignItems={"flex-start"} spacing={5} padding={"30px 0"}>
+        <Flex
+          w={"346px"}
+          h={"48px"}
+          border={"1px solid #BCBCBC"}
+          borderRadius={"12px"}
+        >
+          <Checkbox
+            isChecked={allChecked}
+            isIndeterminate={isIndeterminate}
+            margin={"auto 20px"}
+            color={"#BCBCBC"}
+            onChange={(e) =>
+              setCheckedItems([
+                e.target.checked,
+                e.target.checked,
+                e.target.checked,
+              ])
+            }
+          >
+            모두 동의합니다.
+          </Checkbox>
+        </Flex>
+        <Checkbox
+          color={"#838383"}
+          isChecked={checkedItems[0]}
+          textDecor={"underline"}
+          margin={"auto 20px"}
+          onChange={(e) =>
+            setCheckedItems([
+              e.target.checked,
+              checkedItems[1],
+              checkedItems[2],
+            ])
+          }
+        >
+          (필수) 서비스 이용 약관 동의
+        </Checkbox>
+        <Checkbox
+          color={"#838383"}
+          margin={"auto 20px"}
+          textDecor={"underline"}
+          isChecked={checkedItems[1]}
+          onChange={(e) =>
+            setCheckedItems([
+              checkedItems[0],
+              e.target.checked,
+              checkedItems[2],
+            ])
+          }
+        >
+          (필수) 개인 정보 수집 및 이용 동의
+        </Checkbox>
+        <Checkbox
+          color={"#838383"}
+          textDecor={"underline"}
+          margin={"auto 20px"}
+          isChecked={checkedItems[2]}
+          onChange={(e) =>
+            setCheckedItems([
+              checkedItems[0],
+              checkedItems[1],
+              e.target.checked,
+            ])
+          }
+        >
+          (필수) 만 14세 이상입니다
+        </Checkbox>
+      </VStack>
+
       <ButtonGroup
         width={"90%"}
         pos={"fixed"}
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 3531524..59402b5 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -14,11 +14,17 @@ const Page = () => {
       <Progress
         bgColor={"#D9D9D9"}
         // colorScheme="black"
-        size="sm"
+        size="xs"
         isAnimated={true}
         value={progress}
       />
-      <Box width={"100%"} h={"100%"}>
+      <Box
+        width={"100%"}
+        h={"100%"}
+        maxW={"390px"}
+        padding={"70px 0px"}
+        margin={"0 auto"}
+      >
         {funnel === "userInfo" && (
           <UserInfoForm setFunnel={setFunnel} setProgress={setProgress} />
         )}

From d38061adb45509e21eabc29f01e8a7cf021a71fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=ED=98=84=EC=9A=B0?= <hw.choi@okestro.com>
Date: Mon, 11 Dec 2023 21:56:08 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat(form)=20:=20form=20layout=20=EA=B5=AC?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs:[#4,#5]
---
 component/Funnel/LoginFunnel.tsx     |   8 +-
 component/Funnel/MainFunnel.tsx      |   5 +-
 component/button/MainButton.tsx      |   3 +-
 component/form/UserAgreementForm.tsx |  11 +--
 component/form/UserInfoForm.tsx      | 126 +++++++++++++--------------
 component/form/UserPhysicForm.tsx    |  43 ++++++---
 src/app/page.tsx                     |   5 +-
 src/app/signup/page.tsx              |  16 ++--
 8 files changed, 121 insertions(+), 96 deletions(-)

diff --git a/component/Funnel/LoginFunnel.tsx b/component/Funnel/LoginFunnel.tsx
index cfa4d77..e23a926 100644
--- a/component/Funnel/LoginFunnel.tsx
+++ b/component/Funnel/LoginFunnel.tsx
@@ -16,13 +16,13 @@ const LoginFunnel = () => {
       />
 
       <ButtonGroup
-        width={"90%"}
+        width={"100%"}
         pos={"fixed"}
-        bottom={"50px"}
+        bottom={"30px"}
         margin={"0 auto"}
-        display={"flex"}
+        justifyContent={"center"}
+        alignItems={"center"}
         flexDir={"column"}
-        textAlign={"center"}
         gap={"10px"}
       >
         <MainButton w={"100%"} h={"52px"} onClick={() => {}}>
diff --git a/component/Funnel/MainFunnel.tsx b/component/Funnel/MainFunnel.tsx
index d1b92eb..cd97bc5 100644
--- a/component/Funnel/MainFunnel.tsx
+++ b/component/Funnel/MainFunnel.tsx
@@ -10,8 +10,6 @@ interface MainFunnelPropsType {
 }
 
 const MainFunnel = ({ setFunnel }: MainFunnelPropsType) => {
-  const router = useRouter();
-
   return (
     <>
       <Image
@@ -47,10 +45,11 @@ const MainFunnel = ({ setFunnel }: MainFunnelPropsType) => {
       </Box>
 
       <ButtonGroup
-        width={"90%"}
+        width={"100%"}
         pos={"fixed"}
         bottom={"30px"}
         margin={"0 auto"}
+        justifyContent={"center"}
       >
         <MainButton
           w={"100%"}
diff --git a/component/button/MainButton.tsx b/component/button/MainButton.tsx
index b99db25..5a550ae 100644
--- a/component/button/MainButton.tsx
+++ b/component/button/MainButton.tsx
@@ -1,7 +1,7 @@
 import { Button, ButtonProps } from "@chakra-ui/react";
 import React from "react";
 
-const MainButton = ({ children, w, h, onClick }: ButtonProps) => {
+const MainButton = ({ children, w, h, onClick, alignSelf }: ButtonProps) => {
   return (
     <Button
       bgColor={"#000000"}
@@ -11,6 +11,7 @@ const MainButton = ({ children, w, h, onClick }: ButtonProps) => {
       h={h}
       maxW={"390px"}
       onClick={onClick}
+      alignSelf={alignSelf}
     >
       {children}
     </Button>
diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
index cd3ddeb..f83c8ea 100644
--- a/component/form/UserAgreementForm.tsx
+++ b/component/form/UserAgreementForm.tsx
@@ -19,8 +19,8 @@ const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
   const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
 
   return (
-    <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
-      <Box as="section">
+    <>
+      <Box as="section" alignSelf={"flex-start"}>
         <Heading
           as={"h1"}
           color={"#000000"}
@@ -105,16 +105,17 @@ const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
       </VStack>
 
       <ButtonGroup
-        width={"90%"}
-        pos={"fixed"}
+        width={"100%"}
+        pos={"absolute"}
         bottom={"30px"}
         margin={"0 auto"}
+        justifyContent={"center"}
       >
         <MainButton w={"100%"} h={"52px"}>
           동의하고 시작하기
         </MainButton>
       </ButtonGroup>
-    </Flex>
+    </>
   );
 };
 
diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
index d2c50df..74dd30b 100644
--- a/component/form/UserInfoForm.tsx
+++ b/component/form/UserInfoForm.tsx
@@ -1,7 +1,7 @@
 "use client";
-import { useForm } from "react-hook-form";
 import {
   Box,
+  Button,
   ButtonGroup,
   Flex,
   FormControl,
@@ -12,7 +12,6 @@ import {
   useRadio,
   useRadioGroup,
 } from "@chakra-ui/react";
-import { useParams } from "next/navigation";
 import MainInput from "../input/MainInput";
 import MainButton from "../button/MainButton";
 
@@ -28,11 +27,11 @@ function RadioCard(props: any) {
       <Box
         {...checkbox}
         cursor="pointer"
-        borderWidth="1px"
-        borderRadius="md"
+        borderRadius={"12px"}
+        border={"1px solid #BCBCBC"}
         fontSize={"15px"}
         fontWeight={"semibold"}
-        boxShadow="md"
+        color={"#C6C6C6"}
         _checked={{
           bg: "#000000",
           color: "white",
@@ -64,65 +63,66 @@ const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
 
   return (
     <>
-      <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
-        <Box as="section">
-          <Text as={"h2"} color={"#787878"} fontSize={"17px"}>
-            반가워요!
-          </Text>
-          <Heading
-            as={"h1"}
-            color={"#000000"}
-            fontSize={"24px"}
-            fontWeight={"semibold"}
-          >
-            기본정보를 입력해주세요
-          </Heading>
-        </Box>
-        <HStack as={"form"} flexDir={"column"} w={"100%"} spacing={5}>
-          <FormControl isRequired>
-            <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
-              이름
-            </FormLabel>
-            <MainInput
-              placeholder="이름을 입력해주세요."
-              w={"100%"}
-              h={"48px"}
-            />
-          </FormControl>
-          <FormControl>
-            <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
-              성별
-            </FormLabel>
-            <HStack {...group}>
-              {options.map((value) => {
-                const radio = getRadioProps({ value });
-                return (
-                  <RadioCard key={value} {...radio}>
-                    {value}
-                  </RadioCard>
-                );
-              })}
-            </HStack>
-          </FormControl>
-        </HStack>
-        <ButtonGroup
-          width={"90%"}
-          pos={"fixed"}
-          bottom={"30px"}
-          margin={"0 auto"}
+      <Box as="section" alignSelf={"flex-start"}>
+        <Heading
+          as={"h1"}
+          color={"#000000"}
+          fontSize={"24px"}
+          fontWeight={"semibold"}
         >
-          <MainButton
-            w={"100%"}
-            h={"52px"}
-            onClick={() => {
-              setFunnel("userPhysics");
-              setProgress((oldState) => oldState + 33.3);
-            }}
-          >
-            다음으로
-          </MainButton>
-        </ButtonGroup>
-      </Flex>
+          기본정보를 입력해주세요
+        </Heading>
+        <Text as={"h2"} color={"#787878"} fontSize={"17px"} lineHeight={2}>
+          성별에 맞는 대사량기준으로 알려드려요
+        </Text>
+      </Box>
+      <HStack
+        as={"form"}
+        flexDir={"column"}
+        w={"100%"}
+        spacing={5}
+        padding={"30px 0"}
+      >
+        <FormControl>
+          <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
+            이름
+          </FormLabel>
+          <MainInput placeholder="이름을 입력해주세요." w={"100%"} h={"48px"} />
+        </FormControl>
+        <FormControl>
+          <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
+            성별
+          </FormLabel>
+          <HStack {...group}>
+            {options.map((value) => {
+              const radio = getRadioProps({ value });
+              return (
+                <RadioCard key={value} {...radio}>
+                  {value}
+                </RadioCard>
+              );
+            })}
+          </HStack>
+        </FormControl>
+      </HStack>
+      <ButtonGroup
+        width={"100%"}
+        pos={"absolute"}
+        bottom={"30px"}
+        margin={"0 auto"}
+        justifyContent={"center"}
+      >
+        <MainButton
+          w={"100%"}
+          h={"52px"}
+          onClick={() => {
+            setFunnel("userPhysics");
+            setProgress((oldState) => oldState + 33.3);
+          }}
+        >
+          다음으로
+        </MainButton>
+      </ButtonGroup>
     </>
   );
 };
diff --git a/component/form/UserPhysicForm.tsx b/component/form/UserPhysicForm.tsx
index cd3a6e5..8ea3514 100644
--- a/component/form/UserPhysicForm.tsx
+++ b/component/form/UserPhysicForm.tsx
@@ -3,7 +3,6 @@ import MainButton from "../button/MainButton";
 import {
   Box,
   ButtonGroup,
-  Flex,
   FormControl,
   FormLabel,
   HStack,
@@ -25,11 +24,8 @@ const UserPhysicForm = ({
   setProgress,
 }: UserPhysicsFormPropsType) => {
   return (
-    <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
-      <Box as="section">
-        <Text as={"h2"} color={"#787878"} fontSize={"17px"}>
-          거의 다 왔어요!
-        </Text>
+    <>
+      <Box as="section" alignSelf={"flex-start"}>
         <Heading
           as={"h1"}
           color={"#000000"}
@@ -38,9 +34,18 @@ const UserPhysicForm = ({
         >
           신체정보를 입력해주세요
         </Heading>
+        <Text as={"h2"} color={"#787878"} fontSize={"17px"} lineHeight={2}>
+          개인 맞춤으로 알려드려요
+        </Text>
       </Box>
-      <HStack as={"form"} flexDir={"column"} w={"100%"} spacing={5}>
-        <FormControl isRequired>
+      <HStack
+        as={"form"}
+        flexDir={"column"}
+        w={"100%"}
+        spacing={5}
+        padding={"30px 0"}
+      >
+        <FormControl>
           <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
             나이
           </FormLabel>
@@ -55,7 +60,7 @@ const UserPhysicForm = ({
           </InputGroup>
         </FormControl>
 
-        <FormControl isRequired>
+        <FormControl>
           <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
             키
           </FormLabel>
@@ -66,7 +71,7 @@ const UserPhysicForm = ({
             </InputRightElement>
           </InputGroup>
         </FormControl>
-        <FormControl isRequired>
+        <FormControl>
           <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
             체중
           </FormLabel>
@@ -77,12 +82,24 @@ const UserPhysicForm = ({
             </InputRightElement>
           </InputGroup>
         </FormControl>
+        <FormControl>
+          <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
+            목표 체중
+          </FormLabel>
+          <InputGroup>
+            <Input type="number" h={"48px"} focusBorderColor={"black"} />
+            <InputRightElement color={"#C6C6C6"} h={"48px"}>
+              kg
+            </InputRightElement>
+          </InputGroup>
+        </FormControl>
       </HStack>
       <ButtonGroup
-        width={"90%"}
-        pos={"fixed"}
+        width={"100%"}
+        pos={"absolute"}
         bottom={"30px"}
         margin={"0 auto"}
+        justifyContent={"center"}
       >
         <MainButton
           w={"100%"}
@@ -95,7 +112,7 @@ const UserPhysicForm = ({
           다음으로
         </MainButton>
       </ButtonGroup>
-    </Flex>
+    </>
   );
 };
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index dcd5c3a..d45a21c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -10,8 +10,11 @@ export default function Home() {
     <Flex
       as={"main"}
       flexDir={"column"}
-      w={"90%"}
+      w={"100%"}
+      pos={"relative"}
+      maxW={"390px"}
       height={"100vh"}
+      padding={"60px 22px"}
       margin={"0 auto"}
       justifyContent={"center"}
       alignItems={"center"}
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index 59402b5..b3d0e10 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import UserInfoForm from "../../../component/form/UserInfoForm";
-import { Box, Progress, extendTheme } from "@chakra-ui/react";
+import { Flex, Progress } from "@chakra-ui/react";
 import { useFunnel } from "../../../utils/hooks/useFunnel";
 import UserPhysicForm from "../../../component/form/UserPhysicForm";
 import UserAgreementForm from "../../../component/form/UserAgreementForm";
@@ -18,12 +18,16 @@ const Page = () => {
         isAnimated={true}
         value={progress}
       />
-      <Box
-        width={"100%"}
-        h={"100%"}
+      <Flex
+        as={"main"}
+        flexDir={"column"}
+        w={"100%"}
+        h={"99vh"}
+        pos={"relative"}
         maxW={"390px"}
-        padding={"70px 0px"}
+        padding={"60px 22px"}
         margin={"0 auto"}
+        alignItems={"center"}
       >
         {funnel === "userInfo" && (
           <UserInfoForm setFunnel={setFunnel} setProgress={setProgress} />
@@ -34,7 +38,7 @@ const Page = () => {
         {funnel === "userAgreement" && (
           <UserAgreementForm setFunnel={setFunnel} />
         )}
-      </Box>
+      </Flex>
     </>
   );
 };

From f9ff02ab9bafe0290928882e8a771610e8841ecc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=ED=98=84=EC=9A=B0?= <hw.choi@okestro.com>
Date: Mon, 11 Dec 2023 22:02:57 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat(button)=20:=20=EC=95=BD=EA=B4=80?=
 =?UTF-8?q?=EB=8F=99=EC=9D=98=20=EB=B2=84=ED=8A=BC=20=EC=B2=B4=ED=81=AC?=
 =?UTF-8?q?=EC=8B=9C=20=EB=B2=84=ED=8A=BC=20=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs:[#4,#5]
---
 component/button/MainButton.tsx      | 10 +++++++++-
 component/form/UserAgreementForm.tsx |  7 ++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/component/button/MainButton.tsx b/component/button/MainButton.tsx
index 5a550ae..42d8aee 100644
--- a/component/button/MainButton.tsx
+++ b/component/button/MainButton.tsx
@@ -1,7 +1,14 @@
 import { Button, ButtonProps } from "@chakra-ui/react";
 import React from "react";
 
-const MainButton = ({ children, w, h, onClick, alignSelf }: ButtonProps) => {
+const MainButton = ({
+  children,
+  w,
+  h,
+  onClick,
+  alignSelf,
+  isDisabled,
+}: ButtonProps) => {
   return (
     <Button
       bgColor={"#000000"}
@@ -12,6 +19,7 @@ const MainButton = ({ children, w, h, onClick, alignSelf }: ButtonProps) => {
       maxW={"390px"}
       onClick={onClick}
       alignSelf={alignSelf}
+      isDisabled={isDisabled}
     >
       {children}
     </Button>
diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
index f83c8ea..e53b4a0 100644
--- a/component/form/UserAgreementForm.tsx
+++ b/component/form/UserAgreementForm.tsx
@@ -18,6 +18,7 @@ const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
   const allChecked = checkedItems.every(Boolean);
   const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
 
+  console.log();
   return (
     <>
       <Box as="section" alignSelf={"flex-start"}>
@@ -111,7 +112,11 @@ const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
         margin={"0 auto"}
         justifyContent={"center"}
       >
-        <MainButton w={"100%"} h={"52px"}>
+        <MainButton
+          w={"100%"}
+          h={"52px"}
+          isDisabled={checkedItems.filter((ele) => ele).length !== 3}
+        >
           동의하고 시작하기
         </MainButton>
       </ButtonGroup>

From a6988f0c560362a8db31dc329936905c84cd5fc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=ED=98=84=EC=9A=B0?= <hw.choi@okestro.com>
Date: Mon, 11 Dec 2023 22:56:39 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat(form)=20:=20=ED=9A=8C=EC=9B=90?=
 =?UTF-8?q?=EA=B0=80=EC=9E=85=20form=20=EC=9C=A0=ED=9A=A8=EC=84=B1=20?=
 =?UTF-8?q?=EA=B2=80=EC=82=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs:[#4,#5]
---
 component/button/MainButton.tsx   |  2 +
 component/form/UserInfoForm.tsx   | 60 +++++++++++++++----------
 component/form/UserPhysicForm.tsx | 73 +++++++++++++++++++++----------
 component/input/MainInput.tsx     |  8 +++-
 src/app/signup/page.tsx           |  3 +-
 5 files changed, 99 insertions(+), 47 deletions(-)

diff --git a/component/button/MainButton.tsx b/component/button/MainButton.tsx
index 42d8aee..cae3513 100644
--- a/component/button/MainButton.tsx
+++ b/component/button/MainButton.tsx
@@ -8,6 +8,7 @@ const MainButton = ({
   onClick,
   alignSelf,
   isDisabled,
+  type,
 }: ButtonProps) => {
   return (
     <Button
@@ -20,6 +21,7 @@ const MainButton = ({
       onClick={onClick}
       alignSelf={alignSelf}
       isDisabled={isDisabled}
+      type={type}
     >
       {children}
     </Button>
diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
index 74dd30b..590fcc8 100644
--- a/component/form/UserInfoForm.tsx
+++ b/component/form/UserInfoForm.tsx
@@ -1,9 +1,7 @@
 "use client";
 import {
   Box,
-  Button,
   ButtonGroup,
-  Flex,
   FormControl,
   FormLabel,
   HStack,
@@ -14,6 +12,7 @@ import {
 } from "@chakra-ui/react";
 import MainInput from "../input/MainInput";
 import MainButton from "../button/MainButton";
+import { SubmitHandler, useForm } from "react-hook-form";
 
 function RadioCard(props: any) {
   const { getInputProps, getRadioProps } = useRadio(props);
@@ -54,11 +53,22 @@ interface UserInfoFormPropsType {
 const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
   const options = ["남성", "여성"];
 
-  const { getRootProps, getRadioProps } = useRadioGroup({
+  const { getRootProps, getRadioProps, value } = useRadioGroup({
     name: "gender",
-    onChange: console.log,
   });
 
+  interface SignUpFormType {
+    userName: string;
+  }
+
+  const { handleSubmit, register } = useForm<SignUpFormType>();
+
+  const onSubmit: SubmitHandler<SignUpFormType> = (data) => {
+    console.log(data, value);
+    setFunnel("userPhysics");
+    setProgress((oldState) => oldState + 33.3);
+  };
+
   const group = getRootProps();
 
   return (
@@ -78,6 +88,7 @@ const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
       </Box>
       <HStack
         as={"form"}
+        onSubmit={handleSubmit(onSubmit)}
         flexDir={"column"}
         w={"100%"}
         spacing={5}
@@ -87,7 +98,12 @@ const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
           <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
             이름
           </FormLabel>
-          <MainInput placeholder="이름을 입력해주세요." w={"100%"} h={"48px"} />
+          <MainInput
+            register={{ ...register("userName", { required: true }) }}
+            placeholder="이름을 입력해주세요."
+            w={"100%"}
+            h={"48px"}
+          />
         </FormControl>
         <FormControl>
           <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
@@ -104,25 +120,23 @@ const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
             })}
           </HStack>
         </FormControl>
-      </HStack>
-      <ButtonGroup
-        width={"100%"}
-        pos={"absolute"}
-        bottom={"30px"}
-        margin={"0 auto"}
-        justifyContent={"center"}
-      >
-        <MainButton
-          w={"100%"}
-          h={"52px"}
-          onClick={() => {
-            setFunnel("userPhysics");
-            setProgress((oldState) => oldState + 33.3);
-          }}
+        <ButtonGroup
+          width={"100%"}
+          pos={"absolute"}
+          bottom={"30px"}
+          margin={"0 auto"}
+          justifyContent={"center"}
         >
-          다음으로
-        </MainButton>
-      </ButtonGroup>
+          <MainButton
+            w={"100%"}
+            h={"52px"}
+            type="submit"
+            isDisabled={value === ""}
+          >
+            다음으로
+          </MainButton>
+        </ButtonGroup>
+      </HStack>
     </>
   );
 };
diff --git a/component/form/UserPhysicForm.tsx b/component/form/UserPhysicForm.tsx
index 8ea3514..2182c3c 100644
--- a/component/form/UserPhysicForm.tsx
+++ b/component/form/UserPhysicForm.tsx
@@ -13,6 +13,7 @@ import {
   InputRightElement,
   Text,
 } from "@chakra-ui/react";
+import { SubmitHandler, useForm } from "react-hook-form";
 
 interface UserPhysicsFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
@@ -23,6 +24,20 @@ const UserPhysicForm = ({
   setFunnel,
   setProgress,
 }: UserPhysicsFormPropsType) => {
+  interface PhysicsFormType {
+    age: number;
+    height: number;
+    weight: number;
+    targetWeight: number;
+  }
+
+  const { handleSubmit, register } = useForm<PhysicsFormType>();
+
+  const onSubmit: SubmitHandler<PhysicsFormType> = (data) => {
+    console.log(data);
+    setFunnel("userAgreement");
+    setProgress((oldState) => oldState + 33.3);
+  };
   return (
     <>
       <Box as="section" alignSelf={"flex-start"}>
@@ -40,6 +55,7 @@ const UserPhysicForm = ({
       </Box>
       <HStack
         as={"form"}
+        onSubmit={handleSubmit(onSubmit)}
         flexDir={"column"}
         w={"100%"}
         spacing={5}
@@ -53,7 +69,12 @@ const UserPhysicForm = ({
             <InputLeftElement color={"#C6C6C6"} h={"48px"}>
               만
             </InputLeftElement>
-            <Input type="number" h={"48px"} focusBorderColor={"black"} />
+            <Input
+              {...register("age", { required: true })}
+              type="number"
+              h={"48px"}
+              focusBorderColor={"black"}
+            />
             <InputRightElement color={"#C6C6C6"} h={"48px"}>
               세
             </InputRightElement>
@@ -65,7 +86,12 @@ const UserPhysicForm = ({
             키
           </FormLabel>
           <InputGroup>
-            <Input type="number" h={"48px"} focusBorderColor={"black"} />
+            <Input
+              {...register("height", { required: true })}
+              type="number"
+              h={"48px"}
+              focusBorderColor={"black"}
+            />
             <InputRightElement color={"#C6C6C6"} h={"48px"}>
               cm
             </InputRightElement>
@@ -76,7 +102,12 @@ const UserPhysicForm = ({
             체중
           </FormLabel>
           <InputGroup>
-            <Input type="number" h={"48px"} focusBorderColor={"black"} />
+            <Input
+              {...register("weight", { required: true })}
+              type="number"
+              h={"48px"}
+              focusBorderColor={"black"}
+            />
             <InputRightElement color={"#C6C6C6"} h={"48px"}>
               kg
             </InputRightElement>
@@ -87,31 +118,29 @@ const UserPhysicForm = ({
             목표 체중
           </FormLabel>
           <InputGroup>
-            <Input type="number" h={"48px"} focusBorderColor={"black"} />
+            <Input
+              {...register("targetWeight", { required: true })}
+              type="number"
+              h={"48px"}
+              focusBorderColor={"black"}
+            />
             <InputRightElement color={"#C6C6C6"} h={"48px"}>
               kg
             </InputRightElement>
           </InputGroup>
         </FormControl>
-      </HStack>
-      <ButtonGroup
-        width={"100%"}
-        pos={"absolute"}
-        bottom={"30px"}
-        margin={"0 auto"}
-        justifyContent={"center"}
-      >
-        <MainButton
-          w={"100%"}
-          h={"52px"}
-          onClick={() => {
-            setFunnel("userAgreement");
-            setProgress((oldState) => oldState + 33.3);
-          }}
+        <ButtonGroup
+          width={"100%"}
+          pos={"absolute"}
+          bottom={"30px"}
+          margin={"0 auto"}
+          justifyContent={"center"}
         >
-          다음으로
-        </MainButton>
-      </ButtonGroup>
+          <MainButton w={"100%"} h={"52px"} type="submit">
+            다음으로
+          </MainButton>
+        </ButtonGroup>
+      </HStack>
     </>
   );
 };
diff --git a/component/input/MainInput.tsx b/component/input/MainInput.tsx
index 3ebd0db..c5cc238 100644
--- a/component/input/MainInput.tsx
+++ b/component/input/MainInput.tsx
@@ -1,7 +1,12 @@
 import { Input, InputProps, border } from "@chakra-ui/react";
 import React from "react";
+import { UseFormRegisterReturn } from "react-hook-form";
 
-const MainInput = ({ h, w, placeholder }: InputProps) => {
+interface MainInputPropsType extends InputProps {
+  register: UseFormRegisterReturn;
+}
+
+const MainInput = ({ h, w, placeholder, register }: MainInputPropsType) => {
   return (
     <Input
       h={h}
@@ -10,6 +15,7 @@ const MainInput = ({ h, w, placeholder }: InputProps) => {
       borderRadius={"12px"}
       placeholder={placeholder}
       focusBorderColor={"black"}
+      {...register}
     />
   );
 };
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index b3d0e10..e5cacab 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -5,10 +5,12 @@ import { Flex, Progress } from "@chakra-ui/react";
 import { useFunnel } from "../../../utils/hooks/useFunnel";
 import UserPhysicForm from "../../../component/form/UserPhysicForm";
 import UserAgreementForm from "../../../component/form/UserAgreementForm";
+import { SubmitHandler, useForm } from "react-hook-form";
 
 const Page = () => {
   const [progress, setProgress] = useState<number>(33.3);
   const { funnel, setFunnel } = useFunnel("userInfo");
+
   return (
     <>
       <Progress
@@ -19,7 +21,6 @@ const Page = () => {
         value={progress}
       />
       <Flex
-        as={"main"}
         flexDir={"column"}
         w={"100%"}
         h={"99vh"}