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

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>
   );
 }