feat(OAuth) : 카카오 소셜 로그인

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"}

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>>;

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;

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"],

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<number>(33.3);
-  const [userInfo, setUserInfo] = useState<UserInfoType>({
-    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 (
-    <>
-      <Progress
-        bgColor={"#D9D9D9"}
-        // colorScheme="black"
-        size="xs"
-        isAnimated={true}
-        value={progress}
-      />
+  const errorCode = searchParams.error;
+  postKakaoCode(kakaoCode);
+  if (errorCode) return redirect("/");
 
-      <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>
-    </>
-  );
+  return <SignupTemplate />;
 };
 
 export default Page;

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;

utils/api/SeverSide.ts

@@ -0,0 +1 @@
+