fix(funnel) : 페이지 퍼널 순서 변경

Refs:[#4,#5]
chhw130 · Dec 12, 2023 · 12e6771 · 12e6771
1 parent a6988f0
commit 12e6771
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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>
     </>
   );