From 12e6771136e7ac3df243b85d3db69d8d1261f641 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: Tue, 12 Dec 2023 19:15:27 +0900
Subject: [PATCH] =?UTF-8?q?fix(funnel)=20:=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=20=ED=8D=BC=EB=84=90=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refs:[#4,#5]
---
 component/form/UserAgreementForm.tsx | 13 ++++++++---
 component/form/UserInfoForm.tsx      |  9 +++++++-
 src/app/signup/page.tsx              | 32 +++++++++++++++++++++++-----
 3 files changed, 45 insertions(+), 9 deletions(-)

diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
index e53b4a0..d8c98f7 100644
--- a/component/form/UserAgreementForm.tsx
+++ b/component/form/UserAgreementForm.tsx
@@ -11,14 +11,17 @@ import MainButton from "../button/MainButton";
 
 interface UserAgreementFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
+const UserAgreementForm = ({
+  setFunnel,
+  setProgress,
+}: UserAgreementFormPropsType) => {
   const [checkedItems, setCheckedItems] = useState([false, false, false]);
   const allChecked = checkedItems.every(Boolean);
   const isIndeterminate = checkedItems.some(Boolean) && !allChecked;
 
-  console.log();
   return (
     <>
       <Box as="section" alignSelf={"flex-start"}>
@@ -116,8 +119,12 @@ const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
           w={"100%"}
           h={"52px"}
           isDisabled={checkedItems.filter((ele) => ele).length !== 3}
+          onClick={() => {
+            setFunnel("userInfo");
+            setProgress((oldState) => oldState + 33.3);
+          }}
         >
-          동의하고 시작하기
+          다음으로
         </MainButton>
       </ButtonGroup>
     </>
diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
index 590fcc8..ba9320a 100644
--- a/component/form/UserInfoForm.tsx
+++ b/component/form/UserInfoForm.tsx
@@ -13,6 +13,7 @@ import {
 import MainInput from "../input/MainInput";
 import MainButton from "../button/MainButton";
 import { SubmitHandler, useForm } from "react-hook-form";
+import { UserInfoType } from "@/app/signup/page";
 
 function RadioCard(props: any) {
   const { getInputProps, getRadioProps } = useRadio(props);
@@ -48,9 +49,14 @@ function RadioCard(props: any) {
 interface UserInfoFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
   setProgress: React.Dispatch<React.SetStateAction<number>>;
+  setUserInfo: React.Dispatch<React.SetStateAction<UserInfoType>>;
 }
 
-const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
+const UserInfoForm = ({
+  setFunnel,
+  setProgress,
+  setUserInfo,
+}: UserInfoFormPropsType) => {
   const options = ["남성", "여성"];
 
   const { getRootProps, getRadioProps, value } = useRadioGroup({
@@ -65,6 +71,7 @@ const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
 
   const onSubmit: SubmitHandler<SignUpFormType> = (data) => {
     console.log(data, value);
+
     setFunnel("userPhysics");
     setProgress((oldState) => oldState + 33.3);
   };
diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
index e5cacab..ea51706 100644
--- a/src/app/signup/page.tsx
+++ b/src/app/signup/page.tsx
@@ -7,9 +7,26 @@ import UserPhysicForm from "../../../component/form/UserPhysicForm";
 import UserAgreementForm from "../../../component/form/UserAgreementForm";
 import { SubmitHandler, useForm } from "react-hook-form";
 
+export interface UserInfoType {
+  userName: string;
+  gender: string;
+  age: number;
+  height: number;
+  weight: number;
+  targetWeight: number;
+}
+
 const Page = () => {
   const [progress, setProgress] = useState<number>(33.3);
-  const { funnel, setFunnel } = useFunnel("userInfo");
+  const [userInfo, setUserInfo] = useState<UserInfoType>({
+    userName: "",
+    gender: "",
+    age: 0,
+    height: 0,
+    weight: 0,
+    targetWeight: 0,
+  });
+  const { funnel, setFunnel } = useFunnel("userAgreement");
 
   return (
     <>
@@ -20,6 +37,7 @@ const Page = () => {
         isAnimated={true}
         value={progress}
       />
+
       <Flex
         flexDir={"column"}
         w={"100%"}
@@ -30,15 +48,19 @@ const Page = () => {
         margin={"0 auto"}
         alignItems={"center"}
       >
+        {funnel === "userAgreement" && (
+          <UserAgreementForm setFunnel={setFunnel} setProgress={setProgress} />
+        )}
         {funnel === "userInfo" && (
-          <UserInfoForm setFunnel={setFunnel} setProgress={setProgress} />
+          <UserInfoForm
+            setFunnel={setFunnel}
+            setProgress={setProgress}
+            setUserInfo={setUserInfo}
+          />
         )}
         {funnel === "userPhysics" && (
           <UserPhysicForm setFunnel={setFunnel} setProgress={setProgress} />
         )}
-        {funnel === "userAgreement" && (
-          <UserAgreementForm setFunnel={setFunnel} />
-        )}
       </Flex>
     </>
   );