diff --git a/component/Funnel/LoginFunnel.tsx b/component/Funnel/LoginFunnel.tsx index 1f63fc2..462ad7d 100644 --- 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 ( <> { flexDir={"column"} gap={"10px"} > - {}}> - 다음으로 - + signUpKakaoHandler()} cursor={"pointer"}> + + + { { w={"100%"} padding={"13px 22px"} spacing={"0.5px"} + zIndex={100} > @@ -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", + }, + }} > 반갑습니다 00님 @@ -70,6 +72,12 @@ const ChattingRoom = () => { + {/* + 아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어 + + + 아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어 + 아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어 @@ -82,6 +90,12 @@ const ChattingRoom = () => { 아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어 + + 아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어 + + + 아침은 계란후라이 점심은 마라탕 저녁은 칼국수를 먹었어 + */} diff --git a/component/card/DietStateCard.tsx b/component/card/DietStateCard.tsx index 9b8126b..04d030c 100644 --- 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 ( - <> - - - - - - 식단을 입력하시면 -
- 오늘의 솔루션을 드릴게요 - - - - - + + + + + + 식단을 입력하시면 +
+ 오늘의 솔루션을 드릴게요 + + + + ); }; diff --git a/component/form/UserAgreementForm.tsx b/component/form/UserAgreementForm.tsx index 1e4af5b..b9e90b6 100644 --- 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>; diff --git a/component/icon/CloseIcon.tsx b/component/icon/CloseIcon.tsx new file mode 100644 index 0000000..6bb0212 --- /dev/null +++ b/component/icon/CloseIcon.tsx @@ -0,0 +1,18 @@ +const CloseIcon = () => { + return ( + <> + + + + + + ); +}; + +export default CloseIcon; diff --git a/component/icon/KaKaoButtonIcon.tsx b/component/icon/KaKaoButtonIcon.tsx new file mode 100644 index 0000000..164beb7 --- /dev/null +++ b/component/icon/KaKaoButtonIcon.tsx @@ -0,0 +1,49 @@ +const KaKaoButtonIcon = () => { + return ( + <> + + + + + + + + + + + + + + ); +}; + +export default KaKaoButtonIcon; diff --git a/component/template/SignupTemplate.tsx b/component/template/SignupTemplate.tsx new file mode 100644 index 0000000..ff97f68 --- /dev/null +++ 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(33.3); + const [userInfo, setUserInfo] = useState({ + userName: "", + gender: "", + age: 0, + height: 0, + weight: 0, + targetWeight: 0, + }); + const { funnel, setFunnel } = useFunnel("userAgreement"); + + return ( + <> + + + + {funnel === "userAgreement" && ( + + )} + {funnel === "userInfo" && ( + + )} + {funnel === "userPhysics" && } + + + ); +}; + +export default SignupTemplate; diff --git a/next.config.js b/next.config.js index 57a1565..c9f8f48 100644 --- 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 index 8189d49..86dada5 100644 --- 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 = () => { - - + + + + ); diff --git a/src/app/mypage/page.tsx b/src/app/mypage/page.tsx index 8ee682b..a3f7df1 100644 --- a/src/app/mypage/page.tsx +++ b/src/app/mypage/page.tsx @@ -1,10 +1,11 @@ "use client"; -import { Box, Flex, Text, VStack } from "@chakra-ui/react"; +import { Box, Flex, HStack, Text, VStack } from "@chakra-ui/react"; import { useRouter } from "next/navigation"; import TodayReportCard from "../../../component/card/TodayReportCard"; import TheHeader from "../../../component/header/TheHeader"; -import GoBackArrowIcon from "../../../component/icon/GoBackArrowIcon"; import { useUser } from "../../../utils/hooks/useUser"; +import CloseIcon from "../../../component/icon/CloseIcon"; +import Image from "next/image"; const Page = () => { const router = useRouter(); @@ -24,28 +25,88 @@ const Page = () => { alignItems={"center"} > + + 마이페이지 + router.push("/main")} > - + - - 마이페이지 - - + + + 식선생 + + 김식단 + + + + + 기본 정보 + + + 성별 + + 남 + + + + 나이 + + 21 + + + + + + + 신체 정보 + + + 키 + + 180cm + + + + 체중 + + 80kg + + + + 목표 체중 + + 80kg + + + + - 내 정보 -
- 이름 - 성별 - 나이 - 체중 - 목표체중 + + 오늘 하루 칼로리 + 아침 : + 점심 : + 저녁 : + - 오늘의 식단 로그아웃 diff --git a/src/app/signup/page.tsx b/src/app/signup/page.tsx index 544a8ff..5d3ccd5 100644 --- a/src/app/signup/page.tsx +++ b/src/app/signup/page.tsx @@ -1,66 +1,21 @@ -"use client"; -import React, { useState } from "react"; -import UserInfoForm from "../../../component/form/UserInfoForm"; -import { Flex, Progress } from "@chakra-ui/react"; -import { useFunnel } from "../../../utils/hooks/useFunnel"; -import UserPhysicForm from "../../../component/form/UserPhysicForm"; -import UserAgreementForm from "../../../component/form/UserAgreementForm"; +import React from "react"; -export interface UserInfoType { - userName: string; - gender: string; - age: number; - height: number; - weight: number; - targetWeight: number; -} +import { redirect } from "next/navigation"; +import SignupTemplate from "../../../component/template/SignupTemplate"; +import { postKakaoCode } from "../../../utils/api/AxiosSetting"; -const Page = () => { - const [progress, setProgress] = useState(33.3); - const [userInfo, setUserInfo] = useState({ - userName: "", - gender: "", - age: 0, - height: 0, - weight: 0, - targetWeight: 0, - }); - const { funnel, setFunnel } = useFunnel("userAgreement"); +const Page = ({ + searchParams, +}: { + searchParams: { code: string; error: string }; +}) => { + const kakaoCode = searchParams.code; - return ( - <> - + const errorCode = searchParams.error; + if (errorCode) return redirect("/"); + postKakaoCode(kakaoCode); - - {funnel === "userAgreement" && ( - - )} - {funnel === "userInfo" && ( - - )} - {funnel === "userPhysics" && } - - - ); + return ; }; export default Page; diff --git a/utils/api/AxiosSetting.ts b/utils/api/AxiosSetting.ts index 75d98ae..089f1ea 100644 --- a/utils/api/AxiosSetting.ts +++ b/utils/api/AxiosSetting.ts @@ -1,19 +1,26 @@ import axios from "axios"; const instacne = axios.create({ - // baseURL: process.env.NEXT_PUBLIC_API_URL, - baseURL: "/", + baseURL: process.env.NEXT_PUBLIC_API_URL, withCredentials: true, }); export const getUserInfo = async () => { - console.log(process.env.NEXT_PUBLIC_API_URL); - const res = await instacne.get("/123"); + const res = await instacne.get(""); console.log(res); return res; }; +export const postKakaoCode = async (code: string) => { + const res = await instacne.post( + `${process.env.NEXT_PUBLIC_API_URL}/user`, + code + ); + + return res.data; +}; + export const postUserInfo = async () => { const res = await instacne.post(""); return res.data; diff --git a/utils/api/SeverSide.ts b/utils/api/SeverSide.ts new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/utils/api/SeverSide.ts @@ -0,0 +1 @@ +