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

adminfront/src/app/routes.tsx

@@ -3,6 +3,10 @@ import AppLayout from "../components/layout/AppLayout";
 import AuditLogsPage from "../features/audit/AuditLogsPage";
 import AuthPage from "../features/auth/AuthPage";
 import DashboardPage from "../features/dashboard/DashboardPage";
+import GlobalOverviewPage from "../features/overview/GlobalOverviewPage";
+import TenantCreatePage from "../features/tenants/TenantCreatePage";
+import TenantDetailPage from "../features/tenants/TenantDetailPage";
+import TenantListPage from "../features/tenants/TenantListPage";
 
 export const router = createBrowserRouter(
   [
@@ -10,9 +14,13 @@ export const router = createBrowserRouter(
       path: "/",
       element: <AppLayout />,
       children: [
-        { index: true, element: <DashboardPage /> },
+        { index: true, element: <GlobalOverviewPage /> },
+        { path: "dashboard", element: <DashboardPage /> },
         { path: "audit-logs", element: <AuditLogsPage /> },
         { path: "auth", element: <AuthPage /> },
+        { path: "tenants", element: <TenantListPage /> },
+        { path: "tenants/new", element: <TenantCreatePage /> },
+        { path: "tenants/:id", element: <TenantDetailPage /> },
       ],
     },
   ],

adminfront/src/components/layout/AppLayout.tsx

@@ -1,5 +1,6 @@
 import {
   BadgeCheck,
+  Building2,
   KeyRound,
   LayoutDashboard,
   Moon,
@@ -12,6 +13,8 @@ import { NavLink, Outlet } from "react-router-dom";
 
 const navItems = [
   { label: "Overview", to: "/", icon: LayoutDashboard },
+  { label: "Tenant Dashboard", to: "/dashboard", icon: ShieldHalf },
+  { label: "Tenants", to: "/tenants", icon: Building2 },
   { label: "Audit Logs", to: "/audit-logs", icon: NotebookTabs },
   { label: "Auth Guard", to: "/auth", icon: KeyRound },
 ];

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}-${row.user_id}-${row.timestamp}`}
-                  key={`${row.event_type}-${idx}`}
                   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;

adminfront/src/lib/adminApi.ts

@@ -17,9 +17,80 @@ export type AuditLogListResponse = {
   offset: number;
 };
 
+export type TenantSummary = {
+  id: string;
+  name: string;
+  slug: string;
+  description: string;
+  status: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type TenantCreateRequest = {
+  name: string;
+  slug?: string;
+  description?: string;
+  status?: string;
+};
+
+export type TenantListResponse = {
+  items: TenantSummary[];
+  limit: number;
+  offset: number;
+  total: number;
+};
+
+export type TenantUpdateRequest = {
+  name?: string;
+  slug?: string;
+  description?: string;
+  status?: string;
+};
+
 export async function fetchAuditLogs(limit = 50, offset = 0) {
   const { data } = await apiClient.get<AuditLogListResponse>("/v1/audit", {
     params: { limit, offset },
   });
   return data;
 }
+
+export async function fetchTenants(limit = 50, offset = 0) {
+  const { data } = await apiClient.get<TenantListResponse>(
+    "/v1/admin/tenants",
+    {
+      params: { limit, offset },
+    },
+  );
+  return data;
+}
+
+export async function fetchTenant(tenantId: string) {
+  const { data } = await apiClient.get<TenantSummary>(
+    `/v1/admin/tenants/${tenantId}`,
+  );
+  return data;
+}
+
+export async function createTenant(payload: TenantCreateRequest) {
+  const { data } = await apiClient.post<TenantSummary>(
+    "/v1/admin/tenants",
+    payload,
+  );
+  return data;
+}
+
+export async function updateTenant(
+  tenantId: string,
+  payload: TenantUpdateRequest,
+) {
+  const { data } = await apiClient.put<TenantSummary>(
+    `/v1/admin/tenants/${tenantId}`,
+    payload,
+  );
+  return data;
+}
+
+export async function deleteTenant(tenantId: string) {
+  await apiClient.delete(`/v1/admin/tenants/${tenantId}`);
+}

adminfront/vite.config.ts

@@ -8,12 +8,9 @@ export default defineConfig({
     host: "0.0.0.0",
     proxy: {
       "/api": {
-        target: process.env.API_PROXY_TARGET || "http://baron_backend:3000",
+        target: process.env.API_PROXY_TARGET || "http://localhost:3000",
         changeOrigin: true,
       },
     },
   },
-  esbuild: {
-    drop: process.env.APP_ENV === "production" ? ["console", "debugger"] : [],
-  },
 });

backend/docs/openapi.yaml

@@ -19,6 +19,8 @@ tags:
     description: 회원가입/검증
   - name: User
     description: 사용자 프로필
+  - name: Session
+    description: 세션 관리(계획)
   - name: Admin
     description: 관리자 기능/테넌트
   - name: Dev
@@ -468,6 +470,68 @@ paths:
               schema:
                 $ref: "#/components/schemas/MessageResponse"
 
+  /api/v1/sessions:
+    get:
+      tags: [Session]
+      summary: 세션 목록
+      description: 세션 관리 API는 계획 단계입니다.
+      x-status: planned
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/SessionListResponse"
+
+  /api/v1/sessions/{id}:
+    get:
+      tags: [Session]
+      summary: 세션 상세
+      description: 세션 관리 API는 계획 단계입니다.
+      x-status: planned
+      parameters:
+        - in: path
+          name: id
+          required: true
+          schema:
+            type: string
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/SessionDetailResponse"
+    delete:
+      tags: [Session]
+      summary: 세션 로그아웃(폐기)
+      description: 세션 관리 API는 계획 단계입니다.
+      x-status: planned
+      parameters:
+        - in: path
+          name: id
+          required: true
+          schema:
+            type: string
+      responses:
+        "204":
+          description: No Content
+
+  /api/v1/sessions/logout-all:
+    post:
+      tags: [Session]
+      summary: 모든 세션 로그아웃
+      description: 세션 관리 API는 계획 단계입니다.
+      x-status: planned
+      responses:
+        "200":
+          description: OK
+          content:
+            application/json:
+              schema:
+                $ref: "#/components/schemas/MessageResponse"
+
   /api/v1/admin/check:
     get:
       tags: [Admin]
@@ -1029,6 +1093,36 @@ components:
         code:
           type: string
 
+    SessionSummary:
+      type: object
+      properties:
+        id:
+          type: string
+        issuedAt:
+          type: string
+        expiresAt:
+          type: string
+        device:
+          type: string
+        ip:
+          type: string
+        userAgent:
+          type: string
+
+    SessionListResponse:
+      type: object
+      properties:
+        items:
+          type: array
+          items:
+            $ref: "#/components/schemas/SessionSummary"
+
+    SessionDetailResponse:
+      type: object
+      properties:
+        session:
+          $ref: "#/components/schemas/SessionSummary"
+
     TenantResponse:
       type: object
       properties:

backend/internal/handler/admin_auth.go

@@ -1,20 +0,0 @@
-package handler
-
-import (
-	"os"
-
-	"github.com/gofiber/fiber/v2"
-)
-
-func requireAdmin(c *fiber.Ctx) error {
-	adminPass := os.Getenv("ADMIN_PASSWORD")
-	if adminPass == "" {
-		adminPass = "admin"
-	}
-
-	reqPass := c.Get("X-Admin-Password")
-	if reqPass != adminPass {
-		return c.Status(fiber.StatusUnauthorized).JSON(fiber.Map{"error": "Invalid Admin Password"})
-	}
-	return nil
-}

backend/internal/handler/admin_handler.go

@@ -36,23 +36,6 @@ func NewAdminHandler() *AdminHandler {
 	}
 }
 
-// checkAuth Helper
-func (h *AdminHandler) checkAuth(c *fiber.Ctx) error {
-	adminPass := os.Getenv("ADMIN_PASSWORD")
-	if adminPass == "" {
-		adminPass = "admin" // Default fallback
-	}
-
-	reqPass := c.Get("X-Admin-Password")
-	if reqPass != adminPass {
-		return c.Status(fiber.StatusUnauthorized).JSON(fiber.Map{"error": "Invalid Admin Password"})
-	}
-	return nil
-}
-
 func (h *AdminHandler) CheckAuth(c *fiber.Ctx) error {
-	if err := requireAdmin(c); err != nil {
-		return err
-	}
 	return c.Status(fiber.StatusOK).JSON(fiber.Map{"status": "ok"})
 }

backend/internal/handler/tenant_handler.go

@@ -36,9 +36,6 @@ type tenantListResponse struct {
 }
 
 func (h *TenantHandler) ListTenants(c *fiber.Ctx) error {
-	if err := requireAdmin(c); err != nil {
-		return err
-	}
 	if h.DB == nil {
 		return c.Status(fiber.StatusServiceUnavailable).JSON(fiber.Map{"error": "database not available"})
 	}
@@ -71,9 +68,6 @@ func (h *TenantHandler) ListTenants(c *fiber.Ctx) error {
 }
 
 func (h *TenantHandler) GetTenant(c *fiber.Ctx) error {
-	if err := requireAdmin(c); err != nil {
-		return err
-	}
 	if h.DB == nil {
 		return c.Status(fiber.StatusServiceUnavailable).JSON(fiber.Map{"error": "database not available"})
 	}
@@ -95,9 +89,6 @@ func (h *TenantHandler) GetTenant(c *fiber.Ctx) error {
 }
 
 func (h *TenantHandler) CreateTenant(c *fiber.Ctx) error {
-	if err := requireAdmin(c); err != nil {
-		return err
-	}
 	if h.DB == nil {
 		return c.Status(fiber.StatusServiceUnavailable).JSON(fiber.Map{"error": "database not available"})
 	}
@@ -152,9 +143,6 @@ func (h *TenantHandler) CreateTenant(c *fiber.Ctx) error {
 }
 
 func (h *TenantHandler) UpdateTenant(c *fiber.Ctx) error {
-	if err := requireAdmin(c); err != nil {
-		return err
-	}
 	if h.DB == nil {
 		return c.Status(fiber.StatusServiceUnavailable).JSON(fiber.Map{"error": "database not available"})
 	}
@@ -223,9 +211,6 @@ func (h *TenantHandler) UpdateTenant(c *fiber.Ctx) error {
 }
 
 func (h *TenantHandler) DeleteTenant(c *fiber.Ctx) error {
-	if err := requireAdmin(c); err != nil {
-		return err
-	}
 	if h.DB == nil {
 		return c.Status(fiber.StatusServiceUnavailable).JSON(fiber.Map{"error": "database not available"})
 	}

compose.ory.yaml

@@ -161,7 +161,7 @@ services:
       - DSN=postgres://${ORY_POSTGRES_USER}:${ORY_POSTGRES_PASSWORD}@postgres_ory:5432/${KETO_DB}?sslmode=disable&max_conns=20
     volumes:
       - ./docker/ory/keto:/etc/config/keto
-    command: migrate sql -e --yes
+    command: migrate up --yes
     depends_on:
       postgres_ory:
         condition: service_healthy

devfront/src/app/routes.tsx

@@ -13,6 +13,7 @@ export const router = createBrowserRouter(
       children: [
         { index: true, element: <Navigate to="/clients" replace /> },
         { path: "clients", element: <ClientsPage /> },
+        { path: "clients/new", element: <ClientGeneralPage /> },
         { path: "clients/:id", element: <ClientDetailsPage /> },
         { path: "clients/:id/consents", element: <ClientConsentsPage /> },
         { path: "clients/:id/settings", element: <ClientGeneralPage /> },

devfront/src/features/clients/ClientConsentsPage.tsx

@@ -1,3 +1,4 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
 import {
   ArrowLeft,
   ChevronLeft,
@@ -5,7 +6,8 @@ import {
   Filter,
   Search,
 } from "lucide-react";
-import { Link } from "react-router-dom";
+import { useState } from "react";
+import { Link, useParams } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import {
@@ -24,39 +26,38 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
-
+import { fetchClient, fetchConsents, revokeConsent } from "../../lib/devApi";
-const rows = [
-  {
-    initials: "JD",
-    name: "John Doe",
-    email: "john.doe@example.com",
-    scopes: ["openid", "profile", "email", "offline_access"],
-    lastAuth: "Oct 24, 2023 14:22",
-  },
-  {
-    initials: "AS",
-    name: "Alice Smith",
-    email: "alice.smith@devmail.com",
-    scopes: ["openid", "profile"],
-    lastAuth: "Oct 23, 2023 09:15",
-  },
-  {
-    initials: "RJ",
-    name: "Robert Johnson",
-    email: "r.johnson@corporate.org",
-    scopes: ["openid", "profile", "groups"],
-    lastAuth: "Oct 21, 2023 18:45",
-  },
-  {
-    initials: "ML",
-    name: "Maria Lopez",
-    email: "maria.l@provider.net",
-    scopes: ["openid", "email"],
-    lastAuth: "Oct 20, 2023 11:30",
-  },
-];
 
 function ClientConsentsPage() {
+  const params = useParams();
+  const clientId = params.id ?? "";
+  const [subjectInput, setSubjectInput] = useState("");
+  const [subject, setSubject] = useState("");
+  const { data: clientData } = useQuery({
+    queryKey: ["client", clientId],
+    queryFn: () => fetchClient(clientId),
+    enabled: clientId.length > 0,
+  });
+  const {
+    data: consentsData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["consents", clientId, subject],
+    queryFn: () => fetchConsents(subject, clientId),
+    enabled: subject.length > 0,
+  });
+  const revokeMutation = useMutation({
+    mutationFn: (payload: { subject: string }) =>
+      revokeConsent(payload.subject, clientId),
+    onSuccess: () => {
+      refetch();
+    },
+  });
+
+  const rows = consentsData?.items ?? [];
+
   return (
     <div className="space-y-8">
       <header className="space-y-4">
@@ -71,7 +72,7 @@ function ClientConsentsPage() {
                 Clients
               </Link>
               <span>/</span>
-              <span>OIDC Relying Party</span>
+              <span>{clientData?.client?.name || clientId}</span>
               <span>/</span>
               <span className="text-foreground font-semibold">
                 User Consent Grants
@@ -79,7 +80,7 @@ function ClientConsentsPage() {
             </nav>
             <div className="flex items-center gap-2">
               <Button variant="ghost" size="icon" asChild>
-                <Link to="/clients/cli_481...8k2">
+                <Link to={`/clients/${clientId}`}>
                   <ArrowLeft className="h-4 w-4" />
                 </Link>
               </Button>
@@ -94,12 +95,18 @@ function ClientConsentsPage() {
             </div>
           </div>
           <div className="flex items-center gap-3">
-            <Badge variant="success">Active</Badge>
+            <Badge
+              variant={
+                clientData?.client?.status === "active" ? "success" : "muted"
+              }
+            >
+              {clientData?.client?.status === "active" ? "Active" : "Inactive"}
+            </Badge>
           </div>
         </div>
         <div className="flex gap-6 overflow-x-auto border-b border-border pb-3 text-sm font-bold">
           <Link
-            to="/clients/cli_481...8k2"
+            to={`/clients/${clientId}`}
             className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
           >
             Overview
@@ -108,7 +115,7 @@ function ClientConsentsPage() {
             Consent &amp; Users
           </span>
           <Link
-            to="/clients/cli_481...8k2/settings"
+            to={`/clients/${clientId}/settings`}
             className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
           >
             Settings
@@ -124,6 +131,8 @@ function ClientConsentsPage() {
               <Input
                 className="pl-10"
                 placeholder="사용자 ID, 이름, 이메일로 검색"
+                value={subjectInput}
+                onChange={(e) => setSubjectInput(e.target.value)}
               />
             </div>
             <div className="flex items-center gap-2">
@@ -142,12 +151,28 @@ function ClientConsentsPage() {
               <Filter className="h-4 w-4" />
               Advanced Filters
             </Button>
+            <Button
+              className="shadow-sm shadow-primary/30"
+              onClick={() => setSubject(subjectInput.trim())}
+            >
+              검색
+            </Button>
             <Button className="shadow-sm shadow-primary/30">Export CSV</Button>
           </div>
         </CardContent>
       </Card>
 
       <Card className="glass-panel">
+        {error && (
+          <CardContent className="text-sm text-red-500">
+            Error loading consents: {(error as Error).message}
+          </CardContent>
+        )}
+        {isLoading && (
+          <CardContent className="text-sm text-muted-foreground">
+            Loading consents...
+          </CardContent>
+        )}
         <Table>
           <TableHeader>
             <TableRow>
@@ -160,16 +185,18 @@ function ClientConsentsPage() {
           </TableHeader>
           <TableBody>
             {rows.map((row) => (
-              <TableRow key={row.email}>
+              <TableRow key={`${row.subject}-${row.clientId}`}>
                 <TableCell>
                   <div className="flex items-center gap-3">
                     <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary">
-                      {row.initials}
+                      {row.subject.slice(0, 2).toUpperCase()}
                     </div>
                     <div className="flex flex-col">
-                      <span className="text-sm font-semibold">{row.name}</span>
+                      <span className="text-sm font-semibold">
+                        {row.clientName || "Subject"}
+                      </span>
                       <span className="text-xs text-muted-foreground">
-                        {row.email}
+                        {row.subject}
                       </span>
                     </div>
                   </div>
@@ -179,7 +206,7 @@ function ClientConsentsPage() {
                 </TableCell>
                 <TableCell>
                   <div className="flex flex-wrap gap-1">
-                    {row.scopes.map((scope) => (
+                    {row.grantedScopes.map((scope) => (
                       <Badge
                         key={scope}
                         variant="muted"
@@ -191,10 +218,16 @@ function ClientConsentsPage() {
                   </div>
                 </TableCell>
                 <TableCell className="text-sm text-muted-foreground">
-                  {row.lastAuth}
+                  {row.authenticatedAt || "-"}
                 </TableCell>
                 <TableCell className="text-right">
-                  <Button variant="ghost" className="text-destructive">
+                  <Button
+                    variant="ghost"
+                    className="text-destructive"
+                    onClick={() =>
+                      revokeMutation.mutate({ subject: row.subject })
+                    }
+                  >
                     Revoke
                   </Button>
                 </TableCell>

devfront/src/features/clients/ClientDetailsPage.tsx

@@ -1,5 +1,7 @@
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
 import { AlertCircle, Copy, Eye, Link2, Shield, Workflow } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { Card, CardContent } from "../../components/ui/card";
@@ -10,25 +12,44 @@ import {
   TableCell,
   TableRow,
 } from "../../components/ui/table";
-
+import { fetchClient } from "../../lib/devApi";
-const endpoints = [
-  {
-    label: "Discovery Endpoint",
-    value: "https://auth.acme-idp.com/.well-known/openid-configuration",
-  },
-  { label: "Issuer URL", value: "https://auth.acme-idp.com/" },
-  {
-    label: "Authorization Endpoint",
-    value: "https://auth.acme-idp.com/oauth2/authorize",
-  },
-  { label: "Token Endpoint", value: "https://auth.acme-idp.com/oauth2/token" },
-  {
-    label: "UserInfo Endpoint",
-    value: "https://auth.acme-idp.com/oauth2/userinfo",
-  },
-];
 
 function ClientDetailsPage() {
+  const params = useParams();
+  const clientId = params.id ?? "";
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["client", clientId],
+    queryFn: () => fetchClient(clientId),
+    enabled: clientId.length > 0,
+  });
+
+  if (!clientId) {
+    return <div className="p-8 text-center">Client ID가 필요합니다.</div>;
+  }
+
+  if (isLoading) {
+    return <div className="p-8 text-center">Loading client...</div>;
+  }
+
+  if (error || !data) {
+    const errMsg =
+      (error as AxiosError<{ error?: string }>).response?.data?.error ??
+      (error as Error)?.message;
+    return (
+      <div className="p-8 text-center text-red-500">
+        Error loading client: {errMsg || "unknown error"}
+      </div>
+    );
+  }
+
+  const endpoints = [
+    { label: "Discovery Endpoint", value: data.endpoints.discovery },
+    { label: "Issuer URL", value: data.endpoints.issuer },
+    { label: "Authorization Endpoint", value: data.endpoints.authorization },
+    { label: "Token Endpoint", value: data.endpoints.token },
+    { label: "UserInfo Endpoint", value: data.endpoints.userinfo },
+  ];
+
   return (
     <div className="space-y-8">
       <div className="space-y-3">
@@ -42,31 +63,34 @@ function ClientDetailsPage() {
         <div className="flex flex-wrap items-start justify-between gap-3">
           <div>
             <h1 className="text-4xl font-black leading-tight tracking-tight">
-              Developer Portal App
+              {data.client.name || data.client.id}
             </h1>
             <p className="text-muted-foreground">
               OIDC 자격 증명과 엔드포인트를 관리합니다.
             </p>
           </div>
-          <Badge variant="success" className="px-3 py-1 text-xs uppercase">
+          <Badge
-            Active
+            variant={data.client.status === "active" ? "success" : "muted"}
+            className="px-3 py-1 text-xs uppercase"
+          >
+            {data.client.status === "active" ? "Active" : "Inactive"}
           </Badge>
         </div>
         <div className="flex gap-6 border-b border-border">
           <Link
-            to="/clients/cli_481...8k2"
+            to={`/clients/${clientId}`}
             className="border-b-2 border-primary pb-3 text-sm font-bold text-primary"
           >
             Overview
           </Link>
           <Link
-            to="/clients/cli_481...8k2/consents"
+            to={`/clients/${clientId}/consents`}
             className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
           >
             Consent &amp; Users
           </Link>
           <Link
-            to="/clients/cli_481...8k2/settings"
+            to={`/clients/${clientId}/settings`}
             className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
           >
             Settings
@@ -82,7 +106,7 @@ function ClientDetailsPage() {
               <p className="text-xs font-bold uppercase tracking-widest text-muted-foreground">
                 Client ID
               </p>
-              <p className="font-mono text-lg">721948305612-oidc-client-prod</p>
+              <p className="font-mono text-lg">{data.client.id}</p>
             </div>
             <Button variant="secondary" className="gap-2">
               <Copy className="h-4 w-4" />

devfront/src/features/clients/ClientGeneralPage.tsx

@@ -1,5 +1,8 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
 import { Info, Search, Shield, Sparkles, Upload } from "lucide-react";
-import { Link } from "react-router-dom";
+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 {
@@ -13,15 +16,112 @@ import { Input } from "../../components/ui/input";
 import { Label } from "../../components/ui/label";
 import { Separator } from "../../components/ui/separator";
 import { Textarea } from "../../components/ui/textarea";
+import { createClient, fetchClient, updateClient } from "../../lib/devApi";
+import type { ClientStatus, ClientType } from "../../lib/devApi";
 import { cn } from "../../lib/utils";
 
-const meta = {
-  clientId: "client_82910_ax99",
-  created: "2023-10-12 10:45",
-  updated: "2 hours ago",
-};
-
 function ClientGeneralPage() {
+  const params = useParams();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const clientId = params.id;
+  const isCreate = !clientId;
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["client", clientId],
+    queryFn: () => fetchClient(clientId as string),
+    enabled: !isCreate,
+  });
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [logoUrl, setLogoUrl] = useState("");
+  const [clientType, setClientType] = useState<ClientType>("confidential");
+  const [status, setStatus] = useState<ClientStatus>("active");
+  const [redirectUris, setRedirectUris] = useState("");
+  const [scopes, setScopes] = useState("openid profile email");
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+    setName(data.client.name || data.client.id);
+    setClientType(data.client.type);
+    setStatus(data.client.status);
+    setRedirectUris(data.client.redirectUris.join(", "));
+    setScopes(data.client.scopes.join(" "));
+    const metadata = data.client.metadata ?? {};
+    if (typeof metadata.description === "string") {
+      setDescription(metadata.description);
+    }
+    if (typeof metadata.logo_url === "string") {
+      setLogoUrl(metadata.logo_url);
+    }
+  }, [data]);
+
+  const redirectUriList = useMemo(
+    () =>
+      redirectUris
+        .split(",")
+        .map((value) => value.trim())
+        .filter(Boolean),
+    [redirectUris],
+  );
+  const scopeList = useMemo(
+    () =>
+      scopes
+        .split(/[,\s]+/)
+        .map((value) => value.trim())
+        .filter(Boolean),
+    [scopes],
+  );
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      const payload = {
+        name,
+        type: clientType,
+        status,
+        redirectUris: redirectUriList,
+        scopes: scopeList,
+        metadata: {
+          description,
+          logo_url: logoUrl,
+        },
+      };
+      if (isCreate) {
+        return createClient(payload);
+      }
+      return updateClient(clientId as string, payload);
+    },
+    onSuccess: (result) => {
+      queryClient.invalidateQueries({ queryKey: ["clients"] });
+      if (result?.client?.id) {
+        navigate(`/clients/${result.client.id}/settings`);
+      }
+    },
+  });
+
+  if (!isCreate && isLoading) {
+    return <div className="p-8 text-center">Loading client...</div>;
+  }
+
+  if (!isCreate && (error || !data)) {
+    const errMsg =
+      (error as AxiosError<{ error?: string }>).response?.data?.error ??
+      (error as Error)?.message;
+    return (
+      <div className="p-8 text-center text-red-500">
+        Error loading client: {errMsg || "unknown error"}
+      </div>
+    );
+  }
+
+  const displayName = isCreate
+    ? "새 클라이언트"
+    : data?.client?.name || data?.client?.id;
+  const createdAt = data?.client?.createdAt;
+  const updatedAt = undefined;
+
   return (
     <div className="space-y-8">
       <header className="space-y-4">
@@ -32,11 +132,11 @@ function ClientGeneralPage() {
                 Applications
               </Link>
               <span>/</span>
-              <span className="text-foreground">Customer Support Portal</span>
+              <span className="text-foreground">{displayName}</span>
             </div>
             <div>
               <p className="text-3xl font-black leading-tight">
-                Client Details
+                {isCreate ? "Create Client" : "Client Details"}
               </p>
               <p className="text-muted-foreground">
                 RP 설정과 메타데이터를 관리합니다.
@@ -44,27 +144,34 @@ function ClientGeneralPage() {
             </div>
           </div>
           <div className="flex items-center gap-3">
-            <Badge variant="success" className="px-3 py-1 text-xs uppercase">
+            <Badge
-              Active
+              variant={status === "active" ? "success" : "muted"}
+              className="px-3 py-1 text-xs uppercase"
+            >
+              {status === "active" ? "Active" : "Inactive"}
             </Badge>
           </div>
         </div>
         <div className="flex gap-6 overflow-x-auto border-b border-border pb-3 text-sm font-bold">
-          <Link
+          {!isCreate && (
-            to="/clients/cli_481...8k2"
+            <>
-            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+              <Link
-          >
+                to={`/clients/${clientId}`}
-            Overview
+                className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
-          </Link>
+              >
-          <Link
+                Overview
-            to="/clients/cli_481...8k2/consents"
+              </Link>
-            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+              <Link
-          >
+                to={`/clients/${clientId}/consents`}
-            Consent &amp; Users
+                className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
-          </Link>
+              >
-          <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
+                Consent &amp; Users
-            Settings
+              </Link>
-          </span>
+              <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
+                Settings
+              </span>
+            </>
+          )}
         </div>
       </header>
 
@@ -99,13 +206,14 @@ function ClientGeneralPage() {
               <Label className="flex items-center gap-1 text-sm font-semibold">
                 앱 이름 <span className="text-destructive">*</span>
               </Label>
-              <Input defaultValue="Customer Support Portal" />
+              <Input value={name} onChange={(e) => setName(e.target.value)} />
             </div>
             <div className="space-y-2">
               <Label className="text-sm font-semibold">Description</Label>
               <Textarea
                 rows={3}
-                defaultValue="Internal tool for managing customer support tickets and user data."
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
               />
             </div>
           </div>
@@ -114,7 +222,10 @@ function ClientGeneralPage() {
             <Label className="text-sm font-semibold">App Logo URL</Label>
             <div className="flex gap-4">
               <div className="flex-1 space-y-2">
-                <Input defaultValue="https://brand.example.com/assets/logo-support.png" />
+                <Input
+                  value={logoUrl}
+                  onChange={(e) => setLogoUrl(e.target.value)}
+                />
                 <p className="text-xs text-muted-foreground">
                   PNG/SVG URL을 입력하세요.
                 </p>
@@ -141,12 +252,20 @@ function ClientGeneralPage() {
             <Info className="h-4 w-4 text-muted-foreground" />
           </Label>
           <div className="grid gap-4 md:grid-cols-2">
-            <label className="relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 border-primary bg-primary/5 p-4 transition">
+            <label
+              className={cn(
+                "relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition",
+                clientType === "confidential"
+                  ? "border-primary bg-primary/5"
+                  : "border-border bg-card hover:border-muted-foreground/40",
+              )}
+            >
               <input
                 className="sr-only"
                 type="radio"
                 name="client-type"
-                defaultChecked
+                checked={clientType === "confidential"}
+                onChange={() => setClientType("confidential")}
               />
               <span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
                 <Shield className="h-4 w-4 text-primary" />
@@ -159,8 +278,21 @@ function ClientGeneralPage() {
               <span className="absolute right-4 top-4 text-primary">✓</span>
             </label>
 
-            <label className="relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 border-border bg-card p-4 transition hover:border-muted-foreground/40">
+            <label
-              <input className="sr-only" type="radio" name="client-type" />
+              className={cn(
+                "relative flex cursor-pointer flex-col gap-1 rounded-xl border-2 p-4 transition",
+                clientType === "public"
+                  ? "border-primary bg-primary/5"
+                  : "border-border bg-card hover:border-muted-foreground/40",
+              )}
+            >
+              <input
+                className="sr-only"
+                type="radio"
+                name="client-type"
+                checked={clientType === "public"}
+                onChange={() => setClientType("public")}
+              />
               <span className="flex items-center gap-2 text-sm font-bold uppercase text-foreground">
                 <Sparkles className="h-4 w-4" />
                 Public
@@ -174,31 +306,71 @@ function ClientGeneralPage() {
         </CardContent>
       </Card>
 
+      <Card className="glass-panel">
+        <CardHeader className="pb-3">
+          <CardTitle className="text-xl font-bold">
+            Redirect URIs & Scopes
+          </CardTitle>
+          <CardDescription>
+            리다이렉트 URI는 콤마로 구분합니다. 스코프는 공백 또는 콤마로 입력할
+            수 있습니다.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Redirect URIs *</Label>
+            <Input
+              value={redirectUris}
+              onChange={(e) => setRedirectUris(e.target.value)}
+              placeholder="https://app.example.com/callback, https://app.example.com/redirect"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label className="text-sm font-semibold">Scopes</Label>
+            <Input
+              value={scopes}
+              onChange={(e) => setScopes(e.target.value)}
+              placeholder="openid profile email"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
       <div className="flex items-center justify-end gap-3 border-t border-border pt-4">
-        <Button variant="outline">취소</Button>
+        <Button variant="outline" onClick={() => navigate("/clients")}>
-        <Button>저장</Button>
+          취소
+        </Button>
+        <Button onClick={() => mutation.mutate()} disabled={mutation.isLoading}>
+          {isCreate ? "생성" : "저장"}
+        </Button>
       </div>
 
-      <div className="glass-panel flex flex-wrap gap-x-12 gap-y-4 p-4">
+      {!isCreate && (
-        <div className="space-y-1">
+        <div className="glass-panel flex flex-wrap gap-x-12 gap-y-4 p-4">
-          <span className="text-xs font-semibold uppercase text-muted-foreground">
+          <div className="space-y-1">
-            Client ID
+            <span className="text-xs font-semibold uppercase text-muted-foreground">
-          </span>
+              Client ID
-          <span className="font-mono text-sm">{meta.clientId}</span>
+            </span>
+            <span className="font-mono text-sm">{data?.client?.id}</span>
+          </div>
+          <div className="space-y-1">
+            <span className="text-xs font-semibold uppercase text-muted-foreground">
+              Created On
+            </span>
+            <span className="text-sm text-muted-foreground">
+              {createdAt ? new Date(createdAt).toLocaleString() : "-"}
+            </span>
+          </div>
+          <div className="space-y-1">
+            <span className="text-xs font-semibold uppercase text-muted-foreground">
+              Last Updated
+            </span>
+            <span className="text-sm text-muted-foreground">
+              {updatedAt ? new Date(updatedAt).toLocaleString() : "-"}
+            </span>
+          </div>
         </div>
-        <div className="space-y-1">
+      )}
-          <span className="text-xs font-semibold uppercase text-muted-foreground">
-            Created On
-          </span>
-          <span className="text-sm text-muted-foreground">{meta.created}</span>
-        </div>
-        <div className="space-y-1">
-          <span className="text-xs font-semibold uppercase text-muted-foreground">
-            Last Updated
-          </span>
-          <span className="text-sm text-muted-foreground">{meta.updated}</span>
-        </div>
-      </div>
     </div>
   );
 }

devfront/src/features/clients/ClientsPage.tsx

@@ -1,4 +1,5 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
 import {
   Activity,
   BookOpenText,
@@ -9,7 +10,7 @@ import {
   ServerCog,
   ShieldHalf,
 } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import {
   Avatar,
   AvatarFallback,
@@ -26,6 +27,7 @@ import {
 } from "../../components/ui/card";
 import { Input } from "../../components/ui/input";
 import { Separator } from "../../components/ui/separator";
+import { Switch } from "../../components/ui/switch";
 import {
   Table,
   TableBody,
@@ -34,14 +36,29 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
-import { fetchClients } from "../../lib/devApi";
+import {
+  deleteClient,
+  fetchClients,
+  updateClientStatus,
+} from "../../lib/devApi";
 import { cn } from "../../lib/utils";
 
 function ClientsPage() {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const { data, isLoading, error } = useQuery({
     queryKey: ["clients"],
     queryFn: fetchClients,
   });
+  const updateStatusMutation = useMutation({
+    mutationFn: (payload: { id: string; status: "active" | "inactive" }) =>
+      updateClientStatus(payload.id, payload.status),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["clients"] }),
+  });
+  const deleteMutation = useMutation({
+    mutationFn: (clientId: string) => deleteClient(clientId),
+    onSuccess: () => queryClient.invalidateQueries({ queryKey: ["clients"] }),
+  });
 
   const clients = data?.items || [];
   const totalClients = clients.length;
@@ -73,7 +90,8 @@ function ClientsPage() {
 
   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 clients: {errMsg}
@@ -102,7 +120,11 @@ function ClientsPage() {
               <Button variant="outline" size="sm">
                 비밀키 재발행
               </Button>
-              <Button size="sm" className="shadow-lg shadow-primary/30">
+              <Button
+                size="sm"
+                className="shadow-lg shadow-primary/30"
+                onClick={() => navigate("/clients/new")}
+              >
                 <Plus className="h-4 w-4" />새 클라이언트
               </Button>
             </div>
@@ -164,7 +186,7 @@ function ClientsPage() {
               <Button variant="outline" size="sm">
                 비밀키 재발행
               </Button>
-              <Button size="sm">
+              <Button size="sm" onClick={() => navigate("/clients/new")}>
                 <Plus className="h-4 w-4" />새 클라이언트
               </Button>
             </div>
@@ -214,9 +236,7 @@ function ClientsPage() {
                         size="icon"
                         className="h-8 w-8 text-muted-foreground hover:text-primary"
                         aria-label="Copy client id"
-                        onClick={() =>
+                        onClick={() => navigator.clipboard.writeText(client.id)}
-                          navigator.clipboard.writeText(client.id)
-                        }
                       >
                         <Copy className="h-4 w-4" />
                       </Button>
@@ -234,24 +254,16 @@ function ClientsPage() {
                     </Badge>
                   </TableCell>
                   <TableCell>
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-3">
-                      <div
+                      <Switch
-                        className={cn(
+                        checked={client.status === "active"}
-                          "flex h-5 w-10 items-center rounded-full p-1",
+                        onCheckedChange={(checked) =>
-                          client.status === "active"
+                          updateStatusMutation.mutate({
-                            ? "bg-primary/40"
+                            id: client.id,
-                            : "bg-muted/50",
+                            status: checked ? "active" : "inactive",
-                        )}
+                          })
-                      >
+                        }
-                        <div
+                      />
-                          className={cn(
-                            "h-3 w-3 rounded-full bg-background transition",
-                            client.status === "active"
-                              ? "translate-x-5"
-                              : "translate-x-0",
-                          )}
-                        />
-                      </div>
                       <span
                         className={cn(
                           "text-sm font-medium",
@@ -279,6 +291,7 @@ function ClientsPage() {
                         size="icon"
                         className="h-8 w-8 text-muted-foreground hover:text-destructive"
                         aria-label="Delete client"
+                        onClick={() => deleteMutation.mutate(client.id)}
                       >
                         <Activity className="h-4 w-4" />
                       </Button>

devfront/src/lib/devApi.ts

@@ -34,6 +34,19 @@ export type ClientDetailResponse = {
   endpoints: ClientEndpoints;
 };
 
+export type ClientUpsertRequest = {
+  id?: string;
+  name?: string;
+  type?: ClientType;
+  status?: ClientStatus;
+  redirectUris?: string[];
+  scopes?: string[];
+  grantTypes?: string[];
+  responseTypes?: string[];
+  tokenEndpointAuthMethod?: string;
+  metadata?: Record<string, unknown>;
+};
+
 export type ConsentSummary = {
   subject: string;
   clientId: string;
@@ -69,6 +82,29 @@ export async function updateClientStatus(
   return data;
 }
 
+export async function createClient(payload: ClientUpsertRequest) {
+  const { data } = await apiClient.post<ClientDetailResponse>(
+    "/clients",
+    payload,
+  );
+  return data;
+}
+
+export async function updateClient(
+  clientId: string,
+  payload: ClientUpsertRequest,
+) {
+  const { data } = await apiClient.put<ClientDetailResponse>(
+    `/clients/${clientId}`,
+    payload,
+  );
+  return data;
+}
+
+export async function deleteClient(clientId: string) {
+  await apiClient.delete(`/clients/${clientId}`);
+}
+
 export async function fetchConsents(subject: string, clientId?: string) {
   const params: Record<string, string> = { subject };
   if (clientId) {

devfront/vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
     host: "0.0.0.0", // Ensure binding to all interfaces
     proxy: {
       "/api": {
-        target: process.env.API_PROXY_TARGET || "http://baron_backend:3000",
+        target: process.env.API_PROXY_TARGET || "http://localhost:3000",
         changeOrigin: true,
       },
     },