Skip to content

[CHORE] 패치 노트 갱신#466

Merged
i-meant-to-be merged 6 commits into
developfrom
feat/#465
Jul 19, 2026
Merged

[CHORE] 패치 노트 갱신#466
i-meant-to-be merged 6 commits into
developfrom
feat/#465

Conversation

@i-meant-to-be

@i-meant-to-be i-meant-to-be commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

🚩 연관 이슈

closed #465

📝 작업 내용

패치 노트 갱신

세부 내용 확인!

버전 0003 패치 노트의 한국어·영어 이미지와 최신 패치 노트 데이터를 반영했습니다.

패치 노트 국제화

  • 패치 노트 데이터가 한국어와 영어 이미지(imageKo, imageEn)를 모두 제공하도록 변경했습니다.
  • predefined 모드의 제목과 설명도 titleKo/titleEn, descriptionKo/descriptionEn으로 분리했습니다.
  • 현재 i18n 언어에 맞는 이미지, 제목, 설명을 표시하고 지원하지 않는 언어는 한국어로 대체합니다.
  • 업데이트 안내, 이미지 대체 텍스트, 일주일간 숨김, 상세 보기, 링크 오류 메시지를 번역 리소스로 이동했습니다.

image-only 모드 레이아웃 개선

  • 이미지 위에 겹쳐 있던 일주일 간 보지 않기 체크박스를 별도 행으로 분리했습니다.
  • 이미지 → 체크박스 → 자세히 보기 버튼 순서의 세로 레이아웃으로 변경했습니다.
  • 이미지 영역은 남은 공간을 사용하고, 자세히 보기 버튼은 기존 높이(8.8%)가 줄어들지 않도록 처리했습니다.
  • 체크박스 배치에 사용하던 absolute, bottom, start 등의 중첩 관련 스타일을 제거했습니다.

문서화 및 테스트

  • Storybook 데이터를 새로운 ko/en 패치 노트 타입에 맞게 갱신했습니다.
  • predefined, image-only 모드에서 언어별 이미지와 콘텐츠가 표시되는지 테스트했습니다.
  • image-only 모드에서 이미지, 체크박스, 상세 버튼이 겹치지 않고 순서대로 배치되는지 테스트했습니다.
  • 패치 노트 링크가 없을 때 현재 언어로 오류를 안내하는지 테스트했습니다.

검증

  • npm run lint 통과
  • 전체 테스트 통과: 33개 파일, 194개 테스트
  • npm run build 통과

🏞️ 스크린샷 (선택)

  • 별도 첨부 없음

🗣️ 리뷰 요구사항 (선택)

국문, 영문 전환 시 패치 노트 이미지 언어도 함께 전환되는지 확인 부탁드립니다!

Summary by CodeRabbit

  • 새 기능
    • 업데이트 알림 및 패치 노트 모달이 한국어와 영어를 지원합니다.
    • 언어에 맞춰 이미지, 제목, 설명뿐 아니라 “일주일 간 보지 않기”, “자세히 보기” 등의 안내 문구와 버튼이 표시됩니다.
  • 버그 수정
    • 패치 노트 링크를 불러오지 못할 때, 선택된 언어에 맞는 오류 안내가 표시됩니다.

@i-meant-to-be
i-meant-to-be requested a review from useon July 15, 2026 10:56
@i-meant-to-be i-meant-to-be self-assigned this Jul 15, 2026
@i-meant-to-be i-meant-to-be added refactor 기능 변경 없이 코드만 변경했을 경우 chore 파일 내부가 아닌 파일 자체에 대한 변경 (디렉토리 이동, 파일 이름 변경, 파일 삭제 등) labels Jul 15, 2026
@coderabbitai

coderabbitai Bot commented Jul 15, 2026

Copy link
Copy Markdown

Review Change Stack

Walkthrough

패치노트 데이터가 한국어·영어별 필드로 변경되었습니다. UpdateModal은 현재 언어에 맞는 콘텐츠와 UI 번역을 표시하며, UpdateModalWrapper의 오류 알림과 닫기 처리가 번역 및 상태 저장 흐름에 연결되었습니다. 관련 스토리, 테스트와 로케일 항목이 추가되었습니다.

Changes

다국어 패치노트 흐름

