예약 내역 페이지 버그수정 및 스켈레톤 UI 추가 #249
Merged
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
📝 WalkthroughWalkthrough이 변경사항은 예약 목록 페이지의 무한 스크롤 및 데이터 페칭 로직을 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant PageComponent
participant API
participant Skeleton
User->>PageComponent: 페이지 접근/필터 변경
PageComponent->>API: 첫 페이지 데이터 fetch
API-->>PageComponent: 예약 데이터 반환
PageComponent->>Skeleton: 로딩 시 스켈레톤 표시
PageComponent-->>User: 예약 목록 렌더링
User->>PageComponent: 스크롤하여 sentinel 진입
PageComponent->>API: 다음 페이지 fetch (cursor 기반)
API-->>PageComponent: 추가 예약 데이터 반환
PageComponent-->>User: 예약 목록에 추가 데이터 렌더링
Estimated code review effort🎯 4 (Complex) | ⏱️ ~40 minutes Suggested labels
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. 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: 0
🧹 Nitpick comments (4)
apps/what-today/src/components/skeletons/reservations-list/ReservationCardSkeleton.tsx (1)
1-33: 접근성 개선을 위한 ARIA 속성 추가 권장스켈레톤 UI에 스크린 리더 사용자를 위한 접근성 속성을 추가하면 좋겠습니다.
export default function ReservationCardSkeleton() { return ( - <div className='mb-24'> + <div className='mb-24' role="status" aria-label="예약 카드 로딩 중"> {/* 메인 예약 카드 */} <div className='flex gap-16 rounded-xl border border-gray-50 p-16'>추가로 시각적으로 숨겨진 로딩 텍스트도 고려해보세요:
+ <span className="sr-only">예약 정보를 불러오는 중입니다</span>apps/what-today/src/components/skeletons/reservations-list/ReservationsListPageSkeleton.tsx (1)
3-43: 스켈레톤 구조가 실제 데이터 패턴과 일치하는지 확인 필요현재 구현은 잘 되어 있지만, 하드코딩된 그룹 수와 카드 개수가 실제 데이터 패턴과 다를 수 있습니다. 향후 props로 커스터마이징 가능하도록 개선을 고려해보세요.
interface ReservationsListPageSkeletonProps { groups?: number; cardsPerGroup?: number[]; }apps/what-today/src/pages/mypage/reservations-list/index.tsx (2)
77-80: 중복 제거 로직 최적화 가능현재
findIndex를 사용한 중복 제거는 O(n²) 복잡도를 가집니다. Set을 활용하면 더 효율적입니다:- const uniqueReservations = reservations.filter( - (res, index, arr) => - arr.findIndex((r) => `${r.id}_${r.scheduleId}` === `${res.id}_${res.scheduleId}`) === index, - ); + const seen = new Set<string>(); + const uniqueReservations = reservations.filter((res) => { + const key = `${res.id}_${res.scheduleId}`; + if (seen.has(key)) return false; + seen.add(key); + return true; + });
309-309: Observer 센티널의 높이 조정 고려
h-4(16px)는 너무 작아서 스크롤이 빠를 때 놓칠 수 있습니다. 더 큰 높이를 고려해보세요:- <div ref={observerRef} className='h-4' /> + <div ref={observerRef} className='h-20' />
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/what-today/src/components/skeletons/index.ts(1 hunks)apps/what-today/src/components/skeletons/reservations-list/ReservationCardSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/reservations-list/ReservationsListPageSkeleton.tsx(1 hunks)apps/what-today/src/components/skeletons/reservations-list/index.ts(1 hunks)apps/what-today/src/pages/mypage/reservations-list/index.tsx(8 hunks)apps/what-today/src/schemas/myReservations.ts(0 hunks)
💤 Files with no reviewable changes (1)
- apps/what-today/src/schemas/myReservations.ts
🧰 Additional context used
🧠 Learnings (11)
📓 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: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
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.
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#220
File: apps/what-today/src/pages/activities/index.tsx:64-70
Timestamp: 2025-08-02T20:26:03.149Z
Learning: HarrySeop 프로젝트에서 예약 플로우는 디바이스별로 다르게 구현됨: 데스크톱은 ReservationForm 컴포넌트의 내부 토스트를 사용하고, 태블릿/모바일은 바텀시트 → handleSubmitReservation → 페이지 레벨 토스트를 사용하는 구조임.
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#169
File: apps/what-today/src/hooks/useMyActivitiesQuery.ts:23-25
Timestamp: 2025-07-29T14:50:14.117Z
Learning: kjhyun0830은 What-Today 프로젝트에서 토스터 알림과 같은 UI 일관성이 필요한 기능들을 여러 페이지에 걸쳐 한 번에 수정하는 접근 방식을 선호한다.
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: 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:
apps/what-today/src/components/skeletons/reservations-list/ReservationCardSkeleton.tsxapps/what-today/src/components/skeletons/reservations-list/index.tsapps/what-today/src/components/skeletons/index.tsapps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/components/skeletons/reservations-list/ReservationsListPageSkeleton.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:
apps/what-today/src/components/skeletons/reservations-list/ReservationCardSkeleton.tsxapps/what-today/src/components/skeletons/reservations-list/index.tsapps/what-today/src/components/skeletons/index.tsapps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/components/skeletons/reservations-list/ReservationsListPageSkeleton.tsx
📚 Learning: kjhyun0830은 what-today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 u...
Learnt from: kjhyun0830
PR: What-Today-FE/What-Today#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.763Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Applied to files:
apps/what-today/src/components/skeletons/reservations-list/ReservationCardSkeleton.tsxapps/what-today/src/components/skeletons/reservations-list/index.tsapps/what-today/src/components/skeletons/index.tsapps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/components/skeletons/reservations-list/ReservationsListPageSkeleton.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/components/skeletons/reservations-list/ReservationCardSkeleton.tsxapps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/components/skeletons/reservations-list/ReservationsListPageSkeleton.tsx
📚 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:
apps/what-today/src/components/skeletons/reservations-list/ReservationCardSkeleton.tsxapps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/components/skeletons/reservations-list/ReservationsListPageSkeleton.tsx
📚 Learning: harryseop 프로젝트에서 예약 플로우는 디바이스별로 다르게 구현됨: 데스크톱은 reservationform 컴포넌트의 내부 토스트를 사용하고, 태블릿/모바일은 바텀시트 → h...
Learnt from: HarrySeop
PR: What-Today-FE/What-Today#220
File: apps/what-today/src/pages/activities/index.tsx:64-70
Timestamp: 2025-08-02T20:26:03.149Z
Learning: HarrySeop 프로젝트에서 예약 플로우는 디바이스별로 다르게 구현됨: 데스크톱은 ReservationForm 컴포넌트의 내부 토스트를 사용하고, 태블릿/모바일은 바텀시트 → handleSubmitReservation → 페이지 레벨 토스트를 사용하는 구조임.
Applied to files:
apps/what-today/src/components/skeletons/reservations-list/ReservationCardSkeleton.tsxapps/what-today/src/pages/mypage/reservations-list/index.tsxapps/what-today/src/components/skeletons/reservations-list/ReservationsListPageSkeleton.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: user kjhyun0830 follows an incremental development approach in what-today project, implementing ui f...
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.
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: myungjiwoo encountered multiple api calls when adding all dependencies to useeffect in oauth callbac...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#98
File: apps/what-today/src/hooks/useKakaoOAuth.ts:37-65
Timestamp: 2025-07-21T13:40:52.209Z
Learning: MyungJiwoo encountered multiple API calls when adding all dependencies to useEffect in OAuth callback hooks. The solution is to use useRef to prevent duplicate requests and useCallback to memoize the async function, keeping only essential dependencies (searchParams and the memoized function) in the dependency array.
Applied to files:
apps/what-today/src/pages/mypage/reservations-list/index.tsx
🧬 Code Graph Analysis (2)
apps/what-today/src/pages/mypage/reservations-list/index.tsx (4)
apps/what-today/src/schemas/myReservations.ts (3)
Reservation(136-136)MyReservationsResponse(139-139)ReservationStatus(160-160)apps/what-today/src/apis/myReservations.ts (1)
fetchMyReservations(24-41)apps/what-today/src/components/skeletons/reservations-list/ReservationsListPageSkeleton.tsx (1)
ReservationsListPageSkeleton(3-43)apps/what-today/src/components/skeletons/reservations-list/ReservationCardSkeleton.tsx (1)
ReservationCardSkeleton(1-33)
apps/what-today/src/components/skeletons/reservations-list/ReservationsListPageSkeleton.tsx (1)
apps/what-today/src/components/skeletons/reservations-list/ReservationCardSkeleton.tsx (1)
ReservationCardSkeleton(1-33)
🔇 Additional comments (5)
apps/what-today/src/components/skeletons/index.ts (1)
1-2: 깔끔한 barrel export 구조입니다스켈레톤 컴포넌트들을 중앙에서 관리하는 좋은 패턴입니다.
apps/what-today/src/components/skeletons/reservations-list/index.ts (1)
1-2: 적절한 모듈 구조입니다예약 목록 관련 스켈레톤 컴포넌트들을 그룹화하여 관리하는 좋은 접근입니다.
apps/what-today/src/pages/mypage/reservations-list/index.tsx (3)
52-93: 수동 페이지네이션 구현이 복잡도를 증가시킵니다
useInfiniteQuery에서 수동 페이지네이션으로 전환한 이유가 PR 설명에 명확하지 않습니다. 이 접근 방식은 다음과 같은 잠재적 문제가 있습니다:
- 상태 관리 복잡도 증가
- React Query의 자동 캐싱, 재시도 등의 이점 상실
- 필터 변경 중 로딩 시 race condition 가능성
중복 제거 로직은 좋지만,
useInfiniteQuery의select옵션으로도 처리 가능합니다. 수동 구현이 꼭 필요한 특별한 이유가 있는지 확인이 필요합니다.
135-156: IntersectionObserver 구현이 깔끔합니다수동 무한 스크롤 구현이 잘 되어 있습니다. threshold 설정도 적절합니다.
208-209: 날짜 정렬 제거 확인AI 요약에 따르면 날짜별 정렬이 제거되었습니다. 이로 인해 예약 목록이 시간순으로 표시되지 않을 수 있습니다. 의도적인 변경인지 확인이 필요합니다.
Taeil08
approved these changes
Aug 4, 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 변경 사항 (선택)
❓무슨 문제가 발생했나요? (선택)
💬 기타 참고 사항 (선택)
Summary by CodeRabbit
신규 기능
버그 수정
UI/UX 개선
기타
deletedAt필드가 제거되었습니다.