로컬라이제이션

import { Calendar, koMessages } from "@reopt-ai/opt-calendar";

<Calendar
  store={store}
  // 1. 라벨 카탈로그 (부분 덮어쓰기 가능 — Partial<CalendarMessages>)
  messages={koMessages}
  // 2. 요일/월/시각 표기 (Intl.DateTimeFormat에 그대로 전달)
  locale="ko-KR"
  // 3. 주 시작 요일 — 로케일과 별개 정책
  weekStartsOn={1}
/>;

// 일부 키만 바꾸기
<Calendar store={store} messages={{ today: "오늘", newEvent: "일정 추가" }} />;

import { Editor, koMessages, useEditorMessages } from "@reopt-ai/opt-editor";

// 주입 — Editor / EditorProvider 어느 쪽이든 messages prop
<Editor store={store} catalog={catalog} messages={koMessages} />;

// 커스텀 블록 안에서 읽기
function MyBlockToolbar() {
  const t = useEditorMessages();
  return <button>{t("blockToolbar.convertTo", { label: "인용" })}</button>;
}

import {
  PromptInput,
  Message,
  enPromptInputLabels,
  enMessageLabels,
} from "@reopt-ai/opt-chat";

<PromptInput labels={enPromptInputLabels} onSubmit={handleSubmit} />;
<Message labels={{ ...enMessageLabels, retry: "Try again" }} />;

import { DataGrid, koLabels } from "@reopt-ai/opt-datagrid";
import { OptDevtool, enDevtoolLabels } from "@reopt-ai/opt-devtool";

// 영어 기본 → 한국어 카탈로그 주입
<DataGrid columns={columns} rows={rows} labels={koLabels} />;

// 한국어 기본 → 영어 카탈로그 주입
<OptDevtool labels={enDevtoolLabels} />;

import { Pagination, ComboboxEmpty, enComboboxLabels } from "@reopt-ai/opt-ui";

// 함수형 라벨도 있다 — 숫자 위치를 언어마다 다르게 둘 수 있게
<Pagination
  currentPage={page}
  totalPages={20}
  onPageChange={setPage}
  labels={{
    previous: "이전 페이지",
    next: "다음 페이지",
    count: (start, end, total) => `전체 ${total}건 중 ${start}–${end}`,
  }}
/>;

// 한국어 기본값을 영어 카탈로그로 교체
<ComboboxEmpty>{enComboboxLabels.empty}</ComboboxEmpty>;

"use client";

import { useLocale } from "next-intl";
import { koMessages as koCalendar } from "@reopt-ai/opt-calendar";
import { koMessages as koEditor } from "@reopt-ai/opt-editor";
import { koLabels as koGrid } from "@reopt-ai/opt-datagrid";

export function ProductScreen() {
  const locale = useLocale(); // "ko" | "en"
  const isKo = locale === "ko";

  return (
    <>
      {/* 영어가 기본인 패키지 — 한국어일 때만 카탈로그를 넘긴다 */}
      <Calendar
        store={calendarStore}
        messages={isKo ? koCalendar : undefined}
        locale={isKo ? "ko-KR" : "en-US"}
      />
      <Editor
        store={editorStore}
        catalog={catalog}
        messages={isKo ? koEditor : undefined}
      />
      <DataGrid
        rows={rows}
        columns={columns}
        labels={isKo ? koGrid : undefined}
      />
    </>
  );
}

import type { CalendarMessages } from "@reopt-ai/opt-calendar";
import type { EditorMessages } from "@reopt-ai/opt-editor";

// 전체를 채우면 Partial이 아닌 완전한 카탈로그가 된다
export const jaCalendarMessages: CalendarMessages = {
  calendarLabel: "カレンダー",
  today: "今日",
  newEvent: "予定を追加",
  // … 나머지 키도 타입이 강제한다
};

// 일부만 바꾸려면 Partial
export const jaEditorMessages: Partial<EditorMessages> = {
  "blockToolbar.delete": "ブロックを削除",
};

// eslint-disable-next-line opt-ui/require-labels-no-hardcode -- 브랜드명은 번역 대상이 아니다
<span>reopt design</span>