feat: 어드민 화면 권한 제어

Author: nirii00

src/App.tsx

@@ -9,6 +9,7 @@ import FilteredLetterManage from './pages/Admin/FilteredLetter';
 import FilteringManage from './pages/Admin/Filtering';
 import ReportManage from './pages/Admin/Report';
 import AdminRollingPaper from './pages/Admin/RollingPaper';
+import AdminRoute from './layouts/AdminRoute';
 import AuthCallbackPage from './pages/Auth';
 import Home from './pages/Home';
 import Landing from './pages/Landing';
@@ -28,12 +29,10 @@ import RollingPaperPage from './pages/RollingPaper';
 import WritePage from './pages/Write';
 import ShareApprovalPage from './pages/Share';
 import useThemeStore from './stores/themeStore';
-import { useServerSentEvents } from './hooks/useServerSentEvents';
 
 const App = () => {
   const theme = useThemeStore((state) => state.theme);
   useViewport();
-  useServerSentEvents();
 
   const initializeTheme = () => {
     if (theme === 'dark') {
@@ -81,7 +80,7 @@ const App = () => {
         </Route>
       </Route>
 
-      <Route element={<PrivateRoute />}>
+      <Route element={<AdminRoute />}>
         <Route path="admin" element={<AdminPage />}>
           <Route path="report" element={<ReportManage />} />
           <Route path="badwords" element={<FilteringManage />} />

src/layouts/AdminRoute.tsx

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { useNavigate, Outlet } from 'react-router';
+
+import useAuthStore from '@/stores/authStore';
+
+export default function AdminRoute() {
+  const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
+  const isAdmin = useAuthStore((state) => state.isAdmin);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!isLoggedIn) {
+      navigate('/login', { replace: true });
+    }
+    if (!isAdmin) {
+      navigate('/', { replace: true });
+    }
+  }, [isLoggedIn, navigate]);
+
+  if (!isLoggedIn || !isAdmin) {
+    return null;
+  }
+
+  return (
+    <>
+      <Outlet />
+    </>
+  );
+}

src/layouts/PrivateRoute.tsx

@@ -1,25 +1,23 @@
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useNavigate, Outlet } from 'react-router';
 
 import useAuthStore from '@/stores/authStore';
 import { useServerSentEvents } from '@/hooks/useServerSentEvents';
 import Toast from '@/components/Toast';
 
 export default function PrivateRoute() {
-  useServerSentEvents();
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const navigate = useNavigate();
-  const [shouldRender, setShouldRender] = useState(false);
+
+  useServerSentEvents();
 
   useEffect(() => {
     if (!isLoggedIn) {
       navigate('/login', { replace: true });
-    } else {
-      setShouldRender(true);
     }
   }, [isLoggedIn, navigate]);
 
-  if (!shouldRender) {
+  if (!isLoggedIn) {
     return null;
   }
 

src/pages/Admin/components/Sidebar.tsx

@@ -4,9 +4,11 @@ import { twMerge } from 'tailwind-merge';
 import { AlarmIcon, ArrowDownIcon } from '@/assets/icons';
 
 import { ADMIN_MENU_LIST } from '../constants';
+import useAuthStore from '@/stores/authStore';
 
 export default function Sidebar() {
   const location = useLocation();
+  const logout = useAuthStore((state) => state.logout);
 
   return (
     <section className="border-gray-10 flex w-65 shrink-0 flex-col border-r">
@@ -16,7 +18,7 @@ export default function Sidebar() {
       </h1>
       <section className="mt-2 flex flex-col px-5 py-4">
         <h2 className="body-l-b py-2">현재 로그인 계정</h2>
-        <p className="body-l-r py-2">{'admin123@test.com'}</p>
+        <p className="body-l-r py-2">{'wl990@naver.com'}</p>
       </section>
       <hr className="border-gray-20 mx-2.5" />
       <section className="flex flex-col py-5">
@@ -54,7 +56,9 @@ export default function Sidebar() {
       </section>
       <button className="mt-auto flex w-full items-center gap-3 px-5 py-3 hover:bg-amber-100">
         <AlarmIcon className="text-gray-80 h-5 w-5" />
-        <span className="text-gray-80 body-l-m">로그아웃</span>
+        <span className="text-gray-80 body-l-m" onClick={logout}>
+          로그아웃
+        </span>
       </button>
     </section>
   );

src/pages/Auth/index.tsx

@@ -13,7 +13,10 @@ const AuthCallbackPage = () => {
   const logout = useAuthStore((state) => state.logout);
   const setAccessToken = useAuthStore((state) => state.setAccessToken);
   const setZipCode = useAuthStore((state) => state.setZipCode);
+  const setIsAdmin = useAuthStore((state) => state.setIsAdmin);
   const navigate = useNavigate();
+  let accessToken = '';
+  let role = '';
 
   const handleError = (error: unknown) => {
     console.error('AuthCallback Error:', error);
@@ -32,8 +35,7 @@ const AuthCallbackPage = () => {
 
       login();
       if (userInfo.accessToken) setAccessToken(userInfo.accessToken);
-
-      console.log(redirectURL);
+      accessToken = userInfo.accessToken;
 
       switch (redirectURL) {
         case 'home':
@@ -54,14 +56,23 @@ const AuthCallbackPage = () => {
             if (!newAccessToken) throw new Error('Missing new access token');
 
             setAccessToken(newAccessToken);
+            accessToken = newAccessToken;
           }
           break;
 
         default:
           navigate('/notFound');
           return;
       }
-      navigate(redirectURL === 'onboarding' ? '/onboarding' : '/');
+
+      role = JSON.parse(atob(accessToken.split('.')[1])).role;
+
+      if (role === 'ADMIN') {
+        setIsAdmin();
+        navigate('/admin');
+      } else {
+        navigate(redirectURL === 'onboarding' ? '/onboarding' : '/');
+      }
     } catch (error) {
       handleError(error);
     }

src/stores/authStore.ts

@@ -6,10 +6,12 @@ interface AuthStore {
   isLoggedIn: boolean;
   zipCode: string;
   accessToken: string;
+  isAdmin: boolean;
   login: () => void;
   logout: () => Promise<void>;
   setZipCode: (zipCode: string) => void;
   setAccessToken: (accessToken: string) => void;
+  setIsAdmin: () => void;
 }
 
 const useAuthStore = create(
@@ -18,6 +20,7 @@ const useAuthStore = create(
       isLoggedIn: false,
       accessToken: '',
       zipCode: '',
+      isAdmin: false,
       login: () => set({ isLoggedIn: true }),
       logout: async () => {
         const theme = useThemeStore.getState().theme;
@@ -26,7 +29,7 @@ const useAuthStore = create(
         if (theme === 'dark') {
           toggleTheme();
         }
-        set({ isLoggedIn: false, zipCode: '', accessToken: '' });
+        set({ isLoggedIn: false, zipCode: '', accessToken: '', isAdmin: false });
         // location.reload();
         // try {
         //   await postLogout();
@@ -36,6 +39,7 @@ const useAuthStore = create(
       },
       setZipCode: (zipCode) => set({ zipCode: zipCode }),
       setAccessToken: (accessToken) => set({ accessToken: accessToken }),
+      setIsAdmin: () => set({ isAdmin: true }),
     }),
     {
       name: 'userInfo',