Skip to content

Conversation

@HarrySeop
Copy link
Member

@HarrySeop HarrySeop commented Aug 2, 2025

🧩 관련 이슈 번호

📌 작업 내용

  • PC 일때 예약 성공시 데이터 초기화 했습니다.
  • 예약 성공 후 마이페이지 갔을 때 데이터 캐싱 이슈 해결했습니다.
  • 로딩 , 데이터 없을 때 404 이미지 임시로 처리했스ㅡㅂ니다.
  • 토스트 메세지를 수정했습니다.

✅ 체크리스트

  • PR 하기 전에 이슈에서 빼먹은건 없는지 확인했습니다
    • 라벨 및 마일스톤을 사이드 탭에서 등록했습니다.
  • PR을 보내는 브랜치가 올바른지 확인했습니다.
  • 팀원들이 리뷰하기 쉽도록 설명을 자세하게 작성했습니다.
  • 변경사항을 충분히 테스트 했습니다.
  • (함수를 구현 했을 때) JSDoc을 양식에 맞춰서 작성했습니다.
  • 컨벤션에 맞게 구현했습니다.

📷 UI 변경 사항 (선택)

image
2025-08-03.051439.mp4

❓무슨 문제가 발생했나요? (선택)

5497 해당 체험에서 같은 시간대 예약이 되는 버그가 있습니다.. 다른 체험으로 해봤을 때는 이미 예약한 체험입니다 라고 나오긴하는데 혹시 다른분들도 확인 부탁드립니다..

💬 기타 참고 사항 (선택)

해당 pr 머지된 이후 디자인 작업 하도록 하겠습니다!

Summary by CodeRabbit

  • 신규 기능

    • 예약 성공 및 실패 시 토스트 알림이 표시됩니다.
    • 예약 폼에 activityId 전달이 필수로 변경되었습니다.
    • 예약 폼의 제출 버튼이 기본 활성화되었습니다.
    • 모바일 및 태블릿 예약 시트가 내부 예약 제출 로직과 성공/실패 콜백을 지원하도록 개선되었습니다.
  • 버그 수정

    • 에러 및 데이터 없음 상태에서 NotFoundPage가 보여집니다.
  • 스타일

    • 로딩 상태에서 스피너 아이콘이 중앙에 표시됩니다.
    • 일부 플로팅 버튼의 하단 여백이 조정되었습니다.
  • 기타

    • DesktopReservation 컴포넌트가 제거되었습니다.
    • 예약 제출 및 상태 관리를 하위 컴포넌트로 위임하여 예약 흐름이 단순화되었습니다.
    • 예약 확인 버튼 텍스트가 "확인"에서 "다음"으로 변경되었습니다.

@HarrySeop HarrySeop added this to the 5차 스프린트 milestone Aug 2, 2025
@HarrySeop HarrySeop self-assigned this Aug 2, 2025
@HarrySeop HarrySeop added ♻️ Refactor 코드 리팩토링 🐞 Bug 버그 관련 labels Aug 2, 2025
@HarrySeop HarrySeop linked an issue Aug 2, 2025 that may be closed by this pull request
@coderabbitai
Copy link

coderabbitai bot commented Aug 2, 2025

📝 Walkthrough

Walkthrough

이 변경은 DesktopReservation 컴포넌트를 삭제하고, 예약 관련 로직과 UI를 ReservationForm으로 통합했습니다. 또한 예약 성공 및 실패 시 토스트 알림과 쿼리 무효화 기능을 추가하고, 예약 폼의 prop과 타입 정의를 수정했으며, 일부 UI 요소의 스타일과 로딩/에러 처리 방식을 개선했습니다.

Changes

