카카오 로그인 테스트 (help wanted🐣)

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.1",
+    "axios": "^0.27.2",
     "next": "12.1.4",
     "next-redux-wrapper": "^7.0.5",
     "node-sass": "^7.0.1",

pages/auth/kakao/callback.tsx

@@ -0,0 +1,16 @@
+import axios, { AxiosError } from 'axios';
+import { useEffect } from 'react';
+
+const BASE_URL = 'https://asia-northeast3-sannumsan-server.cloudfunctions.net/api';
+
+export default function OAuthRedirectHandler() {
+  useEffect(() => {
+    const authenticationCode = new URL(window.location.href).searchParams.get('code') ?? '';
+    (async () => {
+      await axios
+        .get(`${BASE_URL}/auth/kakao/callback?code=${authenticationCode}`)
+        .catch((error: AxiosError) => console.log('먀', error));
+    })();
+  }, []);
+  return <></>;
+}

pages/loginTest.tsx

@@ -0,0 +1,8 @@
+const DOMAIN = 'http://localhost:3000';
+const CLIENT_ID = `${process.env.NEXT_PUBLIC_KAKAO_REST_API_KEY}`;
+const REDIRECT_URI = `${DOMAIN}/auth/kakao/callback`;
+const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=code`;
+
+export default function LoginTest() {
+  return <button onClick={() => (window.location.href = KAKAO_AUTH_URL)}>카카오톡 로그인 테스트</button>;
+}

yarn.lock

@@ -2378,6 +2378,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^0.27.2":
+  version: 0.27.2
+  resolution: "axios@npm:0.27.2"
+  dependencies:
+    follow-redirects: ^1.14.9
+    form-data: ^4.0.0
+  checksum: 38cb7540465fe8c4102850c4368053c21683af85c5fdf0ea619f9628abbcb59415d1e22ebc8a6390d2bbc9b58a9806c874f139767389c862ec9b772235f06854
+  languageName: node
+  linkType: hard
+
 "axobject-query@npm:^2.2.0":
   version: 2.2.0
   resolution: "axobject-query@npm:2.2.0"
@@ -2725,7 +2735,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"combined-stream@npm:^1.0.6, combined-stream@npm:~1.0.6":
+"combined-stream@npm:^1.0.6, combined-stream@npm:^1.0.8, combined-stream@npm:~1.0.6":
   version: 1.0.8
   resolution: "combined-stream@npm:1.0.8"
   dependencies:
@@ -3677,13 +3687,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.14.9":
+  version: 1.15.0
+  resolution: "follow-redirects@npm:1.15.0"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: eaec81c3e0ae57aae2422e38ad3539d0e7279b3a63f9681eeea319bb683dea67502c4e097136b8ce9721542b4e236e092b6b49e34e326cdd7733c274f0a3f378
+  languageName: node
+  linkType: hard
+
 "forever-agent@npm:~0.6.1":
   version: 0.6.1
   resolution: "forever-agent@npm:0.6.1"
   checksum: 766ae6e220f5fe23676bb4c6a99387cec5b7b62ceb99e10923376e27bfea72f3c3aeec2ba5f45f3f7ba65d6616965aa7c20b15002b6860833bb6e394dea546a8
   languageName: node
   linkType: hard
 
+"form-data@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "form-data@npm:4.0.0"
+  dependencies:
+    asynckit: ^0.4.0
+    combined-stream: ^1.0.8
+    mime-types: ^2.1.12
+  checksum: 01135bf8675f9d5c61ff18e2e2932f719ca4de964e3be90ef4c36aacfc7b9cb2fceb5eca0b7e0190e3383fe51c5b37f4cb80b62ca06a99aaabfcfd6ac7c9328c
+  languageName: node
+  linkType: hard
+
 "form-data@npm:~2.3.2":
   version: 2.3.3
   resolution: "form-data@npm:2.3.3"
@@ -6476,6 +6507,7 @@ __metadata:
     "@types/react-dom": 18.0.0
     "@typescript-eslint/eslint-plugin": ^5.20.0
     "@typescript-eslint/parser": ^5.20.0
+    axios: ^0.27.2
     eslint: ^8.13.0
     eslint-config-next: 12.1.4
     eslint-config-prettier: ^8.5.0