agentic-dev 0.2.10 → 0.2.12

package/client/admin/src/components/AdminShell.tsx

@@ -1,76 +0,0 @@
-import { Bell, LayoutDashboard, LifeBuoy, Settings2 } from "lucide-react";
-import { useState } from "react";
-import { NavLink, Outlet } from "react-router-dom";
-
-import { useAuth } from "@/auth/AuthProvider";
-import { AdminNotificationsDrawer } from "@/components/AdminNotificationsDrawer";
-import { Button } from "@/components/ui/button";
-import { adminTheme } from "@/theme";
-import { adminThemeVars } from "@/theme-vars";
-
-const navItems = [
-  { to: "/", label: "대시보드", icon: LayoutDashboard },
-  { to: "/queue", label: "거래 관리", icon: Settings2 },
-  { to: "/support", label: "고객지원", icon: LifeBuoy },
-];
-
-export function AdminShell() {
-  const [notificationsOpen, setNotificationsOpen] = useState(false);
-  const { logout, user } = useAuth();
-
-  return (
-    <div className="min-h-screen bg-[var(--admin-shell-bg)] text-[#283042]" style={adminThemeVars(adminTheme)}>
-      <div className="grid min-h-screen grid-cols-[var(--admin-rail-width)_1fr]">
-        <aside className="bg-[var(--admin-rail-bg)] px-6 py-8 text-white">
-          <div className="pb-8 text-[22px] font-black tracking-[0.18em]">ADMIN</div>
-          <nav className="space-y-2">
-            {navItems.map((item) => {
-              const Icon = item.icon;
-              return (
-                <NavLink
-                  key={item.to}
-                  to={item.to}
-                  end={item.to === "/"}
-                  className={({ isActive }) =>
-                    `flex items-center gap-3 rounded-xl px-4 py-3 text-sm font-semibold ${isActive ? "bg-white/14 text-white" : "text-white/70"}`
-                  }
-                >
-                  <Icon className="h-4 w-4" />
-                  {item.label}
-                </NavLink>
-              );
-            })}
-          </nav>
-        </aside>
-
-        <div className="min-w-0">
-          <header className="flex h-[var(--admin-topbar-height)] items-center justify-between border-b border-[var(--admin-border)] bg-white px-8">
-            <div>
-              <p className="text-sm text-[var(--admin-muted)]">운영 콘솔</p>
-              <p className="mt-1 text-lg font-bold">제품 우선 관리자 화면</p>
-            </div>
-            <div className="flex items-center gap-3">
-              <button
-                aria-label="알림 열기"
-                className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[var(--admin-border)] bg-white"
-                onClick={() => setNotificationsOpen(true)}
-              >
-                <Bell className="h-4 w-4 text-[#5d6879]" />
-              </button>
-              <div className="rounded-full bg-[#f7f8fb] px-4 py-2 text-sm font-semibold">{user?.name ?? user?.email}</div>
-              <Button variant="outline" onClick={logout}>
-                로그아웃
-              </Button>
-            </div>
-          </header>
-
-          <main className="p-8">
-            <Outlet />
-          </main>
-        </div>
-      </div>
-
-      <AdminNotificationsDrawer open={notificationsOpen} onClose={() => setNotificationsOpen(false)} />
-    </div>
-  );
-}

package/client/admin/src/components/ui/button.tsx

@@ -1,34 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/cn";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-semibold transition-colors disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        primary: "bg-[#f0447d] text-white hover:bg-[#d4386b]",
-        neutral: "bg-[#232a39] text-white hover:bg-[#151b28]",
-        outline: "border border-[var(--admin-border)] bg-white text-[#3a4354] hover:bg-[#f7f8fb]",
-      },
-      size: {
-        default: "h-10 px-4",
-        sm: "h-9 px-3",
-      },
-    },
-    defaultVariants: {
-      variant: "primary",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, ...props }, ref) => {
-  return <button ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props} />;
-});
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

