[coli-geonwoo]

🚩 연관 이슈

closed #516

📝 작업 내용

공유 기능 안내 애니메이션을 최신 공지로 갱신하고, 공지 모달의 닫기 흐름과 레이아웃을 정리했습니다.

1. 공지 모달 하단 버튼 전환과 체크박스 개선 (b499029)

• 하단 버튼을 자세히 보기(Notion 페이지 열기)에서 닫기(모달 닫기)로 바꿨습니다.
• 이미지 전용 모드의 우측 상단 X 버튼을 없앴습니다. Esc 키와 오버레이 클릭으로도 계속 닫을 수 있습니다.
• 더 이상 쓰지 않는 코드를 정리했습니다.
  • 패치 노트의 link 필드
  • onClickDetailButton prop
  • 링크 오류 안내 문구와 번역 키(자세히 보기, 패치 노트 링크를 읽는 중 오류가 발생했습니다.)
• 일주일간 보지 않기 체크박스를 다시 디자인했습니다.
  • 브라우저 기본 체크박스 대신 직접 만든 체크박스를 씁니다. 체크하면 브랜드 색 배경에 체크 아이콘이 보입니다.
  • 마우스를 올리면 hover 상태가, 키보드로 이동하면 포커스 링이 보입니다.
  • 문구 띄어쓰기를 일주일 간에서 일주일간으로 고쳤습니다.

2. 공유 기능 안내 애니메이션 추가 (c6963b6)

• 공유 기능 안내 GIF를 무손실 WebP로 변환했습니다. 용량이 5.91MB에서 3.42MB로 42% 줄었고 화질은 같습니다.
• 파일은 기존 공지 이미지와 같은 src/assets/patchNote/0004_share.webp에 두었습니다.
• 한국어·영어 공지 모두 같은 이미지를 씁니다.
• 공지 버전을 0004로 올렸습니다. 이전 공지를 숨긴 사용자에게도 이번 공지가 다시 표시됩니다.
• 이미지를 src/assets에서 import하기 때문에 빌드 결과물 파일명에 해시가 붙습니다(assets/0004_share-[hash].webp). 그래서 브라우저가 오래 캐싱해도 안전합니다.

3. 이미지 전용 공지 레이아웃 (d36b45b)

• 문제: 모달이 정사각형으로 고정되어 있어서 이미지(1000×912)의 좌우에 흰 여백이 생겼습니다.
• 이미지 전용 모드에서만 정사각형 고정을 풀었습니다. 이제 이미지가 모달 너비를 꽉 채우고, 모달 높이는 이미지 비율을 따라갑니다.
• 모달 높이가 화면을 넘지 않도록 너비 상한을 80vh로 낮췄습니다.
• 닫기 버튼 높이는 고정 범위인 clamp(52px, min(4.18vw, 7.04vh), 68px)로 지정했습니다.
• predefined 모드는 기존 정사각형 레이아웃을 그대로 유지합니다.

검증

명령	결과
npx vitest run	59 files / 546 tests 통과
npm run lint	오류 0개. 경고 1개는 이번 변경 범위 밖인 src/util/sentry.test.ts의 Prettier 경고입니다
npm run build	성공

TDD로 진행했습니다. 아래 테스트를 먼저 추가하고 실패하는 것을 확인한 뒤 구현했습니다.

• 닫기 버튼이 하나만 있고 누르면 onClose를 호출하는지
• X 버튼이 없는지
• 닫기를 눌렀을 때 외부 페이지를 열지 않는지
• 체크박스가 토글되는지
• 체크한 뒤 닫으면 숨김 상태가 저장되는지
• 최신 공지가 WebP와 버전 0004를 쓰는지
• 이미지 전용 모드에서 이미지가 꽉 차는지, predefined 모드에서 정사각형이 유지되는지

🏞️ 스크린샷 (선택)

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

수동 확인

1. npm run dev를 실행하고 랜딩 페이지나 테이블 목록 페이지에 들어갑니다.
2. 공지가 이미 숨겨져 있다면 localStorage에서 update_notification_status를 지운 뒤 새로고침합니다.
3. 아래 동작을 확인합니다.
   • 이미지가 좌우 여백 없이 모달 너비를 채우는지
   • 하단 닫기를 누르면 모달이 닫히는지
   • 체크박스를 체크한 뒤 닫으면 새로고침해도 공지가 다시 뜨지 않는지

미해결 하 항목

• 배포 캐시 헤더: aws s3 sync에 Cache-Control을 지정하지 않아서, 브라우저 장기 캐싱이 브라우저 휴리스틱과 CloudFront 설정에 의존합니다. 확실히 하려면 별도 작업에서 dist/assets를 --cache-control "public,max-age=31536000,immutable"로 업로드해야 합니다.
• 이미지 용량: 3.42MB라 느린 네트워크에서는 처음 표시될 때 지연될 수 있습니다. 모달이 열릴 때만 요청하므로, 공지를 숨긴 사용자는 다운로드하지 않습니다.
• 낮은 화면 높이: 최소 너비 600px 때문에 화면 높이가 약 640px보다 작으면 모달이 화면을 넘을 수 있습니다. 기존 정사각형 레이아웃에도 같은 제약이 있었고, 이 경우에도 Esc 키와 오버레이 클릭으로 닫을 수 있습니다.
• Storybook: image-only 상태의 Story가 없습니다. 기존부터 없던 범위입니다.

🤖 Generated with Claude Code

Summary by CodeRabbit

• 개선 사항
  • 업데이트 모달의 패치 노트 표시 방식이 변경되었습니다. 미리 정의된 패치 노트는 정사각형 레이아웃으로, 이미지 전용 패치 노트는 높이를 제한한 레이아웃으로 표시됩니다.
  • 두 모달 유형 모두 하단에 ‘닫기’ 버튼이 표시됩니다. 이미지 전용 모달의 우측 상단 닫기 아이콘은 제거되었습니다.
  • 최신 패치 노트 이미지가 공유 기능 안내 이미지로 변경되었습니다.
• 번역
  • ‘일주일간 보지 않기’ 문구의 띄어쓰기를 수정했습니다. ‘자세히 보기’ 및 패치 노트 링크 오류 안내 문구는 제거되었습니다.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

• Configuration used: Organization UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: 8e87f9a1-da4b-4125-9c5a-c69865c31861

📥 Commits

Reviewing files that changed from the base of the PR and between 0d78d37 and d36b45b.

📒 Files selected for processing (10)

• public/locales/en/translation.json
• public/locales/ko/translation.json
• src/assets/patchNote/0004_share.webp
• 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.test.ts
• src/constants/patch_note.ts

 _____________________________
< I speak fluent stack trace. >
 -----------------------------
  \
   \   (\__/)
       (•ㅅ•)
       / 　 づ

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

🚀 Preview 배포 완료!

환경	URL
Preview	열기
API	Dev 환경

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

[github-actions]

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