-
Notifications
You must be signed in to change notification settings - Fork 1
예약 상세페이지 QA반영 및 리팩토링 #220
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
예약 상세페이지 QA반영 및 리팩토링 #220
Conversation
📝 WalkthroughWalkthrough이 변경은 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ReservationForm
participant useReservation (hook)
participant Toast
participant QueryClient
User->>ReservationForm: 예약 정보 입력 및 제출
ReservationForm->>useReservation: submitReservation(activityId, data)
useReservation-->>ReservationForm: 성공/실패 콜백
alt 성공
ReservationForm->>QueryClient: 'reservations' 쿼리 무효화
ReservationForm->>Toast: 성공 토스트 표시
else 실패
ReservationForm->>Toast: 에러 토스트 표시
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15–20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ 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 완료! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/what-today/src/components/activities/reservation/ReservationForm.tsx (1)
26-45: 성공/에러 콜백 처리가 우수합니다.토스트 알림과 쿼리 무효화를 통한 사용자 피드백과 데이터 동기화가 잘 구현되어 있습니다. 하지만 쿼리 키가 너무 광범위할 수 있습니다.
더 구체적인 쿼리 키 사용을 고려해보세요:
- queryClient.invalidateQueries({ - queryKey: ['reservations'], - }); + queryClient.invalidateQueries({ + queryKey: ['reservations', 'user'], + }); + queryClient.invalidateQueries({ + queryKey: ['activities', activityId, 'schedules'], + });
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/what-today/src/components/activities/reservation/DesktopReservation.tsx(0 hunks)apps/what-today/src/components/activities/reservation/ReservationForm.tsx(5 hunks)apps/what-today/src/components/activities/reservation/types/index.ts(1 hunks)apps/what-today/src/layouts/DefaultLayout.tsx(1 hunks)apps/what-today/src/pages/activities/index.tsx(5 hunks)
💤 Files with no reviewable changes (1)
- apps/what-today/src/components/activities/reservation/DesktopReservation.tsx
🧰 Additional context used
🧠 Learnings (9)
📓 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#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: 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)에서 주소 입력 컴포넌트가 아직 만들어지지 않아서 상태 관리를 나중에 추가할 예정이라고 언급함. 이는 프로젝트의 점진적 개발 접근법에 따른 것임.
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: 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해야 함.
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 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
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: 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/activities/reservation/ReservationForm.tsxapps/what-today/src/components/activities/reservation/types/index.tsapps/what-today/src/pages/activities/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:
apps/what-today/src/components/activities/reservation/ReservationForm.tsxapps/what-today/src/components/activities/reservation/types/index.tsapps/what-today/src/layouts/DefaultLayout.tsxapps/what-today/src/pages/activities/index.tsx
📚 Learning: myungjiwoo plans to implement form validation using zod and react-hook-form in a future iteration ra...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#90
File: apps/what-today/src/pages/signup/index.tsx:67-71
Timestamp: 2025-07-21T05:32:48.443Z
Learning: MyungJiwoo plans to implement form validation using zod and react-hook-form in a future iteration rather than adding quick validation checks in the current signup page implementation in apps/what-today/src/pages/signup/index.tsx.
Applied to files:
apps/what-today/src/components/activities/reservation/ReservationForm.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/activities/reservation/ReservationForm.tsxapps/what-today/src/layouts/DefaultLayout.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:
apps/what-today/src/components/activities/reservation/ReservationForm.tsxapps/what-today/src/pages/activities/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/components/activities/reservation/ReservationForm.tsxapps/what-today/src/pages/activities/index.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:
apps/what-today/src/components/activities/reservation/ReservationForm.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/activities/index.tsx
🔇 Additional comments (7)
apps/what-today/src/components/activities/reservation/types/index.ts (1)
53-53: 타입 정의 개선이 적절합니다.
ReservationFormProps에activityId추가는 컴포넌트가 내부적으로 예약 제출을 처리할 수 있도록 하는 리팩토링에 잘 맞습니다.apps/what-today/src/layouts/DefaultLayout.tsx (1)
16-16: UI 간격 조정이 적절합니다.플로팅 버튼의 하단 위치를
bottom-140에서bottom-160으로 조정하여 예약 UI 변경사항과 일치하는 간격을 유지합니다.apps/what-today/src/pages/activities/index.tsx (3)
1-1: Import 변경사항이 리팩토링과 일치합니다.
DesktopReservation제거와SpinIcon,NotFoundPage추가는 컴포넌트 통합 및 UI 개선과 잘 맞습니다.
36-43: 로딩 및 에러 처리 UI 개선이 우수합니다.스피너 아이콘을 사용한 로딩 상태와
NotFoundPage를 사용한 일관된 에러 처리가 사용자 경험을 향상시킵니다.
107-113: ReservationForm 사용법이 올바릅니다.필요한
activityIdprop을 포함하여 모든 props가 적절히 전달되고 있습니다.apps/what-today/src/components/activities/reservation/ReservationForm.tsx (2)
1-2: 필요한 의존성 추가가 적절합니다.토스트 알림과 쿼리 무효화를 위한 훅 임포트가 리팩토링 목적과 잘 맞습니다.
133-137: 컴포넌트 구조 개선이 좋습니다.콘텐츠를
section요소로 래핑하여 시맨틱하고 스타일이 적용된 구조를 제공합니다.
apps/what-today/src/components/activities/reservation/ReservationForm.tsx
Show resolved
Hide resolved
삭제된 체험에 접속했을 때 예외처리 해주신 점 좋습니다! 조심스레 제 의견을 말씀드리자면, 404는 존재하지 않는 페이지이므로 사용자 입장에서는 최대한 뜨지 않게끔 하는 것이 좋다고 생각합니다. 예외 페이지까지 신경써주셔서 감사합니다! 😊 |
kjhyun0830
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수고하셨어요! 상세페이지에 고려할 것들이 많네요..^^
MyungJiwoo
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PC 일때 예약 성공시 데이터 초기화 했습니다.
preview 배포 버전으로 태블릿과 모바일에서는 폼이 초기화되지 않습니다.
버튼 있는 쪽만 내용이 지워지고, 다시 예약하기 버튼을 누르면 이전에 선택했던 날짜와 인원수가 그대로 나와있습니다..!
수정 부탁드립니다 ㅠㅠ
|
🚀 오늘뭐해 Preview Deploy 완료! |
|
🚀 오늘뭐해 Preview Deploy 완료! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/what-today/src/pages/activities/index.tsx (1)
48-71: 예약 성공/실패 핸들러 로직을 확인해주세요.현재 구현에서는 데스크톱과 태블릿/모바일 모두에서 동일한 토스트 알림을 사용하고 있습니다. 하지만 PR 목표에 따르면 데스크톱은
ReservationForm내부 토스트를, 태블릿/모바일은 페이지 레벨 토스트를 사용해야 합니다.데스크톱 예약 시에는
ReservationForm내부에서 토스트가 처리되므로, 여기서의 토스트 호출이 중복될 가능성이 있습니다.현재
ReservationForm에서 토스트를 어떻게 처리하는지 확인해보세요:#!/bin/bash # ReservationForm의 토스트 처리 방식 확인 ast-grep --pattern 'toast({ $$$ })'
🧹 Nitpick comments (1)
apps/what-today/src/pages/activities/index.tsx (1)
77-93: 예약 제출 로직이 잘 구현되었습니다.비동기 처리, 로딩 상태 관리, 에러 핸들링이 적절히 구현되어 있습니다. 특히
finally블록에서setIsSubmitting(false)를 호출하여 로딩 상태를 확실히 해제하는 점이 좋습니다.Line 87의
setReservation(null)이handleReservationSuccess()내부의 Line 58과 중복됩니다.중복 상태 초기화를 제거하세요:
} catch (error) { handleReservationError(error as Error); - setReservation(null); // 예약 상태 초기화 } finally { setIsSubmitting(false); }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx(4 hunks)apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx(2 hunks)apps/what-today/src/pages/activities/index.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx
- apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx
🧰 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: 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#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#219
File: apps/what-today/src/pages/mypage/main/index.tsx:108-157
Timestamp: 2025-08-03T00:45:03.712Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 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)로 처리하는 방식을 선호하며, 핸들러 함수 구현 시점에 함께 연결하는 접근 방식을 취함.
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해야 함.
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 요소가 달력 트리거 버튼의 세로 정렬에 필요하다고 설명했음. 이 요소를 제거하면 버튼 정렬이 깨지는 레이아웃 의존성이 있음.
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 일관성이 필요한 기능들을 여러 페이지에 걸쳐 한 번에 수정하는 접근 방식을 선호한다.
📚 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.712Z
Learning: kjhyun0830은 What-Today 프로젝트의 마이페이지(apps/what-today/src/pages/mypage/main/index.tsx)에서 다음 브랜치에 스켈레톤 UI 작업과 함께 로딩 상태 처리를 구현할 계획이라고 언급함.
Applied to files:
apps/what-today/src/pages/activities/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:
apps/what-today/src/pages/activities/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:
apps/what-today/src/pages/activities/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/activities/index.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/pages/activities/index.tsx
📚 Learning: myungjiwoo plans to implement form validation using zod and react-hook-form in a future iteration ra...
Learnt from: MyungJiwoo
PR: What-Today-FE/What-Today#90
File: apps/what-today/src/pages/signup/index.tsx:67-71
Timestamp: 2025-07-21T05:32:48.443Z
Learning: MyungJiwoo plans to implement form validation using zod and react-hook-form in a future iteration rather than adding quick validation checks in the current signup page implementation in apps/what-today/src/pages/signup/index.tsx.
Applied to files:
apps/what-today/src/pages/activities/index.tsx
📚 Learning: harryseop은 what-today 프로젝트에서 api 에러 처리를 토스터(toast notification)로 처리하는 방식을 선호하며, 핸들러 함수 구현 시점에 함께 연결하...
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)로 처리하는 방식을 선호하며, 핸들러 함수 구현 시점에 함께 연결하는 접근 방식을 취함.
Applied to files:
apps/what-today/src/pages/activities/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/activities/index.tsx
📚 Learning: kjhyun0830은 what-today 프로젝트에서 토스터 알림과 같은 ui 일관성이 필요한 기능들을 여러 페이지에 걸쳐 한 번에 수정하는 접근 방식을 선호한다....
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 일관성이 필요한 기능들을 여러 페이지에 걸쳐 한 번에 수정하는 접근 방식을 선호한다.
Applied to files:
apps/what-today/src/pages/activities/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/activities/index.tsx
🔇 Additional comments (8)
apps/what-today/src/pages/activities/index.tsx (8)
1-6: Import 구조가 개선되었습니다.
useQueryClient,SpinIcon,createReservationAPI 등 새로운 의존성들이 적절히 추가되었고, 사용하지 않는 import는 제거되어 깔끔합니다.
24-33: 상태 관리 구조가 잘 설계되었습니다.
queryClient,isSubmitting,sheetKey등의 새로운 상태들이 예약 플로우 개선을 위해 적절히 추가되었습니다. 특히sheetKey를 통한 강제 리마운팅 메커니즘이 좋은 접근법입니다.
39-46: 로딩 및 에러 처리 UI가 크게 개선되었습니다.기존의 텍스트 기반 메시지에서
SpinIcon과NotFoundPage컴포넌트를 사용한 일관된 UI로 개선되어 사용자 경험이 향상되었습니다.
73-75: 예약 확인 핸들러가 간결하게 통합되었습니다.태블릿과 모바일 시트의 예약 확인 로직이 하나의 함수로 통합되어 코드 중복이 제거되었습니다.
118-124: ReservationForm 통합이 성공적으로 완료되었습니다.기존의
DesktopReservation컴포넌트를 제거하고ReservationForm으로 통합한 것이 코드 일관성을 높였습니다.activityIdprop 추가도 적절합니다.
155-158: ReservationBottomBar props 업데이트가 적절합니다.새로운 상태들(
isSubmitting,reservation,handleReservationSubmit)이 올바르게 전달되어 예약 플로우가 개선되었습니다.
168-175: 바텀시트 키 기반 리마운팅이 효과적입니다.
key={tablet-${sheetKey}}와 통합된handleReservationConfirm핸들러를 통해 예약 상태 변경 시 바텀시트가 올바르게 업데이트됩니다.
182-189: 모바일 바텀시트도 일관되게 개선되었습니다.태블릿과 동일한 패턴으로 키 기반 리마운팅과 통합된 핸들러를 사용하여 코드 일관성이 유지되었습니다.
MyungJiwoo
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
QA내용 반영해주시느라 고생하셨습니다!!


🧩 관련 이슈 번호
📌 작업 내용
✅ 체크리스트
📷 UI 변경 사항 (선택)
2025-08-03.051439.mp4
❓무슨 문제가 발생했나요? (선택)
5497해당 체험에서 같은 시간대 예약이 되는ㅈ버그가 있습니다.. 다른 체험으로 해봤을 때는 이미 예약한 체험입니다 라고 나오긴하는데 혹시 다른분들도 확인 부탁드립니다..💬 기타 참고 사항 (선택)
해당 pr 머지된 이후 디자인 작업 하도록 하겠습니다!
Summary by CodeRabbit
신규 기능
버그 수정
스타일
기타