gc-guide/src/auth/ProtectedRoute.tsx
htlee 456cfdddd9 feat: 전체 UI 구현 및 백엔드 인증 API 연동
- 테마 시스템: CSS 변수 + data-theme + Tailwind v4 시맨틱 색상 (다크모드 지원)
- 공통 컴포넌트: CodeBlock, Alert, StepGuide, CopyButton, TableOfContents
- 가이드 콘텐츠 8개 섹션 (React.lazy 동적 로딩, 실제 인프라 검증 완료)
- 관리자 페이지 4개 (사용자/롤/권한/통계)
- 레이아웃: 반응형 사이드바 + 테마 토글 + ScrollSpy 목차
- 인증: Google OAuth 로그인/세션복원/로그아웃 백엔드 API 연동
- 개발모드 mock 인증 (import.meta.env.DEV 전용)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-14 17:38:28 +09:00

29 lines
699 B
TypeScript

import { Navigate, Outlet } from 'react-router';
import { useAuth } from './useAuth';
export function ProtectedRoute() {
const { user, loading } = useAuth();
if (loading) {
return (
<div className="min-h-screen flex items-center justify-center bg-bg-primary">
<div className="animate-spin h-8 w-8 border-4 border-accent border-t-transparent rounded-full" />
</div>
);
}
if (!user) {
return <Navigate to="/login" replace />;
}
if (user.status === 'PENDING') {
return <Navigate to="/pending" replace />;
}
if (user.status === 'REJECTED' || user.status === 'DISABLED') {
return <Navigate to="/denied" replace />;
}
return <Outlet />;
}