@jcjeon/integration-cli 0.2.0 → 0.2.1

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

@@ -1,130 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { useEffect } from "react";
-
-import { useGeminiAuth } from "@/features/auth/hooks/useGeminiAuth";
-import { GeminiLoginPanel } from "@/features/auth/ui/GeminiLoginPanel";
-import { ThemeToggle } from "@/lib/theme";
-
-// ─── Checking Skeleton ────────────────────────────────────────────────────────
-
-function CheckingSkeleton() {
-  return (
-    <div className="flex h-screen flex-col bg-[#faf8f5] dark:bg-[#07090e]">
-      <div className="flex items-center gap-2 border-b border-gray-900/[0.07] px-4 py-3 dark:border-white/[0.07]">
-        <div className="h-3.5 w-3.5 rounded bg-gray-900/[0.07] dark:bg-white/[0.07]" />
-        <div className="h-[14px] w-20 rounded bg-gray-900/[0.07] dark:bg-white/[0.07]" />
-      </div>
-      <div className="flex flex-1 flex-col items-center justify-center gap-3">
-        <span className="h-6 w-6 animate-spin rounded-full border-2 border-gray-900/[0.08] border-t-blue-500 dark:border-white/[0.08]" />
-        <span className="text-xs text-gray-900/20 dark:text-white/20">인증 확인 중…</span>
-      </div>
-    </div>
-  );
-}
-
-// ─── Not Installed ────────────────────────────────────────────────────────────
-
-function NotInstalledView() {
-  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-gray-900/[0.04] dark:border-white/[0.08] dark:bg-white/[0.04]">
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="h-8 w-8 text-gray-900/30 dark:text-white/30">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
-          </svg>
-        </div>
-        <h2 className="text-xl font-semibold text-gray-900/90 dark:text-white/90">Gemini CLI가 설치되어 있지 않습니다</h2>
-        <p className="max-w-sm text-sm text-gray-900/40 dark:text-white/40">
-          먼저 CLI 도구를 설치해 주세요.
-        </p>
-        <code className="mt-1 rounded-lg border border-gray-900/[0.08] bg-gray-900/[0.03] px-4 py-2 font-mono text-sm text-gray-900/55 dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/55">
-          jccli init
-        </code>
-      </div>
-    </div>
-  );
-}
-
-// ─── Authenticated View ───────────────────────────────────────────────────────
-
-function AuthenticatedView() {
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-4">
-      <div className="pointer-events-none absolute inset-0 overflow-hidden">
-        <div className="absolute left-1/2 top-1/2 h-[500px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-500/[0.04] blur-[120px]" />
-      </div>
-      <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl border border-gray-900/[0.08] bg-blue-500/[0.08] dark:border-white/[0.08]">
-        <svg viewBox="0 0 24 24" className="h-7 w-7" 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>
-      </div>
-      <div className="relative text-center">
-        <p className="font-semibold text-gray-900/75 dark:text-white/75">Gemini CLI</p>
-        <p className="mt-1 text-sm text-gray-900/30 dark:text-white/30">로그인되었습니다. 채팅 기능은 준비 중입니다.</p>
-      </div>
-    </div>
-  );
-}
-
-// ─── Page ─────────────────────────────────────────────────────────────────────
-
-export default function GeminiPage() {
-  const {
-    authState,
-    loginState,
-    loginOutput,
-    loginUrls,
-    configError,
-    saveApiKey,
-    startGcaLogin,
-    cancelLogin,
-    resetLogin,
-    checkAuth,
-  } = useGeminiAuth();
-
-  useEffect(() => {
-    if (loginState === "done") void checkAuth();
-  }, [loginState, checkAuth]);
-
-  const pageHeader = (
-    <header className="flex items-center gap-2 border-b border-gray-900/[0.07] px-4 py-3 dark:border-white/[0.07]">
-      <Link href="/" className="text-gray-900/30 transition-colors hover:text-gray-900/60 dark:text-white/30 dark:hover:text-white/60">
-        ←
-      </Link>
-      <span className="text-sm font-semibold text-gray-900/80 dark:text-white/80">Gemini CLI</span>
-      <div className="ml-auto">
-        <ThemeToggle />
-      </div>
-    </header>
-  );
-
-  if (authState === "checking") return <CheckingSkeleton />;
-
-  return (
-    <div className="flex h-screen flex-col bg-[#faf8f5] text-gray-900 dark:bg-[#07090e] dark:text-white">
-      {pageHeader}
-
-      {authState === "not-installed" && <NotInstalledView />}
-
-      {authState === "unauthenticated" && (
-        <GeminiLoginPanel
-          loginState={loginState}
-          loginOutput={loginOutput}
-          loginUrls={loginUrls}
-          configError={configError}
-          onSaveApiKey={saveApiKey}
-          onStartGca={startGcaLogin}
-          onCancel={cancelLogin}
-          onReset={resetLogin}
-        />
-      )}
-
-      {authState === "authenticated" && <AuthenticatedView />}
-    </div>
-  );
-}

package/apps/web/src/app/globals.css

