From 957710dbec8fe98954629c094fa4bd408b2bffcc Mon Sep 17 00:00:00 2001
From: JongHyun <jonghyun@JongHyuns-MacBook-Pro.local>
Date: Tue, 6 Aug 2024 00:37:14 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=84=B8?=
 =?UTF-8?q?=EC=85=98=EB=A7=8C=EB=A3=8C=20=EC=B2=98=EB=A6=AC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                  | 37 ++++++++++++++++++++++++++++++++++---
 src/loginPage/LoginPage.jsx | 13 ++++++++++++-
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/src/App.js b/src/App.js
index 3e5e2ba..45350d2 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,7 @@
-import React from "react";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { RecoilRoot } from "recoil";
+import React, { useEffect } from "react";
+import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom";
+import { RecoilRoot, useSetRecoilState } from "recoil";
+import axios from "axios";
 import LoginPage from "./loginPage/LoginPage";
 import Hompage from "./homepage/HomePage";
 import DiaryListPage from "./diaryListPage/DiaryListPage";
@@ -10,11 +11,40 @@ import Loading from "./loginPage/Loading";
 import DiaryBotPage from "./diaryBotPage/DiaryBotPage";
 import DiaryDetailPage from "./diaryDetailPage/DiaryDetailPage";
 import UpdateDiary from "./diaryWritePage/components/UpdateDiary";
+import { tokenState, UserTokenState } from "./atom/atom"; // Your recoil atoms
+
+const AxiosInterceptor = () => {
+  const setCsrfToken = useSetRecoilState(tokenState);
+  const setUserTokenState = useSetRecoilState(UserTokenState);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const responseInterceptor = axios.interceptors.response.use(
+      (response) => response,
+      (error) => {
+        if (error.response && error.response.status === 401) {
+          console.log("Axios interceptor caught an error:", error); // 로그 추가
+          setCsrfToken(null);
+          setUserTokenState({ isLogin: false });
+          navigate("/");
+        }
+        return Promise.reject(error);
+      }
+    );
+
+    return () => {
+      axios.interceptors.response.eject(responseInterceptor);
+    };
+  }, [navigate, setCsrfToken, setUserTokenState]);
+
+  return null;
+};
 
 function App() {
   return (
     <RecoilRoot>
       <BrowserRouter>
+        <AxiosInterceptor />
         <Routes>
           <Route path="/" element={<LoginPage />} />
           <Route path="/HomePage" element={<Hompage />} />
@@ -30,4 +60,5 @@ function App() {
     </RecoilRoot>
   );
 }
+
 export default App;
diff --git a/src/loginPage/LoginPage.jsx b/src/loginPage/LoginPage.jsx
index cbd9024..14c5b88 100644
--- a/src/loginPage/LoginPage.jsx
+++ b/src/loginPage/LoginPage.jsx
@@ -1,5 +1,8 @@
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
+import { useRecoilValue } from "recoil";
 import styled from "styled-components";
+import { UserTokenState } from "../atom/atom";
+import { useEffect } from "react";
 
 const Wrapper = styled.div`
   display: flex;
@@ -24,6 +27,14 @@ const GoogleLoginBtn = styled.div`
 `;
 
 const LoginPage = () => {
+  const navigate = useNavigate();
+  const UserToken = useRecoilValue(UserTokenState);
+
+  useEffect(() => {
+    if (UserToken !== false) {
+      navigate(`/HomePage`);
+    }
+  }, [UserToken]);
   const handleGoogleLogin = () => {
     // 구글 로그인 화면으로 이동시키기
     window.location.href = `${process.env.REACT_APP_HOST_URL}/oauth2/authorization/google`;