API 키 페이지 locale 전환 시 /api-keys 404 방지

adminfront/package.json

@@ -53,6 +53,7 @@
     "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^6.0.1",
     "autoprefixer": "^10.5.0",
+    "jsdom": "^28.1.0",
     "postcss": "^8.5.14",
     "tailwindcss": "^3.4.19",
     "tailwindcss-animate": "^1.0.7",

adminfront/src/components/common/LanguageSelector.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import LanguageSelector from "./LanguageSelector";
+
+vi.mock("../../lib/i18n", () => ({
+  t: (_key: string, fallback?: string) => fallback ?? "",
+}));
+
+describe("LanguageSelector", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    vi.restoreAllMocks();
+  });
+
+  it("updates locale without reloading the page", () => {
+    const dispatchSpy = vi.spyOn(window, "dispatchEvent");
+    window.localStorage.setItem("locale", "ko");
+
+    render(<LanguageSelector />);
+
+    fireEvent.change(screen.getByRole("combobox"), {
+      target: { value: "en" },
+    });
+
+    expect(window.localStorage.getItem("locale")).toBe("en");
+    expect(
+      dispatchSpy.mock.calls.some(
+        ([event]) => event instanceof Event && event.type === "localechange",
+      ),
+    ).toBe(true);
+  });
+});

adminfront/src/components/common/LanguageSelector.tsx

@@ -1,8 +1,6 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { LOCALE_STORAGE_KEY } from "../../../../common/core/i18n";
 import { t } from "../../lib/i18n";
-
-const LOCALE_STORAGE_KEY = "locale";
-const LOCALE_CHANGED_EVENT = "baron_locale_changed";
 const SUPPORTED_LOCALES = ["ko", "en"] as const;
 
 type Locale = (typeof SUPPORTED_LOCALES)[number];
@@ -29,17 +27,27 @@ function resolveLocale(): Locale {
 function LanguageSelector() {
   const [locale, setLocale] = useState<Locale>(resolveLocale());
 
+  useEffect(() => {
+    const syncLocale = () => {
+      setLocale(resolveLocale());
+    };
+
+    window.addEventListener("localechange", syncLocale);
+    window.addEventListener("storage", syncLocale);
+
+    return () => {
+      window.removeEventListener("localechange", syncLocale);
+      window.removeEventListener("storage", syncLocale);
+    };
+  }, []);
+
   const handleChange = (next: Locale) => {
     if (next === locale) {
       return;
     }
     window.localStorage.setItem(LOCALE_STORAGE_KEY, next);
     setLocale(next);
-    if (import.meta.env.MODE === "development") {
-      window.dispatchEvent(new Event(LOCALE_CHANGED_EVENT));
-      return;
-    }
-    window.location.reload();
+    window.dispatchEvent(new Event("localechange"));
   };
 
   return (

adminfront/src/components/common/LocaleRefreshBoundary.test.tsx

@@ -0,0 +1,34 @@
+import { act, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it } from "vitest";
+import LocaleRefreshBoundary from "./LocaleRefreshBoundary";
+
+let renderCount = 0;
+
+function RenderCounter() {
+  renderCount += 1;
+  return <span>{renderCount}</span>;
+}
+
+describe("LocaleRefreshBoundary", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    renderCount = 0;
+  });
+
+  it("re-renders children when locale changes", async () => {
+    render(
+      <LocaleRefreshBoundary>
+        <RenderCounter />
+      </LocaleRefreshBoundary>,
+    );
+
+    expect(screen.getByText("1")).toBeInTheDocument();
+
+    await act(async () => {
+      window.localStorage.setItem("locale", "en");
+      window.dispatchEvent(new Event("localechange"));
+    });
+
+    expect(screen.getByText("2")).toBeInTheDocument();
+  });
+});

adminfront/src/components/common/LocaleRefreshBoundary.tsx

@@ -0,0 +1,27 @@
+import { Fragment, type ReactNode, useEffect, useState } from "react";
+
+type LocaleRefreshBoundaryProps = {
+  children: ReactNode;
+};
+
+function LocaleRefreshBoundary({ children }: LocaleRefreshBoundaryProps) {
+  const [localeVersion, setLocaleVersion] = useState(0);
+
+  useEffect(() => {
+    const syncLocale = () => {
+      setLocaleVersion((current) => current + 1);
+    };
+
+    window.addEventListener("localechange", syncLocale);
+    window.addEventListener("storage", syncLocale);
+
+    return () => {
+      window.removeEventListener("localechange", syncLocale);
+      window.removeEventListener("storage", syncLocale);
+    };
+  }, []);
+
+  return <Fragment key={localeVersion}>{children}</Fragment>;
+}
+
+export default LocaleRefreshBoundary;

adminfront/src/main.tsx

@@ -3,6 +3,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 import { AuthProvider } from "react-oidc-context";
 import { RouterProvider } from "react-router-dom";
+import LocaleRefreshBoundary from "./components/common/LocaleRefreshBoundary";
 import { queryClient } from "./app/queryClient";
 import { router } from "./app/routes";
 import { Toaster } from "./components/ui/toaster";
@@ -19,7 +20,9 @@ createRoot(rootElement).render(
   <StrictMode>
     <AuthProvider {...oidcConfig}>
       <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
+        <LocaleRefreshBoundary>
+          <RouterProvider router={router} />
+        </LocaleRefreshBoundary>
         <Toaster />
       </QueryClientProvider>
     </AuthProvider>