agentic-dev 0.1.0 → 0.2.0

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

@@ -0,0 +1,162 @@
+import { Check, CircleDot, X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import {
+  fetchAlerts,
+  markAlertRead,
+  markAllAlertsRead,
+  type AlertItem,
+} from "@/api/alerts";
+import { useAuth } from "@/auth/AuthProvider";
+import { Button } from "@/components/ui/button";
+
+export function AdminNotificationsDrawer({
+  open,
+  onClose,
+}: {
+  open: boolean;
+  onClose: () => void;
+}) {
+  const { token } = useAuth();
+  const [items, setItems] = useState<AlertItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  useEffect(() => {
+    if (!open || !token?.access_token) {
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+
+    fetchAlerts(token.access_token)
+      .then((response) => {
+        if (!cancelled) {
+          setItems(response.items);
+          setUnreadCount(response.unread_count);
+        }
+      })
+      .catch((nextError: Error) => {
+        if (!cancelled) {
+          setError(nextError.message);
+          setItems([]);
+          setUnreadCount(0);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [open, token?.access_token]);
+
+  if (!open) return null;
+
+  async function handleMarkRead(alertId: string) {
+    if (!token?.access_token) {
+      return;
+    }
+
+    const updated = await markAlertRead(alertId, token.access_token);
+    setItems((current) =>
+      current.map((item) => (item.id === updated.id ? updated : item)),
+    );
+    setUnreadCount((current) => Math.max(0, updated.read ? current - 1 : current));
+  }
+
+  async function handleMarkAllRead() {
+    if (!token?.access_token) {
+      return;
+    }
+
+    const result = await markAllAlertsRead(token.access_token);
+    setItems((current) => current.map((item) => ({ ...item, read: true })));
+    setUnreadCount(result.unread_count);
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black/20">
+      <div className="ml-auto flex h-full w-[var(--admin-drawer-width)] flex-col border-l border-[var(--admin-border)] bg-white shadow-2xl">
+        <div className="flex items-center justify-between border-b border-[var(--admin-border)] px-6 py-5">
+          <div>
+            <h2 className="text-lg font-bold text-[#1f2634]">알림</h2>
+            <p className="mt-1 text-sm text-[var(--admin-muted)]">
+              운영 이벤트와 시스템 상태 · 미읽음 {unreadCount}건
+            </p>
+          </div>
+          <button
+            className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[var(--admin-border)]"
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="flex-1 space-y-3 overflow-y-auto p-6">
+          {loading ? (
+            <div className="text-sm text-[var(--admin-muted)]">
+              알림을 불러오는 중입니다.
+            </div>
+          ) : null}
+          {error ? (
+            <div className="text-sm font-semibold text-[var(--admin-danger)]">
+              {error}
+            </div>
+          ) : null}
+          {!loading && !error && !items.length ? (
+            <div className="text-sm text-[var(--admin-muted)]">
+              표시할 알림이 없습니다.
+            </div>
+          ) : null}
+          {items.map((item) => (
+            <div
+              key={item.id}
+              className="rounded-2xl border border-[var(--admin-border)] bg-[#fafbfd] p-4"
+            >
+              <div className="flex items-start justify-between gap-3">
+                <div>
+                  <p className="font-semibold text-[#202939]">{item.title}</p>
+                  <p className="mt-1 text-sm text-[var(--admin-muted)]">
+                    {item.message}
+                  </p>
+                  <p className="mt-2 text-xs text-[var(--admin-muted)]">
+                    {item.source} · {item.created_at}
+                  </p>
+                </div>
+                {!item.read ? (
+                  <button
+                    className="inline-flex items-center gap-1 rounded-full bg-white px-3 py-1 text-xs font-semibold text-[#344156]"
+                    onClick={() => void handleMarkRead(item.id)}
+                  >
+                    <CircleDot className="h-3.5 w-3.5" />
+                    읽음
+                  </button>
+                ) : (
+                  <span className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-[var(--admin-muted)]">
+                    읽음
+                  </span>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="border-t border-[var(--admin-border)] p-6">
+          <Button
+            variant="outline"
+            className="w-full justify-center gap-2"
+            onClick={() => void handleMarkAllRead()}
+          >
+            <Check className="h-4 w-4" />
+            모두 읽음
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

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

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

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

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

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

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

@@ -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/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

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

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