devfront 설정 화면 로케일 누락 수정

devfront/src/features/developer-access/developerAccessPages.test.ts

@@ -1,5 +1,18 @@
-import { describe, expect, it } from "vitest";
-import { normalizeDeveloperAccessPageSelection } from "./developerAccessPages";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import {
+  developerAccessPagesToLabel,
+  getDeveloperAccessPageLabel,
+  normalizeDeveloperAccessPageSelection,
+} from "./developerAccessPages";
+
+beforeEach(() => {
+  window.localStorage.clear();
+  window.localStorage.setItem("locale", "ko");
+});
+
+afterEach(() => {
+  window.localStorage.clear();
+});
 
 describe("developer access pages", () => {
   it("collapses all non-all pages into all", () => {
@@ -21,4 +34,20 @@ describe("developer access pages", () => {
   it("keeps explicit all selection", () => {
     expect(normalizeDeveloperAccessPageSelection(["all"])).toEqual(["all"]);
   });
+
+  it("returns localized labels for access pages", () => {
+    expect(getDeveloperAccessPageLabel("all")).toBe("전체");
+    expect(developerAccessPagesToLabel(["overview", "audit"])).toBe(
+      "개요, 감사로그",
+    );
+
+    window.localStorage.setItem("locale", "en");
+
+    expect(getDeveloperAccessPageLabel("client_create")).toBe(
+      "Add linked app",
+    );
+    expect(developerAccessPagesToLabel(["overview", "audit"])).toBe(
+      "Overview, Audit Logs",
+    );
+  });
 });

devfront/src/features/developer-access/developerAccessPages.ts

@@ -1,3 +1,5 @@
+import { t } from "../../lib/i18n";
+
 export type DeveloperAccessPage =
   | "all"
   | "overview"
@@ -10,15 +12,40 @@ export const developerAccessPageOrder: DeveloperAccessPage[] = [
   "audit",
 ];
 
-export const developerAccessPageOptions: Array<{
+export function getDeveloperAccessPageLabel(page: DeveloperAccessPage): string {
+  switch (page) {
+    case "all":
+      return t("ui.dev.access_pages.all", "전체");
+    case "overview":
+      return t("ui.dev.access_pages.overview", "개요");
+    case "client_create":
+      return t("ui.dev.access_pages.client_create", "연동 앱 추가");
+    case "audit":
+      return t("ui.dev.access_pages.audit", "감사로그");
+    default:
+      return page;
+  }
+}
+
+export function getDeveloperAccessPageOptions(): Array<{
   value: DeveloperAccessPage;
   label: string;
-}> = [
-  { value: "all", label: "전체" },
-  { value: "overview", label: "개요" },
-  { value: "client_create", label: "연동 앱 추가" },
-  { value: "audit", label: "감사로그" },
-];
+}> {
+  return developerAccessPageOrder.length > 0
+    ? [
+        { value: "all", label: getDeveloperAccessPageLabel("all") },
+        {
+          value: "overview",
+          label: getDeveloperAccessPageLabel("overview"),
+        },
+        {
+          value: "client_create",
+          label: getDeveloperAccessPageLabel("client_create"),
+        },
+        { value: "audit", label: getDeveloperAccessPageLabel("audit") },
+      ]
+    : [];
+}
 
 export function normalizeDeveloperAccessPages(
   pages: Array<string | undefined | null>,
@@ -61,20 +88,11 @@ export function normalizeDeveloperAccessPageSelection(
 export function developerAccessPagesToLabel(pages?: Array<string | null>) {
   const normalized = normalizeDeveloperAccessPages(pages ?? []);
   if (normalized.length === 0 || normalized.includes("all")) {
-    return "전체";
+    return getDeveloperAccessPageLabel("all");
   }
   return normalized
     .map((page) => {
-      switch (page) {
-        case "overview":
-          return "개요";
-        case "client_create":
-          return "연동 앱 추가";
-        case "audit":
-          return "감사로그";
-        default:
-          return page;
-      }
+      return getDeveloperAccessPageLabel(page);
     })
     .join(", ");
 }