@jcjeon/integration-cli 0.2.0

package/apps/web/src/features/auth/ui/GeminiLoginPanel.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+import { useRef, useState } from "react";
+
+import type { GeminiAuthMethod, GeminiLoginState } from "../hooks/useGeminiAuth";
+
+interface GeminiLoginPanelProps {
+  loginState: GeminiLoginState;
+  loginOutput: string;
+  loginUrls: string[];
+  configError: string;
+  onSaveApiKey: (key: string) => void;
+  onStartGca: () => void;
+  onCancel: () => void;
+  onReset: () => void;
+}
+
+const GOOGLE_LOGO = (
+  <svg viewBox="0 0 24 24" className="h-5 w-5 shrink-0" aria-hidden="true">
+    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+  </svg>
+);
+
+// ─── Method Select ────────────────────────────────────────────────────────────
+
+interface MethodSelectProps {
+  onSelect: (method: GeminiAuthMethod) => void;
+}
+
+function MethodSelect({ onSelect }: MethodSelectProps) {
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-3">
+      <button
+        onClick={() => onSelect("api-key")}
+        className="flex items-center gap-3 rounded-xl border border-gray-900/[0.08] bg-gray-900/[0.02] px-5 py-4 text-left transition-all hover:border-blue-500/40 hover:bg-blue-500/[0.04] dark:border-white/[0.08] dark:bg-white/[0.02] dark:hover:border-blue-400/40 dark:hover:bg-blue-400/[0.04]"
+      >
+        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/[0.10]">
+          <svg viewBox="0 0 20 20" fill="currentColor" className="h-4.5 w-4.5 text-blue-500 dark:text-blue-400">
+            <path fillRule="evenodd" d="M8 7a5 5 0 113.61 4.804l-1.903 1.903A1 1 0 019 14H8v1a1 1 0 01-1 1H6v1a1 1 0 01-1 1H3a1 1 0 01-1-1v-2a1 1 0 01.293-.707L8.196 8.39A5.002 5.002 0 018 7zm5-3a.75.75 0 000 1.5A1.5 1.5 0 0114.5 7 .75.75 0 0016 7a3 3 0 00-3-3z" clipRule="evenodd" />
+          </svg>
+        </span>
+        <div>
+          <p className="text-sm font-semibold text-gray-900/85 dark:text-white/85">API 키</p>
+          <p className="text-xs text-gray-900/35 dark:text-white/35">Google AI Studio에서 발급한 키 입력</p>
+        </div>
+      </button>
+
+      <button
+        onClick={() => onSelect("gca")}
+        className="flex items-center gap-3 rounded-xl border border-gray-900/[0.08] bg-gray-900/[0.02] px-5 py-4 text-left transition-all hover:border-blue-500/40 hover:bg-blue-500/[0.04] dark:border-white/[0.08] dark:bg-white/[0.02] dark:hover:border-blue-400/40 dark:hover:bg-blue-400/[0.04]"
+      >
+        <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/[0.10]">
+          {GOOGLE_LOGO}
+        </span>
+        <div>
+          <p className="text-sm font-semibold text-gray-900/85 dark:text-white/85">Google Cloud (GCA)</p>
+          <p className="text-xs text-gray-900/35 dark:text-white/35">gcloud CLI로 Application Default Credentials 설정</p>
+        </div>
+      </button>
+    </div>
+  );
+}
+
+// ─── API Key Form ─────────────────────────────────────────────────────────────
+
+interface ApiKeyFormProps {
+  loginState: GeminiLoginState;
+  configError: string;
+  onSubmit: (key: string) => void;
+  onBack: () => void;
+}
+
+function ApiKeyForm({ loginState, configError, onSubmit, onBack }: ApiKeyFormProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const key = inputRef.current?.value.trim() ?? "";
+    if (key) onSubmit(key);
+  };
+
+  if (loginState === "done") return <SuccessView />;
+
+  return (
+    <form onSubmit={handleSubmit} className="flex w-full max-w-sm flex-col gap-4">
+      <div className="flex flex-col gap-1.5">
+        <label className="text-xs font-medium text-gray-900/50 dark:text-white/50">
+          Gemini API 키
+        </label>
+        <input
+          ref={inputRef}
+          type="password"
+          placeholder="AIza..."
+          autoFocus
+          required
+          className="rounded-lg border border-gray-900/[0.10] bg-gray-900/[0.03] px-3.5 py-2.5 font-mono text-sm text-gray-900/85 placeholder-gray-900/20 outline-none transition-colors focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/10 dark:border-white/[0.10] dark:bg-white/[0.03] dark:text-white/85 dark:placeholder-white/20 dark:focus:border-blue-400/50 dark:focus:ring-blue-400/10"
+        />
+        <p className="text-[11px] text-gray-900/30 dark:text-white/30">
+          <a
+            href="https://aistudio.google.com/app/apikey"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-blue-500 hover:underline dark:text-blue-400"
+          >
+            Google AI Studio
+          </a>
+          에서 API 키를 발급받을 수 있습니다.
+        </p>
+        {configError && (
+          <p className="text-xs text-red-500 dark:text-red-400">{configError}</p>
+        )}
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <button
+          type="submit"
+          disabled={loginState === "pending"}
+          className="flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-blue-500 disabled:opacity-50"
+        >
+          {loginState === "pending" && (
+            <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+          )}
+          {loginState === "pending" ? "저장 중…" : "저장"}
+        </button>
+        <button
+          type="button"
+          onClick={onBack}
+          className="text-xs text-gray-900/25 transition-colors hover:text-gray-900/50 dark:text-white/25 dark:hover:text-white/50"
+        >
+          ← 뒤로
+        </button>
+      </div>
+    </form>
+  );
+}
+
+// ─── GCA Form ─────────────────────────────────────────────────────────────────
+
+interface GcaFormProps {
+  loginState: GeminiLoginState;
+  loginOutput: string;
+  loginUrls: string[];
+  onStart: () => void;
+  onCancel: () => void;
+  onBack: () => void;
+}
+
+function GcaForm({ loginState, loginOutput, loginUrls, onStart, onCancel, onBack }: GcaFormProps) {
+  if (loginState === "done") return <SuccessView />;
+
+  const isPending = loginState === "pending";
+
+  return (
+    <div className="flex w-full max-w-lg flex-col gap-4">
+      {loginState === "idle" || loginState === "error" ? (
+        <>
+          <div className="flex flex-col gap-2 rounded-xl border border-gray-900/[0.07] bg-gray-900/[0.025] p-4 dark:border-white/[0.07] dark:bg-white/[0.025]">
+            <p className="text-sm font-medium text-gray-900/70 dark:text-white/70">
+              gcloud CLI가 필요합니다
+            </p>
+            <p className="text-xs text-gray-900/40 dark:text-white/40">
+              먼저{" "}
+              <a
+                href="https://cloud.google.com/sdk/docs/install"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-500 hover:underline dark:text-blue-400"
+              >
+                Google Cloud SDK
+              </a>
+              를 설치한 후 아래 버튼을 클릭하세요.
+            </p>
+            <code className="mt-1 rounded-md bg-gray-900/[0.04] px-2.5 py-1.5 font-mono text-xs text-gray-900/50 dark:bg-white/[0.04] dark:text-white/50">
+              gcloud auth application-default login
+            </code>
+          </div>
+
+          {loginState === "error" && loginOutput && (
+            <pre className="max-h-32 overflow-y-auto rounded-lg border border-red-200 bg-red-50 px-4 py-3 font-mono text-xs whitespace-pre-wrap text-red-600 dark:border-red-900/50 dark:bg-red-950/40 dark:text-red-400">
+              {loginOutput}
+            </pre>
+          )}
+
+          <div className="flex flex-col gap-2">
+            <button
+              onClick={onStart}
+              className="flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-blue-500"
+            >
+              {GOOGLE_LOGO}
+              Google 계정으로 로그인
+            </button>
+            <button
+              onClick={onBack}
+              className="text-xs text-gray-900/25 transition-colors hover:text-gray-900/50 dark:text-white/25 dark:hover:text-white/50"
+            >
+              ← 뒤로
+            </button>
+          </div>
+        </>
+      ) : null}
+
+      {isPending && (
+        <>
+          {loginUrls.length > 0 && (
+            <div className="flex flex-col gap-2">
+              <p className="text-xs font-medium text-gray-900/35 dark:text-white/35">브라우저에서 아래 링크를 열어 인증을 완료하세요:</p>
+              {loginUrls.map((url) => (
+                <a
+                  key={url}
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="break-all rounded-lg border border-blue-700/50 bg-blue-950/30 px-4 py-3 text-xs font-mono text-blue-700 transition-colors hover:border-blue-500 hover:text-blue-600 dark:text-blue-300 dark:hover:text-blue-200"
+                >
+                  {url}
+                </a>
+              ))}
+            </div>
+          )}
+          {loginOutput && (
+            <pre className="max-h-48 overflow-y-auto rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.02] px-4 py-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-gray-900/45 dark:border-white/[0.07] dark:bg-white/[0.02] dark:text-white/45">
+              {loginOutput}
+            </pre>
+          )}
+          {loginUrls.length === 0 && (
+            <div className="flex items-center justify-center gap-2 text-sm text-gray-900/30 dark:text-white/30">
+              <span className="h-4 w-4 animate-spin rounded-full border-2 border-gray-900/[0.08] border-t-blue-500 dark:border-white/[0.08]" />
+              gcloud 인증 진행 중…
+            </div>
+          )}
+          <button onClick={onCancel} className="text-xs text-gray-900/25 transition-colors hover:text-gray-900/50 dark:text-white/25 dark:hover:text-white/50">
+            취소
+          </button>
+        </>
+      )}
+    </div>
+  );
+}
+
+// ─── Success ──────────────────────────────────────────────────────────────────
+
+function SuccessView() {
+  return (
+    <div className="flex flex-col items-center gap-2 text-center">
+      <div className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-500/[0.10]">
+        <svg viewBox="0 0 20 20" fill="currentColor" className="h-6 w-6 text-emerald-500 dark:text-emerald-400">
+          <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
+        </svg>
+      </div>
+      <p className="text-sm font-medium text-emerald-600 dark:text-emerald-400">인증 완료</p>
+    </div>
+  );
+}
+
+// ─── Panel Root ───────────────────────────────────────────────────────────────
+
+export function GeminiLoginPanel({
+  loginState,
+  loginOutput,
+  loginUrls,
+  configError,
+  onSaveApiKey,
+  onStartGca,
+  onCancel,
+  onReset,
+}: GeminiLoginPanelProps) {
+  const [selectedMethod, setSelectedMethod] = useState<GeminiAuthMethod | null>(null);
+
+  const handleBack = () => {
+    onReset();
+    setSelectedMethod(null);
+  };
+
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-6 px-6">
+      {/* Header */}
+      <div className="flex flex-col items-center gap-3 text-center">
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-gray-900/[0.08] bg-blue-500/[0.08] dark:border-white/[0.08]">
+          {GOOGLE_LOGO}
+        </div>
+        <h2 className="text-xl font-semibold text-gray-900/90 dark:text-white/90">Gemini CLI 인증</h2>
+        {!selectedMethod && (
+          <p className="max-w-sm text-sm text-gray-900/40 dark:text-white/40">
+            사용할 인증 방식을 선택해 주세요.
+          </p>
+        )}
+      </div>
+
+      {/* Content */}
+      {!selectedMethod && <MethodSelect onSelect={setSelectedMethod} />}
+
+      {selectedMethod === "api-key" && (
+        <ApiKeyForm
+          loginState={loginState}
+          configError={configError}
+          onSubmit={onSaveApiKey}
+          onBack={handleBack}
+        />
+      )}
+
+      {selectedMethod === "gca" && (
+        <GcaForm
+          loginState={loginState}
+          loginOutput={loginOutput}
+          loginUrls={loginUrls}
+          onStart={onStartGca}
+          onCancel={onCancel}
+          onBack={handleBack}
+        />
+      )}
+    </div>
+  );
+}

