feat: 기사님 견적 상세 조회 페이지 구현 - #40
Conversation
📝 WalkthroughWalkthrough보낸 견적 목록과 상세 화면을 추가하고, 상태별 카드·무한 스크롤·상세 라우팅을 구현했습니다. 보낸 견적 및 반려 요청 라우트를 등록했으며 견적 탭 링크 경로를 갱신했습니다. Changes보낸 견적 기능
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: Suggested reviewers: Sequence Diagram(s)sequenceDiagram
participant SentEstimatesPage
participant IntersectionObserver
participant SentEstimateCard
participant NextRouter
participant SentEstimateDetailRoute
participant SentEstimateDetailPage
SentEstimatesPage->>IntersectionObserver: sentinel 관찰
IntersectionObserver->>SentEstimatesPage: visibleCount 증가
SentEstimatesPage->>SentEstimateCard: 견적 데이터 렌더링
SentEstimateCard->>NextRouter: /estimate/sent/{estimateId} 이동
NextRouter->>SentEstimateDetailRoute: estimateId 전달
SentEstimateDetailRoute->>SentEstimateDetailPage: 유효한 숫자 ID 전달
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Comment |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/components/estimate/sent/SentEstimateCard.tsx (1)
3-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win아이콘 import를
@/icons배럴로 통일해 주세요.직접 SVG 경로를 import하면 프로젝트의 공통 아이콘 진입점과 export 관리 규칙을 우회합니다.
FrameIcon이 배럴에서 제공되는지 확인하고 두 위치를 같은 import 방식으로 변경하세요.
src/components/estimate/sent/SentEstimateCard.tsx#L3-L3:FrameIcon을@/icons에서 import하도록 변경하세요.src/components/estimate/sent/SentEstimateDetailPage.tsx#L9-L9:FrameIcon을@/icons에서 import하도록 변경하세요.🤖 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/estimate/sent/SentEstimateCard.tsx` at line 3, Update the FrameIcon imports in SentEstimateCard.tsx (line 3) and SentEstimateDetailPage.tsx (line 9) to use the shared `@/icons` barrel export, verifying that FrameIcon is exported there, instead of importing the SVG path directly.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/estimate/sent/SentEstimateDetailPage.tsx`:
- Line 1: Remove the "use client" directive from SentEstimateDetailPage so it
remains a server component. Keep the shared-button client boundary encapsulated
within EstimateDetailShare and do not add client hooks or browser APIs to the
page.
In `@src/components/estimate/sent/SentEstimatesPage.tsx`:
- Around line 74-83: Update the loading status rendering in SentEstimatesPage so
the “loading next estimate” message appears only while a next-page request is
actually in progress, using the existing pagination fetch-status symbol such as
isFetchingNextPage rather than hasNextPage alone; otherwise remove the message
for the mock infinite-scroll flow.
---
Nitpick comments:
In `@src/components/estimate/sent/SentEstimateCard.tsx`:
- Line 3: Update the FrameIcon imports in SentEstimateCard.tsx (line 3) and
SentEstimateDetailPage.tsx (line 9) to use the shared `@/icons` barrel export,
verifying that FrameIcon is exported there, instead of importing the SVG path
directly.
🪄 Autofix (Beta)
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: 0728cf31-e34b-4410-adcc-a1a5f0208f15
⛔ Files ignored due to path filters (1)
src/icons/frame.svgis excluded by!**/*.svg
📒 Files selected for processing (7)
src/app/estimate/rejected/page.tsxsrc/app/estimate/sent/[estimateId]/page.tsxsrc/app/estimate/sent/page.tsxsrc/components/estimate/MoverEstimateTabs.tsxsrc/components/estimate/sent/SentEstimateCard.tsxsrc/components/estimate/sent/SentEstimateDetailPage.tsxsrc/components/estimate/sent/SentEstimatesPage.tsx
juengseulki
left a comment
There was a problem hiding this comment.
📋 PR 리뷰
👍 좋았던 점
- 기사님 견적 관리 경로를
/estimate/received-requests,/estimate/sent,/estimate/rejected로 통일해 기존의estimate와estimates경로 혼용을 정리한 점이 좋았습니다. - 상세 페이지의
estimateId를 검증하고 잘못된 값은notFound()로 처리해 유효하지 않은 URL 접근을 방어했습니다. - 이사 완료 상태의 견적에만 오버레이와 상세보기 버튼을 표시하고, 동적 상세 경로로 연결해 요구사항에 맞는 흐름을 구현했습니다.
- 기존 견적 상세 공통 컴포넌트인
EstimateDetailLayout,EstimateDetailPrice,EstimateDetailInfoSection,EstimateDetailShare를 재사용해 중복 구현을 줄였습니다. - 백엔드 API가 없는 상황에서도 목업 데이터와
IntersectionObserver를 활용해 목록·무한 스크롤·상세 이동 흐름을 먼저 검증할 수 있도록 구성했습니다. - Observer 해제 처리가 포함되어 있어 컴포넌트 재렌더링이나 언마운트 시 불필요한 감시가 남지 않도록 처리했습니다.
🔍 확인 및 제안
- 무한 스크롤 안내 문구는 현재 실제 요청 상태가 아닌
hasNextPage기준으로 표시되고 있습니다. API 연동 시isFetchingNextPage에 연결하거나 목업 단계에서는 제거하면 좋겠습니다. SentEstimateDetailPage에서는 클라이언트 기능을 직접 사용하지 않으므로"use client"를 제거하고, 공유 버튼 내부만 클라이언트 경계로 유지하는 방향을 제안드립니다.- 목업 상세 데이터가
estimateId와 관계없이 항상 동일하게 표시되는 점은 API 연동 전 임시 구현임을 확인했습니다.
전체적으로 공통 상세 컴포넌트를 잘 재사용하면서 목록에서 상세로 이어지는 흐름과 반응형 UI를 깔끔하게 구현한 PR이었습니다. 탭 라벨 오류만 수정되면 현재 목업 구현 범위에서는 병합해도 좋을 것 같습니다. 수고하셨습니다! 😊
📋 작업 내용
🔥 변경 사항
받은 요청: /estimate/received-requests
보낸 견적 조회: /estimate/sent
반려 요청: /estimate/rejected
✅ 체크리스트
📷 스크린샷 (선택)
견적 상세


🔗 관련 이슈
Closes #
💬 To Reviewer
Summary by CodeRabbit
새 기능
개선