[Feat] 알림페이지 Header 제작 #251
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 요약알림 페이지에 새로운 NotificationHeader 컴포넌트를 추가했습니다. 이 컴포넌트는 뒤로가기 버튼이 있는 sticky 헤더를 렌더링하며, 알림 페이지에 통합되어 공개 API로 내보내집니다. 변경사항
예상 코드 리뷰 노력🎯 2 (Simple) | ⏱️ ~10 분 제안된 검토자
시
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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 |
🎨 Storybook Report✅ 변경 사항이 없습니다 모든 Story가 이전 빌드와 동일합니다.
|
🎭 Playwright Report✨ E2E Test가 성공적으로 완료되었습니다. Test 요약 내용을 확인해주세요.
📊 Test Summary
📜 Test Details✅ Passed Tests (3)
|
📊 Coverage Report
📉 #251을 main에 병합하면 coverage가 Coverage 요약@@ Coverage Diff @@
## main #251 +/- ##
===========================================
- Coverage 38.07% 37.94% -0.13%
===========================================
Files 184 185 +1
Lines 7922 7948 +26
Branches 359 360 +1
===========================================
Hits 3016 3016 0
+ Misses 4906 4932 +26 영향받은 파일✅ 이 PR로 영향받은 파일이 없습니다 수정된 모든 파일이 현재 coverage를 유지했습니다. |
🚀 PR Preview Report✨ Build가 성공적으로 완료되었습니다. Preview에서 변경사항을 확인하세요.
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/pages/notification/notification-header/index.tsx (1)
14-25: 의미론적 HTML 개선을 고려하세요.현재 구조는 작동하지만, 뒤로가기 버튼을 실제
<button>엘리먼트로 감싸는 것이 더 나은 접근성과 의미론적 HTML을 제공합니다. 이렇게 하면 브라우저의 기본 키보드 동작을 자동으로 얻을 수 있습니다.🔎 대안 구현
return ( <nav className='bg-mono-white flex-center sticky top-14 z-10 h-12 border-b-1 border-gray-200'> - <Icon - id='chevron-left-2' - className='absolute left-5 size-6 cursor-pointer rounded-md text-gray-500 transition-colors duration-300 hover:bg-gray-100 active:bg-gray-100' - aria-label='뒤로 가기' - role='button' - onClick={handleHistoryBackClick} - /> + <button + onClick={handleHistoryBackClick} + className='absolute left-5 cursor-pointer rounded-md p-0 transition-colors duration-300 hover:bg-gray-100 active:bg-gray-100' + aria-label='뒤로 가기' + > + <Icon + id='chevron-left-2' + className='size-6 text-gray-500' + /> + </button> <h2 className='text-text-md-bold text-gray-800'>알림</h2> </nav> );
📜 Review details
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/notification/page.tsxsrc/components/pages/notification/index.tssrc/components/pages/notification/notification-header/index.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-17T09:40:37.733Z
Learnt from: HopeFullee
Repo: WeGo-Together/WeGo_FrontEnd PR: 205
File: src/components/pages/post-meetup/fields/cap-field/index.tsx:47-47
Timestamp: 2025-12-17T09:40:37.733Z
Learning: In TanStack Form with Zod validation, when field.state.meta.isValid is false, field.state.meta.errors is guaranteed to have at least one entry. Therefore, in an isInvalid check defined as field.state.meta.isTouched && !field.state.meta.isValid, safely access field.state.meta.errors[0] without extra null/empty checks. This guideline applies to TSX form fields under src/components/pages (and similar forms using the same pattern).
Applied to files:
src/components/pages/notification/notification-header/index.tsx
🧬 Code graph analysis (1)
src/app/notification/page.tsx (2)
src/components/pages/notification/notification-header/index.tsx (1)
NotificationHeader(6-26)src/components/pages/notification/index.ts (1)
NotificationHeader(2-2)
🔇 Additional comments (4)
src/components/pages/notification/index.ts (1)
2-2: LGTM! 표준 re-export 패턴입니다.NotificationHeader를 공개 API로 노출하는 깔끔한 구현입니다.
src/app/notification/page.tsx (2)
3-3: LGTM! import가 올바르게 추가되었습니다.NotificationHeader 컴포넌트를 올바르게 import하고 있습니다.
13-13: LGTM! 헤더 배치가 적절합니다.NotificationHeader가 페이지 상단에 올바르게 렌더링되고 있습니다.
src/components/pages/notification/notification-header/index.tsx (1)
1-4: LGTM! import가 적절합니다.필요한 의존성들이 올바르게 import되어 있으며, 'use client' 지시어도 적절히 사용되었습니다.
📝 변경 사항
알림페이지 Header를 제작했습니다.
🔗 관련 이슈
Closes #
🧪 테스트 방법
📸 스크린샷 (선택)
📋 체크리스트
💬 추가 코멘트
CodeRabbit Review는 자동으로 실행되지 않습니다.
Review를 실행하려면 comment에 아래와 같이 작성해주세요
Summary by CodeRabbit
새로운 기능
✏️ Tip: You can customize this high-level summary in your review settings.