Layer / File(s) Summary
언어별 패치노트 스키마와 최신 데이터
src/constants/patch_note.ts
패치노트 인터페이스와 LATEST_PATCH_NOTE가 한국어·영어별 이미지 및 텍스트 필드를 사용하도록 변경되었습니다.
언어별 모달 렌더링
src/components/UpdateModal/UpdateModal.tsx, src/components/UpdateModal/UpdateModal.stories.tsx, src/components/UpdateModal/UpdateModal.test.tsx
모달이 현재 언어에 따라 이미지, 제목, 설명과 UI 문구를 렌더링하며, 스토리와 테스트가 새 구조 및 image-only 모달 상태를 검증합니다.
링크 오류 번역과 통합 검증
src/components/UpdateModal/UpdateModalWrapper.tsx, src/components/UpdateModal/UpdateModalWrapper.test.tsx, public/locales/*/translation.json
패치노트 링크 오류 알림과 닫기 처리를 번역 키 및 핸들러로 연결하고, 오류 표시·모달 제거·상태 저장을 테스트합니다.

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: 언어별 콘텐츠 표시
Loading

Possibly related PRs

Suggested reviewers: useon

Poem

당근 문 토끼가 새 소식을 펼치네
한국어, 영어 이미지 반짝이네
“자세히 보기” 번역도 노래하고
닫기 버튼 깡충, 상태를 남기고
오류 알림도 알맞게 말하네
패치노트 완료! 🐇

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 20.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 패치 노트 갱신이라는 핵심 변경을 간결하게 잘 요약합니다.
Linked Issues check ✅ Passed 연결 이슈 #465의 요구인 패치노트 갱신을 이미지, 데이터, 번역, UI, 테스트까지 반영해 충족합니다.
Out of Scope Changes check ✅ Passed 요약된 변경은 모두 업데이트 모달과 패치노트 갱신 범위 안에 있어 보이는 별도 변경은 없습니다.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/#465

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

Copy link
Copy Markdown

🚀 Preview 배포 완료!

환경 URL
Preview 열기
API Dev 환경

PR이 닫히면 자동으로 정리됩니다.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment thread src/components/UpdateModal/UpdateModal.tsx

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

📥 Commits

Reviewing files that changed from the base of the PR and between 7cf90bf and 9233e32.

⛔ Files ignored due to path filters (2)
  • src/assets/patchNote/0003_en.png is excluded by !**/*.png
  • src/assets/patchNote/0003_ko.png is excluded by !**/*.png
📒 Files selected for processing (8)
  • public/locales/en/translation.json
  • public/locales/ko/translation.json
  • src/components/UpdateModal/UpdateModal.stories.tsx
  • src/components/UpdateModal/UpdateModal.test.tsx
  • src/components/UpdateModal/UpdateModal.tsx
  • src/components/UpdateModal/UpdateModalWrapper.test.tsx
  • src/components/UpdateModal/UpdateModalWrapper.tsx
  • src/constants/patch_note.ts

Comment thread src/components/UpdateModal/UpdateModal.test.tsx

@useon useon left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

숀 ! 패치노트 언어별로 잘 동작 하는 것 확인 했습니다!! 다만 그 모달 안에 여백 없이 꽉 들어가 보여서 닫기 버튼 있는 영역까지 올라가 있더라고요. 이 부분만 좀 개선되면 좋을 것 같아요 ! 미리 어프루브 합니다 감사합니다 !

Image

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 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

📥 Commits

Reviewing files that changed from the base of the PR and between 9233e32 and 0568bd1.

📒 Files selected for processing (5)
  • src/components/UpdateModal/UpdateModal.stories.tsx
  • src/components/UpdateModal/UpdateModal.test.tsx
  • src/components/UpdateModal/UpdateModal.tsx
  • src/components/UpdateModal/UpdateModalWrapper.test.tsx
  • src/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

@i-meant-to-be
i-meant-to-be merged commit 2bb54aa into develop Jul 19, 2026
3 checks passed
@github-actions

Copy link
Copy Markdown

🧹 Preview 배포가 정리되었습니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

chore 파일 내부가 아닌 파일 자체에 대한 변경 (디렉토리 이동, 파일 이름 변경, 파일 삭제 등) refactor 기능 변경 없이 코드만 변경했을 경우

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[CHORE] 패치노트 갱신

2 participants