[FE] SISC1-214 [FEAT] : 로그아웃

frontend/src/App.jsx

@@ -20,6 +20,9 @@ import Intro from './pages/external/Intro.jsx';
 import Leaders from './pages/external/Leaders.jsx';
 import Portfolio from './pages/external/Portfolio.jsx';
 
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+
 function App() {
   return (
     <>
@@ -44,6 +47,13 @@ function App() {
           <Route path="/mypage" element={<Mypage />} />
         </Route>
       </Routes>
+      <ToastContainer
+        position="top-center"
+        autoClose={2000}
+        hideProgressBar={false}
+        pauseOnHover
+        theme="light"
+      />
     </>
   );
 }

frontend/src/components/Sidebar.jsx

@@ -1,6 +1,8 @@
 import { NavLink, useNavigate, useLocation } from 'react-router-dom';
 import styles from './Sidebar.module.css';
 import { useState } from 'react';
+import { api } from '../utils/axios';
+import { toast } from 'react-toastify';
 
 const Sidebar = ({ isOpen, isRoot }) => {
   const navigate = useNavigate();
@@ -23,6 +25,32 @@ const Sidebar = ({ isOpen, isRoot }) => {
   const [selectedBoard, setSelectedBoard] = useState(
     currentBoard?.name || '전체 게시판'
   );
+  const [isLoggedIn, setIsLoggedIn] = useState(
+    !!localStorage.getItem('accessToken')
+  );
+
+  const logout = async () => {
+    const accessToken = localStorage.getItem('accessToken');
+    try {
+      await api.post(
+        '/api/auth/logout',
+        {},
+        {
+          headers: {
+            Authorization: `Bearer ${accessToken}`,
+          },
+        }
+      );
+    } catch {
+      toast.error('오류가 발생했습니다.');
+    } finally {
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
+      setIsLoggedIn(false);
+      navigate('/');
+      toast.success('로그아웃 되었습니다.');
+    }
+  };
 
   return (
     <div>
@@ -124,36 +152,73 @@ const Sidebar = ({ isOpen, isRoot }) => {
           <div className={styles['menu-section']}>
             <span className={styles['menu-title']}>계정</span>
             <ul>
-              <li>
-                <NavLink
-                  to="/mypage"
-                  className={({ isActive }) =>
-                    isActive ? styles['active-link'] : styles['inactive-link']
-                  }
-                >
-                  마이페이지
-                </NavLink>
-              </li>
-              <li>
-                <NavLink
-                  to="/login"
-                  className={({ isActive }) =>
-                    isActive ? styles['active-link'] : styles['inactive-link']
-                  }
-                >
-                  로그인
-                </NavLink>
-              </li>
-              <li>
-                <NavLink
-                  to="/signup"
-                  className={({ isActive }) =>
-                    isActive ? styles['active-link'] : styles['inactive-link']
-                  }
-                >
-                  회원가입
-                </NavLink>
-              </li>
+              {isLoggedIn ? (
+                <>
+                  <li>
+                    <NavLink
+                      to="/mypage"
+                      className={({ isActive }) =>
+                        isActive
+                          ? styles['active-link']
+                          : styles['inactive-link']
+                      }
+                    >
+                      마이페이지
+                    </NavLink>
+                  </li>
+
+                  <li>
+                    <NavLink
+                      to="/"
+                      className={styles['inactive-link']}
+                      onClick={logout}
+                    >
+                      로그아웃
+                    </NavLink>
+                  </li>
+                </>
+              ) : (
+                <>
+                  <li>
+                    <NavLink
+                      to="/mypage"
+                      className={({ isActive }) =>
+                        isActive
+                          ? styles['active-link']
+                          : styles['inactive-link']
+                      }
+                    >
+                      마이페이지
+                    </NavLink>
+                  </li>
+
+                  <li>
+                    <NavLink
+                      to="/login"
+                      className={({ isActive }) =>
+                        isActive
+                          ? styles['active-link']
+                          : styles['inactive-link']
+                      }
+                    >
+                      로그인
+                    </NavLink>
+                  </li>
+
+                  <li>
+                    <NavLink
+                      to="/signup"
+                      className={({ isActive }) =>
+                        isActive
+                          ? styles['active-link']
+                          : styles['inactive-link']
+                      }
+                    >
+                      회원가입
+                    </NavLink>
+                  </li>
+                </>
+              )}
             </ul>
           </div>
         </nav>

frontend/src/hooks/useAuthGuard.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+export const useAuthGuard = () => {
+  const nav = useNavigate();
+
+  useEffect(() => {
+    if (!localStorage.getItem('accessToken')) {
+      toast.error('로그인 후 이용하실 수 있습니다.');
+      nav('/login');
+    }
+  }, [nav]);
+};

frontend/src/pages/Mypage.jsx

@@ -2,8 +2,11 @@ import styles from './Mypage.module.css';
 import MyPageMenu from '../components/mypage/MyPageMenu';
 import ProfileCard from '../components/mypage/ProfileCard';
 import AccountSecurity from '../components/mypage/AccountSecurity';
+import { useAuthGuard } from '../hooks/useAuthGuard';
 
 const Mypage = () => {
+  useAuthGuard();
+
   return (
     <div className={styles.container}>
       <h1 className={styles.title}>마이페이지</h1>

frontend/src/pages/StockGame.jsx

@@ -2,11 +2,14 @@ import styles from './StockGame.module.css';
 import Betting from '../components/stockgame/Betting';
 import BettingHistory from '../components/stockgame/BettingHistory';
 import { useState } from 'react';
+import { useAuthGuard } from '../hooks/useAuthGuard';
 
 const StockGame = () => {
   const [active, setactive] = useState('progress');
   const [lastGame, setLastGame] = useState('weekly');
 
+  useAuthGuard();
+
   return (
     <div className={styles['stock-game']}>
       <h1 className={styles['title']}>주식베팅</h1>