From 6afc9730319203a70a2caf334e4dc6dec3e7e2b2 Mon Sep 17 00:00:00 2001
From: urjimyu <92876819+urjimyu@users.noreply.github.com>
Date: Wed, 22 May 2024 00:02:05 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9D=B8=EA=B0=80=EC=BD=94=EB=93=9C?=
 =?UTF-8?q?=EB=A1=9C=20=ED=86=A0=ED=81=B0=20=EB=B0=9C=EA=B8=89=EB=B0=9B?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/queries/useGetToken.tsx  | 22 ++++++++++++++++++++
 src/hooks/queries/usePostKakao.tsx |  2 ++
 src/pages/KakaoLoginPage.tsx       | 33 ++++++++++++++++++------------
 3 files changed, 44 insertions(+), 13 deletions(-)
 create mode 100644 src/hooks/queries/useGetToken.tsx

diff --git a/src/hooks/queries/useGetToken.tsx b/src/hooks/queries/useGetToken.tsx
new file mode 100644
index 0000000..434a141
--- /dev/null
+++ b/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;
diff --git a/src/hooks/queries/usePostKakao.tsx b/src/hooks/queries/usePostKakao.tsx
index 07dc439..2ff78ba 100644
--- a/src/hooks/queries/usePostKakao.tsx
+++ b/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({
diff --git a/src/pages/KakaoLoginPage.tsx b/src/pages/KakaoLoginPage.tsx
index 603a41a..9737047 100644
--- a/src/pages/KakaoLoginPage.tsx
+++ b/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 <></>;
 };