Cohort / File(s) Change Summary
예약 컴포넌트 통합 및 로직 개선
apps/what-today/src/components/activities/reservation/DesktopReservation.tsx, apps/what-today/src/components/activities/reservation/ReservationForm.tsx, apps/what-today/src/components/activities/reservation/types/index.ts
DesktopReservation 컴포넌트 삭제. 예약 로직을 ReservationForm에 통합하고, activityId prop 추가 및 기본 showSubmitButton 값을 true로 변경. 토스트 알림과 쿼리 무효화 기능 추가. 타입 정의에서 DesktopReservationProps 삭제, ReservationFormPropsactivityId 추가, ReservationBottomBarPropsonReserve를 선택적 속성으로 변경.
예약 시트 컴포넌트 리팩토링
apps/what-today/src/components/activities/reservation/MobileReservationSheet.tsx, apps/what-today/src/components/activities/reservation/TabletReservationSheet.tsx
예약 확인 버튼 텍스트를 "확인"에서 "다음"으로 변경. 예약 확인 시 선택된 시간 정보를 availableTimes에서 찾도록 수정. 예약 확인 후 하단 시트를 닫도록 변경. MobileReservationSheet의 props 타입을 TabletReservationSheetProps의 별칭으로 변경.
페이지 및 레이아웃 UI 개선
apps/what-today/src/pages/activities/index.tsx, apps/what-today/src/layouts/DefaultLayout.tsx
DesktopReservation 대신 ReservationForm 사용. 로딩 상태에 중앙 정렬된 큰 스피너 아이콘 표시, 에러 및 활동 없음 상태에서 NotFoundPage 렌더링. 예약 상태 관리 및 제출 로직을 중앙화. 플로팅 버튼의 위치 클래스 변경(bottom-140bottom-160).

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
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~15–20 minutes

Possibly related PRs

Suggested labels

🎨 Design

Suggested reviewers

  • MyungJiwoo
  • Taeil08

Poem

🐰
예약 폼이 하나로 뿅!
토스트 알림이 번쩍, 쿼리도 싹—
버튼 위치도 살짝 위로,
에러엔 NotFound가 똑똑!
토끼는 오늘도 코드에 춤추네—
예약은 간편, 리뷰는 빠르게!
☁️✨

✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch refactor/HarrySeop/218

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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary or @coderabbitai 요약 to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions
Copy link

github-actions bot commented Aug 2, 2025

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

Copy link

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between ac67e71 and 6d8b3f4.

📒 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.tsx
  • apps/what-today/src/components/activities/reservation/types/index.ts
  • 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/components/activities/reservation/ReservationForm.tsx
  • apps/what-today/src/components/activities/reservation/types/index.ts
  • apps/what-today/src/layouts/DefaultLayout.tsx
  • 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/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.tsx
  • apps/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.tsx
  • apps/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.tsx
  • apps/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: 타입 정의 개선이 적절합니다.

ReservationFormPropsactivityId 추가는 컴포넌트가 내부적으로 예약 제출을 처리할 수 있도록 하는 리팩토링에 잘 맞습니다.

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 사용법이 올바릅니다.

필요한 activityId prop을 포함하여 모든 props가 적절히 전달되고 있습니다.

apps/what-today/src/components/activities/reservation/ReservationForm.tsx (2)

1-2: 필요한 의존성 추가가 적절합니다.

토스트 알림과 쿼리 무효화를 위한 훅 임포트가 리팩토링 목적과 잘 맞습니다.


133-137: 컴포넌트 구조 개선이 좋습니다.

콘텐츠를 section 요소로 래핑하여 시맨틱하고 스타일이 적용된 구조를 제공합니다.

@MyungJiwoo
Copy link
Contributor

5497 해당 체험에서 같은 시간대 예약이 되는 버그가 있습니다.

현재 최신 develop 브랜치 기준으로 같은 시간대에 예약하면 이미 예약한 일정이라고 오류 메시지가 잘 나옵니다.
preview 배포에서도 이미 예약한 일정이라는 오류 메시지가 잘 나옵니다. 다행이네요!

--

image

이전처럼 타임이 잘리지는 않는군요!! 근데 열린 타임이 많으면 길이가 너무 길어지는 것 같아요...ㅠㅠ
적당한 길이에서 스크롤로 표현하는게 어떨까 싶습니다!
스크롤이 더 남았다는 의미로는 그라데이션 배경을 넣을 수 있습니다!

--

image

한옥에서 한복 입고 전통 차 체험 ← 8/2일자로 예약 시간을 엄청 열어뒀었는데 날짜가 지나면서 캘린더에서 사라졌습니다...
예약이 불가능하기 때문에 오늘 날짜 이후로만 보이도록 해주신 것 같은데, 예약이 불가능하더라도 이전 내역은 확인할 수 있으면 좋을 것 같습니다..ㅠ 버튼은 예약 마감 등으로 표시하면 사용자 입장에서도 이해될 것 같아요!
지금은 예약이 열린 날짜가 없는데 예약하기 버튼으로 나와서 혼란스러울 수 있을것 같습니다...🥲🥲

