feat: 인가코드로 토큰 발급받기

src/hooks/queries/useGetToken.tsx

@@ -0,0 +1,22 @@
+import axios from 'axios';
+import { REDIRECT_URI, REST_API_KEY } from '../../utils/login';
+
+const useGetToken = async () => {
+  const code = new URL(window.location.href).searchParams.get('code');
+  const res = axios.post(
+    'https://kauth.kakao.com/oauth/token',
+    {
+      grant_type: 'authorization_code',
+      client_id: REST_API_KEY,
+      redirect_uri: REDIRECT_URI,
+      code: code,
+    },
+    {
+      headers: {
+        'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
+      },
+    }
+  );
+  return res;
+};
+export default useGetToken;

src/hooks/queries/usePostKakao.tsx

@@ -13,6 +13,8 @@ const usePostKakao = () => {
     setKakaoLoading(true);
     setKakaoError(null);
     try {
+      console.log('TYPE', typeof accessToken);
+      console.log('TOKEN', accessToken);
       const res = await kakao.postKakaoLogin({ kakaoToken: accessToken, fcmToken: '0' });
       const data: KakaoLoginResponseType = res.data.data;
       setKakaoResponse({

src/pages/KakaoLoginPage.tsx

@@ -1,33 +1,40 @@
 // import { useEffect, useState } from "react";
-import { useEffect } from "react";
-import usePostKakao from "../hooks/queries/usePostKakao";
-import { useNavigate } from "react-router-dom";
+import { useEffect } from 'react';
+import usePostKakao from '../hooks/queries/usePostKakao';
+import { useNavigate } from 'react-router-dom';
+import useGetToken from '../hooks/queries/useGetToken';
 
 const KakaoLoginPage = () => {
   const navigate = useNavigate();
 
-  let code = new URL(window.location.href).searchParams.get("code");
-  console.log("CODE", code);
-  if (!code) code = "";
+  // let code = new URL(window.location.href).searchParams.get('code');
+  // console.log('CODE', code);
+
   const { kakaoResponse, kakaoError, kakaoLoading, postKakao } = usePostKakao();
 
   const handlePostKakao = async (code: string) => {
     try {
       await postKakao(code);
       if (!kakaoError && !kakaoLoading && kakaoResponse) {
-        navigate("/delete");
+        navigate('/delete');
       }
     } catch (error) {
-      navigate("/unregistered");
-      console.log("ERROR", error);
+      navigate('/unregistered');
+      console.log('ERROR', error);
     }
   };
 
   useEffect(() => {
-    if (code) {
-      handlePostKakao(code);
-    }
-  }, [code]);
+    useGetToken()
+      .then((res) => {
+        if (res) {
+          const token = res.data.access_token;
+          localStorage.setItem('token', JSON.stringify(token));
+          handlePostKakao(token);
+        }
+      })
+      .catch((err) => console.log(err));
+  }, []);
 
   return <></>;
 };