테넌트 목록 조회 cursor기반으로 재구성. 사용자 metadata 미사용 필드 제거

2026-05-13 18:05:51 +09:00
parent a4d707d4d8
commit 5e7b7b878c
85 changed files with 4808 additions and 734 deletions
--- a/adminfront/src/features/api-keys/ApiKeyCreatePage.tsx
+++ b/adminfront/src/features/api-keys/ApiKeyCreatePage.tsx
@@ -28,58 +28,7 @@ import {
 } from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
 import { cn } from "../../lib/utils";
-
-const AVAILABLE_SCOPES = [
-  {
-    id: "audit:read",
-    labelKey: "ui.admin.api_keys.scopes.audit_read.title",
-    labelFallback: "감사 로그 조회",
-    descKey: "msg.admin.api_keys.scopes.audit_read.desc",
-    descFallback: "시스템 내의 모든 이력을 조회할 수 있습니다.",
-  },
-  {
-    id: "audit:write",
-    labelKey: "ui.admin.api_keys.scopes.audit_write.title",
-    labelFallback: "감사 로그 생성",
-    descKey: "msg.admin.api_keys.scopes.audit_write.desc",
-    descFallback: "외부 앱의 로그를 Baron SSO로 전송합니다.",
-  },
-  {
-    id: "user:read",
-    labelKey: "ui.admin.api_keys.scopes.user_read.title",
-    labelFallback: "사용자 조회",
-    descKey: "msg.admin.api_keys.scopes.user_read.desc",
-    descFallback: "사용자 목록 및 프로필을 읽을 수 있습니다.",
-  },
-  {
-    id: "user:write",
-    labelKey: "ui.admin.api_keys.scopes.user_write.title",
-    labelFallback: "사용자 관리",
-    descKey: "msg.admin.api_keys.scopes.user_write.desc",
-    descFallback: "사용자 생성, 수정, 삭제 작업을 수행합니다.",
-  },
-  {
-    id: "tenant:read",
-    labelKey: "ui.admin.api_keys.scopes.tenant_read.title",
-    labelFallback: "테넌트 조회",
-    descKey: "msg.admin.api_keys.scopes.tenant_read.desc",
-    descFallback: "등록된 모든 조직 정보를 조회합니다.",
-  },
-  {
-    id: "tenant:write",
-    labelKey: "ui.admin.api_keys.scopes.tenant_write.title",
-    labelFallback: "테넌트 관리",
-    descKey: "msg.admin.api_keys.scopes.tenant_write.desc",
-    descFallback: "테넌트 정보를 직접 제어합니다.",
-  },
-  {
-    id: "org-context:read",
-    labelKey: "ui.admin.api_keys.scopes.org_context_read.title",
-    labelFallback: "조직 Context 조회",
-    descKey: "msg.admin.api_keys.scopes.org_context_read.desc",
-    descFallback: "외부 연동앱이 OrgFront SSOT 조직 JSON을 조회합니다.",
-  },
-];
+import { AVAILABLE_API_KEY_SCOPES } from "./apiKeyScopes";

 function ApiKeyCreatePage() {
  const navigate = useNavigate();
@@ -305,7 +254,7 @@ function ApiKeyCreatePage() {
            </h3>
          </div>
          <div className="grid gap-4 sm:grid-cols-2">
-            {AVAILABLE_SCOPES.map((scope) => {
+            {AVAILABLE_API_KEY_SCOPES.map((scope) => {
              const isSelected = selectedScopes.includes(scope.id);
              return (
                <button
--- a/adminfront/src/features/api-keys/ApiKeyListPage.test.tsx
+++ b/adminfront/src/features/api-keys/ApiKeyListPage.test.tsx
@@ -0,0 +1,105 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  fetchApiKeys,
+  rotateApiKeySecret,
+  updateApiKeyScopes,
+} from "../../lib/adminApi";
+import ApiKeyListPage from "./ApiKeyListPage";
+
+vi.mock("../../lib/adminApi", () => ({
+  fetchApiKeys: vi.fn(async () => ({
+    items: [
+      {
+        id: "api-key-id",
+        name: "org-context-client",
+        client_id: "client-id-stable",
+        scopes: ["audit:read"],
+        status: "active",
+        createdAt: "2026-05-13T00:00:00Z",
+      },
+    ],
+    total: 1,
+  })),
+  deleteApiKey: vi.fn(async () => undefined),
+  updateApiKeyScopes: vi.fn(async () => ({
+    id: "api-key-id",
+    name: "org-context-client",
+    client_id: "client-id-stable",
+    scopes: ["audit:read", "org-context:read"],
+    status: "active",
+    createdAt: "2026-05-13T00:00:00Z",
+  })),
+  rotateApiKeySecret: vi.fn(async () => ({
+    apiKey: {
+      id: "api-key-id",
+      name: "org-context-client",
+      client_id: "client-id-stable",
+      scopes: ["audit:read"],
+      status: "active",
+      createdAt: "2026-05-13T00:00:00Z",
+    },
+    clientSecret: "rotated-secret",
+  })),
+}));
+
+function renderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <ApiKeyListPage />
+      </MemoryRouter>
+    </QueryClientProvider>,
+  );
+}
+
+describe("ApiKeyListPage", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.spyOn(window, "confirm").mockReturnValue(true);
+  });
+
+  it("updates scopes without changing client_id", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    expect(await screen.findByText("client-id-stable")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /권한 수정/ }));
+    await user.click(screen.getByRole("button", { name: /조직 Context 조회/ }));
+    await user.click(screen.getByRole("button", { name: /권한 저장/ }));
+
+    await waitFor(() => {
+      expect(updateApiKeyScopes).toHaveBeenCalledWith("api-key-id", {
+        scopes: expect.arrayContaining(["audit:read", "org-context:read"]),
+      });
+    });
+  });
+
+  it("rotates only the secret and shows the one-time secret", async () => {
+    const user = userEvent.setup();
+    renderPage();
+
+    expect(await screen.findByText("client-id-stable")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: /Secret 재발급/ }));
+
+    await waitFor(() => {
+      expect(rotateApiKeySecret).toHaveBeenCalledWith("api-key-id");
+    });
+    expect(
+      await screen.findByDisplayValue("rotated-secret"),
+    ).toBeInTheDocument();
+    expect(fetchApiKeys).toHaveBeenCalled();
+  });
+});
--- a/adminfront/src/features/api-keys/ApiKeyListPage.tsx
+++ b/adminfront/src/features/api-keys/ApiKeyListPage.tsx
@@ -1,6 +1,16 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import type { AxiosError } from "axios";
-import { Key, Plus, RefreshCw, Trash2 } from "lucide-react";
+import {
+  Copy,
+  Edit3,
+  Key,
+  Plus,
+  RefreshCw,
+  RotateCcw,
+  Save,
+  Trash2,
+} from "lucide-react";
+import * as React from "react";
 import { Link } from "react-router-dom";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -11,6 +21,15 @@ import {
  CardHeader,
  CardTitle,
 } from "../../components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../components/ui/dialog";
