htlee
a0395622ab
- AuthProvider + ProtectedRoute + AdminRoute (인증 가드) - LoginPage (Google OAuth), PendingPage, DeniedPage - AppLayout (사이드바 + 메인 콘텐츠) - HomePage (퀵링크 카드), GuidePage (섹션 동적 렌더링) - BrowserRouter 라우팅 구성 - API fetch 래퍼 + 메뉴 네비게이션 유틸 - 타입 정의 (User, Role, AuthResponse, NavItem, Issue) - CLAUDE.md 상세화 (별도 세션 작업 가이드)
52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { GoogleLogin, GoogleOAuthProvider } from '@react-oauth/google';
|
|
import { Navigate } from 'react-router';
|
|
import { useAuth } from '../auth/useAuth';
|
|
|
|
const GOOGLE_CLIENT_ID =
|
|
'295080817934-1uqaqrkup9jnslajkl1ngpee7gm249fv.apps.googleusercontent.com';
|
|
|
|
export function LoginPage() {
|
|
const { user, login, loading } = useAuth();
|
|
|
|
if (loading) return null;
|
|
if (user && user.status === 'ACTIVE') return <Navigate to="/" replace />;
|
|
if (user && user.status === 'PENDING')
|
|
return <Navigate to="/pending" replace />;
|
|
|
|
return (
|
|
<GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900 flex items-center justify-center px-4">
|
|
<div className="bg-white rounded-2xl shadow-2xl p-10 max-w-sm w-full text-center">
|
|
<div className="mb-6">
|
|
<div className="w-16 h-16 bg-blue-600 rounded-xl mx-auto mb-4 flex items-center justify-center">
|
|
<span className="text-white text-2xl font-bold">GC</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-gray-900">
|
|
GC SI 개발자 가이드
|
|
</h1>
|
|
<p className="text-gray-500 mt-2 text-sm">
|
|
@gcsc.co.kr 계정으로 로그인하세요
|
|
</p>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<GoogleLogin
|
|
onSuccess={(res) => {
|
|
if (res.credential) login(res.credential);
|
|
}}
|
|
onError={() => {
|
|
console.error('Google Login failed');
|
|
}}
|
|
theme="outline"
|
|
size="large"
|
|
width="280"
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-gray-400 mt-6">
|
|
GC SI 사내 개발환경 전용
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</GoogleOAuthProvider>
|
|
);
|
|
}
|