[CHORE] 패치 노트 갱신#466
Conversation
Walkthrough패치노트 데이터가 한국어·영어별 필드로 변경되었습니다. UpdateModal은 현재 언어에 맞는 콘텐츠와 UI 번역을 표시하며, UpdateModalWrapper의 오류 알림과 닫기 처리가 번역 및 상태 저장 흐름에 연결되었습니다. 관련 스토리, 테스트와 로케일 항목이 추가되었습니다. Changes다국어 패치노트 흐름
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant UpdateModalWrapper
participant UpdateModal
participant i18next
UpdateModalWrapper->>UpdateModal: 패치노트 데이터 전달
UpdateModal->>i18next: 현재 언어와 UI 번역 조회
i18next-->>UpdateModal: 번역 문자열 반환
UpdateModal-->>UpdateModalWrapper: 언어별 콘텐츠 표시
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
🚀 Preview 배포 완료!
|
There was a problem hiding this comment.
Code Review
This pull request introduces internationalization (i18n) support for the UpdateModal component, allowing separate English and Korean assets, titles, and descriptions. It also adds comprehensive test suites for both UpdateModal and UpdateModalWrapper. The reviewer identified a potential issue where regional language codes (such as en-US) might fail the supported language check and fallback to Korean, and provided a code suggestion to extract the primary language code.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/UpdateModal/UpdateModal.test.tsx (1)
51-60: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win미지원 언어의 한국어 폴백도 검증하세요.
현재 도우미와 케이스는
ko | en만 허용해 PR 목표인 미지원 언어의 한국어 폴백을 검증하지 않습니다.ja같은 언어로 한국어 이미지와 문구가 표시되는 케이스를 추가해 주세요.Also applies to: 127-158
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/UpdateModal/UpdateModal.test.tsx` around lines 51 - 60, Update renderUpdateModal and its test cases to accept an unsupported language such as ja, then add coverage verifying that Korean image content and text are rendered through the configured fallbackLng when that language is selected. Preserve the existing ko and en cases.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/UpdateModal/UpdateModal.test.tsx`:
- Line 75: Update the top-level describe suite descriptions in
src/components/UpdateModal/UpdateModal.test.tsx:75-75 and
src/components/UpdateModal/UpdateModalWrapper.test.tsx:53-53 to Korean,
replacing the current English UpdateModal and UpdateModalWrapper descriptions
while preserving the test structure.
---
Nitpick comments:
In `@src/components/UpdateModal/UpdateModal.test.tsx`:
- Around line 51-60: Update renderUpdateModal and its test cases to accept an
unsupported language such as ja, then add coverage verifying that Korean image
content and text are rendered through the configured fallbackLng when that
language is selected. Preserve the existing ko and en cases.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 23fbf339-c8e6-4694-a4c3-061279ae9458
⛔ Files ignored due to path filters (2)
src/assets/patchNote/0003_en.pngis excluded by!**/*.pngsrc/assets/patchNote/0003_ko.pngis excluded by!**/*.png
📒 Files selected for processing (8)
public/locales/en/translation.jsonpublic/locales/ko/translation.jsonsrc/components/UpdateModal/UpdateModal.stories.tsxsrc/components/UpdateModal/UpdateModal.test.tsxsrc/components/UpdateModal/UpdateModal.tsxsrc/components/UpdateModal/UpdateModalWrapper.test.tsxsrc/components/UpdateModal/UpdateModalWrapper.tsxsrc/constants/patch_note.ts
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/components/UpdateModal/UpdateModalWrapper.test.tsx (1)
78-84: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value단일 요소를 찾을 때는
findByRole사용을 고려해 보세요.단일 요소가 존재하는지 확인할 때는
findAllByRole로 배열을 반환받아 길이를 검증하는 것보다, 단일 요소를 반환하는findByRole을 사용하는 것이 Testing Library의 더 관용적인(idiomatic) 패턴입니다. 조건에 일치하는 요소가 여러 개 발견되면findByRole이 자동으로 에러를 발생시켜 주므로 명시적인 길이 검증 로직을 생략할 수 있습니다.💡 제안하는 코드
- const closeButtons = await screen.findAllByRole('button', { - name: 'Close modal', - }); - - expect(closeButtons).toHaveLength(1); - - await user.click(closeButtons[0]); + const closeButton = await screen.findByRole('button', { + name: 'Close modal', + }); + + await user.click(closeButton);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/UpdateModal/UpdateModalWrapper.test.tsx` around lines 78 - 84, Update the close-button query in the test to use screen.findByRole instead of findAllByRole, remove the redundant length assertion, and pass the returned single element directly to user.click. Preserve the existing role and accessible name.src/components/UpdateModal/UpdateModal.test.tsx (1)
214-236: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
renderUpdateModal헬퍼 함수를 재사용하여 중복 코드를 제거하세요.현재 이 테스트 블록 내에서
i18n인스턴스를 초기화하고UpdateModal을 렌더링하는 코드가 상단에 정의된renderUpdateModal헬퍼 함수와 거의 동일합니다. 헬퍼 함수가 선택적으로 커스텀onClose콜백을 전달받을 수 있도록 수정하면 설정 부분의 코드 중복을 크게 줄일 수 있습니다.♻️ 리팩토링 제안
먼저 파일 상단의
renderUpdateModal함수를 다음과 같이 수정하여 추가 옵션을 받을 수 있게 변경하세요:async function renderUpdateModal( data: PredefinedPatchNoteData | ImageOnlyPatchNoteData, language: 'ko' | 'en', options?: { onClose?: () => void } ) { const i18n = createInstance(); await i18n.init({ lng: language, fallbackLng: 'ko', supportedLngs: ['ko', 'en'], resources: translations, }); return render( <I18nextProvider i18n={i18n}> <UpdateModal data={data} isChecked={false} onChecked={vi.fn()} onClose={options?.onClose ?? vi.fn()} onClickDetailButton={vi.fn()} /> </I18nextProvider>, ); }그리고 본 테스트 코드를 다음과 같이 간소화하세요:
- const user = userEvent.setup(); - const onClose = vi.fn(); - const i18n = createInstance(); - await i18n.init({ - lng: 'ko', - fallbackLng: 'ko', - supportedLngs: ['ko', 'en'], - resources: translations, - }); - - render( - <I18nextProvider i18n={i18n}> - <UpdateModal - data={imageOnlyPatchNote} - isChecked={false} - onChecked={vi.fn()} - onClose={onClose} - onClickDetailButton={vi.fn()} - /> - </I18nextProvider>, - ); + const user = userEvent.setup(); + const onClose = vi.fn(); + + await renderUpdateModal(imageOnlyPatchNote, 'ko', { onClose });🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/UpdateModal/UpdateModal.test.tsx` around lines 214 - 236, Update the existing renderUpdateModal helper to accept optional onClose configuration and use it when rendering UpdateModal, defaulting to a mock callback when omitted. Replace the duplicated i18n initialization and UpdateModal render setup in the image-only close-button test with renderUpdateModal, passing the test’s onClose mock through the new option.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/UpdateModal/UpdateModal.test.tsx`:
- Around line 214-236: Update the existing renderUpdateModal helper to accept
optional onClose configuration and use it when rendering UpdateModal, defaulting
to a mock callback when omitted. Replace the duplicated i18n initialization and
UpdateModal render setup in the image-only close-button test with
renderUpdateModal, passing the test’s onClose mock through the new option.
In `@src/components/UpdateModal/UpdateModalWrapper.test.tsx`:
- Around line 78-84: Update the close-button query in the test to use
screen.findByRole instead of findAllByRole, remove the redundant length
assertion, and pass the returned single element directly to user.click. Preserve
the existing role and accessible name.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 7e893fc1-78cb-4a5b-a7ca-dba5b46cdd8b
📒 Files selected for processing (5)
src/components/UpdateModal/UpdateModal.stories.tsxsrc/components/UpdateModal/UpdateModal.test.tsxsrc/components/UpdateModal/UpdateModal.tsxsrc/components/UpdateModal/UpdateModalWrapper.test.tsxsrc/components/UpdateModal/UpdateModalWrapper.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- src/components/UpdateModal/UpdateModal.stories.tsx
- src/components/UpdateModal/UpdateModalWrapper.tsx
- src/components/UpdateModal/UpdateModal.tsx
|
🧹 Preview 배포가 정리되었습니다. |

🚩 연관 이슈
closed #465
📝 작업 내용
패치 노트 갱신
버전
0003패치 노트의 한국어·영어 이미지와 최신 패치 노트 데이터를 반영했습니다.패치 노트 국제화
imageKo,imageEn)를 모두 제공하도록 변경했습니다.predefined모드의 제목과 설명도titleKo/titleEn,descriptionKo/descriptionEn으로 분리했습니다.image-only 모드 레이아웃 개선
일주일 간 보지 않기체크박스를 별도 행으로 분리했습니다.8.8%)가 줄어들지 않도록 처리했습니다.absolute,bottom,start등의 중첩 관련 스타일을 제거했습니다.문서화 및 테스트
predefined,image-only모드에서 언어별 이미지와 콘텐츠가 표시되는지 테스트했습니다.검증
npm run lint통과npm run build통과🏞️ 스크린샷 (선택)
🗣️ 리뷰 요구사항 (선택)
국문, 영문 전환 시 패치 노트 이미지 언어도 함께 전환되는지 확인 부탁드립니다!
Summary by CodeRabbit