3.3 KiB
3.3 KiB
국제화(i18n) 도입 계획
목표
- Vue 2 + Vuetify 2 기반에서 한국어(ko), 영어(en), 일본어(ja) 3개 언어를 지원한다.
- 브라우저 설정을 기본 로케일로 사용하되, 사용자가 선택한 언어가 있으면(localStorage) 그 값을 우선한다.
체크리스트
- vue-i18n v8 도입 및 기본 설정(
src/i18n/index.js) - 리소스 파일 생성(
src/locales/ko.json,src/locales/en.json,src/locales/ja.json) - Vuetify 언어팩 연동(
src/plugins/vuetify.js) 및 초기 로케일 동기화 main.js에서 vue-i18n ↔ Vuetify 로케일 동기화 로직 추가- 공통 컴포넌트 문자열 치환(네비/레이아웃/다이얼로그)
src/components/SideMenu.vue로그아웃/에러/기본 메뉴 텍스트 치환src/App.vue앱바 타이틀 치환 및 언어 드롭다운 추가
- 주요 뷰(
views/Agent/*) 1차 치환 - 날짜/숫자/통화 포맷 정책 적용(ja: JPY 소수점 미사용 등)
- 하드코딩 탐지/미번역 키 점검(정규식 스캔 + missing 핸들러)
- 언어 전환 UX(드롭다운) 및 영속 저장(localStorage)
키 네이밍 규칙
- 네임스페이스 기반:
common.*,comp.*,view.* - 예)
common.logout,common.error.unknown,comp.sideMenu.calc.live
개발 메모
- 서버 메뉴가 비어 기본 메뉴를 사용하는 분기는 i18n 키를 사용하도록 업데이트함.
- 서버에서 전달되는 텍스트는 과도기적으로 기존 값을 그대로 사용하며, 추후 서버가 키를 전달하도록 협업 예정.
검증 기록
1차 준비 (2026-05-08)
- 무엇을: i18n 인프라 파일 추가, Vuetify 언어팩 연동, SideMenu 일부 치환
- 왜: 하드코딩 텍스트를 다국어로 전환하기 위한 기반 마련
- 어떻게:
- 실행 명령: (로컬)
npm i후npm run serve예정 - 결과: 아직 실행 전. 의존성 설치 및 로컬 실행 시에 확인 예정
- 보완: 언어 전환 UI/UX 및 나머지 화면 치환, 하드코딩 스캔 적용 예정
- 실행 명령: (로컬)
2차 구현 (2026-05-08)
- 무엇을: 공통 레이아웃(App 바) 및 주요 뷰(Agents/Creators, Calculate/*) 문자열 i18n 치환, 숫자/통화 포맷 적용, 언어 드롭다운 추가, 하드코딩 스캔 스크립트 추가
- 왜: 다국어 전환 시 모든 핵심 화면이 정상 동작하고, 통화/숫자 포맷(특히 JPY 무소수)이 일관되게 표시되도록 하기 위함
- 어떻게:
- 실행 명령 1:
npm run i18n:scan- 기대 결과: 남아있는 한/일문 하드코딩 라인 목록 출력(없다면 빈 결과). 개발 중 점검용으로 유지.
- 실행 명령 2:
npm run serve후 브라우저에서 App 바의 언어 드롭다운으로ko/en/ja전환- 확인 항목: App 타이틀/사이드메뉴/툴바/테이블 헤더/합계 행 텍스트가 즉시 해당 언어로 변경됨 ✓
- 실행 명령 3: 각 정산 화면의 합계/금액 컬럼 확인
- 확인 항목: en=USD 통화기호/소수 2자리, ko=KRW 소수 0자리, ja=JPY 소수 0자리로
$n(..., 'currency')표기 ✓
- 확인 항목: en=USD 통화기호/소수 2자리, ko=KRW 소수 0자리, ja=JPY 소수 0자리로
- 오류 핸들링: API 실패 시 공통 메시지
common.error.unknown사용, 목록 실패 시common.error.fetchFailed사용 ✓ - Vuetify 동기화: 언어 전환 시 Vuetify locale이 함께 변경되는지 확인(메시지/레이블) ✓
- 실행 명령 1: