kcg-ai-monitoring/frontend/src/app/App.tsx

import { Suspense, useMemo, lazy } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AuthProvider, useAuth } from '@/app/auth/AuthContext';
import { MainLayout } from '@/app/layout/MainLayout';
import { LoginPage } from '@features/auth';
import { useMenuStore } from '@stores/menuStore';
import { COMPONENT_REGISTRY } from '@/app/componentRegistry';

// 권한 노드 없는 드릴다운 라우트 (인증만 체크)
const VesselDetail = lazy(() => import('@features/vessel').then((m) => ({ default: m.VesselDetail })));

/**
 * 권한 가드.
 * - user 미인증 시 /login으로 리다이렉트
 * - resource 지정 시 hasPermission 체크 → 거부 시 403 표시
 */
function ProtectedRoute({
  children,
  resource,
  operation = 'READ',
}: {
  children: React.ReactNode;
  resource?: string;
  operation?: string;
}) {
  const { user, loading, hasPermission } = useAuth();
  if (loading) return null;
  if (!user) return <Navigate to="/login" replace />;
  if (resource && !hasPermission(resource, operation)) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-6">
        <div className="text-4xl mb-4">🚫</div>
        <h1 className="text-xl font-bold text-heading mb-2">접근 권한이 없습니다</h1>
        <p className="text-sm text-hint">
          이 페이지에 접근하려면 <code className="bg-surface-overlay px-1.5 py-0.5 rounded">{resource}</code>::{operation} 권한이 필요합니다.
        </p>
      </div>
    );
  }
  return <>{children}</>;
}

function LoadingFallback() {
  return (
    <div className="flex items-center justify-center min-h-[40vh]">
      <div className="text-sm text-hint">로딩 중...</div>
    </div>
  );
}

/**
 * DB menu_config 기반 동적 라우트를 Route 배열로 반환.
 * React Router v6는 <Routes> 직계 자식으로 <Route>만 허용하므로 컴포넌트가 아닌 함수로 생성.
 */
function useDynamicRoutes() {
  const items = useMenuStore((s) => s.items);
  const routableItems = useMemo(
    () => items.filter((i) => i.menuType === 'ITEM' && i.urlPath),
    [items],
  );

  return routableItems.map((item) => {
    const Comp = item.componentKey ? COMPONENT_REGISTRY[item.componentKey] : null;
    if (!Comp || !item.urlPath) return null;
    const path = item.urlPath.replace(/^\//, '');
    return (
      <Route
        key={item.menuCd}
        path={path}
        element={
          <ProtectedRoute resource={item.rsrcCd ?? undefined}>
            <Suspense fallback={<LoadingFallback />}>
              <Comp />
            </Suspense>
          </ProtectedRoute>
        }
      />
    );
  });
}

function AppRoutes() {
  const dynamicRoutes = useDynamicRoutes();

  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route path="/" element={<ProtectedRoute><MainLayout /></ProtectedRoute>}>
        <Route index element={<Navigate to="/dashboard" replace />} />
        {dynamicRoutes}
        {/* 드릴다운 전용 라우트 — 메뉴/권한 노드 없음, 인증만 체크 */}
        <Route path="vessel/:id" element={<Suspense fallback={<LoadingFallback />}><VesselDetail /></Suspense>} />
      </Route>
    </Routes>
  );
}

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