agentic-dev 0.2.9 → 0.2.11

package/client/landing/src/auth/AuthProvider.tsx

@@ -1,122 +0,0 @@
-import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
-
-import { getMe, login as loginRequest } from "@/auth/auth-client";
-import type { AuthToken, AuthUser, LoginCommand } from "@/auth/types";
-
-const STORAGE_KEY = "landing.auth.token";
-
-interface AuthContextValue {
-  user: AuthUser | null;
-  token: AuthToken | null;
-  initializing: boolean;
-  authenticating: boolean;
-  login: (command: LoginCommand) => Promise<void>;
-  logout: () => void;
-}
-
-const AuthContext = createContext<AuthContextValue | undefined>(undefined);
-
-function readStoredToken(): AuthToken | null {
-  const raw = window.localStorage.getItem(STORAGE_KEY);
-  if (!raw) {
-    return null;
-  }
-
-  try {
-    return JSON.parse(raw) as AuthToken;
-  } catch {
-    window.localStorage.removeItem(STORAGE_KEY);
-    return null;
-  }
-}
-
-function storeToken(token: AuthToken | null) {
-  if (token) {
-    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(token));
-    return;
-  }
-
-  window.localStorage.removeItem(STORAGE_KEY);
-}
-
-export function AuthProvider({ children }: { children: ReactNode }) {
-  const [token, setToken] = useState<AuthToken | null>(() => readStoredToken());
-  const [user, setUser] = useState<AuthUser | null>(null);
-  const [initializing, setInitializing] = useState(true);
-  const [authenticating, setAuthenticating] = useState(false);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function bootstrap() {
-      if (!token) {
-        setUser(null);
-        setInitializing(false);
-        return;
-      }
-
-      try {
-        const currentUser = await getMe(token.access_token);
-        if (!cancelled) {
-          setUser(currentUser);
-        }
-      } catch {
-        if (!cancelled) {
-          setToken(null);
-          setUser(null);
-          storeToken(null);
-        }
-      } finally {
-        if (!cancelled) {
-          setInitializing(false);
-        }
-      }
-    }
-
-    void bootstrap();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [token]);
-
-  const value = useMemo<AuthContextValue>(
-    () => ({
-      user,
-      token,
-      initializing,
-      authenticating,
-      async login(command) {
-        setAuthenticating(true);
-        try {
-          const nextToken = await loginRequest(command);
-          storeToken(nextToken);
-          setToken(nextToken);
-          const currentUser = await getMe(nextToken.access_token);
-          setUser(currentUser);
-        } finally {
-          setAuthenticating(false);
-          setInitializing(false);
-        }
-      },
-      logout() {
-        storeToken(null);
-        setToken(null);
-        setUser(null);
-        setInitializing(false);
-      },
-    }),
-    [authenticating, initializing, token, user],
-  );
-
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-}
-
-export function useAuth() {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-
-  return context;
-}

package/client/landing/src/auth/ProtectedRoute.tsx

@@ -1,22 +0,0 @@
-import { Navigate, Outlet, useLocation } from "react-router-dom";
-
-import { useAuth } from "@/auth/AuthProvider";
-
-export function ProtectedRoute() {
-  const { initializing, user } = useAuth();
-  const location = useLocation();
-
-  if (initializing) {
-    return (
-      <div className="flex min-h-screen items-center justify-center bg-[var(--landing-bg)] text-sm font-medium text-[var(--landing-muted)]">
-        세션을 확인하는 중입니다.
-      </div>
-    );
-  }
-
-  if (!user) {
-    return <Navigate to="/login" replace state={{ from: location }} />;
-  }
-
-  return <Outlet />;
-}

package/client/landing/src/auth/auth-client.ts

@@ -1,38 +0,0 @@
-import type { AuthToken, AuthUser, LoginCommand } from "@/auth/types";
-
-const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL as string | undefined)?.replace(/\/$/, "") ?? "";
-
-async function readJson<T>(response: Response): Promise<T> {
-  if (!response.ok) {
-    let message = "Request failed";
-    try {
-      const data = (await response.json()) as { detail?: string };
-      if (typeof data.detail === "string" && data.detail.length > 0) {
-        message = data.detail;
-      }
-    } catch {
-      message = response.statusText || message;
-    }
-    throw new Error(message);
-  }
-
-  return (await response.json()) as T;
-}
-
-export async function login(command: LoginCommand): Promise<AuthToken> {
-  const response = await fetch(`${API_BASE_URL}/auth/login`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(command),
-  });
-
-  return readJson<AuthToken>(response);
-}
-
-export async function getMe(accessToken: string): Promise<AuthUser> {
-  const response = await fetch(`${API_BASE_URL}/auth/me`, {
-    headers: { Authorization: `Bearer ${accessToken}` },
-  });
-
-  return readJson<AuthUser>(response);
-}