@@ -1,149 +0,0 @@
-@import "tailwindcss";
-@import "highlight.js/styles/github.css";
-
-/* ── Dark mode: class strategy ──────────────────────────────── */
-@variant dark (&:where(.dark, .dark *));
-
-/* ── Design tokens ──────────────────────────────────────────── */
-:root {
-  --background: #faf8f5;
-  --foreground: rgba(15, 17, 23, 0.87);
-
-  /* heading gradient */
-  --heading-gradient: linear-gradient(
-    160deg,
-    rgba(15, 17, 23, 0.92) 0%,
-    rgba(15, 17, 23, 0.52) 100%
-  );
-
-  /* dot grid */
-  --dot-color: rgba(0, 0, 0, 0.08);
-}
-
-.dark {
-  --background: #07090e;
-  --foreground: #ededed;
-
-  --heading-gradient: linear-gradient(
-    160deg,
-    rgba(255, 255, 255, 0.95) 0%,
-    rgba(255, 255, 255, 0.40) 100%
-  );
-
-  --dot-color: rgba(255, 255, 255, 0.07);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
-}
-
-/* ── Dark mode: override highlight.js ──────────────────────── */
-.dark .hljs                            { background: #0d1117; color: #e6edf3; }
-.dark .hljs-doctag,
-.dark .hljs-keyword,
-.dark .hljs-meta .hljs-keyword,
-.dark .hljs-template-tag,
-.dark .hljs-template-variable,
-.dark .hljs-type,
-.dark .hljs-variable.language_         { color: #ff7b72; }
-.dark .hljs-title,
-.dark .hljs-title.class_,
-.dark .hljs-title.class_.inherited__,
-.dark .hljs-title.function_            { color: #d2a8ff; }
-.dark .hljs-attr,
-.dark .hljs-attribute,
-.dark .hljs-literal,
-.dark .hljs-meta,
-.dark .hljs-number,
-.dark .hljs-operator,
-.dark .hljs-selector-attr,
-.dark .hljs-selector-class,
-.dark .hljs-selector-id,
-.dark .hljs-variable                   { color: #79c0ff; }
-.dark .hljs-string,
-.dark .hljs-meta .hljs-string          { color: #a5d6ff; }
-.dark .hljs-built_in,
-.dark .hljs-symbol                     { color: #ffa657; }
-.dark .hljs-comment,
-.dark .hljs-code,
-.dark .hljs-formula                    { color: #8b949e; }
-.dark .hljs-name,
-.dark .hljs-quote,
-.dark .hljs-selector-pseudo,
-.dark .hljs-selector-tag               { color: #7ee787; }
-.dark .hljs-subst                      { color: #c9d1d9; }
-.dark .hljs-section                    { color: #1f6feb; font-weight: bold; }
-.dark .hljs-bullet                     { color: #f2cc60; }
-.dark .hljs-emphasis                   { color: #c9d1d9; font-style: italic; }
-.dark .hljs-strong                     { color: #c9d1d9; font-weight: bold; }
-.dark .hljs-addition                   { color: #aff5b4; background: #033a16; }
-.dark .hljs-deletion                   { color: #ffdcd7; background: #67060c; }
-
-/* ── Animations ─────────────────────────────────────────────── */
-
-@keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(10px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes toast-in {
-  from { opacity: 0; transform: translateX(calc(100% + 16px)); }
-  to   { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes toast-out {
-  from { opacity: 1; transform: translateX(0); max-height: 100px; margin-bottom: 0; }
-  to   { opacity: 0; transform: translateX(calc(100% + 16px)); max-height: 0; margin-bottom: -8px; }
-}
-
-.animate-toast-in {
-  animation: toast-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-
-.animate-toast-out {
-  animation: toast-out 0.2s ease-in forwards;
-}
-
-@keyframes shimmer {
-  from { background-position: 200% 0; }
-  to   { background-position: -200% 0; }
-}
-
-@keyframes pulse-dot {
-  0%, 100% { opacity: 1; }
-  50%       { opacity: 0.35; }
-}
-
-.animate-fade-in-up {
-  animation: fade-in-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
-}
-
-.animate-shimmer-bg {
-  background: linear-gradient(
-    90deg,
-    rgba(0, 0, 0, 0.02) 0%,
-    rgba(0, 0, 0, 0.05) 40%,
-    rgba(0, 0, 0, 0.02) 100%
-  );
-  background-size: 200% 100%;
-  animation: shimmer 2s ease-in-out infinite;
-}
-
-.dark .animate-shimmer-bg {
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.03) 0%,
-    rgba(255, 255, 255, 0.08) 40%,
-    rgba(255, 255, 255, 0.03) 100%
-  );
-  background-size: 200% 100%;
-}

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

@@ -1,40 +0,0 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import { ThemeProvider } from "@/lib/theme";
-import { ToastProvider } from "@/lib/toast";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
-export const metadata: Metadata = {
-  title: "ji-cli",
-  description: "하나의 플랫폼에서 모든 AI CLI를 제어합니다",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html
-      lang="en"
-      suppressHydrationWarning
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
-      <body className="flex min-h-full flex-col">
-        <ThemeProvider>
-          <ToastProvider>{children}</ToastProvider>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
-}

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

@@ -1,67 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ThemeToggle } from "@/lib/theme";
-import { LoginForm } from "@/features/auth/ui/LoginForm";
-
-// ─── Container ────────────────────────────────────────────────────────────────
-
-export default function LoginPage() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [loading] = useState(false);
-  const [error] = useState<string | null>(null);
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // TODO: 로그인 로직 연결
-  };
-
-  const handleGuestLogin = () => {
-    // TODO: 게스트 로그인 로직 연결
-  };
-
-  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]">
-      {/* Theme toggle */}
-      <div className="absolute right-4 top-4">
-        <ThemeToggle />
-      </div>
-
-      {/* Ambient background glows */}
-      <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 pattern */}
-      <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%)",
-        }}
-      />
-
-      {/* Form */}
-      <div className="relative w-full flex justify-center">
-        <LoginForm
-          email={email}
-          password={password}
-          loading={loading}
-          error={error}
-          onEmailChange={setEmail}
-          onPasswordChange={setPassword}
-          onSubmit={handleSubmit}
-          onGuestLogin={handleGuestLogin}
-        />
-      </div>
-
-      {/* Bottom 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]" />
-    </div>
-  );
-}