Feat/134 알림 클릭 시 예약 내역 페이지로 이동 #135
Conversation
Walkthrough알림(Notification) 카드와 관련된 컴포넌트 전반에 걸쳐 클릭 시 알림 삭제 및 페이지 이동 기능이 추가되었습니다. 주요 변경점은 NotificationCard에 onCardClick 프로퍼티와 비동기 삭제 로직이 도입되고, 이 클릭 핸들러가 상위 컴포넌트(NotificationCardList, NotificationDropdown)까지 전달되도록 확장된 것입니다. 삭제 실패 시 토스트 에러도 표시됩니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant NotificationCard
participant useDeleteNotification
participant Router
participant Toast
User->>NotificationCard: 카드 클릭
NotificationCard->>useDeleteNotification: mutateAsync(알림 삭제)
alt 삭제 성공
useDeleteNotification-->>NotificationCard: 성공 응답
NotificationCard->>Router: /mypage/reservations로 이동
NotificationCard->>상위 onCardClick: (옵션) 콜백 호출
else 삭제 실패
useDeleteNotification-->>NotificationCard: 에러 응답
NotificationCard->>Toast: 에러 토스트 표시
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Possibly related issues
Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (4)
src/components/Notification/NotificationCard.tsx(6 hunks)src/components/Notification/NotificationCardList.tsx(3 hunks)src/components/Notification/NotificationDropdown.tsx(1 hunks)src/hooks/useDeleteNotification.ts(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/Notification/NotificationCard.tsx (3)
src/hooks/useDeleteNotification.ts (1)
useDeleteNotification(37-49)src/lib/utils.ts (1)
cn(4-6)src/utils/relativeTime.ts (1)
relativeTime(1-15)
🪛 Biome (2.1.2)
src/components/Notification/NotificationCard.tsx
[error] 126-128: Static Elements should not be interactive.
To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
(lint/a11y/noStaticElementInteractions)
[error] 126-128: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 114-120: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
🔇 Additional comments (5)
src/hooks/useDeleteNotification.ts (1)
3-3: 에러 처리 개선이 잘 구현되었습니다.토스트 알림을 통한 에러 피드백 추가로 사용자 경험이 향상되었습니다.
sonner라이브러리 사용도 코드베이스의 다른 부분과 일관성을 유지하고 있습니다.Also applies to: 45-47
src/components/Notification/NotificationDropdown.tsx (1)
71-74: 알림 카드 클릭 시 드롭다운 닫기 기능이 적절히 구현되었습니다.
onCardClickprop을 통해 알림 카드 클릭 시 드롭다운이 자동으로 닫히도록 하는 깔끔한 연결이 구현되었습니다.src/components/Notification/NotificationCardList.tsx (1)
11-11: Props 전달 구조가 적절히 설계되었습니다.
onCardClickprop이 optional로 설계되어 유연성을 제공하고, 각NotificationCard에 일관되게 전달되는 구조가 잘 구현되었습니다.Also applies to: 30-30, 148-148
src/components/Notification/NotificationCard.tsx (2)
7-8: 새로운 기능 구현이 잘 되었습니다.라우터 네비게이션과 에러 처리를 위한 import 추가,
onCardClickprop 추가, 그리고 비동기 삭제를 위한mutateAsync사용이 적절히 구현되었습니다.Also applies to: 17-17, 58-59
74-85: 비동기 카드 클릭 핸들러가 잘 구현되었습니다.알림 삭제, 콜백 호출, 페이지 네비게이션이 순차적으로 처리되고, 에러 발생 시 적절한 토스트 메시지를 표시하는 로직이 잘 구현되었습니다.
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| setTimeout(() => { | ||
| e.stopPropagation(); | ||
| handleDelete(); | ||
| }, 0); | ||
| }} |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
버튼 타입을 명시해주세요.
정적 분석 도구에서 지적한 대로, button 요소에 명시적인 type을 지정해야 합니다.
다음과 같이 수정해주세요:
<button
+ type="button"
onClick={(e) => {
e.stopPropagation();
setTimeout(() => {
handleDelete();
}, 0);
}}
aria-label='알림 삭제'
>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| onClick={(e) => { | |
| e.stopPropagation(); | |
| setTimeout(() => { | |
| e.stopPropagation(); | |
| handleDelete(); | |
| }, 0); | |
| }} | |
| <button | |
| type="button" | |
| onClick={(e) => { | |
| e.stopPropagation(); | |
| setTimeout(() => { | |
| handleDelete(); | |
| }, 0); | |
| }} | |
| aria-label='알림 삭제' | |
| > |
🤖 Prompt for AI Agents
In src/components/Notification/NotificationCard.tsx around lines 99 to 104, the
button element lacks an explicit type attribute, which can cause unintended form
submissions. Add a type="button" attribute to the button element to explicitly
specify its behavior and prevent default form submission.
| <div className='cursor-pointer' onClick={handleCardClick}> | ||
| <p className='text-md font-regular whitespace-pre-line text-black'> | ||
| {formattedContent.split(/(승인|거절)/).map((text, i) => { | ||
| const matchedStatus = statusKeywordMap[text]; | ||
| return ( | ||
| <span | ||
| key={i} | ||
| className={cn( | ||
| matchedStatus && statusColorMap[matchedStatus].text, | ||
| )} | ||
| > | ||
| {text} | ||
| </span> | ||
| ); | ||
| })} | ||
| </p> | ||
|
|
||
| <p className='mt-4 text-xs text-gray-600'>{relativeTime(createdAt)}</p> | ||
| <p className='mt-4 text-xs text-gray-600'>{relativeTime(createdAt)}</p> | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
접근성 개선이 필요합니다.
클릭 가능한 div 요소에 적절한 접근성 속성을 추가해야 합니다. 키보드 네비게이션 지원과 적절한 역할(role)을 제공해주세요.
다음과 같이 수정해주세요:
- <div className='cursor-pointer' onClick={handleCardClick}>
+ <div
+ className='cursor-pointer'
+ onClick={handleCardClick}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleCardClick();
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ aria-label="알림 확인 및 예약 내역으로 이동"
+ >📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className='cursor-pointer' onClick={handleCardClick}> | |
| <p className='text-md font-regular whitespace-pre-line text-black'> | |
| {formattedContent.split(/(승인|거절)/).map((text, i) => { | |
| const matchedStatus = statusKeywordMap[text]; | |
| return ( | |
| <span | |
| key={i} | |
| className={cn( | |
| matchedStatus && statusColorMap[matchedStatus].text, | |
| )} | |
| > | |
| {text} | |
| </span> | |
| ); | |
| })} | |
| </p> | |
| <p className='mt-4 text-xs text-gray-600'>{relativeTime(createdAt)}</p> | |
| <p className='mt-4 text-xs text-gray-600'>{relativeTime(createdAt)}</p> | |
| </div> | |
| <div | |
| className='cursor-pointer' | |
| onClick={handleCardClick} | |
| onKeyDown={(e) => { | |
| if (e.key === 'Enter' || e.key === ' ') { | |
| e.preventDefault(); | |
| handleCardClick(); | |
| } | |
| }} | |
| role="button" | |
| tabIndex={0} | |
| aria-label="알림 확인 및 예약 내역으로 이동" | |
| > | |
| <p className='text-md font-regular whitespace-pre-line text-black'> | |
| {formattedContent.split(/(승인|거절)/).map((text, i) => { | |
| const matchedStatus = statusKeywordMap[text]; | |
| return ( | |
| <span | |
| key={i} | |
| className={cn( | |
| matchedStatus && statusColorMap[matchedStatus].text, | |
| )} | |
| > | |
| {text} | |
| </span> | |
| ); | |
| })} | |
| </p> | |
| <p className='mt-4 text-xs text-gray-600'>{relativeTime(createdAt)}</p> | |
| </div> |
🧰 Tools
🪛 Biome (2.1.2)
[error] 126-128: Static Elements should not be interactive.
To add interactivity such as a mouse or key event listener to a static element, give the element an appropriate role value.
(lint/a11y/noStaticElementInteractions)
[error] 126-128: Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
(lint/a11y/useKeyWithClickEvents)
[error] 114-120: Provide an explicit type prop for the button element.
The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
(lint/a11y/useButtonType)
🤖 Prompt for AI Agents
In src/components/Notification/NotificationCard.tsx around lines 111 to 129, the
clickable div lacks accessibility features. Replace the div with a button
element or add role="button", tabIndex="0", and keyboard event handlers (e.g.,
onKeyDown for Enter and Space keys) to support keyboard navigation and screen
readers. This will ensure the element is focusable and operable via keyboard,
improving accessibility.
BokyungCodes
left a comment
BokyungCodes
left a comment
There was a problem hiding this comment.
요구사항 아닌데 사용자 편의를 위해 잘 작동되게 해주신 것 같아요! 굿입니다👍
LeeCh0129
left a comment
LeeCh0129
left a comment
There was a problem hiding this comment.
밤늦게까지 고생하셨습니다! 드디어 내일이면 끝이네요. 마지막까지 화이팅입니다!
📌 변경 사항 개요
알림 클릭 시 예약 내역 페이지로 이동
📝 상세 내용
알림 내역을 클릭하면 예약 내역으로 이동 하도록 구현했습니다. 이동 시 해당 알림은 삭제 됩니다.
이동 시 드롭다운은 자동으로 닫히게 했습니다.
🔗 관련 이슈
🖼️ 스크린샷(선택사항)
💡 참고 사항
Summary by CodeRabbit
신규 기능
버그 수정
기타