1
0
forked from baron/baron-sso

Merge remote-tracking branch 'origin/dev' into dev

This commit is contained in:
2026-05-20 18:16:03 +09:00
79 changed files with 6977 additions and 1099 deletions

View File

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

View File

@@ -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 (

View File

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

View File

@@ -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;

View File

@@ -493,8 +493,8 @@ function AppLayout() {
auth.user?.profile.name?.toString() ||
auth.user?.profile.preferred_username?.toString(),
profileEmail: profile?.email || auth.user?.profile.email?.toString(),
fallbackName: t("ui.dev.profile.unknown_name", "Unknown User"),
fallbackEmail: t("ui.dev.profile.unknown_email", "unknown@example.com"),
fallbackName: t("ui.shell.profile.unknown_name", "Unknown User"),
fallbackEmail: t("ui.shell.profile.unknown_email", "unknown@example.com"),
});
const profileRoleKey = mockRoleOverride || profile?.role || "user";
const handleSessionExpiryToggle = () => {
@@ -560,7 +560,7 @@ function AppLayout() {
className={shellLayoutClasses.logoutButton}
>
<LogOut size={18} />
<span>{t("ui.admin.nav.logout", "Logout")}</span>
<span>{t("ui.shell.nav.logout", "Logout")}</span>
</button>
</div>
);
@@ -621,7 +621,7 @@ function AppLayout() {
className="inline-flex items-center gap-3 rounded-full border border-border bg-card px-3 py-2 transition hover:bg-muted/20"
aria-haspopup="menu"
aria-expanded={isProfileOpen}
aria-label={t("ui.dev.profile.menu_aria", "계정 메뉴 열기")}
aria-label={t("ui.shell.profile.menu_aria", "계정 메뉴 열기")}
>
<div className={shellLayoutClasses.profileInitial}>
{profileSummary.initial}
@@ -643,7 +643,7 @@ function AppLayout() {
{isProfileOpen ? (
<div role="menu" className={shellLayoutClasses.profileMenu}>
<p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
{t("ui.dev.profile.menu_title", "Account")}
{t("ui.shell.profile.menu_title", "Account")}
</p>
<div className={shellLayoutClasses.profileCard}>
<div>
@@ -657,7 +657,7 @@ function AppLayout() {
<div className="flex items-center pt-1">
<span className="inline-flex items-center rounded-full bg-sky-500/10 px-2.5 py-1 text-[10px] font-semibold text-sky-700 dark:text-sky-300">
{t(
`ui.admin.role.${profileRoleKey}`,
`ui.shell.role.${profileRoleKey}`,
profileRoleKey.toUpperCase(),
)}
</span>
@@ -668,7 +668,7 @@ function AppLayout() {
<div className="flex items-center justify-between gap-3">
<div>
<p className="text-sm font-medium text-foreground">
{t("ui.dev.session.auto_extend", "세션 만료 관리")}
{t("ui.shell.session.auto_extend", "세션 만료 관리")}
</p>
<p className="text-xs text-muted-foreground">
{isSessionExpiryEnabled ? (
@@ -677,7 +677,7 @@ function AppLayout() {
t={t}
/>
) : (
t("ui.dev.session.disabled", "세션 만료 비활성화")
t("ui.shell.session.disabled", "세션 만료 비활성화")
)}
</p>
</div>
@@ -755,7 +755,7 @@ function AppLayout() {
className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-foreground transition hover:bg-muted/20"
>
<UserIcon size={16} className="text-muted-foreground" />
<span>{t("ui.userfront.nav.profile", "내 정보")}</span>
<span>{t("ui.shell.nav.profile", "내 정보")}</span>
</button>
<button
type="button"
@@ -766,7 +766,7 @@ function AppLayout() {
className="mt-2 flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-left text-sm text-muted-foreground transition hover:bg-destructive/10 hover:text-destructive"
>
<LogOut size={16} />
<span>{t("ui.admin.nav.logout", "Logout")}</span>
<span>{t("ui.shell.nav.logout", "Logout")}</span>
</button>
</div>
) : null}