feat: 기사 및 고객 캘린더 목업 페이지 - #116
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
📝 WalkthroughWalkthrough고객과 기사 역할별 예약 캘린더를 추가했습니다. 월 이동, 날짜 선택, 예약 상태 표시와 기사 상태 변경을 지원합니다. 기사 상세 화면에는 고객용 일정 확인 링크를 연결했습니다. Changes예약 캘린더 기능
Estimated code review effort: 3 (Moderate) | ~20 minutes Merge Risk: 🔵 Low · up to The calendar flow is otherwise mergeable, but date and availability selections should expose their selected state to assistive technology to avoid an accessibility gap for users relying on screen readers. Sequence Diagram(s)sequenceDiagram
participant Customer
participant MoverDetailView
participant MoverDetailActions
participant CustomerReservationCalendarPage
participant ReservationCalendarPage
Customer->>MoverDetailView: 기사 상세 페이지 접근
MoverDetailView->>MoverDetailActions: moverId 전달
MoverDetailActions->>Customer: 기사 일정 확인 링크 표시
Customer->>CustomerReservationCalendarPage: moverId와 moverName으로 링크 접근
CustomerReservationCalendarPage->>ReservationCalendarPage: role="customer"와 기사 정보 전달
ReservationCalendarPage->>Customer: 예약 상태와 견적 요청 동작 표시
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/components/mover/detail/MoverDetailActions.tsx (1)
32-32: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win등록한 route 상수를 사용하세요.
Line 32는 같은 PR에서 추가한
APP_ROUTES.MOVERS.CALENDAR대신"/movers/calendar"를 다시 정의합니다. 경로가 변경되면 상세 화면 링크와 route registry가 분리됩니다.수정 예시
import { LikeOutlineButton } from "`@/components/mover/detail/LikeOutlineButton`"; +import { APP_ROUTES } from "`@/lib/constants/appRoutes`"; -const calendarHref = `/movers/calendar?moverId=${encodeURIComponent(moverId)}&moverName=${encodeURIComponent(moverName)}`; +const calendarHref = `${APP_ROUTES.MOVERS.CALENDAR}?moverId=${encodeURIComponent(moverId)}&moverName=${encodeURIComponent(moverName)}`;As per path instructions,
매직 넘버·매직 스트링을 지양합니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/mover/detail/MoverDetailActions.tsx` at line 32, Replace the hardcoded "/movers/calendar" base path in the calendarHref construction with the registered APP_ROUTES.MOVERS.CALENDAR constant, while preserving the existing moverId and moverName query parameters and encoding.Source: Path instructions
src/components/calendar/ReservationCalendarPage.tsx (2)
270-275: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win링크 라벨의 직접 font-size 지정을
Textvariant로 바꾸세요.공통
Text컴포넌트가 있는 화면에서 링크 라벨에text-[16px]를 직접 지정하면 typography token 변경이 분산됩니다.
src/components/calendar/ReservationCalendarPage.tsx#L270-L275: 견적 요청 링크 라벨에 적절한Textvariant를 사용하세요.src/components/mover/detail/MoverDetailActions.tsx#L56-L61: sticky 일정 확인 링크 라벨에 같은Textvariant를 사용하세요.src/components/mover/detail/MoverDetailActions.tsx#L85-L90: sidebar 일정 확인 링크 라벨에 같은Textvariant를 사용하세요.As per path instructions,
텍스트는 Text 컴포넌트의 variant를 사용합니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/calendar/ReservationCalendarPage.tsx` around lines 270 - 275, 직접 지정한 text-[16px] 대신 공통 Text 컴포넌트의 동일한 적절한 variant로 링크 라벨 typography를 통일하세요. src/components/calendar/ReservationCalendarPage.tsx 270-275의 견적 요청 링크, src/components/mover/detail/MoverDetailActions.tsx 56-61 및 85-90의 일정 확인 링크 모두 해당 variant를 사용하도록 변경하고, 링크의 기존 스타일과 동작은 유지하세요.Source: Path instructions
64-76: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win디자인 토큰 밖의 색상과 shadow 값을 제거하세요.
AvailabilityPill과 캘린더 패널이 임의 색상 및 RGBA shadow 값을 사용합니다. 상태 색상과 elevation은src/styles/tokens.theme.css의 기존 토큰으로 통일하세요.
src/components/calendar/ReservationCalendarPage.tsx#L64-L76:bg-[#eef0f3],text-[#74777d],bg-gray-400,bg-black-100을 상태 의미에 맞는 토큰으로 바꾸세요.src/components/calendar/ReservationCalendarPage.tsx#L144-L144: 임의shadow-[...]값을 기존 elevation token으로 바꾸세요.src/components/calendar/ReservationCalendarPage.tsx#L226-L226: 임의shadow-[...]값을 기존 elevation token으로 바꾸세요.As per path instructions,
색상·간격·radius는 src/styles/tokens.theme.css의 디자인 토큰을 사용해야 합니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/calendar/ReservationCalendarPage.tsx` around lines 64 - 76, src/components/calendar/ReservationCalendarPage.tsx:64-76의 AvailabilityPill 상태 스타일에서 임의 색상(bg-[`#eef0f3`], text-[`#74777d`], bg-gray-400, bg-black-100)을 제거하고 src/styles/tokens.theme.css의 상태 의미에 맞는 기존 색상 토큰으로 교체하세요. 같은 파일 144-144 및 226-226의 캘린더 패널 임의 shadow-[...] 값도 기존 elevation 토큰으로 교체하세요.Source: Path instructions
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/calendar/ReservationCalendarPage.tsx`:
- Around line 196-220: ReservationCalendarPage의 날짜 버튼과 상태 선택 버튼이 선택 상태를 접근성 트리에
노출하도록 수정하세요. 날짜 버튼에는 isSelected를 사용하는 aria-pressed를 추가하고, accessible name에 전체
날짜와 예약 상태(status)를 포함하세요. 상태 버튼에는 selectedStatus === status를 사용하는 aria-pressed를
추가하며, 기존 키보드·포커스 동작은 유지하세요.
---
Nitpick comments:
In `@src/components/calendar/ReservationCalendarPage.tsx`:
- Around line 270-275: 직접 지정한 text-[16px] 대신 공통 Text 컴포넌트의 동일한 적절한 variant로 링크
라벨 typography를 통일하세요. src/components/calendar/ReservationCalendarPage.tsx
270-275의 견적 요청 링크, src/components/mover/detail/MoverDetailActions.tsx 56-61 및
85-90의 일정 확인 링크 모두 해당 variant를 사용하도록 변경하고, 링크의 기존 스타일과 동작은 유지하세요.
- Around line 64-76: src/components/calendar/ReservationCalendarPage.tsx:64-76의
AvailabilityPill 상태 스타일에서 임의 색상(bg-[`#eef0f3`], text-[`#74777d`], bg-gray-400,
bg-black-100)을 제거하고 src/styles/tokens.theme.css의 상태 의미에 맞는 기존 색상 토큰으로 교체하세요. 같은
파일 144-144 및 226-226의 캘린더 패널 임의 shadow-[...] 값도 기존 elevation 토큰으로 교체하세요.
In `@src/components/mover/detail/MoverDetailActions.tsx`:
- Line 32: Replace the hardcoded "/movers/calendar" base path in the
calendarHref construction with the registered APP_ROUTES.MOVERS.CALENDAR
constant, while preserving the existing moverId and moverName query parameters
and encoding.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 9d77c756-e036-4d04-9be8-f440131a2b98
📒 Files selected for processing (6)
src/app/estimate/calendar/page.tsxsrc/app/movers/calendar/page.tsxsrc/components/calendar/ReservationCalendarPage.tsxsrc/components/mover/detail/MoverDetailActions.tsxsrc/components/mover/detail/MoverDetailView.tsxsrc/lib/constants/appRoutes.ts
juengseulki
left a comment
juengseulki
left a comment
There was a problem hiding this comment.
📋 PR 리뷰
전체 변경사항 확인했습니다!
이번 PR은 기사/고객용 예약 캘린더 목업 UI, 기사 상세 → 일정 확인 이동, 선택 날짜 → 견적 요청 진입, 반응형 및 접근성 기본 처리를 중심으로 확인했습니다.
👍 잘 반영된 부분
- 기사용
/estimate/calendar, 고객용/movers/calendar페이지를 역할별 진입점으로 분리하고, 공통ReservationCalendarPage를 재사용한 구조가 깔끔합니다. - 캘린더는 6주 × 7일 고정 그리드로 구성되어 월 이동 시 레이아웃이 흔들리지 않도록 한 점이 좋습니다.
- 이전/다음 달 날짜를 함께 노출하고, 해당 날짜 클릭 시 실제 그 달로
viewDate가 이동하도록 구현되어 UX가 자연스럽습니다. - 날짜 상태를
available / full / off로 명확히 나누고, 기사 화면에서는 선택 날짜의 상태를 클라이언트 state로 변경할 수 있도록 잘 구성되어 있습니다. - 고객 화면에서는
available일 때만 견적 요청 CTA가 활성화되고,full / off에서는 disabled 버튼이 노출되어 현재 목업 정책이 명확합니다. - 날짜 버튼에
aria-label과aria-pressed를 적용하고, 월 이동 버튼에도aria-label이 있어 기본 접근성도 잘 챙겼습니다. - 기사 상세에서
moverId,moverName을 calendar query로 넘기고, 고객용 캘린더에서 해당 값을 제목과 견적 요청 링크에 재사용하는 흐름이 잘 연결되어 있습니다. APP_ROUTES에도 고객용/기사용 캘린더 경로를 추가해 향후 경로 재사용 기반을 만든 점도 좋습니다.
🔍 확인 및 제안
1. 기사 상세의 캘린더 링크는 APP_ROUTES 상수를 써도 좋을 것 같습니다
APP_ROUTES.MOVERS.CALENDAR을 추가했는데,
MoverDetailActions.tsx에서는 다시 "/movers/calendar" 문자열을 직접 쓰고 있습니다.
현재 동작에는 문제가 없지만,
이미 route 상수를 추가한 만큼 여기에서도 상수를 사용하면 경로 변경 시 한 곳만 수정하면 되어 더 일관적일 것 같습니다.
2. 고객용 견적 요청 링크의 date query는 실제 폼 연동 전에 한 번 확인이 필요합니다
현재 캘린더에서
?moverId=...&date=YYYY-MM-DD
형태로 견적 요청 페이지로 이동합니다.
이번 PR은 목업 범위라 괜찮지만,
실제 API 연결 단계에서는 EstimateRequestForm이 이 date와 moverId query를 실제 초기값으로 읽어 쓰는지 반드시 연결 확인이 필요합니다.
3. 기본 날짜가 2026년 8월로 고정되어 있습니다
viewDate와 selectedDate가 각각
new Date(2026, 7, 1)"2026-08-14"
로 고정되어 있습니다.
현재 목업 화면을 보여주는 용도라면 괜찮지만,
API 연동 시에는 new Date() 또는 실제 조회 기준 월을 사용하도록 바꿔야 합니다.
💬 To Reviewer
요청해주신 UI/UX 중심으로 확인했습니다.
기사와 고객 화면을 별도 page entry로 나누고,
실제 캘린더 UI는 ReservationCalendarPage 하나로 재사용한 구조가 자연스럽습니다.
기사 쪽은 선택 날짜 상태를 예약 가능/마감/휴무로 변경할 수 있고,
고객 쪽은 예약 가능한 날짜에서만 견적 요청 CTA가 노출되어 역할별 UX 차이도 잘 반영되어 있습니다.
기사 상세에서 일정 확인으로 이동할 때 moverId/moverName을 전달하고,
고객용 캘린더에서는 이를 제목과 견적 요청 링크에 활용하고 있어 화면 간 연결도 잘 되어 있습니다.
다만 이미 APP_ROUTES.MOVERS.CALENDAR 상수를 추가했기 때문에
MoverDetailActions.tsx에서도 직접 문자열 대신 해당 상수를 사용하면 더 일관적일 것 같습니다.
또 현재 선택 날짜와 초기 월이 2026년 8월 목업 값으로 고정되어 있고,
견적 요청 페이지에는 date, moverId를 query로 넘기는 데까지만 되어 있으므로
실제 API 연동 시에는 해당 query를 폼 초기값으로 소비하는 작업이 필요해 보입니다.
UI/UX 목업 범위는 잘 구현되어 있고,
실제 연동 단계에서 route 상수 사용과 query 초기값 연결 정도만 이어서 정리하면 좋겠습니다.
수고하셨습니다! 👍
…into feature/mover-reservation-calendar
…into feature/mover-reservation-calendar
|
기사/고객 화면을 별도 entry로 나누고 ReservationCalendarPage 하나로 재사용하신 구조가 깔끔합니다. 6주 고정 그리드로 월이 바뀌어도 레이아웃이 안 흔들리도록 꼼꼼하게 챙겨주신 것 같아요! |
3 participants
📋 작업 내용
🔥 변경 사항
✅ 체크리스트
📷 스크린샷 (선택)
고객용
🔗 관련 이슈
Closes #
💬 To Reviewer
Summary by CodeRabbit