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

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