feat: 영어 다국어 지원 및 툴팁 표시 개선

[tada-js]

변경 사항

• KO/EN 공통 i18n 런타임/메시지 체계 추가 (src/i18n/*) 및 앱 초기화 시 언어 감지/저장(localStorage)/문서 언어 반영 적용
• React UI 문자열(TopBar, LeftPanel, ResultModal, AppShell 등)과 런타임 메시지(문의/업로드 검증/토스트/PWA 업데이트)를 번역 키 기반으로 전환
• 상단바 KO/EN 토글 추가, 언어 전환 시 기본 참가자(동물) 이름/시스템 아바타 라벨 동기화
• 정적 페이지(offline, privacy-policy, pinball-game, pinball-ladder)에 KO/EN 토글 및 메타 전환 스크립트(public/static-page-i18n.js) 적용
• 영어 PWA manifest(public/manifest-en.webmanifest) 추가 및 index hreflang/manifest 동적 선택 반영
• 결과 버튼 툴팁 잘림 이슈 완화: 줄바꿈/폭 제한 및 위치 규칙 보정(최종: 하단 우측 기준)

검증

• npm run lint
• npm run typecheck
• npm test

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 다국어 지원 추가 (한국어, 영어)
  • 모든 페이지에 언어 전환 버튼 추가
  • 오프라인 페이지에 언어 선택 기능 추가

• 스타일

  • 언어 전환 버튼 UI 개선
  • 툴팁 표시 및 반응형 레이아웃 개선

• 기타

  • PWA 서비스 워커 업데이트로 로딩 성능 개선

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
degururu	Ready	Preview, Comment	Feb 19, 2026 5:55pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

애플리케이션에 포괄적인 국제화(i18n) 지원을 추가합니다. 한국어와 영어 메시지 매핑, 언어 감지 및 지속성, React 훅, 정적 페이지의 언어 전환 UI, 게임 로직의 언어 인식 볼 카탈로그를 구현합니다.

Changes

Cohort / File(s)	Summary
i18n 인프라 src/i18n/messages.ts, src/i18n/runtime.ts, src/i18n/react.ts	새로운 i18n 모듈을 추가하여 한국어/영어 메시지 맵, 언어 감지(URL/localStorage/navigator), 현재 언어 상태 관리, 문서 메타데이터 업데이트, React 훅을 통한 번역 함수 제공합니다.
정적 페이지 국제화 public/offline.html, public/pinball-game.html, public/pinball-ladder.html, public/privacy-policy.html, public/static-page-i18n.js	정적 HTML 페이지에 언어 전환 UI(KO/EN 버튼)를 추가하고, data-i18n 속성으로 콘텐츠를 표시합니다. 클라이언트 측 i18n 스크립트를 통해 런타임에 번역을 적용합니다.
PWA 및 메타 index.html, public/manifest-en.webmanifest, public/sw.js	언어 대체 링크를 index.html에 추가하고, 영어 웹 매니페스트를 생성하며, 서비스 워커 버전을 업그레이드하여 새로운 파일들을 미리 캐싱합니다.
게임 자산 및 흐름 src/game/assets.ts, src/app/game-flow-selectors.ts, src/app/result-presentation.ts	볼 카탈로그를 언어 파라미터로 동적 생성하도록 리팩터링하고, 상태 레이블과 기본 캡션을 번역 함수로 대체합니다.
앱 부트스트랩 및 유틸리티 src/main.tsx, src/app/create-game-app.ts, src/app/image-upload-policy.ts, src/app/ui-store.ts	앱 초기화 중 i18n을 설정하고, 하드코딩된 에러 메시지/레이블을 번역 함수로 대체하며, 언어 변경 시 카탈로그를 동적으로 재지역화합니다.
React 컴포넌트 src/ui-react/AppShell.tsx, src/ui-react/components/TopBar.tsx, src/ui-react/components/LeftPanel.tsx, src/ui-react/components/GameCanvasStage.tsx, src/ui-react/components/Modal.tsx, src/ui-react/components/modals/ResultModal.tsx	useI18n 훅을 사용하여 모든 사용자 인터페이스 텍스트(레이블, 제목, 플레이스홀더, ARIA 속성)를 번역 키로 대체합니다. TopBar에 언어 토글 버튼을 추가합니다.
UI 제어 로직 src/ui/catalog-controller.js, src/ui/coord-mode-controller.js, src/ui/inquiry.js, src/ui/minimap-controller.js, src/ui/storage.js	볼 카탈로그를 getBallLibrary() 동적 호출로 업데이트하고, relocalizeCatalog() 메서드를 추가하며, 하드코딩된 메시지들을 번역 함수로 대체합니다.
스타일링 styles.css	언어 버튼(.topbar__lang.btn)의 스타일을 추가하고, 툴팁 위치와 너비 제약을 조정하여 다국어 텍스트를 지원합니다.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant App
    participant I18nRuntime as I18n Runtime
    participant Storage as localStorage
    participant DOM

    User->>App: 앱 시작
    App->>I18nRuntime: initializeI18n()
    I18nRuntime->>Storage: 저장된 언어 확인
    I18nRuntime->>I18nRuntime: URL 파라미터 검사
    I18nRuntime->>I18nRuntime: navigator.language 기본값
    I18nRuntime->>Storage: 초기 언어 저장
    I18nRuntime->>DOM: document.lang 설정
    I18nRuntime->>DOM: meta/OG 태그 업데이트
    App->>App: 앱 초기화 완료

    User->>DOM: 언어 전환 버튼 클릭
    DOM->>I18nRuntime: setCurrentLanguage(nextLang)
    I18nRuntime->>Storage: 언어 저장
    I18nRuntime->>DOM: document.lang 업데이트
    I18nRuntime->>DOM: 메타데이터 재설정
    I18nRuntime->>App: 언어 변경 알림
    App->>App: 카탈로그 재지역화
    App->>DOM: UI 텍스트 업데이트
    App->>User: 새 언어로 렌더링

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

• PR #64: src/app/create-game-app.ts의 DEFAULT_START_CAPTION 초기화 로직을 공유하며, 정적 상수를 i18n 기반 함수로 대체하는 변경이 겹칩니다.
• PR #75: public/pinball-game.html, public/pinball-ladder.html과 같은 정적 페이지를 수정하는데, 검색 엔진 최적화를 위해 먼저 추가한 후 이 PR에서 i18n 언어 전환 UI를 추가합니다.
• PR #21: src/ui/catalog-controller.js와 src/app/create-game-app.ts의 카탈로그/부트스트랩 로직을 수정하며, 이 PR에서 추가된 i18n/relocalizeCatalog 기능과 직접 연관됩니다.

✨ Finishing Touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/i18n-en-full-support

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}