Merge pull request #103 from TEAM-BEAT/feat/#94/KakaoLogin

[Feat/#94] 카카오 로그인 기능 구현

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode

package.json

@@ -31,6 +31,7 @@
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "@mui/x-date-pickers": "^7.9.0",
+    "axios": "^1.7.2",
     "dayjs": "^1.11.11",
     "jotai": "^2.8.4",
     "postcss": "^8.4.38",

src/apis/kakoLogin/getKakaoData.ts

@@ -0,0 +1,14 @@
+import axios from "axios";
+
+export const getData = async (token: string) => {
+  try {
+    const res = await axios.get("https://kapi.kakao.com/v2/user/me", {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return await res.data;
+  } catch (error) {
+    console.log(error);
+  }
+};

src/apis/kakoLogin/postKakaoToken.ts

@@ -0,0 +1,25 @@
+import axios from "axios";
+
+export const getToken = async (code: string) => {
+  const grant_type = "authorization_code";
+  const REST_API = import.meta.env.VITE_REST_API;
+  const REDIRECT_URI = "http://localhost:5173/auth";
+  const AUTHORIZE_CODE = code;
+
+  try {
+    const res = await axios.post(
+      `https://kauth.kakao.com/oauth/token?grant_type=${grant_type}&client_id=${REST_API}&redirect_uri=${REDIRECT_URI}&code=${AUTHORIZE_CODE}`,
+      {
+        headers: {
+          "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
+        },
+      }
+    );
+
+    const token = res.data.access_token;
+
+    return token;
+  } catch (error) {
+    console.log(error);
+  }
+};

src/pages/KakaoLoginTest.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+import Button from "@components/commons/button/Button";
+
+import { requestKakaoLogin } from "@utils/kakaoLogin";
+
+// 실제 사용할 때는 원하는 페이지에 button onClick에 requestKakaoLogin만 주면 됨
+
+const KakaoLoginTest = () => {
+  return (
+    <Test>
+      <Button onClick={requestKakaoLogin}>카카오 로그인 테스트~~</Button>
+    </Test>
+  );
+};
+
+export default KakaoLoginTest;
+
+const Test = styled.div`
+  width: 37.5rem;
+  height: 66.7rem;
+
+  background-color: white;
+`;

src/pages/kakaoLogin/KakaoLogin.tsx

@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { getToken } from "@apis/kakoLogin/postKakaoToken";
+import { getData } from "@apis/kakoLogin/getKakaoData";
+
+const KakaoLogin = () => {
+  const navigate = useNavigate();
+
+  const code = new URL(window.location.href).searchParams.get("code");
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (code) {
+        // 전에 있던 페이지에 따라 어떤 페이지로 이동할 건지 분기처리 필요
+        // 분기 처리 안 되면 이전 페이지로 이동
+        navigate("/kakao-login");
+
+        try {
+          const token = await getToken(code);
+          const userData = await getData(token);
+
+          // 이 부분 이메일 + 닉네임 + 인가코드까지 서버에 POST
+          // 현재는 임시로 console 찍어뒀는데, API POST 붙이기
+
+          const nickname = userData.properties.nickname;
+          const email = userData.kakao_account.email;
+
+          console.log(userData);
+          console.log(`Nickname: ${nickname}, Email: ${email}`);
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    };
+
+    fetchData();
+  }, [code, navigate]);
+
+  return <div>로그인 과정 페이지~ </div>;
+};
+
+export default KakaoLogin;

src/routes/Router.tsx

@@ -10,6 +10,8 @@ import MyRegisterdShow from "@pages/MyRegisterdShow/MyRegisterdShow";
 import NonMbLookup from "@pages/nonMbLookup/NonMbLookup";
 import Register from "@pages/register/Register";
 import TestPage from "@pages/test/TestPage";
+import KakaoLoginTest from "@pages/KakaoLoginTest";
+import KakaoLogin from "@pages/kakaoLogin/KakaoLogin";
 import ViewBottomSheetTest from "@pages/ViewBottomSheetTest";
 import { createBrowserRouter } from "react-router-dom";
 
@@ -32,6 +34,14 @@ const router = createBrowserRouter([
     path: "/modal-test",
     element: <ModalTest />,
   },
+  {
+    path: "/kakao-login",
+    element: <KakaoLoginTest />,
+  },
+  {
+    path: "/auth",
+    element: <KakaoLogin />,
+  },
   {
     path: "/action-bottom-sheet",
     element: <ActionBottomSheetTest />,

src/utils/kakaoLogin.ts

@@ -0,0 +1,15 @@
+export const requestKakaoLogin = () => {
+  const REST_API = import.meta.env.VITE_REST_API;
+  const REDIRECT_URI = "http://localhost:5173/auth";
+
+  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+
+  const handleLogin = () => {
+    const code = new URL(window.location.href).searchParams.get("code");
+    window.location.href = kakaoURL;
+
+    return code;
+  };
+
+  return handleLogin();
+};

yarn.lock

@@ -4669,6 +4669,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"asynckit@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "asynckit@npm:0.4.0"
+  checksum: 10c0/d73e2ddf20c4eb9337e1b3df1a0f6159481050a5de457c55b14ea2e5cb6d90bb69e004c9af54737a5ee0917fcf2c9e25de67777bbe58261847846066ba75bc9d
+  languageName: node
+  linkType: hard
+
 "available-typed-arrays@npm:^1.0.7":
   version: 1.0.7
   resolution: "available-typed-arrays@npm:1.0.7"
@@ -4685,6 +4692,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.7.2":
+  version: 1.7.2
+  resolution: "axios@npm:1.7.2"
+  dependencies:
+    follow-redirects: "npm:^1.15.6"
+    form-data: "npm:^4.0.0"
+    proxy-from-env: "npm:^1.1.0"
+  checksum: 10c0/cbd47ce380fe045313364e740bb03b936420b8b5558c7ea36a4563db1258c658f05e40feb5ddd41f6633fdd96d37ac2a76f884dad599c5b0224b4c451b3fa7ae
+  languageName: node
+  linkType: hard
+
 "axobject-query@npm:~3.1.1":
   version: 3.1.1
   resolution: "axobject-query@npm:3.1.1"
@@ -4833,6 +4851,7 @@ __metadata:
     "@vitejs/plugin-react-swc": "npm:^3.5.0"
     "@yarnpkg/pnpify": "npm:^4.1.0"
     "@yarnpkg/sdks": "npm:^3.1.3"
+    axios: "npm:^1.7.2"
     chromatic: "npm:^11.5.4"
     dayjs: "npm:^1.11.11"
     eslint: "npm:^9.6.0"
@@ -5347,6 +5366,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"combined-stream@npm:^1.0.8":
+  version: 1.0.8
+  resolution: "combined-stream@npm:1.0.8"
+  dependencies:
+    delayed-stream: "npm:~1.0.0"
+  checksum: 10c0/0dbb829577e1b1e839fa82b40c07ffaf7de8a09b935cadd355a73652ae70a88b4320db322f6634a4ad93424292fa80973ac6480986247f1734a1137debf271d5
+  languageName: node
+  linkType: hard
+
 "commander@npm:^6.2.1":
   version: 6.2.1
   resolution: "commander@npm:6.2.1"
@@ -5766,6 +5794,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"delayed-stream@npm:~1.0.0":
+  version: 1.0.0
+  resolution: "delayed-stream@npm:1.0.0"
+  checksum: 10c0/d758899da03392e6712f042bec80aa293bbe9e9ff1b2634baae6a360113e708b91326594c8a486d475c69d6259afb7efacdc3537bfcda1c6c648e390ce601b19
+  languageName: node
+  linkType: hard
+
 "depd@npm:2.0.0":
   version: 2.0.0
   resolution: "depd@npm:2.0.0"
@@ -6970,6 +7005,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.15.6":
+  version: 1.15.6
+  resolution: "follow-redirects@npm:1.15.6"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: 10c0/9ff767f0d7be6aa6870c82ac79cf0368cd73e01bbc00e9eb1c2a16fbb198ec105e3c9b6628bb98e9f3ac66fe29a957b9645bcb9a490bb7aa0d35f908b6b85071
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3":
   version: 0.3.3
   resolution: "for-each@npm:0.3.3"
@@ -6989,6 +7034,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"form-data@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "form-data@npm:4.0.0"
+  dependencies:
+    asynckit: "npm:^0.4.0"
+    combined-stream: "npm:^1.0.8"
+    mime-types: "npm:^2.1.12"
+  checksum: 10c0/cb6f3ac49180be03ff07ba3ff125f9eba2ff0b277fb33c7fc47569fc5e616882c5b1c69b9904c4c4187e97dd0419dd03b134174756f296dec62041e6527e2c6e
+  languageName: node
+  linkType: hard
+
 "forwarded@npm:0.2.0":
   version: 0.2.0
   resolution: "forwarded@npm:0.2.0"
@@ -8652,7 +8708,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
+"mime-types@npm:^2.1.12, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34":
   version: 2.1.35
   resolution: "mime-types@npm:2.1.35"
   dependencies:
@@ -9653,6 +9709,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"proxy-from-env@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "proxy-from-env@npm:1.1.0"
+  checksum: 10c0/fe7dd8b1bdbbbea18d1459107729c3e4a2243ca870d26d34c2c1bcd3e4425b7bcc5112362df2d93cc7fb9746f6142b5e272fd1cc5c86ddf8580175186f6ad42b
+  languageName: node
+  linkType: hard
+
 "pump@npm:^3.0.0":
   version: 3.0.0
   resolution: "pump@npm:3.0.0"