샘플 adminfront, devfront 구성. ory-keto-migrate 오류 해결

adminfront/src/features/audit/AuditLogsPage.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
 import { Filter, ListChecks, Search, Terminal } from "lucide-react";
 import { fetchAuditLogs } from "../../lib/adminApi";
 
@@ -22,7 +23,8 @@ function AuditLogsPage() {
 
   if (error) {
     const errMsg =
-      (error as any).response?.data?.error || (error as Error).message;
+      (error as AxiosError<{ error?: string }>).response?.data?.error ??
+      (error as Error).message;
     return (
       <div className="p-8 text-center text-red-500">
         Error loading logs: {errMsg}
@@ -88,10 +90,9 @@ function AuditLogsPage() {
                 No audit logs found.
               </div>
             ) : (
-              logs.map((row, idx) => (
+              logs.map((row) => (
                 <div
-                  // biome-ignore lint/suspicious/noArrayIndexKey: simple list
-                  key={`${row.event_type}-${idx}`}
+                  key={`${row.event_type}-${row.user_id}-${row.timestamp}`}
                   className="grid grid-cols-[1.2fr,1fr,1fr,1fr] items-center gap-2 py-3 text-sm"
                 >
                   <div className="font-semibold">{row.event_type}</div>

adminfront/src/features/overview/GlobalOverviewPage.tsx

@@ -0,0 +1,170 @@
+import {
+  Activity,
+  ArrowUpRight,
+  Box,
+  Database,
+  ShieldCheck,
+  Users,
+} from "lucide-react";
+import { Link } from "react-router-dom";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+
+const summaryCards = [
+  {
+    label: "Total Tenants",
+    value: "-",
+    hint: "Tenant-aware core",
+    icon: Users,
+  },
+  {
+    label: "OIDC Clients",
+    value: "-",
+    hint: "Hydra registry",
+    icon: ShieldCheck,
+  },
+  {
+    label: "Audit Events (24h)",
+    value: "-",
+    hint: "ClickHouse stream",
+    icon: Activity,
+  },
+  {
+    label: "Policy Gate",
+    value: "Planned",
+    hint: "Keto + Admin checks",
+    icon: Database,
+  },
+];
+
+function GlobalOverviewPage() {
+  return (
+    <div className="space-y-10">
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="space-y-2">
+          <p className="text-xs uppercase tracking-[0.2em] text-[var(--color-muted)]">
+            Global Overview
+          </p>
+          <h2 className="text-3xl font-semibold">
+            Tenant-independent control plane
+          </h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            모든 테넌트 공통 지표와 정책 상태를 한 곳에서 확인합니다.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Badge variant="muted">IDP: Ory primary</Badge>
+          <Badge variant="muted">Fallback: Descope</Badge>
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+        {summaryCards.map(({ label, value, hint, icon: Icon }) => (
+          <Card key={label} className="bg-[var(--color-panel)]">
+            <CardHeader className="flex flex-row items-center justify-between pb-2">
+              <CardDescription>{label}</CardDescription>
+              <div className="rounded-full border border-[var(--color-border)] p-2 text-[var(--color-muted)]">
+                <Icon size={16} />
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-semibold">{value}</div>
+              <p className="mt-1 text-xs text-[var(--color-muted)]">{hint}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="grid gap-6 lg:grid-cols-[1.4fr,1fr]">
+        <Card className="bg-[var(--color-panel)]">
+          <CardHeader>
+            <CardTitle className="text-xl">Admin playbook</CardTitle>
+            <CardDescription>
+              운영 정책, 레이트리밋, 감사 로그의 기본 룰을 요약합니다.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3 text-sm text-[var(--color-muted)]">
+            <div className="flex items-start gap-3">
+              <div className="mt-1 rounded-full border border-[var(--color-border)] p-2">
+                <ShieldCheck size={14} />
+              </div>
+              <div>
+                <p className="font-semibold text-foreground">
+                  Backend-only IDP access
+                </p>
+                <p>
+                  모든 IDP 호출은 backend를 통해서만 수행하며, Hydra/Kratos
+                  admin 포트는 외부에 노출하지 않습니다.
+                </p>
+              </div>
+            </div>
+            <div className="flex items-start gap-3">
+              <div className="mt-1 rounded-full border border-[var(--color-border)] p-2">
+                <Box size={14} />
+              </div>
+              <div>
+                <p className="font-semibold text-foreground">
+                  Tenant isolation
+                </p>
+                <p>
+                  Tenant 헤더와 감사 로그 규칙을 기본 적용하며, 향후 Keto
+                  정책으로 확장 예정입니다.
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="bg-[var(--color-panel)]">
+          <CardHeader>
+            <CardTitle className="text-xl">빠른 이동</CardTitle>
+            <CardDescription>
+              주요 운영 화면으로 바로 이동합니다.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Button
+              asChild
+              className="w-full justify-between"
+              variant="outline"
+            >
+              <Link to="/tenants/new">
+                테넌트 추가
+                <ArrowUpRight size={16} />
+              </Link>
+            </Button>
+            <Button
+              asChild
+              className="w-full justify-between"
+              variant="outline"
+            >
+              <Link to="/audit-logs">
+                감사 로그 보기
+                <ArrowUpRight size={16} />
+              </Link>
+            </Button>
+            <Button
+              asChild
+              className="w-full justify-between"
+              variant="outline"
+            >
+              <Link to="/dashboard">
+                테넌트 대시보드
+                <ArrowUpRight size={16} />
+              </Link>
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}
+
+export default GlobalOverviewPage;

adminfront/src/features/tenants/TenantCreatePage.tsx

@@ -0,0 +1,153 @@
+import { useMutation } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Building2, Sparkles } from "lucide-react";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import { Textarea } from "../../components/ui/textarea";
+import { createTenant } from "../../lib/adminApi";
+
+function TenantCreatePage() {
+  const navigate = useNavigate();
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [description, setDescription] = useState("");
+  const [status, setStatus] = useState("active");
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      createTenant({
+        name,
+        slug: slug || undefined,
+        description: description || undefined,
+        status,
+      }),
+    onSuccess: () => {
+      navigate("/tenants");
+    },
+  });
+
+  const errorMsg = (mutation.error as AxiosError<{ error?: string }>)?.response
+    ?.data?.error;
+
+  return (
+    <div className="space-y-8">
+      <header className="space-y-2">
+        <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
+          <span>Tenants</span>
+          <span>/</span>
+          <span className="text-foreground">Create</span>
+        </div>
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <h2 className="text-3xl font-semibold">테넌트 추가</h2>
+            <p className="text-sm text-[var(--color-muted)]">
+              글로벌 운영 기준의 신규 테넌트를 등록합니다.
+            </p>
+          </div>
+          <Badge variant="muted">Admin only</Badge>
+        </div>
+      </header>
+
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Building2 size={18} />
+            Tenant Profile
+          </CardTitle>
+          <CardDescription>
+            필수 정보만 입력해도 생성 가능합니다. Slug는 없으면 자동 생성됩니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">
+              Tenant name <span className="text-destructive">*</span>
+            </Label>
+            <Input value={name} onChange={(e) => setName(e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Slug</Label>
+            <Input
+              value={slug}
+              onChange={(e) => setSlug(e.target.value)}
+              placeholder="tenant-slug"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Description</Label>
+            <Textarea
+              rows={3}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Status</Label>
+            <div className="flex gap-3">
+              <Button
+                type="button"
+                variant={status === "active" ? "default" : "outline"}
+                onClick={() => setStatus("active")}
+              >
+                Active
+              </Button>
+              <Button
+                type="button"
+                variant={status === "inactive" ? "default" : "outline"}
+                onClick={() => setStatus("inactive")}
+              >
+                Inactive
+              </Button>
+            </div>
+          </div>
+
+          {errorMsg && (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMsg}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Sparkles size={18} />
+            정책 메모
+          </CardTitle>
+          <CardDescription>
+            Tenant 권한 정책은 추후 Keto 연계로 확장 예정입니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="text-sm text-[var(--color-muted)]">
+          생성 직후에는 기본 활성 상태로 부여되며, 필요 시 상태를 수정하세요.
+        </CardContent>
+      </Card>
+
+      <div className="flex items-center justify-end gap-3">
+        <Button variant="outline" onClick={() => navigate("/tenants")}>
+          취소
+        </Button>
+        <Button
+          onClick={() => mutation.mutate()}
+          disabled={mutation.isPending || name.trim() === ""}
+        >
+          생성
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default TenantCreatePage;

adminfront/src/features/tenants/TenantDetailPage.tsx

@@ -0,0 +1,185 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { ArrowLeft, Save, Trash2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import { Input } from "../../components/ui/input";
+import { Label } from "../../components/ui/label";
+import { Textarea } from "../../components/ui/textarea";
+import { deleteTenant, fetchTenant, updateTenant } from "../../lib/adminApi";
+
+function TenantDetailPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const tenantId = useMemo(() => id ?? "", [id]);
+
+  const tenantQuery = useQuery({
+    queryKey: ["tenant", tenantId],
+    queryFn: () => fetchTenant(tenantId),
+    enabled: tenantId !== "",
+  });
+
+  const [name, setName] = useState("");
+  const [slug, setSlug] = useState("");
+  const [description, setDescription] = useState("");
+  const [status, setStatus] = useState("active");
+
+  useEffect(() => {
+    if (!tenantQuery.data) {
+      return;
+    }
+    setName(tenantQuery.data.name);
+    setSlug(tenantQuery.data.slug);
+    setDescription(tenantQuery.data.description ?? "");
+    setStatus(tenantQuery.data.status);
+  }, [tenantQuery.data]);
+
+  const updateMutation = useMutation({
+    mutationFn: () =>
+      updateTenant(tenantId, {
+        name,
+        slug,
+        description: description || undefined,
+        status,
+      }),
+    onSuccess: () => {
+      navigate("/tenants");
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteTenant(tenantId),
+    onSuccess: () => {
+      navigate("/tenants");
+    },
+  });
+
+  const errorMsg = (updateMutation.error as AxiosError<{ error?: string }>)
+    ?.response?.data?.error;
+  const loadError = (tenantQuery.error as AxiosError<{ error?: string }>)
+    ?.response?.data?.error;
+
+  const handleDelete = () => {
+    if (!window.confirm("이 테넌트를 삭제할까요?")) {
+      return;
+    }
+    deleteMutation.mutate();
+  };
+
+  return (
+    <div className="space-y-8">
+      <header className="flex flex-wrap items-start justify-between gap-4">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
+            <Link to="/tenants" className="inline-flex items-center gap-2">
+              <ArrowLeft size={14} />
+              Tenants
+            </Link>
+            <span>/</span>
+            <span className="text-foreground">Detail</span>
+          </div>
+          <h2 className="text-3xl font-semibold">테넌트 상세</h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            테넌트 정보를 수정하거나 삭제할 수 있습니다.
+          </p>
+        </div>
+        <Badge variant="muted">Admin only</Badge>
+      </header>
+
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader>
+          <CardTitle>Tenant profile</CardTitle>
+          <CardDescription>Slug와 상태 변경은 바로 적용됩니다.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {loadError && (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {loadError}
+            </div>
+          )}
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">
+              Tenant name <span className="text-destructive">*</span>
+            </Label>
+            <Input value={name} onChange={(e) => setName(e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Slug</Label>
+            <Input value={slug} onChange={(e) => setSlug(e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Description</Label>
+            <Textarea
+              rows={3}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Status</Label>
+            <div className="flex gap-3">
+              <Button
+                type="button"
+                variant={status === "active" ? "default" : "outline"}
+                onClick={() => setStatus("active")}
+              >
+                Active
+              </Button>
+              <Button
+                type="button"
+                variant={status === "inactive" ? "default" : "outline"}
+                onClick={() => setStatus("inactive")}
+              >
+                Inactive
+              </Button>
+            </div>
+          </div>
+
+          {errorMsg && (
+            <div className="rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMsg}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <Button
+          variant="outline"
+          onClick={handleDelete}
+          disabled={deleteMutation.isPending}
+        >
+          <Trash2 size={16} />
+          삭제
+        </Button>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" onClick={() => navigate("/tenants")}>
+            취소
+          </Button>
+          <Button
+            onClick={() => updateMutation.mutate()}
+            disabled={
+              updateMutation.isPending ||
+              tenantQuery.isLoading ||
+              name.trim() === ""
+            }
+          >
+            <Save size={16} />
+            저장
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default TenantDetailPage;

adminfront/src/features/tenants/TenantListPage.tsx

@@ -0,0 +1,171 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { Link, useNavigate } from "react-router-dom";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import { deleteTenant, fetchTenants } from "../../lib/adminApi";
+
+function TenantListPage() {
+  const navigate = useNavigate();
+  const query = useQuery({
+    queryKey: ["tenants", { limit: 50, offset: 0 }],
+    queryFn: () => fetchTenants(50, 0),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: (tenantId: string) => deleteTenant(tenantId),
+    onSuccess: () => {
+      query.refetch();
+    },
+  });
+
+  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
+    ?.data?.error;
+  const fallbackError =
+    !errorMsg && query.isError ? "테넌트 목록 조회에 실패했습니다." : null;
+
+  const items = query.data?.items ?? [];
+
+  const handleDelete = (tenantId: string, tenantName: string) => {
+    if (!window.confirm(`테넌트 "${tenantName}"를 삭제할까요?`)) {
+      return;
+    }
+    deleteMutation.mutate(tenantId);
+  };
+
+  return (
+    <div className="space-y-8">
+      <header className="flex flex-wrap items-start justify-between gap-4">
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 text-sm text-[var(--color-muted)]">
+            <span>Tenants</span>
+            <span>/</span>
+            <span className="text-foreground">List</span>
+          </div>
+          <h2 className="text-3xl font-semibold">테넌트 목록</h2>
+          <p className="text-sm text-[var(--color-muted)]">
+            현재 등록된 테넌트를 확인하고 상태를 관리합니다.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            onClick={() => query.refetch()}
+            disabled={query.isFetching}
+          >
+            <RefreshCw size={16} />
+            새로고침
+          </Button>
+          <Button asChild>
+            <Link to="/tenants/new">
+              <Plus size={16} />
+              테넌트 추가
+            </Link>
+          </Button>
+        </div>
+      </header>
+
+      <Card className="bg-[var(--color-panel)]">
+        <CardHeader className="flex flex-row items-center justify-between">
+          <div>
+            <CardTitle>Tenant registry</CardTitle>
+            <CardDescription>
+              총 {query.data?.total ?? 0}개 테넌트
+            </CardDescription>
+          </div>
+          <Badge variant="muted">Admin only</Badge>
+        </CardHeader>
+        <CardContent>
+          {(errorMsg || fallbackError) && (
+            <div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {errorMsg ?? fallbackError}
+            </div>
+          )}
+
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>NAME</TableHead>
+                <TableHead>SLUG</TableHead>
+                <TableHead>STATUS</TableHead>
+                <TableHead>UPDATED</TableHead>
+                <TableHead className="text-right">ACTIONS</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {query.isLoading && (
+                <TableRow>
+                  <TableCell colSpan={5}>로딩 중...</TableCell>
+                </TableRow>
+              )}
+              {!query.isLoading && items.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={5}>
+                    아직 등록된 테넌트가 없습니다.
+                  </TableCell>
+                </TableRow>
+              )}
+              {items.map((tenant) => (
+                <TableRow key={tenant.id}>
+                  <TableCell className="font-semibold">{tenant.name}</TableCell>
+                  <TableCell>{tenant.slug}</TableCell>
+                  <TableCell>
+                    <Badge
+                      variant={tenant.status === "active" ? "default" : "muted"}
+                    >
+                      {tenant.status}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    {tenant.updatedAt
+                      ? new Date(tenant.updatedAt).toLocaleString("ko-KR")
+                      : "-"}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => navigate(`/tenants/${tenant.id}`)}
+                      >
+                        <Pencil size={14} />
+                        편집
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => handleDelete(tenant.id, tenant.name)}
+                        disabled={deleteMutation.isPending}
+                      >
+                        <Trash2 size={14} />
+                        삭제
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default TenantListPage;