Feat/chain with back

src/axios/TokenInterceptor.js

@@ -70,12 +70,16 @@ instance.interceptors.response.use(async function (response) {
 });
 
 
-const Logout = async () => {
+export const Logout = async () => {
     try {
-        // 로그아웃 API 호출
-        await axios.post(`${LOCAL_SPRING_API_URL}/logout`);
+        const token = localStorage.getItem('accessToken');
+        await axios.post(`${LOCAL_SPRING_API_URL}/logout`, null, {
+            headers: {
+                Authorization: `Bearer ${token}`
+            }
+        });
         localStorage.removeItem('accessToken');
-        window.location.href = '/'; // 로그인 페이지 이동
+        window.location.href = '/'; // 로그인 페이지로 이동
     } catch (error) {
         console.error('로그아웃 오류 발생:', error);
     }

src/components/oauth/KakaoRedirectPage.js

@@ -1,60 +1,51 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
-import instance from "../../axios/TokenInterceptor"; // instance를 계속 사용하려면
+import instance from "../../axios/TokenInterceptor";
 import { LOCAL_SPRING_API_URL } from "../../constants/api";
 
-// 카카오 OAuth 인증 후 리디렉션 처리 페이지
 const KakaoRedirectPage = () => {
-    const location = useLocation();  // 현재 URL 정보
-    const navigate = useNavigate();  // 페이지 이동을 위한 navigate 함수
+    const location = useLocation();
+    const navigate = useNavigate();
+    const isCalled = useRef(false); // 한 번만 실행되도록 플래그
 
     useEffect(() => {
-        // 카카오 로그인 인증 코드 처리 함수
         const handleOAuthKakao = async (code) => {
             try {
-                // 카카오 인증 코드로 서버에 로그인 요청 (여기서 instance 사용)
                 const response = await instance.get(
-                    `${ LOCAL_SPRING_API_URL}/oauth/login/kakao?code=${code}`
+                    `${LOCAL_SPRING_API_URL}/oauth/login/kakao?code=${code}`
                 );
 
                 if (response.data.isSuccess) {
-                    // 로그인 성공 시, Authorization 헤더에서 액세스 토큰 가져오기
-                    const accessToken = response.headers["Authorization"] || response.headers["authorization"];
-                    localStorage.setItem("accessToken", accessToken);  // 토큰을 로컬스토리지에 저장
+                    const accessToken =
+                        response.headers["Authorization"] || response.headers["authorization"];
+                    localStorage.setItem("accessToken", accessToken);
 
-                    // 사용자의 역할(role)에 따라 페이지 이동
                     const role = response.data.result;
-                    if (role === "GUEST") {
-                        navigate("/voice-training");  // 게스트 페이지로 이동
-                    } else if (role === "USER") {
-                        navigate("/voice-training");  // 사용자 메인 페이지로 이동
+                    if (role === "ROLE_FIRST") {
+                        navigate("/voice-training");
+                    } else {
+                        navigate("/keywords");
                     }
                 } else {
-                    // 로그인 실패 처리
                     console.error("OAuth2 로그인 오류");
                     console.log(response.data.code);
                     console.log(response.data.message);
                 }
             } catch (error) {
-                // 요청 실패 시 처리
                 console.error("로그인 실패", error);
             }
         };
 
-        // URL에서 카카오 인증 코드 추출
         const searchParams = new URLSearchParams(location.search);
-        const code = searchParams.get("code");  // URL에서 'code' 파라미터 추출
+        const code = searchParams.get("code");
 
-        // 인증 코드가 존재하면 로그인 처리
-        if (code) {
+        if (code && !isCalled.current) {
+            isCalled.current = true; // ✅ 한 번만 호출되도록 설정
             handleOAuthKakao(code);
         }
-    }, [location, navigate]);  // 의존성 배열에 'location'과 'navigate' 추가
+    }, [location, navigate]);
 
-    return (
-        <div>
-        </div>
-    );
+    return <div></div>;
 };
 
 export default KakaoRedirectPage;

src/pages/FinalPage.js

@@ -1,6 +1,8 @@
+// FinalPage.jsx
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Logo from "../components/Logo";
+import { Logout } from "../axios/TokenInterceptor"; // 실제 axios 파일 경로에 맞게 수정
 
 const FinalPage = () => {
     const navigate = useNavigate();
@@ -10,9 +12,9 @@ const FinalPage = () => {
         setShowConfirm(true);
     };
 
-    const handleConfirmYes = () => {
+    const handleConfirmYes = async () => {
         setShowConfirm(false);
-        navigate('/');
+        await Logout();  // 로그아웃 처리 및 이동
     };
 
     const handleConfirmNo = () => {
@@ -41,6 +43,7 @@ const FinalPage = () => {
     );
 };
 
+
 const styles = {
     container: {
         backgroundColor: '#F4E6CE',