Feat: 토큰 만료 시 자동 로그아웃 후 로그인 페이지로 연결

client/src/App.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import './App.css';
@@ -21,27 +21,33 @@ import MyPageMain from './pages/MyPageMain';
 import MyPageInfo from './pages/MyPageInfo';
 import MyPost from './pages/MyPost';
 
+import ProtectedRoute from 'components/ProtectedRoute';
+
 const App: React.FC = () => {
   return (
     <Provider store={store}>
       <div className="App">
         <Router>
           <AppHeader />
           <Routes>
-            <Route path="/" element={<AllBoardPage />} />
+
             <Route path="/login" element={<Login />} />
             <Route path="/signup" element={<SignUpPage />} />
-            <Route path="/posts/write" element={<EditerPage />} />
 
+            <Route path="/" element={<AllBoardPage />} />
             <Route path="/free" element={<FreeBoardPage />} />
             <Route path="/free/:postId/:userId" element={<FreeDetailPage />} />
             <Route path="/auth" element={<AuthBoardPage />} />
             <Route path="/auth/:postId/:userId" element={<AuthDetailPage />} />
             <Route path="/env" element={<EnvBoardPage />} />
 
-            <Route path="/mypage/main" element={<MyPageMain />} />
-            <Route path="/mypage/info" element={<MyPageInfo />} />
-            <Route path="/mypage/posts/:postId" element={<MyPost />} />
+            <Route element={<ProtectedRoute />}>
+              <Route path="/posts/write" element={<EditerPage />} />
+
+              <Route path="/mypage/main" element={<MyPageMain />} />
+              <Route path="/mypage/info" element={<MyPageInfo />} />
+              <Route path="/mypage/posts/:postId" element={<MyPost />} />
+            </Route>
           </Routes>
         </Router>
       </div>

client/src/components/GuestHeader.tsx

@@ -1,26 +1,32 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPencil, faRightToBracket } from "@fortawesome/free-solid-svg-icons";
 import { GuestHeaderProps } from 'types/types.ts';
 import logo from '../assets/logo.png';
 
-const GuestHeader: React.FC<GuestHeaderProps> = ( { isLoggedIn } ) => {
+const GuestHeader: React.FC<GuestHeaderProps> = ({ isLoggedIn }) => {
+  const navigate = useNavigate();
 
   if (isLoggedIn) {
     return null;
   }
 
+  const handleWriteCilck = () => {
+    alert('로그인 후 글쓰기가 가능합니다. 로그인 페이지로 이어드릴게요.');
+    navigate('/login');
+  };
+
   return (
     <header className="header_container">
       <div className="header_bar">
         <Link to='/' className="header_logo">
           <img src={logo} alt="logo" />
         </Link>
         <div className='header_bar_user'>
-          <Link to='/login' className="header_icon">
+          <div onClick={handleWriteCilck} className="header_icon">
               <FontAwesomeIcon icon={faPencil} className="header_icon" />
-          </Link>
+          </div>
           <Link to='/login' className="header_icon">
               <FontAwesomeIcon icon={faRightToBracket} className="header_icon" />
           </Link>

client/src/components/ProtectedRoute.tsx

@@ -0,0 +1,33 @@
+import React, { useEffect } from 'react';
+import { Navigate, Outlet } from 'react-router-dom';
+
+const logout = (): void => {
+  localStorage.removeItem('accessToekn');
+}
+
+const ProtectedRoute: React.FC = () => {
+  const getAccessToken = (): string | null => {
+    return localStorage.getItem('accessToken');
+  }
+
+  const isTokenExpired = (token: string | null): boolean => {
+    if (!token) return true;
+
+    const payload = JSON.parse(atob(token.split('.')[1]));
+    const currentTime = Math.floor(Date.now() / 1000);
+
+    return payload.exp < currentTime;
+  }
+
+  const token = getAccessToken();
+  const isExpired = isTokenExpired(token);
+
+  if (isExpired) {
+    logout();
+    return <Navigate to="/login" state={{ message: '시간이 오래 지나 로그아웃되었습니다. 다시 로그인해주세요.' }} />;
+  }
+
+  return <Outlet />;
+};
+
+export default ProtectedRoute;

client/src/pages/LoginPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { postLogin } from 'api/api.js';
 import { useDispatch } from 'react-redux';
 import { setActiveMenu } from '../store/menuSlice.ts';