forked from baron/baron-sso
70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { LOCALE_STORAGE_KEY } from "../../../../common/core/i18n";
|
|
import { t } from "../../lib/i18n";
|
|
|
|
const SUPPORTED_LOCALES = ["ko", "en"] as const;
|
|
|
|
type Locale = (typeof SUPPORTED_LOCALES)[number];
|
|
|
|
function resolveLocale(): Locale {
|
|
if (typeof window === "undefined") {
|
|
return "ko";
|
|
}
|
|
|
|
const stored = window.localStorage.getItem(LOCALE_STORAGE_KEY);
|
|
if (stored === "ko" || stored === "en") {
|
|
return stored;
|
|
}
|
|
|
|
const pathLocale = window.location.pathname.split("/")[1];
|
|
if (pathLocale === "ko" || pathLocale === "en") {
|
|
return pathLocale;
|
|
}
|
|
|
|
const browserLang = window.navigator.language.toLowerCase();
|
|
return browserLang.startsWith("ko") ? "ko" : "en";
|
|
}
|
|
|
|
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);
|
|
window.dispatchEvent(new Event("localechange"));
|
|
};
|
|
|
|
return (
|
|
<select
|
|
id="admin-language-selector"
|
|
name="admin-language-selector"
|
|
value={locale}
|
|
onChange={(event) => handleChange(event.target.value as Locale)}
|
|
className="rounded-full border border-border bg-transparent px-3 py-2 text-sm text-muted-foreground transition hover:bg-muted/20"
|
|
aria-label={t("ui.common.language", "언어")}
|
|
>
|
|
<option value="ko">{t("ui.common.language_ko", "한국어")}</option>
|
|
<option value="en">{t("ui.common.language_en", "English")}</option>
|
|
</select>
|
|
);
|
|
}
|
|
|
|
export default LanguageSelector;
|