devfront 로그인 페이지 UI 구현

devfront/src/features/auth/LoginPage.tsx

@@ -1,23 +1,87 @@
+import { ShieldHalf, LogIn, ExternalLink } from "lucide-react";
 import { useAuth } from "react-oidc-context";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
 
-export default function LoginPage() {
+function LoginPage() {
   const auth = useAuth();
 
-  const handleLogin = () => {
+  const handleSSOLogin = () => {
+    // OIDC client-side authentication flow started here
     auth.signinRedirect();
   };
 
   return (
-    <div className="flex h-screen w-full items-center justify-center bg-gray-100">
+    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-12 sm:px-6 lg:px-8 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-background to-background">
-      <div className="w-full max-w-sm rounded-lg border bg-white p-8 shadow-sm">
+      <div className="w-full max-w-md space-y-8">
-        <h1 className="mb-6 text-center text-2xl font-bold text-gray-900">DevFront Login</h1>
+        <div className="flex flex-col items-center justify-center space-y-4 text-center">
-        <button
+          <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/15 text-primary shadow-[0_20px_50px_rgba(54,211,153,0.3)]">
-          onClick={handleLogin}
+            <ShieldHalf size={32} />
-          className="w-full rounded bg-blue-600 px-4 py-2 font-bold text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+          </div>
-        >
+          <div className="space-y-2">
-          Sign in with Baron SSO
+            <h1 className="text-3xl font-bold tracking-tight">Baron SSO</h1>
-        </button>
+            <p className="text-sm text-muted-foreground uppercase tracking-[0.2em]">
+              Developer Control Plane
+            </p>
+          </div>
+        </div>
+
+        <Card className="border-primary/20 bg-card/50 backdrop-blur-xl shadow-2xl">
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl flex items-center gap-2">
+                <LogIn size={20} className="text-primary" />
+                개발자 포털 로그인
+            </CardTitle>
+            <CardDescription>
+              Baron 통합 인증(SSO)을 통해 개발자 포털에 접속합니다.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="pt-4 pb-8 space-y-3">
+            <Button 
+                onClick={handleSSOLogin} 
+                className="w-full h-14 text-lg font-semibold flex gap-3 shadow-lg"
+                disabled={auth.isLoading}
+            >
+              {auth.isLoading ? (
+                <>
+                  <div className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                  로그인 진행 중...
+                </>
+              ) : (
+                <>
+                  <ShieldHalf size={22} />
+                  SSO 계정으로 로그인
+                  <ExternalLink size={16} className="opacity-50" />
+                </>
+              )}
+            </Button>
+            
+            <p className="mt-6 text-xs text-center text-muted-foreground leading-relaxed">
+              개발자 포털 세션은 브라우저 정책에 따라 유지됩니다.<br />
+              민감한 작업 시 재인증을 요구할 수 있습니다.
+            </p>
+          </CardContent>
+        </Card>
+
+        <div className="flex justify-center gap-4">
+            <div className="h-1 w-1 rounded-full bg-primary/30"></div>
+            <div className="h-1 w-1 rounded-full bg-primary/30"></div>
+            <div className="h-1 w-1 rounded-full bg-primary/30"></div>
+        </div>
+
+        <p className="px-8 text-center text-sm text-muted-foreground">
+          인증 정보가 없거나 로그인이 되지 않는 경우<br />
+          시스템 관리자에게 문의하세요.
+        </p>
       </div>
     </div>
   );
 }
+
+export default LoginPage;