feat(progress) : progressbar 로직

Refs:[#4,#5]
potenday-project · Dec 10, 2023 · 5de641c · 5de641c
1 parent e67db80
commit 5de641c
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 15 deletions.
diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
@@ -1,10 +1,37 @@
-import { Flex, RadioGroup } from "@chakra-ui/react";
+import { Box, ButtonGroup, Flex, Heading, RadioGroup } from "@chakra-ui/react";
 import React from "react";
+import MainButton from "../button/MainButton";
 
-const UserAgreementForm = () => {
+interface UserAgreementFormPropsType {
+  setFunnel: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const UserAgreementForm = ({ setFunnel }: UserAgreementFormPropsType) => {
   return (
-    <Flex as={"section"}>
-      <RadioGroup></RadioGroup>
+    <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
+      <Box as="section">
+        <Heading
+          as={"h1"}
+          color={"#000000"}
+          fontSize={"24px"}
+          fontWeight={"semibold"}
+        >
+          서비스를 이용하시려면
+          <br />
+          약관 동의가 필요해요.
+        </Heading>
+      </Box>
+
+      <ButtonGroup
+        width={"90%"}
+        pos={"fixed"}
+        bottom={"30px"}
+        margin={"0 auto"}
+      >
+        <MainButton w={"100%"} h={"52px"}>
+          동의하고 시작하기
+        </MainButton>
+      </ButtonGroup>
     </Flex>
   );
 };

diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
@@ -38,9 +38,6 @@ function RadioCard(props: any) {
           color: "white",
           borderColor: "#000000",
         }}
-        // _focus={{
-        //   boxShadow: "outline",
-        // }}
         px={5}
         py={3}
       >
@@ -52,9 +49,10 @@ function RadioCard(props: any) {
 
 interface UserInfoFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const UserInfoForm = ({ setFunnel }: UserInfoFormPropsType) => {
+const UserInfoForm = ({ setFunnel, setProgress }: UserInfoFormPropsType) => {
   const params = useParams();
 
   const options = ["남성", "여성"];
@@ -118,7 +116,10 @@ const UserInfoForm = ({ setFunnel }: UserInfoFormPropsType) => {
           <MainButton
             w={"100%"}
             h={"52px"}
-            onClick={() => setFunnel("userPhysics")}
+            onClick={() => {
+              setFunnel("userPhysics");
+              setProgress((oldState) => oldState + 33.3);
+            }}
           >
             다음으로
           </MainButton>

diff --git a/component/form/UserPhysicForm.tsx b/component/form/UserPhysicForm.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import MainInput from "../input/MainInput";
 import MainButton from "../button/MainButton";
 import {
   Box,
@@ -18,9 +17,13 @@ import {
 
 interface UserPhysicsFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;
+  setProgress: React.Dispatch<React.SetStateAction<number>>;
 }
 
-const UserPhysicForm = ({ setFunnel }: UserPhysicsFormPropsType) => {
+const UserPhysicForm = ({
+  setFunnel,
+  setProgress,
+}: UserPhysicsFormPropsType) => {
   return (
     <Flex flexDir={"column"} w={"90%"} margin={"0 auto"}>
       <Box as="section">
@@ -84,7 +87,10 @@ const UserPhysicForm = ({ setFunnel }: UserPhysicsFormPropsType) => {
         <MainButton
           w={"100%"}
           h={"52px"}
-          onClick={() => setFunnel("userPhysics")}
+          onClick={() => {
+            setFunnel("userAgreement");
+            setProgress((oldState) => oldState + 33.3);
+          }}
         >
           다음으로
         </MainButton>

diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
@@ -4,21 +4,30 @@ import UserInfoForm from "../../../component/form/UserInfoForm";
 import { Box, Progress, extendTheme } from "@chakra-ui/react";
 import { useFunnel } from "../../../utils/hooks/useFunnel";
 import UserPhysicForm from "../../../component/form/UserPhysicForm";
+import UserAgreementForm from "../../../component/form/UserAgreementForm";
 
 const Page = () => {
-  const [progress, setProgress] = useState<number>(30);
+  const [progress, setProgress] = useState<number>(33.3);
   const { funnel, setFunnel } = useFunnel();
   return (
     <>
       <Progress
         bgColor={"#D9D9D9"}
         // colorScheme="black"
         size="sm"
+        isAnimated={true}
         value={progress}
       />
       <Box width={"100%"} h={"100%"}>
-        {funnel === "userInfo" && <UserInfoForm setFunnel={setFunnel} />}
-        {funnel === "userPhysics" && <UserPhysicForm setFunnel={setFunnel} />}
+        {funnel === "userInfo" && (
+          <UserInfoForm setFunnel={setFunnel} setProgress={setProgress} />
+        )}
+        {funnel === "userPhysics" && (
+          <UserPhysicForm setFunnel={setFunnel} setProgress={setProgress} />
+        )}
+        {funnel === "userAgreement" && (
+          <UserAgreementForm setFunnel={setFunnel} />
+        )}
       </Box>
     </>
   );