feat(funnel) : useFunnel hook 사용

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

Hide file tree

Showing 8 changed files with 61 additions and 25 deletions.
diff --git a/component/button/MainButton.tsx b/component/button/MainButton.tsx
@@ -1,14 +1,15 @@
 import { Button, ButtonProps } from "@chakra-ui/react";
 import React from "react";
 
-const MainButton = ({ children, w, h }: ButtonProps) => {
+const MainButton = ({ children, w, h, onClick }: ButtonProps) => {
   return (
     <Button
       bgColor={"#000000"}
       textColor={"white"}
       borderRadius={"12px"}
       w={w}
       h={h}
+      onClick={onClick}
     >
       {children}
     </Button>

diff --git a/component/form/UserInfoForm.tsx b/component/form/UserInfoForm.tsx
@@ -48,7 +48,11 @@ function RadioCard(props: any) {
   );
 }
 
-const UserInfoForm = () => {
+interface UserInfoFormPropsType {
+  setFunnel: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const UserInfoForm = ({ setFunnel }: UserInfoFormPropsType) => {
   const params = useParams();
 
   const options = ["남성", "여성"];
@@ -76,7 +80,7 @@ const UserInfoForm = () => {
             기본정보를 입력해주세요
           </Heading>
         </Box>
-        <Flex as={"form"} flexDir={"column"} w={"100%"}>
+        <HStack as={"form"} flexDir={"column"} w={"100%"} spacing={5}>
           <FormControl isRequired>
             <FormLabel fontSize={"15px"} color={"#5C5C5C"}>
               이름
@@ -98,12 +102,21 @@ const UserInfoForm = () => {
               })}
             </HStack>
           </FormControl>
-          <ButtonGroup>
-            <MainButton w={"100%"} h={"52px"}>
-              다음으로
-            </MainButton>
-          </ButtonGroup>
-        </Flex>
+        </HStack>
+        <ButtonGroup
+          width={"90%"}
+          pos={"fixed"}
+          bottom={"30px"}
+          margin={"0 auto"}
+        >
+          <MainButton
+            w={"100%"}
+            h={"52px"}
+            onClick={() => setFunnel("userPhysics")}
+          >
+            다음으로
+          </MainButton>
+        </ButtonGroup>
       </Flex>
     </>
   );

diff --git a/component/form/UserPhysicForm.tsx b/component/form/UserPhysicForm.tsx
@@ -3,7 +3,11 @@ import React from "react";
 import MainInput from "../input/MainInput";
 import MainButton from "../button/MainButton";
 
-const UserPhysicForm = () => {
+interface UserPhysicsFormPropsType {
+  setFunnel: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const UserPhysicForm = ({ setFunnel }: UserPhysicsFormPropsType) => {
   return (
     <Flex as={"form"} flexDir={"column"}>
       <MainInput w={"100%"} />

diff --git a/component/progressBar/ProgressBar.tsx b/component/progressBar/ProgressBar.tsx
@@ -0,0 +1,12 @@
+"use client";
+import React from "react";
+
+const ProgressBar = () => {
+  return (
+    <>
+      <Progress colorScheme="green" size="sm" value={progress} />
+    </>
+  );
+};
+
+export default ProgressBar;
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,7 +1,6 @@
 html,
 body {
-  max-width: 100vw;
-  overflow-x: hidden;
+  height: 100%;
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,11 +1,7 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
 import { ChakraLayout } from "@/app/ChakraLayout";
 import QueryLayout from "./QueryLayout";
 
-const inter = Inter({ subsets: ["latin"] });
-
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -17,8 +13,8 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
+    <html lang="en" suppressHydrationWarning>
+      <body suppressHydrationWarning={true}>
         <QueryLayout>
           <ChakraLayout>{children}</ChakraLayout>
         </QueryLayout>

diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx
@@ -1,16 +1,27 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import UserInfoForm from "../../../component/form/UserInfoForm";
-import { Box } from "@chakra-ui/react";
+import { Box, Progress, extendTheme } from "@chakra-ui/react";
+import { useFunnel } from "../../../utils/hooks/useFunnel";
+import UserPhysicForm from "../../../component/form/UserPhysicForm";
 
-const page = () => {
+const Page = () => {
+  const [progress, setProgress] = useState<number>(30);
+  const { funnel, setFunnel } = useFunnel();
   return (
     <>
-      <Box width={"100%"}>
-        <UserInfoForm />
+      <Progress
+        bgColor={"#D9D9D9"}
+        // colorScheme="black"
+        size="sm"
+        value={progress}
+      />
+      <Box width={"100%"} h={"100%"}>
+        {funnel === "userInfo" && <UserInfoForm setFunnel={setFunnel} />}
+        {funnel === "userPhysics" && <UserPhysicForm setFunnel={setFunnel} />}
       </Box>
     </>
   );
 };
 
-export default page;
+export default Page;
diff --git 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();
+  const [funnel, setFunnel] = useState("userInfo");
 
   return { funnel, setFunnel };
 };