agentic-dev 0.1.0 → 0.2.0

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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,23 @@
+[
+  {
+    "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

@@ -0,0 +1,17 @@
+[
+  {
+    "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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,215 @@
+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

@@ -0,0 +1,90 @@
+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>
+  );
+}