feat(login): login퍼널

Refs:[#13, #14]
chhw130 · Dec 11, 2023 · 024bcf6 · 024bcf6
1 parent 4a1fe6e
commit 024bcf6
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 56 deletions.
diff --git a/component/Funnel/LoginFunnel.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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 };
 };