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