국제화 (i18n)

WZ-Grid는 한국어(ko)와 영어(en) 두 가지 언어를 기본 제공합니다. locale prop으로 언어를 전환하고, messages prop으로 특정 메시지를 부분 오버라이드할 수 있습니다.

locale prop

<!-- 한국어 (기본값) -->
<WZGrid :columns="columns" :rows="rows" locale="ko" />

<!-- 영어 -->
<WZGrid :columns="columns" :rows="rows" locale="en" />

Prop	타입	기본값	설명
locale	'ko' | 'en' | string	'ko'	표시 언어. 커스텀 locale도 messages와 함께 사용 가능
messages	Messages	null	메시지 부분 오버라이드 객체

locale은 반응형입니다. 값이 변경되면 그리드 내 모든 텍스트가 즉시 갱신됩니다.

<script setup>
import { ref } from 'vue'
const locale = ref('ko')
</script>

<template>
  <button @click="locale = locale === 'ko' ? 'en' : 'ko'">언어 전환</button>
  <WZGrid :columns="columns" :rows="rows" :locale="locale" />
</template>

---

messages prop으로 커스텀 메시지 오버라이드

messages는 전체 메시지를 교체하는 것이 아니라 특정 키만 부분 오버라이드합니다. 지정하지 않은 키는 기본 locale 메시지를 그대로 사용합니다.

<script setup>
import type { Messages } from 'wz-grid'

const messages: Messages = {
  toolbar: {
    add: '+ 새 직원',
    delete: '선택 삭제',
  },
  filter: {
    searchPlaceholder: '이름 또는 부서 검색...',
  },
  pagination: {
    pageSize: '표시 개수:',
  },
}
</script>

<template>
  <WZGrid :columns="columns" :rows="rows" :messages="messages" />
</template>

---

메시지 키 전체 목록

7개 네임스페이스로 구성됩니다.

toolbar

키	ko 기본값	en 기본값
columnSettings	'컬럼 설정'	'Columns'
columnVisibility	'컬럼 표시'	'Column Visibility'
showAll	'전체 표시'	'Show All'
pinned	'고정'	'Pinned'
expandAll	'모두 펼치기'	'Expand All'
collapseAll	'모두 접기'	'Collapse All'
clearFilters	'필터 초기화 ({count})'	'Clear Filters ({count})'
delete	'삭제'	'Delete'
add	'추가'	'Add'

filter

키	ko 기본값	en 기본값
searchPlaceholder	'검색...'	'Search...'
minPlaceholder	'최소'	'Min'
maxPlaceholder	'최대'	'Max'
tagSearchPlaceholder	'태그 검색...'	'Search tags...'
selectedCount	'{count}개 선택'	'{count} selected'
all	'전체'	'All'
selectAll	'전체 선택'	'Select All'
deselectAll	'전체 해제'	'Deselect All'
yes	'예'	'Yes'
no	'아니요'	'No'
active	'필터 적용 중'	'Filter active'
clear	'필터 초기화'	'Clear filter'

grid

키	ko 기본값	en 기본값
subtotal	'소계'	'Subtotal'
rowUnit	'건'	'rows'

pagination

키	ko 기본값	en 기본값
filteredCount	'{count}건'	'{count} rows'
totalCount	'전체 {count}건'	'Total {count} rows'
selected	'{count}건 선택됨'	'{count} selected'
pageSize	'Page Size:'	'Page Size:'

contextMenu

키	ko 기본값	en 기본값
clearCell	'셀 지우기'	'Clear Cell'
insertAbove	'위에 행 추가'	'Insert Row Above'
insertBelow	'아래에 행 추가'	'Insert Row Below'
deleteRow	'행 삭제'	'Delete Row'

validation

키	ko 기본값	en 기본값
required	'{title}은(는) 필수 입력 항목입니다.'	'{title} is required.'

aria

키	ko 기본값	en 기본값
sortCleared	'정렬이 초기화되었습니다.'	'Sort cleared.'
sortChanged	'정렬: {desc}'	'Sort: {desc}'
filterActive	'필터 {count}개 적용 중'	'{count} filters active'
filterCleared	'필터가 초기화되었습니다.'	'Filters cleared.'

---

새 언어 추가 방법

기본 제공 locale에 없는 언어를 추가하려면 locale에 임의 문자열을 지정하고 messages로 전체 메시지를 제공합니다.

import type { Messages } from 'wz-grid'

const jaMessages: Messages = {
  toolbar: {
    columnSettings: '列設定',
    add: '追加',
    delete: '削除',
    expandAll: 'すべて展開',
    collapseAll: 'すべて折りたたむ',
    clearFilters: 'フィルタをクリア ({count})',
    showAll: 'すべて表示',
    pinned: '固定',
    columnVisibility: '列の表示',
  },
  filter: {
    searchPlaceholder: '検索...',
    minPlaceholder: '最小',
    maxPlaceholder: '最大',
    // ... 나머지 키
  },
  grid: { subtotal: '小計', rowUnit: '件' },
  pagination: {
    filteredCount: '{count}件',
    totalCount: '合計 {count}件',
    selected: '{count}件選択',
    pageSize: 'ページサイズ:',
  },
  contextMenu: {
    clearCell: 'セルをクリア',
    insertAbove: '上に行を挿入',
    insertBelow: '下に行を挿入',
    deleteRow: '行を削除',
  },
  validation: { required: '{title}は必須入力項目です。' },
  aria: {
    sortCleared: 'ソートがクリアされました。',
    sortChanged: 'ソート: {desc}',
    filterActive: 'フィルタ {count}個 適用中',
    filterCleared: 'フィルタがクリアされました。',
  },
}

<WZGrid :columns="columns" :rows="rows" locale="ja" :messages="jaMessages" />

locale이 'ko'·'en'이 아닌 경우 messages에서 메시지를 찾지 못한 키는 ko 기본값으로 폴백됩니다. 새 언어를 추가할 때는 모든 키를 정의하는 것을 권장합니다.

---

vue-i18n과 병행 사용

프로젝트에 vue-i18n을 이미 사용 중이라면 messages prop에 번역 결과를 그대로 전달할 수 있습니다.

import { useI18n } from 'vue-i18n'
import type { Messages } from 'wz-grid'

const { t, locale } = useI18n()

const gridMessages = computed<Messages>(() => ({
  toolbar: {
    add: t('grid.toolbar.add'),
    delete: t('grid.toolbar.delete'),
  },
  filter: {
    searchPlaceholder: t('grid.filter.search'),
  },
}))

<WZGrid
  :columns="columns"
  :rows="rows"
  :locale="locale"
  :messages="gridMessages"
/>

변경이 필요한 키만 오버라이드하면 되므로, 모든 키를 번역 파일에 추가하지 않아도 됩니다.

---

useI18n composable (내부 컴포넌트용)

WZGrid 하위 컴포넌트에서 번역 함수를 사용하려면 I18N_KEY를 inject합니다.

import { inject } from 'vue-demi'
import { I18N_KEY } from 'wz-grid'
import type { TFunction } from 'wz-grid'

const t = inject<TFunction>(I18N_KEY)!

// 사용 예
t('toolbar.add')                        // '추가'
t('toolbar.clearFilters', { count: 3 }) // '필터 초기화 (3)'

I18N_KEY와 TFunction은 WZGrid 하위 커스텀 컴포넌트(슬롯)를 구현할 때 활용할 수 있습니다.