vignette/apps/web/src/App.tsx

/* =====================================================================
   App — 라우터. AuthProvider 로 감싸고 역할 가드(RequireAuth) 적용.
   라우트 (task 명세):
     /login                            -> Login
     /learn                            -> LearnerHome  (learner)
     /learn/session/:sessionId         -> Session
     /learn/session/:sessionId/review  -> SessionReview
     /teach                            -> Professor    (teacher → data-role=instructor)
     /admin                            -> Admin        (admin)
     /settings                         -> Settings
     /                                 -> Navigate(역할 홈, 미인증이면 /login)
   보호 라우트는 AuthContext 기반 간단 가드. 과설계 금지.
   ===================================================================== */

import type { ReactNode } from "react";
import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
import { AuthProvider, useAuth, roleHomePath, type Role } from "./lib/auth";

import Login from "./pages/Login";
import LearnerHome from "./pages/LearnerHome";
import Session from "./pages/Session";
import SessionReview from "./pages/SessionReview";
import Professor from "./pages/Professor";
import Admin from "./pages/Admin";
import Settings from "./pages/Settings";

/** 부트스트랩 로딩 동안 깜빡임 최소화용 중립 화면. */
function BootScreen() {
  return (
    <div
      style={{
        minHeight: "100vh",
        display: "grid",
        placeItems: "center",
        background: "var(--bg-app)",
        color: "var(--text-muted)",
        fontSize: "var(--fs-sm)",
      }}
    >
      불러오는 중…
    </div>
  );
}

/**
 * RequireAuth — 미인증이면 /login 으로. (선택) roles 로 역할 제한.
 * 권한 불일치 시 자신의 역할 홈으로 보냄(빈 화면/에러 대신).
 */
function RequireAuth({ children, roles }: { children: ReactNode; roles?: Role[] }) {
  const { user, loading } = useAuth();
  const location = useLocation();

  if (loading) return <BootScreen />;
  if (!user) {
    return <Navigate to="/login" replace state={{ from: location.pathname }} />;
  }
  if (roles && !roles.includes(user.role)) {
    return <Navigate to={roleHomePath(user.role)} replace />;
  }
  return <>{children}</>;
}

/** 루트(/) — 인증되면 역할 홈, 아니면 /login. */
function RootRedirect() {
  const { user, loading } = useAuth();
  if (loading) return <BootScreen />;
  return <Navigate to={user ? roleHomePath(user.role) : "/login"} replace />;
}

function AppRoutes() {
  return (
    <Routes>
      <Route path="/login" element={<Login />} />

      {/* 학습자 */}
      <Route
        path="/learn"
        element={
          <RequireAuth roles={["learner"]}>
            <LearnerHome />
          </RequireAuth>
        }
      />
      <Route
        path="/learn/session/:sessionId"
        element={
          <RequireAuth roles={["learner"]}>
            <Session />
          </RequireAuth>
        }
      />
      <Route
        path="/learn/session/:sessionId/review"
        element={
          <RequireAuth roles={["learner"]}>
            <SessionReview />
          </RequireAuth>
        }
      />

      {/* 교수자 */}
      <Route
        path="/teach"
        element={
          <RequireAuth roles={["teacher"]}>
            <Professor />
          </RequireAuth>
        }
      />

      {/* 관리자 */}
      <Route
        path="/admin"
        element={
          <RequireAuth roles={["admin"]}>
            <Admin />
          </RequireAuth>
        }
      />

      {/* 설정 — 3역할 공통 */}
      <Route
        path="/settings"
        element={
          <RequireAuth>
            <Settings />
          </RequireAuth>
        }
      />

      <Route path="/" element={<RootRedirect />} />
      {/* 미정의 경로 → 루트로 */}
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
}

export default function App() {
  return (
    <BrowserRouter>
      <AuthProvider>
        <AppRoutes />
      </AuthProvider>
    </BrowserRouter>
  );
}