package/apps/web/src/features/auth/ui/LoginForm.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+// ─── Atoms ────────────────────────────────────────────────────────────────────
+
+interface LogoMarkProps {
+  className?: string;
+}
+
+function LogoMark({ className }: LogoMarkProps) {
+  return (
+    <div className={`relative ${className ?? ""}`}>
+      <div className="flex h-12 w-64 items-center justify-center rounded-[16px] border border-gray-900/[0.10] bg-gray-900/[0.05] shadow-[inset_0_1px_0_rgba(0,0,0,0.06)] backdrop-blur-sm dark:border-white/[0.10] dark:bg-white/[0.05] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)]">
+        <span className="font-mono text-sm font-bold tracking-widest text-gray-900/65 dark:text-white/65">
+          INTEGRATION-CLI
+        </span>
+      </div>
+      <div className="absolute -inset-2 rounded-[20px] bg-orange-500/10 blur-xl" />
+    </div>
+  );
+}
+
+interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  id: string;
+}
+
+function InputField({ label, id, ...props }: InputFieldProps) {
+  return (
+    <div className="flex flex-col gap-1.5">
+      <label htmlFor={id} className="text-xs font-medium text-gray-900/50 dark:text-white/50">
+        {label}
+      </label>
+      <input
+        id={id}
+        {...props}
+        className="w-full rounded-xl border border-gray-900/[0.10] bg-gray-900/[0.03] px-4 py-3 text-sm text-gray-900/90 placeholder:text-gray-900/25 outline-none ring-0 transition-all duration-200 focus:border-orange-400/60 focus:ring-2 focus:ring-orange-400/15 dark:border-white/[0.10] dark:bg-white/[0.03] dark:text-white/90 dark:placeholder:text-white/25 dark:focus:border-orange-400/50 dark:focus:ring-orange-400/10"
+      />
+    </div>
+  );
+}
+
+interface SubmitButtonProps {
+  label: string;
+  loading?: boolean;
+  onClick?: () => void;
+}
+
+function SubmitButton({ label, loading }: SubmitButtonProps) {
+  return (
+    <button
+      type="submit"
+      disabled={loading}
+      className="relative w-full overflow-hidden rounded-xl bg-orange-600 py-3 text-sm font-semibold text-white transition-all duration-200 hover:bg-orange-500 active:scale-[0.99] disabled:opacity-60"
+    >
+      {loading ? (
+        <span className="flex items-center justify-center gap-2">
+          <span className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+          로그인 중…
+        </span>
+      ) : (
+        label
+      )}
+    </button>
+  );
+}
+
+interface DividerProps {
+  label: string;
+}
+
+function Divider({ label }: DividerProps) {
+  return (
+    <div className="flex items-center gap-3">
+      <div className="h-px flex-1 bg-gray-900/[0.07] dark:bg-white/[0.07]" />
+      <span className="text-xs text-gray-900/25 dark:text-white/25">{label}</span>
+      <div className="h-px flex-1 bg-gray-900/[0.07] dark:bg-white/[0.07]" />
+    </div>
+  );
+}
+
+// ─── Form ─────────────────────────────────────────────────────────────────────
+
+export interface LoginFormProps {
+  email: string;
+  password: string;
+  loading: boolean;
+  error: string | null;
+  onEmailChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+  onSubmit: (e: React.FormEvent) => void;
+  onGuestLogin: () => void;
+}
+
+export function LoginForm({
+  email,
+  password,
+  loading,
+  error,
+  onEmailChange,
+  onPasswordChange,
+  onSubmit,
+  onGuestLogin,
+}: LoginFormProps) {
+  return (
+    <div className="flex w-full max-w-[400px] flex-col items-center gap-8 animate-fade-in-up">
+      {/* Logo */}
+      <header className="flex flex-col items-center gap-5 text-center">
+        <LogoMark />
+        <div>
+          <h1
+            className="text-[2.25rem] font-bold leading-none tracking-[-0.03em]"
+            style={{
+              background: "var(--heading-gradient)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              backgroundClip: "text",
+            }}
+          >
+            JC-CLI
+          </h1>
+          <p className="mt-2 text-[13px] font-medium uppercase tracking-[0.06em] text-gray-900/28 dark:text-white/28">
+            하나의 플랫폼에서 모든 AI CLI를 제어합니다
+          </p>
+        </div>
+      </header>
+
+      {/* Card */}
+      <div className="w-full rounded-2xl border border-gray-900/[0.08] bg-gray-900/[0.025] p-6 shadow-[0_1px_3px_rgba(0,0,0,0.04),0_8px_24px_-4px_rgba(0,0,0,0.04)] backdrop-blur-sm dark:border-white/[0.08] dark:bg-white/[0.025]">
+        {/* Top accent */}
+        <div className="absolute inset-x-0 top-0 h-px rounded-t-2xl bg-gradient-to-r from-transparent via-orange-400/50 to-transparent" />
+
+        <div className="flex flex-col gap-1.5 mb-6">
+          <h2 className="text-[15px] font-semibold text-gray-900/90 dark:text-white/90">
+            로그인
+          </h2>
+          <p className="text-[13px] text-gray-900/35 dark:text-white/35">
+            계정에 로그인하여 서비스를 이용하세요.
+          </p>
+        </div>
+
+        <form onSubmit={onSubmit} className="flex flex-col gap-4">
+          <InputField
+            id="email"
+            label="이메일"
+            type="email"
+            placeholder="you@example.com"
+            autoComplete="email"
+            value={email}
+            onChange={(e) => onEmailChange(e.target.value)}
+          />
+          <InputField
+            id="password"
+            label="비밀번호"
+            type="password"
+            placeholder="••••••••"
+            autoComplete="current-password"
+            value={password}
+            onChange={(e) => onPasswordChange(e.target.value)}
+          />
+
+          {error && (
+            <p className="rounded-lg border border-red-500/20 bg-red-500/[0.07] px-3 py-2 text-xs text-red-500 dark:text-red-400">
+              {error}
+            </p>
+          )}
+
+          <SubmitButton label="로그인" loading={loading} />
+        </form>
+
+        <div className="mt-4 flex flex-col gap-4">
+          <Divider label="또는" />
+          <button
+            type="button"
+            onClick={onGuestLogin}
+            className="w-full rounded-xl border border-gray-900/[0.09] bg-transparent py-3 text-sm font-medium text-gray-900/60 transition-all duration-200 hover:border-gray-900/[0.14] hover:bg-gray-900/[0.03] hover:text-gray-900/80 dark:border-white/[0.09] dark:text-white/60 dark:hover:border-white/[0.14] dark:hover:bg-white/[0.03] dark:hover:text-white/80"
+          >
+            게스트로 계속하기
+          </button>
+        </div>
+      </div>
+
+      <p className="text-xs text-gray-900/25 dark:text-white/25">
+        계정이 없으신가요?{" "}
+        <button type="button" className="text-orange-600 transition-colors hover:text-orange-500 dark:text-orange-400 dark:hover:text-orange-300">
+          회원가입
+        </button>
+      </p>
+    </div>
+  );
+}

