Skip to content

feat: 기사님 견적 상세 조회 페이지 구현 - #40

Merged
soooob43 merged 4 commits into
devfrom
feature/mover-received-requests-page
Jul 31, 2026
Merged

feat: 기사님 견적 상세 조회 페이지 구현#40
soooob43 merged 4 commits into
devfrom
feature/mover-received-requests-page

Conversation

@soooob43

@soooob43 soooob43 commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

📋 작업 내용

  • 기사님 내 견적 관리의 보낸 견적 조회 페이지를 구현했습니다.
  • 보낸 견적의 상세 조회 페이지를 추가했습니다.

🔥 변경 사항

  • 기사님 견적 관리 경로를 다음과 같이 정리했습니다.
    받은 요청: /estimate/received-requests
    보낸 견적 조회: /estimate/sent
    반려 요청: /estimate/rejected
  • 이사 완료된 견적에서 상세 페이지로 이동할 수 있도록 연결했습니다.
  • 보낸 견적 목록에 무한 스크롤을 적용했습니다.
  • 백엔드 목록·상세 API 연동 전 확인할 수 있도록 목업 데이터를 적용했습니다.

✅ 체크리스트

  • 로컬에서 정상 동작을 확인했습니다.
  • 기존 기능에 영향을 주지 않는지 확인했습니다.
  • 불필요한 console.log를 제거했습니다.
  • lint를 통과했습니다.
  • README 또는 문서를 수정했습니다. (필요 시)
  • API 명세와 일치하는지 확인했습니다.

📷 스크린샷 (선택)

image image

견적 상세
image
image


🔗 관련 이슈

Closes #


💬 To Reviewer

  • 백엔드 API 개발 안 되어있어서 로컬에서 목업 데이터로 확인했습니다. 내일 백엔드 작업해서 연동할 예정입니다.
  • 아직 헤더 연결 안 되어 있습니다. 참고 바랍니다.

Summary by CodeRabbit

  • 새 기능

    • 보낸 견적 목록과 견적 상세 화면을 추가했습니다.
    • 보낸 견적을 상태별로 확인하고, 고객·이동 정보·금액을 확인할 수 있습니다.
    • 견적 목록에 무한 스크롤을 적용했습니다.
    • 반려 요청 화면을 추가하고 반려 사유를 확인할 수 있도록 했습니다.
    • 견적 상세 정보를 공유할 수 있습니다.
  • 개선

    • 견적 메뉴 탭의 이동 경로를 보낸 견적 및 반려 요청 화면에 맞게 변경했습니다.
    • 잘못된 견적 상세 주소 접근 시 오류 화면을 표시합니다.

@coderabbitai

coderabbitai Bot commented Jul 30, 2026

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

보낸 견적 목록과 상세 화면을 추가하고, 상태별 카드·무한 스크롤·상세 라우팅을 구현했습니다. 보낸 견적 및 반려 요청 라우트를 등록했으며 견적 탭 링크 경로를 갱신했습니다.

Changes

보낸 견적 기능

Layer / File(s) Summary
견적 라우트 및 탭 연결
src/app/estimate/sent/page.tsx, src/app/estimate/sent/[estimateId]/page.tsx, src/app/estimate/rejected/page.tsx, src/components/estimate/MoverEstimateTabs.tsx
보낸 견적 목록·상세 및 반려 요청 라우트를 추가하고 탭 링크를 새 경로로 변경합니다. 상세 라우트는 양의 안전한 정수 ID가 아니면 notFound()를 호출합니다.
보낸 견적 목록과 카드
src/components/estimate/sent/SentEstimateCard.tsx, src/components/estimate/sent/SentEstimatesPage.tsx
SENT, CONFIRMED, COMPLETED 상태별 카드 표시를 추가하고, 목업 데이터를 IntersectionObserver로 페이지 단위 렌더링하며 상세 경로로 이동합니다.
보낸 견적 상세 화면
src/components/estimate/sent/SentEstimateDetailPage.tsx
임시 고정 데이터를 기반으로 견적 요약·가격·상세 정보·공유 영역을 구성하고 owner 공유 UI를 연결합니다.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Possibly related PRs

