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

2026-01-28 14:03:42 +09:00
parent b7a0397ef9
commit e573f4ca50
21 changed files with 1293 additions and 213 deletions
--- a/devfront/src/features/clients/ClientConsentsPage.tsx
+++ b/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";
-
-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",
-  },
-];
+import { fetchClient, fetchConsents, revokeConsent } from "../../lib/devApi";

 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>
--- a/devfront/src/features/clients/ClientDetailsPage.tsx
+++ b/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";
-
-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",
-  },
-];
+import { fetchClient } from "../../lib/devApi";

 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">
-            Active
+          <Badge
+            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" />
--- a/devfront/src/features/clients/ClientGeneralPage.tsx
+++ b/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">
-              Active
+            <Badge
+              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
-            to="/clients/cli_481...8k2"
-            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
-          >
-            Overview
-          </Link>
-          <Link
-            to="/clients/cli_481...8k2/consents"
-            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
-          >
-            Consent &amp; Users
-          </Link>
-          <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
-            Settings
-          </span>
+          {!isCreate && (
+            <>
+              <Link
+                to={`/clients/${clientId}`}
+                className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+              >
+                Overview
+              </Link>
+              <Link
+                to={`/clients/${clientId}/consents`}
+                className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+              >
+                Consent &amp; Users
+              </Link>
+              <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">
-              <input className="sr-only" type="radio" name="client-type" />
+            <label
+              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>저장</Button>
+        <Button variant="outline" onClick={() => navigate("/clients")}>
+          취소
+        </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">
-        <div className="space-y-1">
-          <span className="text-xs font-semibold uppercase text-muted-foreground">
-            Client ID
-          </span>
-          <span className="font-mono text-sm">{meta.clientId}</span>
+      {!isCreate && (
+        <div className="glass-panel flex flex-wrap gap-x-12 gap-y-4 p-4">
+          <div className="space-y-1">
+            <span className="text-xs font-semibold uppercase text-muted-foreground">
+              Client ID
+            </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>
  );
 }
--- a/devfront/src/features/clients/ClientsPage.tsx
+++ b/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={() =>
-                          navigator.clipboard.writeText(client.id)
-                        }
+                        onClick={() => 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={cn(
-                          "flex h-5 w-10 items-center rounded-full p-1",
-                          client.status === "active"
-                            ? "bg-primary/40"
-                            : "bg-muted/50",
-                        )}
-                      >
-                        <div
-                          className={cn(
-                            "h-3 w-3 rounded-full bg-background transition",
-                            client.status === "active"
-                              ? "translate-x-5"
-                              : "translate-x-0",
-                          )}
-                        />
-                      </div>
+                    <div className="flex items-center gap-3">
+                      <Switch
+                        checked={client.status === "active"}
+                        onCheckedChange={(checked) =>
+                          updateStatusMutation.mutate({
+                            id: client.id,
+                            status: checked ? "active" : "inactive",
+                          })
+                        }
+                      />
                      <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>