@jcjeon/integration-cli 0.2.0 → 0.2.1

package/apps/web/src/app/page.tsx

@@ -1,497 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useEffect, useState } from "react";
-
-import { useClaudeAuth } from "@/features/auth/hooks/useClaudeAuth";
-import { useGeminiAuth } from "@/features/auth/hooks/useGeminiAuth";
-import { useCodexAuth } from "@/features/auth/hooks/useCodexAuth";
-import { LoginPanel } from "@/features/auth/ui/LoginPanel";
-import { GeminiLoginPanel } from "@/features/auth/ui/GeminiLoginPanel";
-import { CodexLoginPanel } from "@/features/auth/ui/CodexLoginPanel";
-import { Modal } from "@/components/ui/Modal";
-import { ThemeToggle } from "@/lib/theme";
-
-type AgentKey = "claude" | "gemini" | "codex";
-type AuthBadge = "loading" | "authenticated" | "unauthenticated" | "unavailable";
-
-// ─── 에이전트 인증 상태 → Badge 변환 ─────────────────────────────────────────
-
-function toBadge(state: string): AuthBadge {
-  if (state === "checking") return "loading";
-  if (state === "authenticated") return "authenticated";
-  if (state === "not-installed") return "unavailable";
-  return "unauthenticated";
-}
-
-// ─── Badge ────────────────────────────────────────────────────────────────────
-
-const BADGE_CONFIG: Record<
-  AuthBadge,
-  { border: string; bg: string; text: string; dot: string; label: string }
-> = {
-  loading: {
-    border: "border-gray-900/[0.07] dark:border-white/[0.07]",
-    bg: "bg-gray-900/[0.04] dark:bg-white/[0.04]",
-    text: "text-transparent",
-    dot: "bg-gray-900/20 dark:bg-white/20",
-    label: "확인 중",
-  },
-  authenticated: {
-    border: "border-emerald-500/25",
-    bg: "bg-emerald-500/[0.08]",
-    text: "text-emerald-600 dark:text-emerald-400",
-    dot: "bg-emerald-500 shadow-[0_0_5px_#34d399] dark:bg-emerald-400",
-    label: "사용 가능",
-  },
-  unauthenticated: {
-    border: "border-amber-500/25",
-    bg: "bg-amber-500/[0.08]",
-    text: "text-amber-600 dark:text-amber-400",
-    dot: "bg-amber-500 dark:bg-amber-400",
-    label: "로그인 필요",
-  },
-  unavailable: {
-    border: "border-gray-900/[0.06] dark:border-white/[0.06]",
-    bg: "bg-gray-900/[0.03] dark:bg-white/[0.03]",
-    text: "text-gray-900/30 dark:text-white/30",
-    dot: "bg-gray-900/20 dark:bg-white/20",
-    label: "미설치",
-  },
-};
-
-function Badge({ badge }: { badge: AuthBadge }) {
-  const { border, bg, text, dot, label } = BADGE_CONFIG[badge];
-  const isPulsing = badge === "loading" || badge === "authenticated";
-  return (
-    <span
-      className={[
-        "inline-flex min-w-[86px] shrink-0 items-center justify-center gap-1.5",
-        "rounded-full border px-3 py-[5px] text-xs font-medium",
-        "transition-all duration-500",
-        border, bg, text,
-      ].join(" ")}
-    >
-      <span className={["h-1.5 w-1.5 rounded-full", dot, isPulsing ? "animate-pulse" : ""].join(" ")} />
-      {label}
-    </span>
-  );
-}
-
-// ─── 에이전트 아이콘 ──────────────────────────────────────────────────────────
-
-const CLAUDE_ICON = (
-  <svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5 text-[#D97757]" aria-hidden="true">
-    <path d="M13.827 3.816L20.05 20.2h-3.672l-1.234-3.365H8.856L7.622 20.2H3.95L10.173 3.816h3.654zm-1.827 4.91l-1.989 5.453h3.978l-1.989-5.453z" />
-  </svg>
-);
-
-const GEMINI_ICON = (
-  <svg viewBox="0 0 24 24" className="h-5 w-5" 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>
-);
-
-const CODEX_ICON = (
-  <svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5 text-gray-900/70 dark:text-white/70" aria-hidden="true">
-    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />
-  </svg>
-);
-
-const AGENT_META: Record<
-  AgentKey,
-  { name: string; description: string; icon: React.ReactNode; iconBg: string; accentFrom: string; accentVia: string }
-> = {
-  claude: {
-    name: "Claude CLI",
-    description: "Anthropic Claude Code",
-    icon: CLAUDE_ICON,
-    iconBg: "bg-orange-500/[0.10]",
-    accentFrom: "from-orange-500/[0.10]",
-    accentVia: "via-orange-400/50",
-  },
-  gemini: {
-    name: "Gemini CLI",
-    description: "Google Gemini",
-    icon: GEMINI_ICON,
-    iconBg: "bg-blue-500/[0.08]",
-    accentFrom: "from-blue-500/[0.10]",
-    accentVia: "via-blue-400/40",
-  },
-  codex: {
-    name: "Codex CLI",
-    description: "OpenAI Codex",
-    icon: CODEX_ICON,
-    iconBg: "bg-gray-900/[0.05] dark:bg-white/[0.05]",
-    accentFrom: "from-gray-500/[0.07]",
-    accentVia: "via-gray-400/25",
-  },
-};
-
-// ─── 에이전트 인증 카드 ───────────────────────────────────────────────────────
-
-interface AgentAuthCardProps {
-  agentKey: AgentKey;
-  badge: AuthBadge;
-  onAuth: () => void;
-  index: number;
-}
-
-function AgentAuthCard({ agentKey, badge, onAuth, index }: AgentAuthCardProps) {
-  const meta = AGENT_META[agentKey];
-  const canAuth = badge === "unauthenticated" || badge === "loading";
-  const isAuth = badge === "authenticated";
-
-  return (
-    <div
-      className={[
-        "animate-fade-in-up relative overflow-hidden rounded-2xl",
-        "border border-gray-900/[0.07] dark:border-white/[0.07]",
-        "bg-gray-900/[0.025] dark:bg-white/[0.025]",
-        "p-4 transition-all duration-300",
-      ].join(" ")}
-      style={{ animationDelay: `${index * 60}ms` }}
-    >
-      {/* 상단 accent 라인 */}
-      <div
-        className={[
-          "absolute inset-x-0 top-0 h-px",
-          "bg-gradient-to-r from-transparent to-transparent",
-          meta.accentVia,
-        ].join(" ")}
-      />
-      {/* 상단 ambient tint */}
-      <div
-        className={[
-          "pointer-events-none absolute inset-x-0 top-0 h-20",
-          `bg-gradient-to-b ${meta.accentFrom} to-transparent opacity-50`,
-        ].join(" ")}
-      />
-
-      <div className="relative flex items-center justify-between gap-3">
-        {/* 왼쪽: 아이콘 + 이름 */}
-        <div className="flex items-center gap-3 min-w-0">
-          <span className={["flex h-9 w-9 shrink-0 items-center justify-center rounded-xl", meta.iconBg].join(" ")}>
-            {meta.icon}
-          </span>
-          <div className="min-w-0">
-            <p className="text-[14px] font-semibold text-gray-900/85 dark:text-white/85">{meta.name}</p>
-            <p className="text-[12px] text-gray-900/35 dark:text-white/35">{meta.description}</p>
-          </div>
-        </div>
-
-        {/* 오른쪽: 배지 + 인증 버튼 */}
-        <div className="flex shrink-0 items-center gap-2">
-          <Badge badge={badge} />
-          {!isAuth && badge !== "unavailable" && (
-            <button
-              onClick={onAuth}
-              disabled={!canAuth}
-              className={[
-                "rounded-lg border px-3 py-1.5 text-xs font-medium transition-all",
-                canAuth
-                  ? "border-gray-900/[0.10] bg-gray-900/[0.04] text-gray-900/60 hover:border-gray-900/[0.18] hover:bg-gray-900/[0.08] hover:text-gray-900/90 dark:border-white/[0.10] dark:bg-white/[0.04] dark:text-white/60 dark:hover:border-white/[0.18] dark:hover:bg-white/[0.08] dark:hover:text-white/90"
-                  : "cursor-not-allowed border-gray-900/[0.06] bg-gray-900/[0.02] text-gray-900/25 dark:border-white/[0.06] dark:bg-white/[0.02] dark:text-white/25",
-              ].join(" ")}
-            >
-              인증하기
-            </button>
-          )}
-          {isAuth && (
-            <span className="flex h-7 w-7 items-center justify-center rounded-full bg-emerald-500/[0.10]">
-              <svg viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5 text-emerald-500 dark:text-emerald-400">
-                <path fillRule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z" clipRule="evenodd" />
-              </svg>
-            </span>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ─── Claude 페이지 진입 버튼 ─────────────────────────────────────────────────
-
-function ClaudeEntryButton({ canEnter, isLoading }: { canEnter: boolean; isLoading: boolean }) {
-  if (isLoading) {
-    return (
-      <div className="animate-fade-in-up flex h-[60px] w-full max-w-[460px] items-center justify-center rounded-2xl border border-gray-900/[0.07] bg-gray-900/[0.025] dark:border-white/[0.07] dark:bg-white/[0.025]">
-        <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>
-    );
-  }
-
-  if (canEnter) {
-    return (
-      <Link
-        href="/claude"
-        className={[
-          "animate-fade-in-up group relative flex w-full max-w-[460px] items-center justify-between overflow-hidden",
-          "rounded-2xl px-6 py-4 transition-all duration-300",
-          "bg-gradient-to-r from-orange-600 to-orange-500",
-          "shadow-[0_4px_20px_-2px_rgba(234,88,12,0.30)] hover:shadow-[0_8px_28px_-2px_rgba(234,88,12,0.40)]",
-          "hover:from-orange-500 hover:to-orange-400",
-        ].join(" ")}
-        style={{ animationDelay: "180ms" }}
-      >
-        {/* 배경 반짝임 */}
-        <div className="pointer-events-none absolute inset-0 bg-gradient-to-tr from-white/[0.07] to-transparent" />
-
-        <div className="relative flex items-center gap-3">
-          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-white/[0.18]">
-            <svg viewBox="0 0 24 24" fill="currentColor" className="h-4.5 w-4.5 text-white">
-              <path d="M13.827 3.816L20.05 20.2h-3.672l-1.234-3.365H8.856L7.622 20.2H3.95L10.173 3.816h3.654zm-1.827 4.91l-1.989 5.453h3.978l-1.989-5.453z" />
-            </svg>
-          </span>
-          <div>
-            <p className="text-[15px] font-bold tracking-tight text-white">JI CLI 시작하기</p>
-            <p className="text-[11px] text-white/60">멀티 에이전트 채팅 시작</p>
-          </div>
-        </div>
-
-        <div className="relative flex h-7 w-7 items-center justify-center rounded-lg bg-white/[0.15] transition-transform duration-200 group-hover:translate-x-0.5">
-          <svg viewBox="0 0 16 16" fill="currentColor" className="h-4 w-4 text-white">
-            <path fillRule="evenodd" d="M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z" clipRule="evenodd" />
-          </svg>
-        </div>
-      </Link>
-    );
-  }
-
-  return (
-    <div className="animate-fade-in-up flex w-full max-w-[460px] flex-col items-center gap-2" style={{ animationDelay: "180ms" }}>
-      <div
-        className={[
-          "relative flex w-full items-center justify-between overflow-hidden",
-          "rounded-2xl border border-gray-900/[0.07] bg-gray-900/[0.025] px-6 py-4",
-          "dark:border-white/[0.07] dark:bg-white/[0.025]",
-          "opacity-40 cursor-not-allowed",
-        ].join(" ")}
-      >
-        <div className="flex items-center gap-3">
-          <span className="flex h-8 w-8 items-center justify-center rounded-lg border border-gray-900/[0.08] bg-gray-900/[0.04] dark:border-white/[0.08] dark:bg-white/[0.04]">
-            <svg viewBox="0 0 16 16" fill="currentColor" className="h-4 w-4 text-gray-900/40 dark:text-white/40">
-              <path fillRule="evenodd" d="M8 1a3.5 3.5 0 00-3.5 3.5V7A1.5 1.5 0 003 8.5v5A1.5 1.5 0 004.5 15h7a1.5 1.5 0 001.5-1.5v-5A1.5 1.5 0 0011.5 7V4.5A3.5 3.5 0 008 1zm2 6V4.5a2 2 0 10-4 0V7h4z" clipRule="evenodd" />
-            </svg>
-          </span>
-          <div>
-            <p className="text-[15px] font-bold tracking-tight text-gray-900/60 dark:text-white/60">JI Claude 시작하기</p>
-            <p className="text-[11px] text-gray-900/30 dark:text-white/30">멀티 에이전트 채팅 시작</p>
-          </div>
-        </div>
-        <div className="flex h-7 w-7 items-center justify-center rounded-lg border border-gray-900/[0.08] bg-gray-900/[0.04] dark:border-white/[0.08] dark:bg-white/[0.04]">
-          <svg viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5 text-gray-900/30 dark:text-white/30">
-            <path fillRule="evenodd" d="M6.22 4.22a.75.75 0 011.06 0l3.25 3.25a.75.75 0 010 1.06l-3.25 3.25a.75.75 0 01-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 010-1.06z" clipRule="evenodd" />
-          </svg>
-        </div>
-      </div>
-      <p className="text-[12px] text-gray-900/30 dark:text-white/30">
-        에이전트를 하나 이상 인증해야 시작할 수 있습니다
-      </p>
-    </div>
-  );
-}
-
-// ─── Page ─────────────────────────────────────────────────────────────────────
-
-export default function Home() {
-  const claude = useClaudeAuth();
-  const gemini = useGeminiAuth();
-  const codex = useCodexAuth();
-
-  const [modalOpen, setModalOpen] = useState<AgentKey | null>(null);
-
-  // 인증 완료 시 모달 자동 닫기 (1.2초 후)
-  useEffect(() => {
-    if (modalOpen === "claude" && claude.loginState === "done") {
-      const t = setTimeout(() => setModalOpen(null), 1200);
-      return () => clearTimeout(t);
-    }
-  }, [claude.loginState, modalOpen]);
-
-  useEffect(() => {
-    if (modalOpen === "gemini" && gemini.loginState === "done") {
-      const t = setTimeout(() => setModalOpen(null), 1200);
-      return () => clearTimeout(t);
-    }
-  }, [gemini.loginState, modalOpen]);
-
-  useEffect(() => {
-    if (
-      modalOpen === "codex" &&
-      (codex.loginState === "done" || codex.apiKeyLoginState === "done")
-    ) {
-      const t = setTimeout(() => setModalOpen(null), 1200);
-      return () => clearTimeout(t);
-    }
-  }, [codex.loginState, codex.apiKeyLoginState, modalOpen]);
-
-  // 모달 닫기 핸들러 (진행 중인 인증 취소 포함)
-  const handleCloseModal = () => {
-    if (modalOpen === "claude") claude.cancelLogin();
-    if (modalOpen === "gemini") gemini.cancelLogin();
-    if (modalOpen === "codex") codex.cancelDeviceLogin();
-    setModalOpen(null);
-  };
-
-  const claudeBadge = toBadge(claude.authState);
-  const geminiBadge = toBadge(gemini.authState);
-  const codexBadge = toBadge(codex.authState);
-
-  const isAnyAuthenticated =
-    claudeBadge === "authenticated" ||
-    geminiBadge === "authenticated" ||
-    codexBadge === "authenticated";
-
-  const isChecking =
-    claudeBadge === "loading" ||
-    geminiBadge === "loading" ||
-    codexBadge === "loading";
-
-  return (
-    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-[#faf8f5] px-6 py-12 dark:bg-[#07090e]">
-
-      {/* 테마 토글 */}
-      <div className="absolute right-4 top-4">
-        <ThemeToggle />
-      </div>
-
-      {/* 배경 glow */}
-      <div className="pointer-events-none absolute inset-0 overflow-hidden">
-        <div className="absolute left-1/2 top-[40%] h-[600px] w-[800px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500/[0.04] blur-[120px] dark:bg-orange-500/[0.035]" />
-        <div className="absolute -left-24 bottom-1/4 h-[350px] w-[450px] rounded-full bg-blue-600/[0.03] blur-[100px] dark:bg-blue-600/[0.025]" />
-        <div className="absolute -right-24 top-1/4 h-[300px] w-[400px] rounded-full bg-purple-600/[0.03] blur-[100px] dark:bg-purple-600/[0.025]" />
-      </div>
-
-      {/* dot-grid */}
-      <div
-        className="pointer-events-none absolute inset-0 opacity-60"
-        style={{
-          backgroundImage: "radial-gradient(circle, var(--dot-color) 1px, transparent 1px)",
-          backgroundSize: "28px 28px",
-          maskImage: "radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 100%)",
-          WebkitMaskImage: "radial-gradient(ellipse 75% 65% at 50% 50%, black 30%, transparent 100%)",
-        }}
-      />
-
-      {/* 헤더 */}
-      <header className="animate-fade-in-up relative mb-10 flex flex-col items-center gap-5 text-center">
-        <div className="relative">
-          <div className="flex h-12 w-80 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>
-        <div>
-          <h1
-            className="text-[2.75rem] font-bold leading-none tracking-[-0.03em]"
-            style={{
-              background: "var(--heading-gradient)",
-              WebkitBackgroundClip: "text",
-              WebkitTextFillColor: "transparent",
-              backgroundClip: "text",
-            }}
-          >
-            JI-CLI
-          </h1>
-          <p className="mt-2.5 text-[13px] font-medium uppercase tracking-[0.06em] text-gray-900/28 dark:text-white/28">
-            하나의 플랫폼에서 모든 AI CLI를 제어합니다
-          </p>
-        </div>
-      </header>
-
-      {/* 본문 */}
-      <div className="relative flex w-full max-w-[460px] flex-col gap-3">
-
-        {/* ── 에이전트 인증 섹션 ──────────────────────────────────────────── */}
-        <div className="animate-fade-in-up mb-1 flex items-center gap-2" style={{ animationDelay: "60ms" }}>
-          <span className="text-[11px] font-semibold uppercase tracking-[0.07em] text-gray-900/35 dark:text-white/35">
-            에이전트 인증
-          </span>
-          <div className="h-px flex-1 bg-gray-900/[0.06] dark:bg-white/[0.06]" />
-        </div>
-
-        <AgentAuthCard
-          agentKey="claude"
-          badge={claudeBadge}
-          onAuth={() => setModalOpen("claude")}
-          index={0}
-        />
-        <AgentAuthCard
-          agentKey="gemini"
-          badge={geminiBadge}
-          onAuth={() => setModalOpen("gemini")}
-          index={1}
-        />
-        <AgentAuthCard
-          agentKey="codex"
-          badge={codexBadge}
-          onAuth={() => setModalOpen("codex")}
-          index={2}
-        />
-
-        {/* ── 구분선 ──────────────────────────────────────────────────────── */}
-        <div className="animate-fade-in-up my-1 flex items-center gap-2" style={{ animationDelay: "150ms" }}>
-          <div className="h-px flex-1 bg-gray-900/[0.06] dark:bg-white/[0.06]" />
-          <span className="text-[11px] font-semibold uppercase tracking-[0.07em] text-gray-900/35 dark:text-white/35">
-            시작하기
-          </span>
-          <div className="h-px flex-1 bg-gray-900/[0.06] dark:bg-white/[0.06]" />
-        </div>
-
-        {/* ── Claude 페이지 진입 버튼 ─────────────────────────────────────── */}
-        <ClaudeEntryButton canEnter={isAnyAuthenticated} isLoading={isChecking} />
-      </div>
-
-      {/* 하단 rule */}
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-gradient-to-r from-transparent via-gray-900/[0.05] to-transparent dark:via-white/[0.05]" />
-
-      {/* ── Claude 인증 모달 ────────────────────────────────────────────────── */}
-      <Modal open={modalOpen === "claude"} onClose={handleCloseModal} title="Claude CLI 인증" maxWidth="max-w-lg">
-        <LoginPanel
-          loginState={claude.loginState}
-          loginOutput={claude.loginOutput}
-          loginUrls={claude.loginUrls}
-          onStart={claude.startLogin}
-          onCancel={() => { claude.cancelLogin(); setModalOpen(null); }}
-        />
-      </Modal>
-
-      {/* ── Gemini 인증 모달 ────────────────────────────────────────────────── */}
-      <Modal open={modalOpen === "gemini"} onClose={handleCloseModal} title="Gemini CLI 인증" maxWidth="max-w-lg">
-        <GeminiLoginPanel
-          loginState={gemini.loginState}
-          loginOutput={gemini.loginOutput}
-          loginUrls={gemini.loginUrls}
-          configError={gemini.configError}
-          onSaveApiKey={gemini.saveApiKey}
-          onStartGca={gemini.startGcaLogin}
-          onCancel={() => { gemini.cancelLogin(); setModalOpen(null); }}
-          onReset={gemini.resetLogin}
-        />
-      </Modal>
-
-      {/* ── Codex 인증 모달 ─────────────────────────────────────────────────── */}
-      <Modal open={modalOpen === "codex"} onClose={handleCloseModal} title="Codex CLI 인증" maxWidth="max-w-lg">
-        <CodexLoginPanel
-          loginMethod={codex.loginMethod}
-          onMethodChange={codex.setLoginMethod}
-          loginState={codex.loginState}
-          loginOutput={codex.loginOutput}
-          loginUrls={codex.loginUrls}
-          deviceCode={codex.deviceCode}
-          onStartDeviceLogin={codex.startDeviceLogin}
-          onCancelDeviceLogin={() => { codex.cancelDeviceLogin(); setModalOpen(null); }}
-          apiKeyLoginState={codex.apiKeyLoginState}
-          configError={codex.configError}
-          onSaveApiKey={codex.saveApiKey}
-        />
-      </Modal>
-    </div>
-  );
-}

package/apps/web/src/app/task/[id]/page.tsx

@@ -1,11 +0,0 @@
-"use client";
-
-import { useParams } from "next/navigation";
-
-import { TaskDetailPageContainer } from "@/features/tasks/container/TaskDetailPageContainer";
-
-export default function TaskDetailPage() {
-  const params = useParams<{ id: string }>();
-
-  return <TaskDetailPageContainer taskId={params.id} />;
-}