package/apps/web/src/features/auth/ui/LoginPanel.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import type { LoginState } from "../hooks/useClaudeAuth";
+
+interface LoginPanelProps {
+  loginState: LoginState;
+  loginOutput: string;
+  loginUrls: string[];
+  onStart: () => void;
+  onCancel: () => void;
+}
+
+export function LoginPanel({ loginState, loginOutput, loginUrls, onStart, onCancel }: LoginPanelProps) {
+  const isPending = loginState === "pending";
+  const isDone = loginState === "done";
+  const isError = loginState === "error";
+
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-6 px-6">
+      <div className="flex flex-col items-center gap-3 text-center">
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-gray-900/[0.08] bg-orange-500/[0.08] dark:border-white/[0.08]">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="h-8 w-8 text-orange-500 dark:text-orange-400/80">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
+          </svg>
+        </div>
+        <h2 className="text-xl font-semibold text-gray-900/90 dark:text-white/90">Claude Code 로그인 필요</h2>
+        <p className="max-w-sm text-sm text-gray-900/40 dark:text-white/40">
+          Claude CLI를 사용하려면 Anthropic 계정으로 로그인해야 합니다.
+        </p>
+      </div>
+
+      {loginState === "idle" && (
+        <button
+          onClick={onStart}
+          className="rounded-xl bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-orange-500"
+        >
+          Claude Code 로그인
+        </button>
+      )}
+
+      {isPending && (
+        <div className="flex w-full max-w-lg flex-col gap-4">
+          {loginUrls.length > 0 && (
+            <div className="flex flex-col gap-2">
+              <p className="text-xs font-medium text-gray-900/35 dark:text-white/35">브라우저에서 아래 링크를 열어 인증을 완료하세요:</p>
+              {loginUrls.map((url) => (
+                <a
+                  key={url}
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="break-all rounded-lg border border-orange-700/50 bg-orange-950/30 px-4 py-3 text-xs font-mono text-orange-700 transition-colors hover:border-orange-500 hover:text-orange-600 dark:text-orange-300 dark:hover:text-orange-200"
+                >
+                  {url}
+                </a>
+              ))}
+            </div>
+          )}
+
+          {loginOutput && (
+            <pre className="max-h-48 overflow-y-auto rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.02] px-4 py-3 font-mono text-xs leading-relaxed whitespace-pre-wrap text-gray-900/45 dark:border-white/[0.07] dark:bg-white/[0.02] dark:text-white/45">
+              {loginOutput}
+            </pre>
+          )}
+
+          {loginUrls.length === 0 && (
+            <div className="flex items-center justify-center gap-2 text-sm text-gray-900/30 dark:text-white/30">
+              <span className="h-4 w-4 animate-spin rounded-full border-2 border-gray-900/[0.08] border-t-orange-500 dark:border-white/[0.08]" />
+              로그인 프로세스를 시작하는 중…
+            </div>
+          )}
+
+          <button onClick={onCancel} className="text-xs text-gray-900/25 transition-colors hover:text-gray-900/50 dark:text-white/25 dark:hover:text-white/50">
+            취소
+          </button>
+        </div>
+      )}
+
+      {isDone && (
+        <div className="flex flex-col items-center gap-2 text-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-500/[0.10]">
+            <svg viewBox="0 0 20 20" fill="currentColor" className="h-6 w-6 text-emerald-500 dark:text-emerald-400">
+              <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
+            </svg>
+          </div>
+          <p className="text-sm font-medium text-emerald-600 dark:text-emerald-400">로그인 완료</p>
+          <p className="text-xs text-gray-900/25 dark:text-white/25">잠시 후 자동으로 이동합니다…</p>
+        </div>
+      )}
+
+      {isError && (
+        <div className="flex flex-col items-center gap-3 text-center">
+          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-500/[0.10]">
+            <svg viewBox="0 0 20 20" fill="currentColor" className="h-6 w-6 text-red-500 dark:text-red-400">
+              <path fillRule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clipRule="evenodd" />
+            </svg>
+          </div>
+          <p className="text-sm text-red-500 dark:text-red-400">로그인 중 문제가 발생했습니다.</p>
+          {loginOutput && (
+            <pre className="max-h-32 w-full max-w-lg overflow-y-auto rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.02] px-4 py-3 font-mono text-xs whitespace-pre-wrap text-gray-900/40 dark:border-white/[0.07] dark:bg-white/[0.02] dark:text-white/40">
+              {loginOutput}
+            </pre>
+          )}
+          <button
+            onClick={onStart}
+            className="rounded-xl bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition-colors hover:bg-orange-500"
+          >
+            다시 시도
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}