From 906effd24ad2525690a5d76b1962902a36687eb4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=B5=9C=ED=98=84=EC=9A=B0?= Date: Thu, 14 Dec 2023 21:56:16 +0900 Subject: [PATCH] =?UTF-8?q?feat(OAuth)=20:=20=EC=B9=B4=EC=B9=B4=EC=98=A4?= =?UTF-8?q?=20=EC=86=8C=EC=85=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refs:[#31] --- component/Funnel/LoginFunnel.tsx | 21 ++++++-- component/form/UserAgreementForm.tsx | 6 ++- component/icon/KaKaoButtonIcon.tsx | 49 ++++++++++++++++++ component/template/SignupTemplate.tsx | 67 ++++++++++++++++++++++++ next.config.js | 18 +++---- src/app/signup/page.tsx | 73 +++++---------------------- utils/api/AxiosSetting.ts | 15 ++++-- utils/api/SeverSide.ts | 1 + 8 files changed, 171 insertions(+), 79 deletions(-) create mode 100644 component/icon/KaKaoButtonIcon.tsx create mode 100644 component/template/SignupTemplate.tsx create mode 100644 utils/api/SeverSide.ts 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 @@ +