Merge pull request #29 from next-engineer/feature/13-route-guard

Feature/13 route guard

Author: Mminzy22

src/App.tsx

@@ -1,13 +1,99 @@
-import { RouterProvider } from 'react-router-dom';
-import { ThemeProvider, CssBaseline } from '@mui/material';
-import { theme } from './styles/theme';
-import { router } from './routes';
+import { useEffect } from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+import { ProtectedRoute, AdminRoute, PublicOnlyRoute } from './components/RouteGuards';
+import { useAuthStore } from './store/useAuthStore';
+
+// common page
+import AppLayout from './components/AppLayout';
+import HomePage from './pages/HomePage';
+import NotFoundPage from './pages/NotFoundPage';
+import MatchesPage from './pages/MatchesPage';
+import AuthCallbackPage from './pages/AuthCallbackPage';
+
+// public only page
+import SignupPage from './pages/SignupPage';
+import LoginPage from './pages/LoginPage';
+
+// protected page
+import ProfilePage from './pages/ProfilePage';
+import MyMatchesPage from './pages/MyMatchesPage';
+
+// admin page
+import CreateMatchPage from './pages/CreateMatchPage';
 
 export default function App() {
+  useEffect(() => {
+    useAuthStore.getState().syncFromStorage();
+  }, []);
+
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <RouterProvider router={router} />
-    </ThemeProvider>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/auth/callback" element={<AuthCallbackPage />} />
+
+        {/* AppLayout을 적용하는 페이지 */}
+        <Route path="/" element={<AppLayout />}>
+          {/* 누구나 접근 가능한 페이지 */}
+          <Route path="/" element={<HomePage />} />
+          <Route path="/home" element={<HomePage />} />
+          <Route path="/notfound" element={<NotFoundPage />} />
+          <Route path="/matches" element={<MatchesPage />} />
+
+          {/* 로그인하지 않은 사용자만 접근 가능 */}
+          <Route
+            path="/login"
+            element={
+              <PublicOnlyRoute>
+                <LoginPage />
+              </PublicOnlyRoute>
+            }
+          />
+          <Route
+            path="/signup"
+            element={
+              <PublicOnlyRoute>
+                <SignupPage />
+              </PublicOnlyRoute>
+            }
+          />
+          {/* <Route 
+            path="/auth/callback" 
+            element={
+              <ProtectedRoute>
+                <AuthCallbackPage />
+              </ProtectedRoute>} 
+          /> */}
+
+          {/* 로그인한 사용자만 접근 가능 */}
+          <Route
+            path="/profile"
+            element={
+              <ProtectedRoute>
+                <ProfilePage />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/mymatches"
+            element={
+              <ProtectedRoute>
+                <MyMatchesPage />
+              </ProtectedRoute>
+            }
+          />
+
+          {/* 관리자만 접근 가능 */}
+          <Route
+            path="/createMatch"
+            element={
+              <AdminRoute>
+                <CreateMatchPage />
+              </AdminRoute>
+            }
+          />
+        </Route>
+      </Routes>
+    </BrowserRouter>
   );
 }

src/components/ProtectedRoute.tsx

@@ -0,0 +1,94 @@
+import type { ReactNode } from 'react';
+import type { UserRole } from '../types/index';
+import { useEffect, useState } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { useAuthStore } from '../store/useAuthStore';
+
+// 공통 Props 타입
+interface RouteGuardProps {
+  children: ReactNode;
+}
+
+// 로그인이 필요한 페이지를 보호하는 컴포넌트
+export const ProtectedRoute = ({ children }: RouteGuardProps) => {
+  const { isAuthenticated, tokens } = useAuthStore();
+  const location = useLocation();
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    // 토큰이 있는지 확인하고 로딩 상태 해제
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 100); // 짧은 지연으로 비동기 처리 대기
+
+    return () => clearTimeout(timer);
+  }, [tokens]);
+
+  // 아직 인증 상태를 확인 중이면 로딩 표시
+  if (isLoading) {
+    return <div>로딩 중...</div>;
+  }
+
+  // 로그인하지 않았다면 로그인 페이지로 리다이렉트
+  // state에 현재 위치를 저장해서 로그인 후 다시 돌아올 수 있게 함
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  // 로그인했다면 원래 보려던 페이지 표시
+  return <>{children}</>;
+};
+
+// 특정 권한이 필요한 페이지를 보호하는 컴포넌트
+interface RoleGuardProps extends RouteGuardProps {
+  requiredRole: UserRole;
+  fallbackPath?: string; // 권한이 없을 때 이동할 경로
+}
+
+export const RoleGuard = ({ children, requiredRole, fallbackPath = '/' }: RoleGuardProps) => {
+  const { user, isAuthenticated } = useAuthStore();
+  const location = useLocation();
+
+  // if (isLoading) {
+  //   return <div>로딩 중...</div>;
+  // }
+
+  // 로그인하지 않았다면 로그인 페이지로
+  if (!isAuthenticated) {
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  // 로그인했지만 권한이 없다면 fallback 경로로
+  if (user?.role !== requiredRole) {
+    return <Navigate to={fallbackPath} replace />;
+  }
+
+  // 모든 조건을 만족하면 원래 페이지 표시
+  return <>{children}</>;
+};
+
+// 관리자 전용 페이지를 보호하는 컴포넌트 (RoleGuard의 특화 버전)
+export const AdminRoute = ({ children }: RouteGuardProps) => {
+  return (
+    <RoleGuard requiredRole="ADMIN" fallbackPath="/unauthorized">
+      {children}
+    </RoleGuard>
+  );
+};
+
+// 이미 로그인한 사용자가 접근하면 안 되는 페이지 (로그인, 회원가입 등)
+export const PublicOnlyRoute = ({ children }: RouteGuardProps) => {
+  const { isAuthenticated } = useAuthStore();
+
+  // if (isLoading) {
+  //   return <div>로딩 중...</div>;
+  // }
+
+  // 이미 로그인했다면 홈으로 리다이렉트
+  if (isAuthenticated) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <>{children}</>;
+};

src/components/RouteGuards.tsx

@@ -19,6 +19,7 @@ export default function AuthCallbackPage() {
       } catch (e: unknown) {
         const message = e instanceof Error ? e.message : '인증 처리 중 오류가 발생했습니다.';
         setError(message);
+        navigate('/login', { replace: true });
       }
     })();
   }, [navigate]);