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"}> + + + >; 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/signup/page.tsx b/src/app/signup/page.tsx index 544a8ff..15698cc 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; + postKakaoCode(kakaoCode); + if (errorCode) return redirect("/"); - - {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 @@ +