Dev API에 RP operator relation 조회/부여/회수 추가

devfront/src/features/clients/ClientConsentsPage.tsx

@@ -230,6 +230,12 @@ function ClientConsentsPage() {
           >
             {t("ui.dev.clients.details.tab.settings", "Settings")}
           </Link>
+          <Link
+            to={`/clients/${clientId}/relationships`}
+            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+          >
+            {t("ui.dev.clients.details.tab.relationships", "Relationships")}
+          </Link>
         </div>
       </header>
 

devfront/src/features/clients/ClientDetailsPage.tsx

@@ -272,6 +272,12 @@ function ClientDetailsPage() {
           >
             {t("ui.dev.clients.details.tab.settings", "Settings")}
           </Link>
+          <Link
+            to={`/clients/${clientId}/relationships`}
+            className="pb-3 text-sm font-bold text-muted-foreground hover:text-foreground"
+          >
+            {t("ui.dev.clients.details.tab.relationships", "Relationships")}
+          </Link>
         </div>
       </div>
 

devfront/src/features/clients/ClientGeneralPage.tsx

@@ -680,6 +680,12 @@ function ClientGeneralPage() {
               >
                 {t("ui.dev.clients.details.tab.consents", "Consent & Users")}
               </Link>
+              <Link
+                to={`/clients/${clientId}/relationships`}
+                className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+              >
+                {t("ui.dev.clients.details.tab.relationships", "Relationships")}
+              </Link>
               <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
                 {t("ui.dev.clients.details.tab.settings", "Settings")}
               </span>

devfront/src/features/clients/ClientRelationsPage.tsx

@@ -0,0 +1,423 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { ArrowLeft, Link2, Plus, Trash2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Link, 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 {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../../components/ui/table";
+import { toast } from "../../components/ui/use-toast";
+import {
+  addClientRelation,
+  fetchClient,
+  fetchClientRelations,
+  removeClientRelation,
+} from "../../lib/devApi";
+import { t } from "../../lib/i18n";
+
+const relationOptions = [
+  "admins",
+  "creator",
+  "config_editor",
+  "secret_rotator",
+  "jwks_viewer",
+  "jwks_operator",
+  "consent_viewer",
+  "consent_revoker",
+  "relationship_viewer",
+  "status_operator",
+] as const;
+
+function ClientRelationsPage() {
+  const params = useParams();
+  const queryClient = useQueryClient();
+  const clientId = params.id ?? "";
+  const [relation, setRelation] = useState<(typeof relationOptions)[number]>(
+    "config_editor",
+  );
+  const [userId, setUserId] = useState("");
+
+  const { data: clientData } = useQuery({
+    queryKey: ["client", clientId],
+    queryFn: () => fetchClient(clientId),
+    enabled: clientId.length > 0,
+  });
+
+  const {
+    data: relationData,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["client-relations", clientId],
+    queryFn: () => fetchClientRelations(clientId),
+    enabled: clientId.length > 0,
+  });
+
+  const sortedItems = useMemo(() => {
+    return [...(relationData?.items ?? [])].sort((a, b) => {
+      const relationCompare = a.relation.localeCompare(b.relation);
+      if (relationCompare !== 0) {
+        return relationCompare;
+      }
+      return a.subject.localeCompare(b.subject);
+    });
+  }, [relationData?.items]);
+
+  const addMutation = useMutation({
+    mutationFn: () =>
+      addClientRelation(clientId, {
+        relation,
+        userId: userId.trim(),
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["client-relations", clientId] });
+      setUserId("");
+      toast(
+        t(
+          "msg.dev.clients.relationships.added",
+          "Relationship가 추가되었습니다.",
+        ),
+      );
+    },
+    onError: (err) => {
+      toast(
+        t(
+          "msg.dev.clients.relationships.add_error",
+          "Relationship 추가 실패: {{error}}",
+          {
+            error:
+              (err as AxiosError<{ error?: string }>).response?.data?.error ??
+              (err as Error).message,
+          },
+        ),
+        "error",
+      );
+    },
+  });
+
+  const removeMutation = useMutation({
+    mutationFn: (payload: { relation: string; subject: string }) =>
+      removeClientRelation(clientId, payload.relation, payload.subject),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["client-relations", clientId] });
+      toast(
+        t(
+          "msg.dev.clients.relationships.removed",
+          "Relationship가 제거되었습니다.",
+        ),
+      );
+    },
+    onError: (err) => {
+      toast(
+        t(
+          "msg.dev.clients.relationships.remove_error",
+          "Relationship 제거 실패: {{error}}",
+          {
+            error:
+              (err as AxiosError<{ error?: string }>).response?.data?.error ??
+              (err as Error).message,
+          },
+        ),
+        "error",
+      );
+    },
+  });
+
+  const handleAdd = () => {
+    if (!userId.trim()) {
+      toast(
+        t(
+          "msg.dev.clients.relationships.user_required",
+          "추가할 User ID를 입력하세요.",
+        ),
+        "error",
+      );
+      return;
+    }
+    addMutation.mutate();
+  };
+
+  const handleRemove = (targetRelation: string, subject: string) => {
+    if (
+      window.confirm(
+        t(
+          "msg.dev.clients.relationships.remove_confirm",
+          "이 relationship를 제거하시겠습니까?",
+        ),
+      )
+    ) {
+      removeMutation.mutate({ relation: targetRelation, subject });
+    }
+  };
+
+  if (!clientId) {
+    return (
+      <div className="p-8 text-center">
+        {t("msg.dev.clients.details.missing_id", "Client ID가 필요합니다.")}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-8">
+      <header className="space-y-4">
+        <div className="flex flex-wrap justify-between gap-4">
+          <div className="space-y-2">
+            <nav className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+              <Link to="/" className="hover:text-primary">
+                {t("ui.dev.clients.consents.breadcrumb.home", "Home")}
+              </Link>
+              <span>/</span>
+              <Link to="/clients" className="hover:text-primary">
+                {t("ui.dev.clients.consents.breadcrumb.clients", "Apps")}
+              </Link>
+              <span>/</span>
+              <span>{clientData?.client?.name || clientId}</span>
+              <span>/</span>
+              <span className="text-foreground font-semibold">
+                {t(
+                  "ui.dev.clients.details.tab.relationships",
+                  "Relationships",
+                )}
+              </span>
+            </nav>
+            <div className="flex items-center gap-2">
+              <Button variant="ghost" size="icon" asChild>
+                <Link to={`/clients/${clientId}`}>
+                  <ArrowLeft className="h-4 w-4" />
+                </Link>
+              </Button>
+              <div>
+                <p className="text-3xl font-black leading-tight">
+                  {t(
+                    "ui.dev.clients.relationships.title",
+                    "Client Relationships",
+                  )}
+                </p>
+                <p className="text-muted-foreground">
+                  {t(
+                    "msg.dev.clients.relationships.subtitle",
+                    "RP direct operator relation을 조회하고 User 단위로 추가·삭제합니다.",
+                  )}
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-3">
+            <Badge
+              variant={
+                clientData?.client?.status === "active" ? "info" : "muted"
+              }
+            >
+              {clientData?.client?.status === "active"
+                ? t("ui.common.status.active", "Active")
+                : t("ui.common.status.inactive", "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/${clientId}`}
+            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+          >
+            {t("ui.dev.clients.details.tab.connection", "Federation")}
+          </Link>
+          <Link
+            to={`/clients/${clientId}/consents`}
+            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+          >
+            {t("ui.dev.clients.details.tab.consents", "Consent & Users")}
+          </Link>
+          <Link
+            to={`/clients/${clientId}/settings`}
+            className="whitespace-nowrap border-b-2 border-transparent text-muted-foreground hover:text-foreground"
+          >
+            {t("ui.dev.clients.details.tab.settings", "Settings")}
+          </Link>
+          <span className="whitespace-nowrap border-b-2 border-primary pb-1 text-primary">
+            {t("ui.dev.clients.details.tab.relationships", "Relationships")}
+          </span>
+        </div>
+      </header>
+
+      <Card className="glass-panel">
+        <CardHeader>
+          <CardTitle>
+            {t("ui.dev.clients.relationships.add_title", "Add Relationship")}
+          </CardTitle>
+          <CardDescription>
+            {t(
+              "msg.dev.clients.relationships.add_description",
+              "현재는 direct User assignment만 지원합니다. subject는 자동으로 User:<id> 형식으로 전송됩니다.",
+            )}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4 md:grid-cols-[220px_minmax(0,1fr)_auto] md:items-end">
+          <div className="space-y-2">
+            <Label htmlFor="relation-select">
+              {t("ui.dev.clients.relationships.relation", "Relation")}
+            </Label>
+            <select
+              id="relation-select"
+              value={relation}
+              onChange={(e) =>
+                setRelation(e.target.value as (typeof relationOptions)[number])
+              }
+              className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+            >
+              {relationOptions.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="user-id-input">
+              {t("ui.dev.clients.relationships.user_id", "User ID")}
+            </Label>
+            <Input
+              id="user-id-input"
+              value={userId}
+              onChange={(e) => setUserId(e.target.value)}
+              placeholder={t(
+                "ui.dev.clients.relationships.user_id_placeholder",
+                "kratos user id",
+              )}
+            />
+          </div>
+          <Button
+            onClick={handleAdd}
+            disabled={addMutation.isPending}
+            className="gap-2"
+          >
+            <Plus className="h-4 w-4" />
+            {addMutation.isPending
+              ? t("msg.common.loading", "Loading...")
+              : t("ui.dev.clients.relationships.add", "Add")}
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card className="glass-panel">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Link2 className="h-5 w-5" />
+            {t(
+              "ui.dev.clients.relationships.list_title",
+              "Assigned Relationships",
+            )}
+          </CardTitle>
+          <CardDescription>
+            {t(
+              "msg.dev.clients.relationships.list_description",
+              "현재 RP에 직접 부여된 operator relation 목록입니다.",
+            )}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {error ? (
+            <div className="rounded-md border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive">
+              {t(
+                "msg.dev.clients.relationships.load_error",
+                "Relationship 조회 실패: {{error}}",
+                {
+                  error:
+                    (error as AxiosError<{ error?: string }>).response?.data
+                      ?.error ?? (error as Error).message,
+                },
+              )}
+            </div>
+          ) : isLoading ? (
+            <div className="py-8 text-center text-sm text-muted-foreground">
+              {t(
+                "msg.dev.clients.relationships.loading",
+                "Relationship를 불러오는 중입니다...",
+              )}
+            </div>
+          ) : sortedItems.length === 0 ? (
+            <div className="py-8 text-center text-sm text-muted-foreground">
+              {t(
+                "msg.dev.clients.relationships.empty",
+                "직접 부여된 relationship가 없습니다.",
+              )}
+            </div>
+          ) : (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>
+                    {t("ui.dev.clients.relationships.relation", "Relation")}
+                  </TableHead>
+                  <TableHead>
+                    {t("ui.dev.clients.relationships.subject", "Subject")}
+                  </TableHead>
+                  <TableHead>
+                    {t("ui.dev.clients.relationships.subject_type", "Type")}
+                  </TableHead>
+                  <TableHead className="w-[120px] text-right">
+                    {t("ui.dev.clients.table.actions", "액션")}
+                  </TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {sortedItems.map((item) => (
+                  <TableRow key={`${item.relation}:${item.subject}`}>
+                    <TableCell className="font-mono text-xs">
+                      {item.relation}
+                    </TableCell>
+                    <TableCell>
+                      <div className="space-y-1">
+                        <div className="font-mono text-xs">{item.subject}</div>
+                        {item.subjectId && (
+                          <div className="text-xs text-muted-foreground">
+                            ID: {item.subjectId}
+                          </div>
+                        )}
+                      </div>
+                    </TableCell>
+                    <TableCell>
+                      <Badge variant="outline">{item.subjectType || "-"}</Badge>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="gap-2 text-destructive hover:text-destructive"
+                        disabled={removeMutation.isPending}
+                        onClick={() =>
+                          handleRemove(item.relation, item.subject)
+                        }
+                      >
+                        <Trash2 className="h-4 w-4" />
+                        {t("ui.common.delete", "Delete")}
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default ClientRelationsPage;