현지화

모든 내장 UI 문자열(닫기 버튼, 페이지네이션 레이블, 정렬 알림, 업로드 프롬프트…)은 locale 레지스트리를 통해 해석됩니다. 번들에는 en만 포함되어 있으며 — 다른 모든 언어는 외부(가져올 수 있는 모듈 또는 JSON 파일)에서 로드되어 addLocale로 등록됩니다. 동일한 레지스트리가 @zephora/react와 @zephora/native를 구동합니다. en, tr.

locale 로드하기

// 1) As a module (tree-shaken, typed):
import { addLocale } from "@zephora/react";
import { trLocale } from "@zephora/theme/locales/tr";
addLocale("tr", trLocale);

// 2) As JSON over the network (e.g. from your CDN):
const messages = await fetch("/locales/tr.json").then((r) => r.json());
addLocale("tr", messages);
// JSON dosyası pakette hazır: @zephora/theme/locales/tr.json

라이브 데모

locale을 전환하세요 — 페이지네이션 레이블과 다이얼로그 버튼이 즉시 업데이트됩니다.

locale 선택하기

// Web
<ZephoraConfigProvider locale="tr">...</ZephoraConfigProvider>

// React Native
<ZephoraProvider theme={lightTheme} locale="tr">...</ZephoraProvider>

사용자 정의 locale 등록하기

addLocale는 메시지를 영어 위에 병합하므로 부분 정의도 안전합니다. updateLocale은 기존 항목을 패치합니다.

import { addLocale, updateLocale } from "@zephora/react";

addLocale("de", {
  intlLocale: "de",
  firstDayOfWeek: 1,
  close: "Schließen",
  cancel: "Abbrechen",
  confirm: "Bestätigen",
  loading: "Wird geladen…",
  pageOf: "Seite {page} von {count}",
});

updateLocale("de", { clear: "Leeren" });

자신의 컴포넌트에서 문자열 읽기

import { useLocale, localeOption } from "@zephora/react";

function SaveBar() {
  const { t } = useLocale();
  return <Button>{t("apply")}</Button>;
}

// Outside React:
localeOption("cancel", "tr"); // "İptal"

사용 가능한 locale

48개의 미리 만들어진 번역과 함께 제공됩니다. 각각은 독립적인 모듈입니다 — 필요한 것만 가져오세요(또는 해당하는 .json을 fetch하세요).

메시지 참조

전체 키 세트는 ZephoraLocale 타입에 있습니다 — 액션(close, cancel, confirm, clear…), 데이터 상태(loading, noData, emptyMessage), 폼 문자열(showPassword, browseFiles, removeFile), 내비게이션(pageOf, nextPage, breadcrumb), 데이터 표시(sortAscending, selectAllRows, goToSlide) 및 날짜(prevMonth, chooseDate, firstDayOfWeek, intlLocale). 자리 표시자는 t(key, params)로 보간되는 {param} 구문을 사용합니다.