package/client/landing/src/auth/types.ts

@@ -1,18 +0,0 @@
-export interface AuthToken {
-  access_token: string;
-  token_type: string;
-  user_id: string;
-}
-
-export interface AuthUser {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  status: string;
-}
-
-export interface LoginCommand {
-  email: string;
-  password: string;
-}

package/client/landing/src/components/LandingShell.tsx

@@ -1,34 +0,0 @@
-import { LogOut } from "lucide-react";
-import { NavLink, Outlet } from "react-router-dom";
-
-import { useAuth } from "@/auth/AuthProvider";
-import { landingTheme } from "@/theme";
-import { landingThemeVars } from "@/theme-vars";
-
-export function LandingShell() {
-  const { logout, user } = useAuth();
-
-  return (
-    <div className="min-h-screen bg-[var(--landing-bg)] text-[var(--landing-text)]" style={landingThemeVars(landingTheme)}>
-      <header className="mx-auto flex max-w-6xl items-center justify-between px-6 py-6">
-        <div className="text-[20px] font-black tracking-[0.18em]">PRODUCT</div>
-        <div className="flex items-center gap-3">
-          <NavLink className="rounded-full border border-[#d8cabb] px-4 py-2 text-sm font-semibold" to="/workspace">
-            Workspace
-          </NavLink>
-          <div className="hidden rounded-full bg-white px-4 py-2 text-sm font-semibold text-[#2c261f] md:block">{user?.name ?? user?.email}</div>
-          <button
-            className="inline-flex items-center gap-2 rounded-full bg-[#2c261f] px-4 py-2 text-sm font-semibold text-white"
-            onClick={logout}
-          >
-            <LogOut className="h-4 w-4" />
-            Log out
-          </button>
-        </div>
-      </header>
-      <main>
-        <Outlet />
-      </main>
-    </div>
-  );
-}

package/client/landing/src/lib/specRouteCatalog.json

@@ -1,23 +0,0 @@
-[
-  {
-    "id": "TLAND_001",
-    "route": "/",
-    "binding": "direct",
-    "notes": ["Public marketing entry route."],
-    "tags": ["public"]
-  },
-  {
-    "id": "TLAND_002",
-    "route": "/workspace",
-    "binding": "direct",
-    "notes": ["Authenticated member workspace route."],
-    "tags": ["protected"]
-  },
-  {
-    "id": "TLAND_003",
-    "route": "/login",
-    "binding": "direct",
-    "notes": ["Member sign-in route."],
-    "tags": ["public"]
-  }
-]

package/client/landing/src/lib/specScreens.json

@@ -1,17 +0,0 @@
-[
-  {
-    "id": "TLAND_001",
-    "title": "Landing Home",
-    "tags": ["marketing", "public"]
-  },
-  {
-    "id": "TLAND_002",
-    "title": "Landing Workspace",
-    "tags": ["member", "workspace"]
-  },
-  {
-    "id": "TLAND_003",
-    "title": "Landing Login",
-    "tags": ["auth"]
-  }
-]

package/client/landing/src/main.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
-
-import { AuthProvider } from "@/auth/AuthProvider";
-import { App } from "./App";
-import "./styles/globals.css";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <AuthProvider>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </AuthProvider>
-  </React.StrictMode>,
-);

package/client/landing/src/pages/LandingHomePage.tsx