Suggested labels: 🏢코드리뷰

Suggested reviewers: juengseulki, 9g-g9

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 전달
Loading
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목이 보낸 견적 상세 조회 구현을 잘 요약하며, 변경 범위의 핵심 일부를 명확히 나타냅니다.
✨ Finishing Touches 💡 1
📝 Generate docstrings 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/mover-received-requests-page

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

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

📥 Commits

Reviewing files that changed from the base of the PR and between 78b8c2c and 4e157ac.

⛔ Files ignored due to path filters (1)
  • src/icons/frame.svg is excluded by !**/*.svg
📒 Files selected for processing (7)
  • src/app/estimate/rejected/page.tsx
  • src/app/estimate/sent/[estimateId]/page.tsx
  • src/app/estimate/sent/page.tsx
  • src/components/estimate/MoverEstimateTabs.tsx
  • src/components/estimate/sent/SentEstimateCard.tsx
  • src/components/estimate/sent/SentEstimateDetailPage.tsx
  • src/components/estimate/sent/SentEstimatesPage.tsx

Comment thread src/components/estimate/sent/SentEstimateDetailPage.tsx
Comment thread src/components/estimate/sent/SentEstimatesPage.tsx

@juengseulki juengseulki left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

📋 PR 리뷰

👍 좋았던 점

  • 기사님 견적 관리 경로를 /estimate/received-requests, /estimate/sent, /estimate/rejected로 통일해 기존의 estimateestimates 경로 혼용을 정리한 점이 좋았습니다.
  • 상세 페이지의 estimateId를 검증하고 잘못된 값은 notFound()로 처리해 유효하지 않은 URL 접근을 방어했습니다.
  • 이사 완료 상태의 견적에만 오버레이와 상세보기 버튼을 표시하고, 동적 상세 경로로 연결해 요구사항에 맞는 흐름을 구현했습니다.
  • 기존 견적 상세 공통 컴포넌트인 EstimateDetailLayout, EstimateDetailPrice, EstimateDetailInfoSection, EstimateDetailShare를 재사용해 중복 구현을 줄였습니다.
  • 백엔드 API가 없는 상황에서도 목업 데이터와 IntersectionObserver를 활용해 목록·무한 스크롤·상세 이동 흐름을 먼저 검증할 수 있도록 구성했습니다.
  • Observer 해제 처리가 포함되어 있어 컴포넌트 재렌더링이나 언마운트 시 불필요한 감시가 남지 않도록 처리했습니다.

🔍 확인 및 제안

  • 무한 스크롤 안내 문구는 현재 실제 요청 상태가 아닌 hasNextPage 기준으로 표시되고 있습니다. API 연동 시 isFetchingNextPage에 연결하거나 목업 단계에서는 제거하면 좋겠습니다.
  • SentEstimateDetailPage에서는 클라이언트 기능을 직접 사용하지 않으므로 "use client"를 제거하고, 공유 버튼 내부만 클라이언트 경계로 유지하는 방향을 제안드립니다.
  • 목업 상세 데이터가 estimateId와 관계없이 항상 동일하게 표시되는 점은 API 연동 전 임시 구현임을 확인했습니다.

전체적으로 공통 상세 컴포넌트를 잘 재사용하면서 목록에서 상세로 이어지는 흐름과 반응형 UI를 깔끔하게 구현한 PR이었습니다. 탭 라벨 오류만 수정되면 현재 목업 구현 범위에서는 병합해도 좋을 것 같습니다. 수고하셨습니다! 😊

Comment thread src/components/estimate/sent/SentEstimatesPage.tsx
Comment thread src/components/estimate/sent/SentEstimateDetailPage.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants