예약 내역 페이지 이슈 QA

[HarrySeop]

🧩 관련 이슈 번호

• 예약 내역 페이지 이슈 QA #269

📌 작업 내용

• 리뷰 작성시 바로 버튼 디자인 변경되도록 수정했습니다.

✅ 체크리스트

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

📷 UI 변경 사항 (선택)

• 공유한 내용이라 UI 변경사항은 넘기겠습니다!

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

💬 기타 참고 사항 (선택)

Summary by CodeRabbit

• 개선 사항
  • 리뷰 제출 시 성공적으로 처리되면, 해당 예약이 즉시 '리뷰 작성 완료'로 표시되어 더욱 빠른 피드백을 제공합니다.
  • 리뷰 입력란(내용 및 별점)이 성공 후 자동으로 초기화됩니다.

[github-actions]

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

[coderabbitai]

📝 Walkthrough

Walkthrough

submitReview 변이의 onSuccess 핸들러가 확장되어, 성공 시 성공 토스트 표시, 리뷰 모달 닫기, 예약 목록 쿼리 무효화뿐 아니라, 로컬 상태의 allReservations에서 해당 예약의 reviewSubmitted를 즉시 true로 갱신하고, 리뷰 입력 필드도 초기화하도록 변경되었습니다.

Changes

Cohort / File(s)	Change Summary
예약 리뷰 제출 핸들러 개선 apps/what-today/src/pages/mypage/reservations-list/index.tsx	submitReview 변이의 onSuccess에서 예약의 reviewSubmitted를 낙관적으로 즉시 true로 업데이트, 리뷰 입력값(reviewContent, starRating) 초기화, 핸들러 함수 시그니처 수정 등 UI 및 상태 관리 개선

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI
    participant submitReview Mutation
    participant State

    User->>UI: 리뷰 작성 및 제출
    UI->>submitReview Mutation: 리뷰 제출 요청
    submitReview Mutation-->>UI: 성공 응답 (onSuccess)
    UI->>State: 해당 예약 reviewSubmitted = true로 즉시 갱신
    UI->>UI: 리뷰 입력값 초기화
    UI->>UI: 성공 토스트 표시 및 모달 닫기
    UI->>State: 예약 쿼리 무효화

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

Possibly related PRs

• 예약 내역 페이지 QA 내용 수정 #213: 리뷰 제출 성공 시 UI 및 입력값 초기화와 관련된 예약 목록 페이지의 상태 관리 개선 PR
• 예약 내역 페이지 리팩토링 & 디자인 수정 #163: 동일 컴포넌트 내 변이 핸들러 및 상태 관리 리팩터링과 관련
• 예약 내역 페이지 API 연결 #154: 리뷰 제출 기능 도입 및 onSuccess 핸들러 개선과 직접적으로 연관

Suggested labels

🐞 Bug

Suggested reviewers

• kjhyun0830
• Taeil08
• MyungJiwoo

Poem

🐰
리뷰를 남기면, 토스트가 반짝!
예약 목록도 즉시 반영,
별점과 내용은 깨끗이 초기화,
토끼는 오늘도 뿌듯하게 깡총!
작은 변화 속에,
더 부드러운 경험을 선물해요.
🌟

Note

⚡️ Unit Test Generation is now available in beta!

Learn more here, or try it out under "Finishing Touches" below.

---

📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c08d3e7 and 09f82cb.

📒 Files selected for processing (1)

• apps/what-today/src/pages/mypage/reservations-list/index.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (4)

📓 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#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#178
File: apps/what-today/src/index.css:63-83
Timestamp: 2025-07-30T13:22:43.195Z
Learning: kjhyun0830은 What-Today 프로젝트에서 기능적으로 문제가 없는 코드에 대해서는 장기적인 유지보수 개선사항보다는 현재 작동하는 상태를 유지하는 것을 선호하는 실용적인 접근 방식을 취한다.

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: 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: 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/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:

• apps/what-today/src/pages/mypage/reservations-list/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/mypage/reservations-list/index.tsx

🔇 Additional comments (4)

apps/what-today/src/pages/mypage/reservations-list/index.tsx (4)

181-181: 매개변수 추가로 optimistic update 지원

onSuccess 핸들러에 variables 매개변수를 추가하여 mutation의 입력값에 접근할 수 있도록 개선했습니다. 이는 즉시 UI 업데이트를 위해 필요한 변경사항입니다.

---

188-193: Optimistic update 구현으로 UX 개선

리뷰 제출 성공 시 서버 응답을 기다리지 않고 즉시 reviewSubmitted: true로 상태를 업데이트하는 optimistic update가 구현되었습니다. 이는 사용자에게 즉각적인 피드백을 제공하여 UX를 크게 개선합니다.

변경사항이 정확하며 함수형 상태 업데이트 패턴을 올바르게 사용했습니다.

---

196-197: 입력 필드 초기화로 모달 상태 관리 개선

리뷰 제출 성공 후 reviewContent와 starRating을 초기화하여 모달이 다시 열릴 때 깨끗한 상태로 시작할 수 있도록 했습니다. 이는 handleCloseReviewModal 함수와 동일한 로직을 유지하여 일관성을 보장합니다.

---

181-198: Optimistic 업데이트 + query invalidation 패턴은 한 곳에서만 사용됩니다

• 위치:
  apps/what-today/src/pages/mypage/reservations-list/index.tsx
  후기 작성 onSuccess 콜백 내부 (Lines 181–198)

검증 결과, setAllReservations 이후 queryClient.invalidateQueries 조합은 해당 파일의 후기 작성 처리 부분에만 존재하며 다른 컴포넌트나 훅에서는 사용되지 않습니다. 중복 업데이트나 race condition 가능성은 낮아 보입니다. 추가 조치나 수정 없이 이대로 유지해도 괜찮습니다.

✨ 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/269

---

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

• X
• Mastodon
• Reddit
• LinkedIn

🪧 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.
• 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.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

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.