@MyungJiwoo
Copy link
Contributor

로딩 , 데이터 없을 때 404 이미지 임시로 처리했습니다.

삭제된 체험에 접속했을 때 예외처리 해주신 점 좋습니다!

조심스레 제 의견을 말씀드리자면, 404는 존재하지 않는 페이지이므로 사용자 입장에서는 최대한 뜨지 않게끔 하는 것이 좋다고 생각합니다.
개발 관점에서는 체험이 삭제됐으므로 없는 페이지가 맞지만,
마이페이지에서 이전에 예약했던 체험이 나도 모르게 삭제되었고, 마이페이지를 통해 삭제된 페이지로 이동하는 링크가 항상 열려있는 상황에서는
404 에러 페이지 말고 체험이 삭제되었다는 내용과, 메인 페이지로 유도하는 내용이 담긴 에러 페이지면 더 좋을 것 같습니다.

예외 페이지까지 신경써주셔서 감사합니다! 😊

Copy link
Contributor

@kjhyun0830 kjhyun0830 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨어요! 상세페이지에 고려할 것들이 많네요..^^

Copy link
Contributor

@MyungJiwoo MyungJiwoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PC 일때 예약 성공시 데이터 초기화 했습니다.

preview 배포 버전으로 태블릿과 모바일에서는 폼이 초기화되지 않습니다.
버튼 있는 쪽만 내용이 지워지고, 다시 예약하기 버튼을 누르면 이전에 선택했던 날짜와 인원수가 그대로 나와있습니다..!
수정 부탁드립니다 ㅠㅠ

@github-actions
Copy link

github-actions bot commented Aug 3, 2025

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

@HarrySeop HarrySeop requested a review from MyungJiwoo August 3, 2025 08:18
@github-actions
Copy link

github-actions bot commented Aug 3, 2025

🚀 오늘뭐해 Preview Deploy 완료!
👉 미리보기 링크

Copy link

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between cc9a568 and 4bbe49d.

📒 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, createReservation API 등 새로운 의존성들이 적절히 추가되었고, 사용하지 않는 import는 제거되어 깔끔합니다.


24-33: 상태 관리 구조가 잘 설계되었습니다.

queryClient, isSubmitting, sheetKey 등의 새로운 상태들이 예약 플로우 개선을 위해 적절히 추가되었습니다. 특히 sheetKey를 통한 강제 리마운팅 메커니즘이 좋은 접근법입니다.


39-46: 로딩 및 에러 처리 UI가 크게 개선되었습니다.

기존의 텍스트 기반 메시지에서 SpinIconNotFoundPage 컴포넌트를 사용한 일관된 UI로 개선되어 사용자 경험이 향상되었습니다.


73-75: 예약 확인 핸들러가 간결하게 통합되었습니다.

태블릿과 모바일 시트의 예약 확인 로직이 하나의 함수로 통합되어 코드 중복이 제거되었습니다.


118-124: ReservationForm 통합이 성공적으로 완료되었습니다.

기존의 DesktopReservation 컴포넌트를 제거하고 ReservationForm으로 통합한 것이 코드 일관성을 높였습니다. activityId prop 추가도 적절합니다.


155-158: ReservationBottomBar props 업데이트가 적절합니다.

새로운 상태들(isSubmitting, reservation, handleReservationSubmit)이 올바르게 전달되어 예약 플로우가 개선되었습니다.


168-175: 바텀시트 키 기반 리마운팅이 효과적입니다.

key={tablet-${sheetKey}}와 통합된 handleReservationConfirm 핸들러를 통해 예약 상태 변경 시 바텀시트가 올바르게 업데이트됩니다.


182-189: 모바일 바텀시트도 일관되게 개선되었습니다.

태블릿과 동일한 패턴으로 키 기반 리마운팅과 통합된 핸들러를 사용하여 코드 일관성이 유지되었습니다.

Copy link
Contributor

@MyungJiwoo MyungJiwoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

QA내용 반영해주시느라 고생하셨습니다!!

@HarrySeop HarrySeop merged commit e972f9a into develop Aug 3, 2025
2 checks passed
@coderabbitai coderabbitai bot mentioned this pull request Aug 4, 2025
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐞 Bug 버그 관련 ♻️ Refactor 코드 리팩토링

Projects

None yet

Development

Successfully merging this pull request may close these issues.

예약 상세페이지 QA반영 및 리팩토링

4 participants