@@ -1,215 +0,0 @@
-import { useEffect, useState } from "react";
-import { Archive, ArrowRight, Boxes, CheckCircle2, Clock3 } from "lucide-react";
-import { Link } from "react-router-dom";
-
-import { fetchCatalogProducts, type CatalogProductSummary } from "@/api/catalog";
-import { useAuth } from "@/auth/AuthProvider";
-import { landingTheme } from "@/theme";
-import { landingThemeVars } from "@/theme-vars";
-
-const productStateCopy: Record<string, string> = {
-  active: "즉시 연결 가능한 template surface",
-  draft: "구성 중인 화면 및 플로우 실험",
-  archived: "보관된 이전 실험 기록",
-};
-
-function productStateClassName(state: string) {
-  if (state === "active") {
-    return "bg-[var(--landing-accent-soft)] text-[var(--landing-accent)]";
-  }
-  if (state === "draft") {
-    return "bg-[#fff2e4] text-[#b46c35]";
-  }
-
-  return "bg-[#efe4d7] text-[#7f5b39]";
-}
-
-function productStateIcon(state: string) {
-  if (state === "active") {
-    return CheckCircle2;
-  }
-  if (state === "draft") {
-    return Clock3;
-  }
-
-  return Archive;
-}
-
-export function LandingHomePage() {
-  const { user } = useAuth();
-  const ctaTo = user ? "/workspace" : "/login";
-  const ctaLabel = user ? "Open workspace" : "Sign in";
-  const [products, setProducts] = useState<CatalogProductSummary[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    setLoading(true);
-    setError(null);
-
-    fetchCatalogProducts()
-      .then((response) => {
-        if (!cancelled) {
-          setProducts(response);
-        }
-      })
-      .catch((nextError: Error) => {
-        if (!cancelled) {
-          setError(nextError.message);
-          setProducts([]);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  const activeCount = products.filter((product) => product.status === "active").length;
-  const highlightedProduct = products[0];
-
-  return (
-    <div className="min-h-screen bg-[var(--landing-bg)] text-[var(--landing-text)]" style={landingThemeVars(landingTheme)}>
-      <header className="mx-auto flex max-w-6xl items-center justify-between px-6 py-6">
-        <div className="text-[20px] font-black tracking-[0.18em]">PRODUCT</div>
-        <nav className="hidden items-center gap-8 text-sm font-semibold md:flex">
-          <a href="#features">Features</a>
-          <a href="#proof">Proof</a>
-          <a href="#cta">Contact</a>
-          <Link className="rounded-full border border-[#d8cabb] px-4 py-2" to={ctaTo}>
-            {ctaLabel}
-          </Link>
-        </nav>
-      </header>
-
-      <main className="space-y-[var(--landing-section-gap)]">
-        <section className="mx-auto grid max-w-6xl gap-10 px-6 py-[var(--landing-hero-pad-y)] lg:grid-cols-[1.1fr_0.9fr]">
-          <div>
-            <p className="inline-flex rounded-full bg-[var(--landing-accent-soft)] px-4 py-2 text-sm font-semibold text-[var(--landing-accent)]">
-              Built for product-grade delivery
-            </p>
-            <h1 className="mt-6 max-w-3xl text-5xl font-black leading-[1.05] tracking-[-0.04em]">
-              서비스로 바로 이어지는
-              <br />
-              프론트엔드 템플릿
-            </h1>
-            <p className="mt-6 max-w-2xl text-lg leading-8 text-[var(--landing-muted)]">
-              제품 DOM은 유지하고, 시각 계약만 안전하게 조정하는 React 보일러플레이트다. 랜딩, 일반 앱, 어드민 콘솔을 같은 철학으로 시작할 수 있다.
-            </p>
-            <div className="mt-8 flex flex-wrap gap-3">
-              <Link
-                className="inline-flex items-center gap-2 rounded-full bg-[var(--landing-accent)] px-6 py-3 text-sm font-semibold text-white"
-                to={ctaTo}
-              >
-                {ctaLabel}
-                <ArrowRight className="h-4 w-4" />
-              </Link>
-              <a className="rounded-full border border-[#d8cabb] px-6 py-3 text-sm font-semibold" href="#features">
-                See examples
-              </a>
-            </div>
-          </div>
-
-          <div className="rounded-[var(--landing-card-radius)] border border-[#eadbcb] bg-[#fffaf5] p-6 shadow-[0_24px_70px_rgba(123,78,42,0.08)]">
-            <div className="grid gap-4 md:grid-cols-2">
-              <div className="rounded-[20px] bg-[#2c261f] p-5 text-white">
-                <p className="text-sm text-white/70">Live catalog</p>
-                <p className="mt-4 text-3xl font-black">{loading ? "..." : products.length}</p>
-              </div>
-              <div className="rounded-[20px] bg-[var(--landing-accent-soft)] p-5 text-[var(--landing-accent)]">
-                <p className="text-sm opacity-80">Active products</p>
-                <p className="mt-4 text-3xl font-black">{loading ? "..." : activeCount}</p>
-              </div>
-            </div>
-            <div className="mt-4 rounded-[20px] border border-[#eadbcb] bg-white p-5">
-              <p className="text-sm text-[var(--landing-muted)]">Catalog snapshot</p>
-              {error ? <p className="mt-3 text-lg font-bold text-[#b85b2a]">{error}</p> : null}
-              {!error ? <p className="mt-3 text-lg font-bold">{loading ? "Loading live catalog..." : highlightedProduct?.name ?? "No live products"}</p> : null}
-              {!loading && highlightedProduct ? <p className="mt-2 text-sm text-[var(--landing-muted)]">State: {highlightedProduct.status}</p> : null}
-            </div>
-          </div>
-        </section>
-
-        <section id="features" className="mx-auto max-w-6xl px-6 py-10">
-          <div className="grid gap-4 lg:grid-cols-3">
-            {loading ? (
-              <div className="rounded-[var(--landing-card-radius)] border border-[#eadbcb] bg-white px-6 py-7 lg:col-span-3">
-                <p className="text-sm text-[var(--landing-muted)]">Loading live catalog...</p>
-              </div>
-            ) : null}
-            {!loading && !error && !products.length ? (
-              <div className="rounded-[var(--landing-card-radius)] border border-[#eadbcb] bg-white px-6 py-7 lg:col-span-3">
-                <p className="text-sm text-[var(--landing-muted)]">No catalog products are available yet.</p>
-              </div>
-            ) : null}
-            {products.map((product) => {
-              const Icon = productStateIcon(product.status);
-              return (
-                <div key={product.id} className="rounded-[var(--landing-card-radius)] border border-[#eadbcb] bg-white px-6 py-7">
-                  <div className={`inline-flex rounded-2xl p-3 ${productStateClassName(product.status)}`}>
-                    <Icon className="h-5 w-5" />
-                  </div>
-                  <div className="mt-5 flex items-center justify-between gap-4">
-                    <h2 className="text-xl font-bold">{product.name}</h2>
-                    <span className={`rounded-full px-3 py-1 text-xs font-semibold uppercase ${productStateClassName(product.status)}`}>{product.status}</span>
-                  </div>
-                  <p className="mt-2 text-sm font-semibold text-[#7f5b39]">{product.brand}</p>
-                  <p className="mt-3 text-sm leading-7 text-[var(--landing-muted)]">{product.short_description}</p>
-                  <p className="mt-3 text-xs uppercase tracking-[0.16em] text-[var(--landing-muted)]">
-                    {productStateCopy[product.status] ?? "Catalog product delivered from the live backend contract."}
-                  </p>
-                </div>
-              );
-            })}
-          </div>
-        </section>
-
-        <section id="proof" className="mx-auto max-w-6xl px-6 py-4">
-          <div className="rounded-[32px] border border-[#eadbcb] bg-white px-8 py-8 shadow-[0_18px_48px_rgba(123,78,42,0.06)]">
-            <div className="flex flex-wrap items-center justify-between gap-4">
-              <div>
-                <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--landing-accent)]">Live proof</p>
-                <h2 className="mt-3 text-3xl font-black tracking-[-0.04em]">`/api/v1/catalog/products` 기반 catalog surface</h2>
-              </div>
-              <div className="inline-flex items-center gap-2 rounded-full bg-[var(--landing-accent-soft)] px-4 py-2 text-sm font-semibold text-[var(--landing-accent)]">
-                <Boxes className="h-4 w-4" />
-                {loading ? "Syncing..." : `${products.length} products synced`}
-              </div>
-            </div>
-            <div className="mt-6 grid gap-4 md:grid-cols-3">
-              {[
-                { label: "Active", value: products.filter((product) => product.status === "active").length.toString() },
-                { label: "Draft", value: products.filter((product) => product.status === "draft").length.toString() },
-                { label: "Archived", value: products.filter((product) => product.status === "archived").length.toString() },
-              ].map((entry) => (
-                <div key={entry.label} className="rounded-[24px] bg-[#fff7f0] px-5 py-5">
-                  <p className="text-sm text-[var(--landing-muted)]">{entry.label}</p>
-                  <p className="mt-3 text-3xl font-black text-[#2c261f]">{loading ? "..." : entry.value}</p>
-                </div>
-              ))}
-            </div>
-          </div>
-        </section>
-
-        <section id="cta" className="mx-auto max-w-6xl px-6 pb-16">
-          <div className="rounded-[32px] bg-[#2c261f] px-8 py-10 text-white">
-            <p className="text-sm text-white/60">Ready to start</p>
-            <div className="mt-4 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
-              <h2 className="max-w-2xl text-3xl font-black leading-tight">제품 구조를 무너뜨리지 않는 보일러플레이트로 시작하세요.</h2>
-              <Link className="rounded-full bg-white px-6 py-3 text-sm font-semibold text-[#2c261f]" to={ctaTo}>
-                {ctaLabel}
-              </Link>
-            </div>
-          </div>
-        </section>
-      </main>
-    </div>
-  );
-}

package/client/landing/src/pages/LandingLoginPage.tsx

@@ -1,90 +0,0 @@
-import { useState } from "react";
-import { Link, Navigate, useLocation } from "react-router-dom";
-
-import { useAuth } from "@/auth/AuthProvider";
-import { landingTheme } from "@/theme";
-import { landingThemeVars } from "@/theme-vars";
-
-export function LandingLoginPage() {
-  const { authenticating, login, user } = useAuth();
-  const location = useLocation();
-  const [email, setEmail] = useState("admin@example.com");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-
-  if (user) {
-    const destination = (location.state as { from?: { pathname?: string } } | null)?.from?.pathname ?? "/workspace";
-    return <Navigate to={destination} replace />;
-  }
-
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setError(null);
-
-    try {
-      await login({ email, password });
-    } catch (submitError) {
-      setError(submitError instanceof Error ? submitError.message : "로그인에 실패했습니다.");
-    }
-  }
-
-  return (
-    <div className="min-h-screen bg-[var(--landing-bg)] px-6 py-10 text-[var(--landing-text)]" style={landingThemeVars(landingTheme)}>
-      <div className="mx-auto grid max-w-5xl overflow-hidden rounded-[36px] border border-[#eadbcb] bg-white shadow-[0_28px_80px_rgba(123,78,42,0.12)] lg:grid-cols-[1fr_420px]">
-        <section className="bg-[#fff7ef] px-8 py-10 sm:px-12 sm:py-14">
-          <p className="inline-flex rounded-full bg-[var(--landing-accent-soft)] px-4 py-2 text-sm font-semibold text-[var(--landing-accent)]">
-            Member access
-          </p>
-          <h1 className="mt-7 text-4xl font-black tracking-[-0.04em] text-[#2c261f]">랜딩에서 바로 이어지는 로그인</h1>
-          <p className="mt-5 max-w-md text-base leading-8 text-[var(--landing-muted)]">
-            로그인 성공 시 토큰을 저장하고 보호된 `/workspace`로 이동합니다. 새로고침 후에도 `auth/me`로 세션을 복원합니다.
-          </p>
-          <Link className="mt-8 inline-flex rounded-full border border-[#d8cabb] px-5 py-3 text-sm font-semibold" to="/">
-            Back to landing
-          </Link>
-        </section>
-
-        <section className="px-8 py-10 sm:px-10 sm:py-14">
-          <form className="space-y-5" onSubmit={handleSubmit}>
-            <div>
-              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--landing-accent)]">Sign in</p>
-              <h2 className="mt-3 text-3xl font-black text-[#2c261f]">Open workspace</h2>
-            </div>
-
-            <label className="block space-y-2">
-              <span className="text-sm font-semibold text-[#5b5145]">Email</span>
-              <input
-                className="h-11 w-full rounded-xl border border-[#e2d5c7] px-4 text-sm outline-none focus:ring-2 focus:ring-[#e9c590]"
-                type="email"
-                value={email}
-                onChange={(event) => setEmail(event.target.value)}
-                required
-              />
-            </label>
-
-            <label className="block space-y-2">
-              <span className="text-sm font-semibold text-[#5b5145]">Password</span>
-              <input
-                className="h-11 w-full rounded-xl border border-[#e2d5c7] px-4 text-sm outline-none focus:ring-2 focus:ring-[#e9c590]"
-                type="password"
-                value={password}
-                onChange={(event) => setPassword(event.target.value)}
-                required
-              />
-            </label>
-
-            {error ? <p className="text-sm font-medium text-[#c05b2d]">{error}</p> : null}
-
-            <button
-              className="inline-flex h-11 w-full items-center justify-center rounded-full bg-[#2c261f] px-5 text-sm font-semibold text-white disabled:opacity-60"
-              disabled={authenticating}
-              type="submit"
-            >
-              {authenticating ? "Signing in..." : "Continue"}
-            </button>
-          </form>
-        </section>
-      </div>
-    </div>
-  );
-}