From c67c4ec3a570be9fa0778d14f8bf3ab056029ee7 Mon Sep 17 00:00:00 2001
From: JeonDoGyun <wjsehrbs2632@naver.com>
Date: Mon, 30 Oct 2023 23:44:07 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=86=A0=ED=81=B0=20=EA=B2=80=EC=82=AC?=
 =?UTF-8?q?=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

토큰 검사를 주기적으로 해야되는 페이지를 감싸는 레이아웃을 만들었습니다.
토큰 검사는 일단 30분에 한 번 동작하도록 만들었습니다.
---
 src/App.tsx                         | 10 +++++++---
 src/layouts/ValidateCheckLayout.tsx | 20 ++++++++++++++++++++
 2 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 src/layouts/ValidateCheckLayout.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 8711fdc0..82de16ef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,6 +13,7 @@ import SignupPage from 'pages/signUp/SignupPage';
 import UrgentListPage from 'pages/profileList/urgentList/UrgentListPage';
 import UpdatePage from 'pages/update/UpdatePage';
 import HomePage from 'pages/home/HomePage';
+import ValidateCheckLayout from 'layouts/ValidateCheckLayout';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -25,7 +26,8 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <RecoilRoot>
         <BrowserRouter>
-          <Routes>
+          <ValidateCheckLayout>
+            {/* 토큰 검사가 필요한 페이지에만 검사 */}
             <Route path="/" element={<HomePage />} />
             <Route path="/pet/:id" element={<DetailPetPage />} />
             <Route path="/profile" element={<ProfileListPage />} />
@@ -33,10 +35,12 @@ function App() {
             <Route path="/profile/urgent/:page" element={<UrgentListPage />} />
             <Route path="/profile/new/:page" element={<NewListPage />} />
             <Route path="/register" element={<RegisterPage />} />
-            <Route path="/login" element={<LoginPage />} />
-            <Route path="/signup" element={<SignupPage />} />
             <Route path="/find-shelter" element={<MapPage />} />
             <Route path="/pet-update/:id" element={<UpdatePage />} />
+          </ValidateCheckLayout>
+          <Routes>
+            <Route path="/login" element={<LoginPage />} />
+            <Route path="/signup" element={<SignupPage />} />
           </Routes>
         </BrowserRouter>
       </RecoilRoot>
diff --git a/src/layouts/ValidateCheckLayout.tsx b/src/layouts/ValidateCheckLayout.tsx
new file mode 100644
index 00000000..da146e86
--- /dev/null
+++ b/src/layouts/ValidateCheckLayout.tsx
@@ -0,0 +1,20 @@
+import { validateExpiredToken } from 'commons/cookie/getUser';
+import React, { useEffect } from 'react';
+import { Routes } from 'react-router-dom';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+const ValidateCheckLayout: React.FC<LayoutProps> = ({ children }) => {
+  useEffect(() => {
+    validateExpiredToken();
+    const intervalId = setInterval(validateExpiredToken, 60000 * 30); // 30분에 한 번
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return <Routes>{children}</Routes>;
+};
+
+export default ValidateCheckLayout;