Merge pull request #14 from chhw130/dev

PR : mainPage constructure
potenday-project · Dec 14, 2023 · 44efc7d · 44efc7d
2 parents 2b00da1 + 1fa60ec
commit 44efc7d
Show file tree

Hide file tree

Showing 13 changed files with 320 additions and 135 deletions.
diff --git a/component/Funnel/LoginFunnel.tsx b/component/Funnel/LoginFunnel.tsx
@@ -1,11 +1,21 @@
 "use client";
-import { ButtonGroup, Text } from "@chakra-ui/react";
-import MainButton from "../button/MainButton";
+import { Box, ButtonGroup, Text } from "@chakra-ui/react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
+import KaKaoButtonIcon from "../icon/KaKaoButtonIcon";
 
 const LoginFunnel = () => {
   const router = useRouter();
+
+  const Rest_api_key = "536cb646ce60d71102dc92d2b7845c8d"; //REST API KEY
+  const redirect_uri = "http://localhost:3000/signup"; //Redirect URI
+  // oauth 요청 URL
+  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${Rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`;
+
+  const signUpKakaoHandler = () => {
+    window.location.href = kakaoURL;
+  };
+
   return (
     <>
       <Image
@@ -25,9 +35,10 @@ const LoginFunnel = () => {
         flexDir={"column"}
         gap={"10px"}
       >
-        <MainButton w={"100%"} h={"52px"} onClick={() => {}}>
-          다음으로
-        </MainButton>
+        <Box onClick={() => signUpKakaoHandler()} cursor={"pointer"}>
+          <KaKaoButtonIcon />
+        </Box>
+
         <Text
           as={"u"}
           fontSize={"17px"}

diff --git a/component/card/ChattingRoom.tsx b/component/card/ChattingRoom.tsx
@@ -1,6 +1,5 @@
 import { Divider, Flex, HStack, Heading, Text, VStack } from "@chakra-ui/react";
 import ChattingMsgCard from "../card/ChattingMsgCard";
-import UserChattingMsgCard from "./UserChattingMsgCard";
 import DietChattingMsgCart from "./DietChattingMsgCard";
 import ChattingInput from "../input/ChattingInput";
 import HealthIcon from "../icon/HealthIcon";
@@ -11,30 +10,20 @@ const ChattingRoom = () => {
       <Flex
         w={"100%"}
         bgColor={"#FFFFFF"}
-        h={"80%"}
+        h={"85%"}
+        maxH={"1150px"}
+        minH={"300px"}
         borderRadius={"12px 12px 0 0"}
         position={"absolute"}
         bottom={"0"}
-        overflow={"hidden"}
-        overflowY={"scroll"}
-        css={{
-          "&::-webkit-scrollbar": {
-            width: "4px",
-          },
-          "&::-webkit-scrollbar-track": {
-            width: "6px",
-          },
-          "&::-webkit-scrollbar-thumb": {
-            borderRadius: "24px",
-          },
-        }}
         flexDir={"column"}
       >
         <VStack
           textAlign={"center"}
           w={"100%"}
           padding={"13px 22px"}
           spacing={"0.5px"}
+          zIndex={100}
         >
           <HStack spacing={"2px"}>
             <HealthIcon />
@@ -59,6 +48,19 @@ const ChattingRoom = () => {
           spacing={"16px"}
           marginTop={"10px"}
           paddingBottom={"80px"}
+          overflow={"hidden"}
+          overflowY={"scroll"}
+          css={{
+            "&::-webkit-scrollbar": {
+              width: "4px",
+            },
+            "&::-webkit-scrollbar-track": {
+              width: "6px",
+            },
+            "&::-webkit-scrollbar-thumb": {
+              borderRadius: "24px",
+            },
+          }}
         >
           <ChattingMsgCard>반갑습니다 00님</ChattingMsgCard>
           <ChattingMsgCard>
@@ -70,6 +72,12 @@ const ChattingRoom = () => {
             </Text>
           </ChattingMsgCard>
 
+          {/* <UserChattingMsgCard>
+            아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
+          </UserChattingMsgCard>
+          <UserChattingMsgCard>
+            아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
+          </UserChattingMsgCard>
           <UserChattingMsgCard>
             아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
           </UserChattingMsgCard>
@@ -82,6 +90,12 @@ const ChattingRoom = () => {
           <UserChattingMsgCard>
             아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
           </UserChattingMsgCard>
+          <UserChattingMsgCard>
+            아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
+          </UserChattingMsgCard>
+          <UserChattingMsgCard>
+            아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어
+          </UserChattingMsgCard> */}
 
           <DietChattingMsgCart />
         </VStack>

diff --git a/component/card/DietStateCard.tsx b/component/card/DietStateCard.tsx
@@ -1,31 +1,29 @@
 import { Box, Card, HStack, Text } from "@chakra-ui/react";
-import Image from "next/image";
 import HealthMountainIcon from "../icon/HealthMountainIcon";
 
 const DietStateCard = () => {
   return (
-    <>
-      <Card
-        bg={"rgba(0, 0, 0, 0.2)"}
-        h={"70px"}
-        w={"346px"}
-        color={"#FFFFFF"}
-        padding={"22px"}
-        flexDir={"row"}
-        borderRadius={"12px"}
-      >
-        <HStack display={"flex"} margin={"0 auto"} w={"100%"} spacing={"18px"}>
-          <HealthMountainIcon />
-          <Box w={"70%"}>
-            <Text>
-              식단을 입력하시면
-              <br />
-              오늘의 솔루션을 드릴게요
-            </Text>
-          </Box>
-        </HStack>
-      </Card>
-    </>
+    <Card
+      bg={"rgba(0, 0, 0, 0.2)"}
+      margin={"0 auto"}
+      h={"70px"}
+      w={"346px"}
+      color={"#FFFFFF"}
+      padding={"22px"}
+      flexDir={"row"}
+      borderRadius={"12px"}
+    >
+      <HStack display={"flex"} margin={"0 auto"} w={"100%"} spacing={"18px"}>
+        <HealthMountainIcon />
+        <Box w={"70%"}>
+          <Text>
+            식단을 입력하시면
+            <br />
+            오늘의 솔루션을 드릴게요
+          </Text>
+        </Box>
+      </HStack>
+    </Card>
   );
 };
 

diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx
@@ -1,6 +1,7 @@
+"use client";
+
 import {
   Box,
-  Button,
   ButtonGroup,
   Checkbox,
   Flex,
@@ -14,12 +15,13 @@ import {
   VStack,
   useDisclosure,
 } from "@chakra-ui/react";
-import React, { useState } from "react";
+import React, { useLayoutEffect, useState } from "react";
 import MainButton from "../button/MainButton";
 import {
   personalAgreement,
   serviceAgreement,
 } from "../../utils/DummyData/AgreementData";
+import { useRouter, useSearchParams } from "next/navigation";
 
 interface UserAgreementFormPropsType {
   setFunnel: React.Dispatch<React.SetStateAction<string>>;

diff --git a/component/icon/CloseIcon.tsx b/component/icon/CloseIcon.tsx
@@ -0,0 +1,18 @@
+const CloseIcon = () => {
+  return (
+    <>
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M20 5L12 12.5L20 20" stroke="black" />
+        <path d="M4 5L12 12.5L4 20" stroke="black" />
+      </svg>
+    </>
+  );
+};
+
+export default CloseIcon;
diff --git a/component/icon/KaKaoButtonIcon.tsx b/component/icon/KaKaoButtonIcon.tsx
diff --git a/component/template/SignupTemplate.tsx b/component/template/SignupTemplate.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { Flex, Progress } from "@chakra-ui/react";
+import { useState } from "react";
+import { useFunnel } from "../../utils/hooks/useFunnel";
+import UserAgreementForm from "../form/UserAgreementForm";
+import UserInfoForm from "../form/UserInfoForm";
+import UserPhysicForm from "../form/UserPhysicForm";
+
+export interface UserInfoType {
+  userName: string;
+  gender: string;
+  age: number;
+  height: number;
+  weight: number;
+  targetWeight: number;
+}
+
+const SignupTemplate = () => {
+  const [progress, setProgress] = useState<number>(33.3);
+  const [userInfo, setUserInfo] = useState<UserInfoType>({
+    userName: "",
+    gender: "",
+    age: 0,
+    height: 0,
+    weight: 0,
+    targetWeight: 0,
+  });
+  const { funnel, setFunnel } = useFunnel("userAgreement");
+
+  return (
+    <>
+      <Progress
+        bgColor={"#D9D9D9"}
+        // colorScheme="black"
+        size="xs"
+        isAnimated={true}
+        value={progress}
+      />
+
+      <Flex
+        flexDir={"column"}
+        w={"100%"}
+        h={"100vh"}
+        pos={"relative"}
+        maxW={"390px"}
+        padding={"60px 22px"}
+        margin={"0 auto"}
+        alignItems={"center"}
+      >
+        {funnel === "userAgreement" && (
+          <UserAgreementForm setFunnel={setFunnel} setProgress={setProgress} />
+        )}
+        {funnel === "userInfo" && (
+          <UserInfoForm
+            setFunnel={setFunnel}
+            setProgress={setProgress}
+            setUserInfo={setUserInfo}
+          />
+        )}
+        {funnel === "userPhysics" && <UserPhysicForm userInfo={userInfo} />}
+      </Flex>
+    </>
+  );
+};
+
+export default SignupTemplate;
diff --git a/next.config.js b/next.config.js
@@ -1,15 +1,15 @@
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
-  async rewrites() {
-    return [
-      {
-        source: "/",
-        destination:
-          "http://be-be-c957f-21216619-aeb7ba37580c.kr.lb.naverncp.com/",
-      },
-    ];
-  },
+  // async rewrites() {
+  //   return [
+  //     {
+  //       source: "/",
+  //       destination:
+  //         "http://be-be-c957f-21216619-aeb7ba37580c.kr.lb.naverncp.com/",
+  //     },
+  //   ];
+  // },
 
   images: {
     domains: ["images.pexels.com"],

diff --git a/src/app/main/page.tsx b/src/app/main/page.tsx
@@ -1,5 +1,5 @@
 "use client";
-import { Flex, Text } from "@chakra-ui/react";
+import { Flex, Text, VStack } from "@chakra-ui/react";
 import ChattingRoom from "../../../component/card/ChattingRoom";
 import DietStateCard from "../../../component/card/DietStateCard";
 import { useRouter } from "next/navigation";
@@ -27,8 +27,10 @@ const Page = () => {
             <UserIcon />
           </Text>
         </TheHeader>
-        <DietStateCard />
-        <ChattingRoom />
+        <VStack spacing={"20px"} w={"100%"}>
+          <DietStateCard />
+          <ChattingRoom />
+        </VStack>
       </Flex>
     </>
   );