+import { Input } from "../../components/ui/input";
 import {
  Table,
  TableBody,
@@ -19,10 +38,27 @@ import {
  TableHeader,
  TableRow,
 } from "../../components/ui/table";
-import { deleteApiKey, fetchApiKeys } from "../../lib/adminApi";
+import {
+  type ApiKeySummary,
+  deleteApiKey,
+  fetchApiKeys,
+  rotateApiKeySecret,
+  updateApiKeyScopes,
+} from "../../lib/adminApi";
 import { t } from "../../lib/i18n";
+import { cn } from "../../lib/utils";
+import { AVAILABLE_API_KEY_SCOPES } from "./apiKeyScopes";

 function ApiKeyListPage() {
+  const [editingKey, setEditingKey] = React.useState<ApiKeySummary | null>(
+    null,
+  );
+  const [draftScopes, setDraftScopes] = React.useState<string[]>([]);
+  const [rotatedSecret, setRotatedSecret] = React.useState<{
+    key: ApiKeySummary;
+    clientSecret: string;
+  } | null>(null);
+
  const query = useQuery({
    queryKey: ["api-keys", { limit: 50, offset: 0 }],
    queryFn: () => fetchApiKeys(50, 0),
@@ -35,6 +71,27 @@ function ApiKeyListPage() {
    },
  });

+  const updateScopesMutation = useMutation({
+    mutationFn: ({ id, scopes }: { id: string; scopes: string[] }) =>
+      updateApiKeyScopes(id, { scopes }),
+    onSuccess: () => {
+      setEditingKey(null);
+      setDraftScopes([]);
+      query.refetch();
+    },
+  });
+
+  const rotateSecretMutation = useMutation({
+    mutationFn: (id: string) => rotateApiKeySecret(id),
+    onSuccess: (data) => {
+      setRotatedSecret({
+        key: data.apiKey,
+        clientSecret: data.clientSecret,
+      });
+      query.refetch();
+    },
+  });
+
  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
    ?.data?.error;
  const fallbackError =
@@ -62,6 +119,44 @@ function ApiKeyListPage() {
    deleteMutation.mutate(id);
  };

+  const openScopeEditor = (key: ApiKeySummary) => {
+    setEditingKey(key);
+    setDraftScopes(key.scopes);
+  };
+
+  const toggleDraftScope = (scopeId: string) => {
+    setDraftScopes((current) =>
+      current.includes(scopeId)
+        ? current.filter((scope) => scope !== scopeId)
+        : [...current, scopeId],
+    );
+  };
+
+  const saveScopes = () => {
+    if (!editingKey || draftScopes.length === 0) return;
+    updateScopesMutation.mutate({ id: editingKey.id, scopes: draftScopes });
+  };
+
+  const handleRotateSecret = (key: ApiKeySummary) => {
+    if (
+      !window.confirm(
+        t(
+          "msg.admin.api_keys.list.rotate_confirm",
+          'API 키 "{{name}}"의 Secret을 재발급할까요? 기존 Secret은 더 이상 사용할 수 없습니다.',
+          { name: key.name },
+        ),
+      )
+    ) {
+      return;
+    }
+    rotateSecretMutation.mutate(key.id);
+  };
+
+  const copyRotatedSecret = () => {
+    if (!rotatedSecret) return;
+    navigator.clipboard.writeText(rotatedSecret.clientSecret);
+  };
+
  return (
    <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
      <header className="flex flex-wrap items-start justify-between gap-4 flex-shrink-0 sticky top-[-2.5rem] z-20 bg-background/95 backdrop-blur pt-4 pb-2 -mt-4">
@@ -189,15 +284,40 @@ function ApiKeyListPage() {
                          : t("ui.common.never", "Never")}
                      </TableCell>
                      <TableCell className="text-right">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={() => handleDelete(key.id, key.name)}
-                          disabled={deleteMutation.isPending}
-                        >
-                          <Trash2 size={14} />
-                          {t("ui.common.delete", "삭제")}
-                        </Button>
+                        <div className="flex flex-wrap justify-end gap-2">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => openScopeEditor(key)}
+                          >
+                            <Edit3 size={14} />
+                            {t(
+                              "ui.admin.api_keys.list.edit_scopes",
+                              "권한 수정",
+                            )}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleRotateSecret(key)}
+                            disabled={rotateSecretMutation.isPending}
+                          >
+                            <RotateCcw size={14} />
+                            {t(
+                              "ui.admin.api_keys.list.rotate_secret",
+                              "Secret 재발급",
+                            )}
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleDelete(key.id, key.name)}
+                            disabled={deleteMutation.isPending}
+                          >
+                            <Trash2 size={14} />
+                            {t("ui.common.delete", "삭제")}
+                          </Button>
+                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
@@ -207,6 +327,137 @@ function ApiKeyListPage() {
          </div>
        </CardContent>
      </Card>
+
+      <Dialog
+        open={editingKey !== null}
+        onOpenChange={() => setEditingKey(null)}
+      >
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>
+              {t("ui.admin.api_keys.list.edit_scopes", "권한 수정")}
+            </DialogTitle>
+            <DialogDescription>
+              {editingKey
+                ? t(
+                    "msg.admin.api_keys.list.edit_scopes_desc",
+                    "{{clientId}}의 CLIENT_ID는 유지하고 권한만 변경합니다.",
+                    { clientId: editingKey.client_id },
+                  )
+                : null}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-3 sm:grid-cols-2">
+            {AVAILABLE_API_KEY_SCOPES.map((scope) => {
+              const isSelected = draftScopes.includes(scope.id);
+              return (
+                <button
+                  key={scope.id}
+                  type="button"
+                  onClick={() => toggleDraftScope(scope.id)}
+                  className={cn(
+                    "flex flex-col items-start gap-2 rounded-lg border-2 p-4 text-left transition-all",
+                    isSelected
+                      ? "border-primary bg-primary/5"
+                      : "border-border bg-card hover:border-muted-foreground/30",
+                  )}
+                >
+                  <span className="font-bold text-sm">
+                    {t(scope.labelKey, scope.labelFallback)}
+                  </span>
+                  <span className="text-[11px] text-muted-foreground leading-snug">
+                    {t(scope.descKey, scope.descFallback)}
+                  </span>
+                  <code className="text-[9px] font-mono opacity-60 uppercase tracking-tighter">
+                    ID: {scope.id}
+                  </code>
+                </button>
+              );
+            })}
+          </div>
+          {draftScopes.length === 0 && (
+            <p className="text-sm text-destructive">
+              {t(
+                "msg.admin.api_keys.create.scope_required",
+                "최소 하나 이상의 권한을 선택해야 합니다.",
+              )}
+            </p>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditingKey(null)}>
+              {t("ui.common.cancel", "취소")}
+            </Button>
+            <Button
+              onClick={saveScopes}
+              disabled={
+                updateScopesMutation.isPending || draftScopes.length === 0
+              }
+            >
+              <Save size={16} />
+              {t("ui.admin.api_keys.list.save_scopes", "권한 저장")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={rotatedSecret !== null}
+        onOpenChange={() => setRotatedSecret(null)}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>
+              {t(
+                "ui.admin.api_keys.list.rotate_secret_done",
+                "Secret 재발급 완료",
+              )}
+            </DialogTitle>
+            <DialogDescription>
+              {t(
+                "msg.admin.api_keys.list.rotate_secret_notice",
+                "새 Secret은 지금 한 번만 표시됩니다. CLIENT_ID는 변경되지 않았습니다.",
+              )}
+            </DialogDescription>
+          </DialogHeader>
+          {rotatedSecret && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <p className="text-xs font-bold text-muted-foreground">
+                  CLIENT ID
+                </p>
+                <code className="block rounded-md bg-muted px-3 py-2 text-sm">
+                  {rotatedSecret.key.client_id}
+                </code>
+              </div>
+              <div className="space-y-2">
+                <p className="text-xs font-bold text-muted-foreground">
+                  X-Baron-Key-Secret
+                </p>
+                <div className="relative">
+                  <Input
+                    readOnly
+                    value={rotatedSecret.clientSecret}
+                    className="font-mono pr-12"
+                  />
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="absolute right-1 top-1/2 -translate-y-1/2"
+                    onClick={copyRotatedSecret}
+                  >
+                    <Copy size={16} />
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+          <DialogFooter>
+            <Button onClick={() => setRotatedSecret(null)}>
+              {t("ui.common.confirm", "확인")}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
    </div>
  );
 }
--- a/adminfront/src/features/api-keys/apiKeyScopes.ts
+++ b/adminfront/src/features/api-keys/apiKeyScopes.ts
@@ -0,0 +1,59 @@
+export type ApiKeyScopeOption = {
+  id: string;
+  labelKey: string;
+  labelFallback: string;
+  descKey: string;
+  descFallback: string;
+};
+
+export const AVAILABLE_API_KEY_SCOPES: ApiKeyScopeOption[] = [
+  {
+    id: "audit:read",
+    labelKey: "ui.admin.api_keys.scopes.audit_read.title",
+    labelFallback: "감사 로그 조회",
+    descKey: "msg.admin.api_keys.scopes.audit_read.desc",
+    descFallback: "시스템 내의 모든 이력을 조회할 수 있습니다.",
+  },
+  {
+    id: "audit:write",
+    labelKey: "ui.admin.api_keys.scopes.audit_write.title",
+    labelFallback: "감사 로그 생성",
+    descKey: "msg.admin.api_keys.scopes.audit_write.desc",
+    descFallback: "외부 앱의 로그를 Baron SSO로 전송합니다.",
+  },
+  {
+    id: "user:read",
+    labelKey: "ui.admin.api_keys.scopes.user_read.title",
+    labelFallback: "사용자 조회",
+    descKey: "msg.admin.api_keys.scopes.user_read.desc",
+    descFallback: "사용자 목록 및 프로필을 읽을 수 있습니다.",
+  },
+  {
+    id: "user:write",
+    labelKey: "ui.admin.api_keys.scopes.user_write.title",
+    labelFallback: "사용자 관리",
+    descKey: "msg.admin.api_keys.scopes.user_write.desc",
+    descFallback: "사용자 생성, 수정, 삭제 작업을 수행합니다.",
+  },
+  {
+    id: "tenant:read",
+    labelKey: "ui.admin.api_keys.scopes.tenant_read.title",
+    labelFallback: "테넌트 조회",
+    descKey: "msg.admin.api_keys.scopes.tenant_read.desc",
+    descFallback: "등록된 모든 조직 정보를 조회합니다.",
+  },
+  {
+    id: "tenant:write",
+    labelKey: "ui.admin.api_keys.scopes.tenant_write.title",
+    labelFallback: "테넌트 관리",
+    descKey: "msg.admin.api_keys.scopes.tenant_write.desc",
+    descFallback: "테넌트 정보를 직접 제어합니다.",
+  },
+  {
+    id: "org-context:read",
+    labelKey: "ui.admin.api_keys.scopes.org_context_read.title",
+    labelFallback: "조직 Context 조회",
+    descKey: "msg.admin.api_keys.scopes.org_context_read.desc",
+    descFallback: "외부 연동앱이 OrgFront SSOT 조직 JSON을 조회합니다.",
+  },
+];