예약 내역 페이지 QA 내용 수정 #213
Merged
예약 내역 페이지 QA 내용 수정 #213
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Closed
📝 WalkthroughWalkthrough예약 목록 페이지에서 필터 상태에 타입을 추가하고, 상태별 결과 없음 메시지를 상수로 분리하였으며, 로딩 시 스피너 아이콘을 도입했습니다. 리뷰 모달의 닫기 핸들러를 함수로 분리하고, 에러 메시지 표시를 개선했습니다. 별점 컴포넌트의 아이콘 크기와 간격도 조정되었습니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ReservationsListPage
participant SpinIcon
participant ReviewModal
User->>ReservationsListPage: 방문 및 필터 선택
ReservationsListPage->>SpinIcon: 로딩 중 표시
ReservationsListPage-->>User: 예약 목록/결과 없음 메시지 표시
User->>ReservationsListPage: 리뷰 버튼 클릭
ReservationsListPage->>ReviewModal: 리뷰 모달 오픈
User->>ReviewModal: 리뷰 작성 및 제출
ReviewModal->>ReservationsListPage: 리뷰 제출 결과 전달
ReservationsListPage-->>User: 성공/에러 메시지 표시
User->>ReviewModal: 모달 닫기
ReviewModal->>ReservationsListPage: 상태 초기화(handleCloseReviewModal)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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
Documentation and Community
|
|
🚀 오늘뭐해 Preview Deploy 완료! |
![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.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/what-today/src/pages/mypage/reservations-list/index.tsx(10 hunks)packages/design-system/src/components/StarRating.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (12)
📓 Common learnings
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#77
File: apps/what-today/src/pages/mypage/manage-activities/index.tsx:50-63
Timestamp: 2025-07-19T01:23:56.149Z
Learning: User kjhyun0830 follows an incremental development approach in What-Today project, implementing UI first and adding functionality in later iterations, as confirmed in PR #77 for the experience management page.
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#119
File: apps/what-today/src/pages/mypage/edit-profile/index.tsx:63-92
Timestamp: 2025-07-24T08:30:12.556Z
Learning: MyungJiwoo indicated they will implement validation checks for the edit profile page (password confirmation validation) immediately after PR #119 is merged, following their incremental development approach.
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#129
File: apps/what-today/src/pages/mypage/reservations-list/index.tsx:13-25
Timestamp: 2025-07-24T19:36:15.516Z
Learning: HarrySeop은 What-Today 프로젝트에서 API 에러 처리를 토스터(toast notification)로 처리하는 방식을 선호하며, 핸들러 함수 구현 시점에 함께 연결하는 접근 방식을 취함.
📚 Learning: packages/design-system/src/components/datepicker.tsx에서 taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#125
File: packages/design-system/src/components/DatePicker.tsx:25-28
Timestamp: 2025-07-24T13:33:33.202Z
Learning: packages/design-system/src/components/DatePicker.tsx에서 Taeil08은 sr-only 클래스를 가진 div 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
Applied to files:
packages/design-system/src/components/StarRating.tsx
📚 Learning: in the button component (packages/design-system/src/components/button/index.tsx), the children filte...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:63-70
Timestamp: 2025-07-15T16:38:40.310Z
Learning: In the Button component (packages/design-system/src/components/button/index.tsx), the children filtering logic that only allows strings and Icon components is intentional design decision by HarrySeop. The validChildren filter is meant to restrict button content to only text strings and Icon components for consistency and to prevent component misuse.
Applied to files:
packages/design-system/src/components/StarRating.tsx
📚 Learning: in packages/design-system/src/components/button/index.tsx, harryseop uses handleclick wrapper for se...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#53
File: packages/design-system/src/components/button/index.tsx:32-41
Timestamp: 2025-07-16T06:51:15.152Z
Learning: In packages/design-system/src/components/button/index.tsx, HarrySeop uses handleClick wrapper for security purposes to prevent execution when users remove disabled attributes via developer tools. The onClick handler should be extracted from rest props before spreading to avoid being overwritten.
Applied to files:
packages/design-system/src/components/StarRating.tsxapps/what-today/src/pages/mypage/reservations-list/index.tsx
📚 Learning: the mainpage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#43
File: apps/what-today/src/pages/main/index.tsx:7-7
Timestamp: 2025-07-14T13:36:17.941Z
Learning: The MainPage component in apps/what-today/src/pages/main/index.tsx contains placeholder/example code that will be modified later, including the fixed height class 'h-1400' which the user indicated is temporary.
Applied to files:
packages/design-system/src/components/StarRating.tsxapps/what-today/src/pages/mypage/reservations-list/index.tsx
📚 Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 reservationstatus 타입이 calendar/index.ts에서 re-export...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#91
File: apps/what-today/src/pages/mypage/reservations-status/index.tsx:2-2
Timestamp: 2025-07-22T03:59:52.657Z
Learning: kjhyun0830 프로젝트에서 @what-today/design-system 패키지의 ReservationStatus 타입이 calendar/index.ts에서 re-export되지 않아 메인 엔트리 포인트에서 접근할 수 없는 문제가 있음. DayCell.tsx에서 정의된 타입들을 calendar 모듈에서 명시적으로 export해야 함.
Applied to files:
packages/design-system/src/components/StarRating.tsxapps/what-today/src/pages/mypage/reservations-list/index.tsx
📚 Learning: taeil08이 what-today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 ...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#134
File: apps/what-today/src/pages/experiences/iindex.tsx:11-16
Timestamp: 2025-07-25T03:14:08.579Z
Learning: Taeil08이 What-Today 프로젝트의 체험 등록 페이지(apps/what-today/src/pages/experiences/iindex.tsx)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsx
📚 Learning: harryseop encountered a scroll restoration issue in the usebodyscrolllock hook where the base page j...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#89
File: packages/design-system/src/components/bottomsheet/hooks/index.ts:44-51
Timestamp: 2025-07-21T04:36:28.477Z
Learning: HarrySeop encountered a scroll restoration issue in the useBodyScrollLock hook where the base page jumps to the top during mount/unmount of the bottom sheet component. They tried adding isLocked check in cleanup function and ref-based approaches but both failed to resolve the issue. They decided to defer this fix to a later refactoring.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), the input type s...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:18:33.545Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), the input type should be 'checkbox' rather than 'radio' to support the intended toggle behavior where users can click a selected option again to deselect it. The handleChange function already implements this toggle logic with `onSelect?.(isSelected ? '' : value);`.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsx
📚 Learning: in the radiogroup component (packages/design-system/src/components/radiogroup.tsx), when using type=...
Learnt from: Taeil08
PR: What-Today-FE/What-Today#35
File: packages/design-system/src/components/RadioGroup.tsx:0-0
Timestamp: 2025-07-13T13:33:19.860Z
Learning: In the RadioGroup component (packages/design-system/src/components/RadioGroup.tsx), when using type="checkbox" for toggle behavior, adding role="radio" maintains proper semantic meaning for screen readers while preserving the desired UX functionality where users can click to deselect options.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsx
📚 Learning: in the selectroot component (packages/design-system/src/components/select/selectroot.tsx), myungjiwo...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#57
File: packages/design-system/src/components/select/SelectRoot.tsx:37-38
Timestamp: 2025-07-17T01:20:26.915Z
Learning: In the SelectRoot component (packages/design-system/src/components/select/SelectRoot.tsx), MyungJiwoo questioned the need for implementing controlled component pattern. The current implementation only handles internal→external state changes via onChangeValue callback, but doesn't handle external→internal changes when the value prop is updated, which breaks the typical React controlled component contract.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsx
📚 Learning: popovertrigger component in controlled mode (when open and onopenchange props are provided to popove...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#117
File: apps/what-today/src/components/notification/NotificationPopover.tsx:21-21
Timestamp: 2025-07-24T08:18:09.297Z
Learning: PopoverTrigger component in controlled mode (when open and onOpenChange props are provided to PopoverRoot) does not automatically toggle the popover state on click. The developer must provide a manual onClick handler to manage the state toggle, as the internal handleClick only works when !isControlled.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsx
🧬 Code Graph Analysis (1)
apps/what-today/src/pages/mypage/reservations-list/index.tsx (4)
apps/what-today/src/schemas/myReservations.ts (1)
ReservationStatus(161-161)packages/design-system/src/components/icons/SpinIcon.tsx (1)
SpinIcon(29-47)packages/design-system/src/components/NoResult.tsx (1)
NoResult(26-38)packages/design-system/src/components/modal/index.ts (1)
Modal(44-51)
🔇 Additional comments (13)
packages/design-system/src/components/StarRating.tsx (1)
67-67: UI 개선: 별점 아이콘 크기와 간격 조정을 승인합니다.별점 아이콘의 크기를
size-42에서size-35로, 오른쪽 마진을mr-12에서mr-5로 줄여 더 컴팩트하고 균형 잡힌 디자인을 제공합니다. 이는 PR 목표에 언급된 UI 개선 사항과 잘 일치합니다.apps/what-today/src/pages/mypage/reservations-list/index.tsx (12)
10-10: SpinIcon 임포트 추가를 승인합니다.로딩 상태 개선을 위한 SpinIcon 컴포넌트 임포트가 적절합니다. 사용자 경험 향상에 기여할 것입니다.
23-24: 타입 안전성 개선을 승인합니다.
FilterStatus타입 별칭 정의가 코드의 가독성과 타입 안전성을 향상시킵니다. 빈 문자열을 포함하여 "전체" 상태를 명시적으로 표현한 것이 좋습니다.
26-34: 상수 분리를 통한 최적화를 승인합니다.
NO_RESULT_MESSAGES상수를 컴포넌트 외부에 정의하여 불필요한 재생성을 방지하고, 각 필터 상태별로 적절한 메시지를 제공하는 것이 좋습니다. 코드 유지보수성도 향상됩니다.
41-41: 상태 타입 개선을 승인합니다.
selectedStatus상태를FilterStatus타입으로 명시적으로 지정하여 타입 안전성을 확보했습니다.
73-78: 리뷰 모달 상태 관리 개선을 승인합니다.
handleCloseReviewModal함수를 분리하여 리뷰 관련 상태들(reviewTarget,reviewContent,starRating)을 일관되게 초기화하는 것이 좋습니다. 인라인 함수 대신 명명된 함수를 사용하여 코드 가독성도 향상되었습니다.
71-71: 동적 메시지 표시 개선을 승인합니다.선택된 필터 상태에 따라 적절한 빈 결과 메시지를 동적으로 표시하는 로직이 사용자 경험을 향상시킵니다.
121-124: 에러 처리 개선을 승인합니다.실제 에러 메시지를 표시하도록 개선하여 사용자에게 더 구체적인 피드백을 제공합니다. 이는 학습된 내용에 따르면 HarrySeop이 선호하는 토스트 알림을 통한 API 에러 처리 방식과 일치합니다.
206-210: 로딩 UI 개선을 승인합니다.SpinIcon을 사용한 시각적 로딩 인디케이터가 기존의 텍스트 메시지보다 더 나은 사용자 경험을 제공합니다. 아이콘 크기와 색상 설정도 적절합니다.
216-216: 동적 빈 결과 메시지 표시를 승인합니다.필터 상태에 따라 적절한 메시지를 표시하도록
noResultMessage변수를 사용하는 것이 좋습니다.
271-271: 모달 상태 관리 개선을 승인합니다.인라인 함수 대신
handleCloseReviewModal함수를 사용하여 리뷰 관련 상태를 일관되게 초기화하는 것이 좋습니다.
237-237: 타입 캐스팅 개선을 승인합니다.RadioGroup의
onSelect콜백에서 값을FilterStatus로 캐스팅하여 타입 안전성을 확보했습니다. 이는 앞서 정의한FilterStatus타입과 일관성을 유지합니다.
276-276: UI 간격 조정을 승인합니다.리뷰 모달의 설명 단락에서 하단 마진을
mb-6으로 조정하여 시각적 균형을 개선했습니다.
|
🚀 오늘뭐해 Preview Deploy 완료! |
Contributor
|
콩쥐는 오늘도 웁니다... |
MyungJiwoo
approved these changes
Aug 2, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
2025-08-02.170740.mp4
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
신규 기능
버그 수정
스타일