package/client/admin/src/components/ui/input.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from "@/lib/cn";
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
-  return (
-    <input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md border border-[var(--admin-border)] bg-white px-3 py-2 text-sm text-[#2a3140] outline-none placeholder:text-[#8a93a3] focus:ring-2 focus:ring-[#f5a7c1]",
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-Input.displayName = "Input";
-
-export { Input };

package/client/admin/src/lib/cn.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

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

@@ -1,30 +0,0 @@
-[
-  {
-    "id": "TADM_001",
-    "route": "/",
-    "binding": "direct",
-    "notes": ["Primary admin dashboard surface."],
-    "tags": ["shell"]
-  },
-  {
-    "id": "TADM_002",
-    "route": "/queue",
-    "binding": "direct",
-    "notes": ["Admin operations queue view."],
-    "tags": ["queue"]
-  },
-  {
-    "id": "TADM_003",
-    "route": "/support",
-    "binding": "direct",
-    "notes": ["Support workflow and response workspace."],
-    "tags": ["support"]
-  },
-  {
-    "id": "TADM_004",
-    "route": "/login",
-    "binding": "direct",
-    "notes": ["Public admin authentication route."],
-    "tags": ["public"]
-  }
-]

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

@@ -1,22 +0,0 @@
-[
-  {
-    "id": "TADM_001",
-    "title": "Admin Dashboard",
-    "tags": ["admin", "overview"]
-  },
-  {
-    "id": "TADM_002",
-    "title": "Admin Queue",
-    "tags": ["admin", "operations"]
-  },
-  {
-    "id": "TADM_003",
-    "title": "Admin Support",
-    "tags": ["admin", "support"]
-  },
-  {
-    "id": "TADM_004",
-    "title": "Admin Login",
-    "tags": ["auth"]
-  }
-]

package/client/admin/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/App";
-import "./styles/globals.css";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <AuthProvider>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </AuthProvider>
-  </React.StrictMode>,
-);

package/client/admin/src/pages/AdminDashboardPage.tsx

@@ -1,171 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { fetchAlerts, type AlertItem, type AlertsPayload } from "@/api/alerts";
-import { fetchAdminOverview, type AdminOverviewResponse } from "@/api/orders";
-import { useAuth } from "@/auth/AuthProvider";
-
-function alertToneClassName(tone: string) {
-  if (tone === "danger") {
-    return "bg-[#fff3f5] text-[#8a274b]";
-  }
-  if (tone === "warning") {
-    return "bg-[#fff4df] text-[#9a5b20]";
-  }
-
-  return "bg-[#f5f7fb] text-[#344156]";
-}
-
-export function AdminDashboardPage() {
-  const { token } = useAuth();
-  const [overview, setOverview] = useState<AdminOverviewResponse | null>(null);
-  const [alerts, setAlerts] = useState<AlertsPayload | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!token?.access_token) {
-      return;
-    }
-
-    let cancelled = false;
-
-    setLoading(true);
-    setError(null);
-
-    Promise.all([
-      fetchAdminOverview(token.access_token),
-      fetchAlerts(token.access_token),
-    ])
-      .then(([overviewResponse, alertsResponse]) => {
-        if (!cancelled) {
-          setOverview(overviewResponse);
-          setAlerts(alertsResponse);
-        }
-      })
-      .catch((nextError: Error) => {
-        if (!cancelled) {
-          setError(nextError.message);
-          setOverview(null);
-          setAlerts(null);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [token?.access_token]);
-
-  return (
-    <div className="space-y-6">
-      <section className="grid gap-4 md:grid-cols-3">
-        {(overview?.cards ?? []).map((card) => (
-          <div
-            key={card.label}
-            className="rounded-[var(--admin-card-radius)] border border-[var(--admin-border)] bg-white p-6"
-          >
-            <p className="text-sm text-[var(--admin-muted)]">{card.label}</p>
-            <p
-              className={`mt-3 text-3xl font-bold text-[#202939] ${card.tone ?? ""}`}
-            >
-              {card.value}
-            </p>
-          </div>
-        ))}
-        {loading && !overview ? (
-          <div className="rounded-[var(--admin-card-radius)] border border-[var(--admin-border)] bg-white p-6 md:col-span-3">
-            <p className="text-sm text-[var(--admin-muted)]">운영 요약</p>
-            <p className="mt-3 text-lg font-semibold text-[#202939]">
-              데이터를 불러오는 중입니다.
-            </p>
-          </div>
-        ) : null}
-        {error ? (
-          <div className="rounded-[var(--admin-card-radius)] border border-[var(--admin-border)] bg-white p-6 md:col-span-3">
-            <p className="text-sm text-[var(--admin-muted)]">운영 요약</p>
-            <p className="mt-3 text-lg font-semibold text-[var(--admin-danger)]">
-              {error}
-            </p>
-          </div>
-        ) : null}
-      </section>
-
-      <section className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]">
-        <div className="rounded-[var(--admin-card-radius)] border border-[var(--admin-border)] bg-white p-6">
-          <h2 className="text-lg font-bold">거래 상태별 현황</h2>
-          <div className="mt-6 grid gap-3 text-sm">
-            {loading && !(overview?.stage_statuses.length ?? 0) ? (
-              <div className="text-[var(--admin-muted)]">
-                상태별 현황을 불러오는 중입니다.
-              </div>
-            ) : null}
-            {error ? (
-              <div className="text-[var(--admin-danger)]">{error}</div>
-            ) : null}
-            {!loading && !error && !(overview?.stage_statuses.length ?? 0) ? (
-              <div className="text-[var(--admin-muted)]">
-                표시할 상태 데이터가 없습니다.
-              </div>
-            ) : null}
-            {(overview?.stage_statuses ?? []).map(({ label, value }) => (
-              <div
-                key={label}
-                className="flex items-center justify-between rounded-xl bg-[#f7f8fb] px-4 py-3"
-              >
-                <span className="text-[#344156]">{label}</span>
-                <span className="font-semibold">{value}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div className="rounded-[var(--admin-card-radius)] border border-[var(--admin-border)] bg-white p-6">
-          <div className="flex items-center justify-between gap-3">
-            <h2 className="text-lg font-bold">운영 알림</h2>
-            <span className="rounded-full bg-[#f5f7fb] px-3 py-1 text-xs font-semibold text-[#5d6879]">
-              미읽음 {alerts?.unread_count ?? 0}
-            </span>
-          </div>
-          <div className="mt-6 space-y-3 text-sm">
-            {loading && !(alerts?.items.length ?? 0) ? (
-              <div className="text-[var(--admin-muted)]">
-                운영 알림을 불러오는 중입니다.
-              </div>
-            ) : null}
-            {error ? (
-              <div className="text-[var(--admin-danger)]">{error}</div>
-            ) : null}
-            {!loading && !error && !(alerts?.items.length ?? 0) ? (
-              <div className="text-[var(--admin-muted)]">
-                운영 알림이 없습니다.
-              </div>
-            ) : null}
-            {(alerts?.items ?? []).slice(0, 4).map((alert: AlertItem) => (
-              <div
-                key={alert.id}
-                className={`rounded-xl px-4 py-3 ${alertToneClassName(alert.tone)}`}
-              >
-                <div className="flex items-center justify-between gap-3">
-                  <span className="font-semibold">{alert.title}</span>
-                  {!alert.read ? (
-                    <span className="rounded-full bg-white/70 px-2 py-1 text-[10px] font-bold">
-                      NEW
-                    </span>
-                  ) : null}
-                </div>
-                <p className="mt-2">{alert.message}</p>
-                <p className="mt-2 text-xs opacity-70">
-                  {alert.source} · {alert.created_at}
-                </p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-    </div>
-  );
-}

package/client/admin/src/pages/AdminLoginPage.tsx

@@ -1,75 +0,0 @@
-import { ShieldCheck } from "lucide-react";
-import { useState } from "react";
-import { Navigate, useLocation } from "react-router-dom";
-
-import { useAuth } from "@/auth/AuthProvider";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { adminTheme } from "@/theme";
-import { adminThemeVars } from "@/theme-vars";
-
-export function AdminLoginPage() {
-  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 ?? "/";
-    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(--admin-shell-bg)] px-6 py-10 text-[#283042]" style={adminThemeVars(adminTheme)}>
-      <div className="mx-auto grid max-w-6xl overflow-hidden rounded-[36px] border border-[var(--admin-border)] bg-white shadow-[0_30px_80px_rgba(20,27,40,0.18)] lg:grid-cols-[1fr_440px]">
-        <section className="bg-[#232a39] px-8 py-10 text-white sm:px-12 sm:py-14">
-          <div className="inline-flex items-center gap-3 rounded-full bg-white/10 px-4 py-2 text-sm font-semibold">
-            <ShieldCheck className="h-4 w-4" />
-            Admin console
-          </div>
-          <h1 className="mt-8 text-4xl font-black tracking-[-0.04em]">운영 콘솔 실로그인</h1>
-          <p className="mt-5 max-w-md text-base leading-7 text-white/72">
-            토큰을 저장한 뒤 `auth/me`를 재호출해서 운영 셸 진입 전 인증 상태를 검증합니다.
-          </p>
-        </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-[#f0447d]">Restricted access</p>
-              <h2 className="mt-3 text-3xl font-black text-[#232a39]">Sign in</h2>
-            </div>
-
-            <label className="block space-y-2">
-              <span className="text-sm font-semibold text-[#3a4354]">Email</span>
-              <Input 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-[#3a4354]">Password</span>
-              <Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} required />
-            </label>
-
-            {error ? <p className="text-sm font-medium text-[#cc2f5c]">{error}</p> : null}
-
-            <Button className="w-full" type="submit" disabled={authenticating}>
-              {authenticating ? "Signing in..." : "Open admin console"}
-            </Button>
-          </form>
-        </section>
-      </div>
-    </div>
-  );
-}

package/client/admin/src/pages/AdminQueuePage.tsx

@@ -1,107 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { useAuth } from "@/auth/AuthProvider";
-import { fetchAdminQueue, type AdminQueueItem } from "@/api/orders";
-
-export function AdminQueuePage() {
-  const { token } = useAuth();
-  const [rows, setRows] = useState<AdminQueueItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!token?.access_token) {
-      return;
-    }
-
-    let cancelled = false;
-
-    setLoading(true);
-    setError(null);
-
-    fetchAdminQueue(token.access_token)
-      .then((response) => {
-        if (!cancelled) {
-          setRows(response);
-        }
-      })
-      .catch((nextError: Error) => {
-        if (!cancelled) {
-          setError(nextError.message);
-          setRows([]);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [token?.access_token]);
-
-  return (
-    <div className="space-y-6">
-      <div className="rounded-[var(--admin-card-radius)] border border-[var(--admin-border)] bg-white p-6">
-        <h1 className="text-lg font-bold">거래관리</h1>
-        <p className="mt-2 text-sm text-[var(--admin-muted)]">
-          총 <span className="font-semibold text-[#202939]">{loading ? "..." : rows.length}</span>건의 거래
-        </p>
-      </div>
-
-      <div className="rounded-[var(--admin-card-radius)] border border-[var(--admin-border)] bg-white">
-        <table className="w-full border-collapse text-sm">
-          <thead className="bg-[#f8fafe] text-left text-[#516174]">
-            <tr>
-              {["주문ID", "상품", "고객", "상태", "SLA"].map((cell) => (
-                <th key={cell} className="border-b border-r border-[var(--admin-border)] px-4 py-4 font-semibold last:border-r-0">
-                  {cell}
-                </th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {loading ? (
-              <tr>
-                <td className="border-b border-[var(--admin-border)] px-4 py-4 text-[var(--admin-muted)]" colSpan={5}>
-                  거래 큐를 불러오는 중입니다.
-                </td>
-              </tr>
-            ) : null}
-            {error ? (
-              <tr>
-                <td className="border-b border-[var(--admin-border)] px-4 py-4 text-[var(--admin-danger)]" colSpan={5}>
-                  {error}
-                </td>
-              </tr>
-            ) : null}
-            {!loading && !error && !rows.length ? (
-              <tr>
-                <td className="border-b border-[var(--admin-border)] px-4 py-4 text-[var(--admin-muted)]" colSpan={5}>
-                  현재 표시할 거래가 없습니다.
-                </td>
-              </tr>
-            ) : null}
-            {rows.map((row) => (
-              <tr key={row.order_id}>
-                <td className="border-b border-r border-[var(--admin-border)] px-4 py-4 align-middle last:border-r-0">{row.order_id}</td>
-                <td className="border-b border-r border-[var(--admin-border)] px-4 py-4 align-middle last:border-r-0">{row.product_name}</td>
-                <td className="border-b border-r border-[var(--admin-border)] px-4 py-4 align-middle last:border-r-0">{row.customer_name}</td>
-                <td
-                  className={`border-b border-r border-[var(--admin-border)] px-4 py-4 align-middle last:border-r-0 ${
-                    row.status === "Exception" ? "text-[var(--admin-danger)]" : ""
-                  }`}
-                >
-                  {row.status}
-                </td>
-                <td className="border-b border-r border-[var(--admin-border)] px-4 py-4 align-middle last:border-r-0">{row.sla}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
-  );
-}

package/client/admin/src/pages/AdminSupportPage.tsx

@@ -1,61 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { useAuth } from "@/auth/AuthProvider";
-import { fetchSupportFaqs, type SupportFaq } from "@/api/support";
-
-export function AdminSupportPage() {
-  const { token } = useAuth();
-  const [faqs, setFaqs] = useState<SupportFaq[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!token?.access_token) {
-      return;
-    }
-
-    let cancelled = false;
-
-    setLoading(true);
-    setError(null);
-
-    fetchSupportFaqs(token.access_token)
-      .then((response) => {
-        if (!cancelled) {
-          setFaqs(response);
-        }
-      })
-      .catch((nextError: Error) => {
-        if (!cancelled) {
-          setError(nextError.message);
-          setFaqs([]);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [token?.access_token]);
-
-  return (
-    <div className="rounded-[var(--admin-card-radius)] border border-[var(--admin-border)] bg-white p-6">
-      <h1 className="text-lg font-bold">FAQ 관리</h1>
-      <div className="mt-6 space-y-3">
-        {loading ? <div className="text-sm text-[var(--admin-muted)]">FAQ를 불러오는 중입니다.</div> : null}
-        {error ? <div className="text-sm font-semibold text-[var(--admin-danger)]">{error}</div> : null}
-        {!loading && !error && !faqs.length ? <div className="text-sm text-[var(--admin-muted)]">등록된 FAQ가 없습니다.</div> : null}
-        {faqs.map((item) => (
-          <div key={item.id} className="flex items-center justify-between rounded-xl border border-[var(--admin-border)] px-4 py-3">
-            <span>{item.question}</span>
-            <span className="text-sm text-[var(--admin-muted)]">{item.visibility}</span>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

package/client/admin/src/styles/globals.css

@@ -1,17 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-:root {
-  color-scheme: light;
-  font-family: "SUIT", "Pretendard", "Noto Sans KR", sans-serif;
-}
-
-body {
-  margin: 0;
-  background: var(--admin-shell-bg, #f5f7fb);
-}
-
-* {
-  box-sizing: border-box;
-}

package/client/admin/src/theme-vars.ts

@@ -1,18 +0,0 @@
-import type { CSSProperties } from "react";
-
-import type { AdminTheme } from "./theme";
-
-export function adminThemeVars(theme: AdminTheme): CSSProperties {
-  return {
-    "--admin-rail-width": theme.railWidth,
-    "--admin-topbar-height": theme.topbarHeight,
-    "--admin-drawer-width": theme.drawerWidth,
-    "--admin-shell-bg": theme.shellBg,
-    "--admin-rail-bg": theme.railBg,
-    "--admin-border": theme.border,
-    "--admin-card-radius": theme.cardRadius,
-    "--admin-danger": theme.danger,
-    "--admin-accent": theme.accent,
-    "--admin-muted": theme.muted,
-  } as CSSProperties;
-}