아래는 해당 프론트 코드이다.
에러 코드는 프로젝트마다 다를 것이기에 그저 참고용.
import React, { useEffect, useRef } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import axios from "axios";
const KAKAO_CLIENT_ID = "{ REST API 앱키 작성 }";
const KAKAO_REDIRECT_URI = "http://localhost:5173/auth/callback";
const AuthCallback: React.FC = () => {
const navigate = useNavigate();
const { search } = useLocation();
const hasFetched = useRef(false); // 렌더링 체크용 Ref
useEffect(() => {
if (hasFetched.current) return; // 이미 호출되었으면 아무 작업도 하지 않음
hasFetched.current = true; // 첫 호출 시 True로 설정
const query = new URLSearchParams(search);
const code = query.get("code");
console.log("Authorization Code:", code);
if (code) {
console.log("Sending Request with Params:");
console.log("client_id:", KAKAO_CLIENT_ID);
console.log("redirect_uri:", KAKAO_REDIRECT_URI);
console.log("code:", code);
axios
.post(
tokenUrl,
new URLSearchParams({
grant_type: "authorization_code",
client_id: KAKAO_CLIENT_ID,
redirect_uri: KAKAO_REDIRECT_URI,
code: code,
}),
{
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
}
)
.then((response) => {
const { access_token } = response.data;
console.log("Kakao token:", access_token);
// 백엔드로 토큰 전송
axios
.post(
{ accessToken: access_token },
{
headers: {
"Content-Type": "application/json",
},
}
)
.then((response) => {
console.log("User data:", response.data);
if (response.status === 200) {
sessionStorage.setItem("userName", response.data.name);
sessionStorage.setItem(
"accessToken",
response.data.accessToken
);
sessionStorage.setItem(
"refreshToken",
response.data.refreshToken
);
navigate("/home");
}
})
.catch((error) => {
if (error.response.status === 401) {
navigate("/login");
sessionStorage.setItem("kakaoToken", access_token);
sessionStorage.setItem(
"registerToken",
error.response.data.registerToken
);
}
console.error(
"백엔드에 accessToken 전달 과정에 에러가 생겼습니다:",
error
);
});
})
.catch((error) => {
if (error.response) {
console.error("카카오 에러 발생:", error.response.data);
console.error("상태 코드:", error.response.status);
} else if (error.request) {
console.error("카카오로부터 응답이 없습니다:", error.request);
} else {
console.error("카카오API 요청 도중에 에러 발생:", error.message);
}
});
}
}, [search]);
return <div>Loading...</div>;
};
export default AuthCallback;
