- 테마 시스템: 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>
29 lines
699 B
TypeScript
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 />;
|
|
}
|