Skip to content

feat: 기사 내 견적 관리 및 상세 페이지 API 연동 - #44

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

feat: 기사 내 견적 관리 및 상세 페이지 API 연동#44
soooob43 merged 9 commits into
devfrom
feature/mover-received-requests-page

Conversation

@soooob43

@soooob43 soooob43 commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

📋 작업 내용

  • 기사님의 내 견적 관리 목록 및 상세페이지 실제 백엔드 API 연동

🔥 변경 사항

  • 보낸 견적 목록·상세 API 함수 및 React Query 훅 추가
  • 프론트 하드코딩 데이터 제거 후 DB 조회 결과 렌더링
  • 상세페이지에 고객명, 이사 유형, 견적 금액, 요청일, 이용일, 출발지·도착지 표시
  • 완료된 견적의 상세페이지 이동 기능 적용
  • 프론트 API 환경변수의 /api 경로 정리 및 중복 경로 호출 수정

✅ 체크리스트

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

📷 스크린샷 (선택)

image

🔗 관련 이슈

Closes #


💬 To Reviewer

  • 작업 과정에서 appRoutes, apiRoutes, queryKeys 파일 수정이 필요해 보였습니다.
    다만 나연님께 헤더 관련 경로를 전달드린 상태이고, 해당 파일들은 현재 슬기님께서 수정 중인 것으로 알고 있어 제가 함께 수정하면 경로가 꼬이거나 충돌이 발생할 수 있을 것 같아 우선 변경하지 않았습니다.
    제가 수정하는 방향이 맞다면 편하게 말씀 부탁드립니다! 확인 후 수정해서 해당 PR에 포함하겠습니다.

Summary by CodeRabbit

  • 새 기능

    • 보낸 견적 목록과 상세 정보를 실제 데이터로 확인할 수 있습니다.
    • 목록에 무한 스크롤, 로딩·오류·빈 목록 상태 및 재시도 기능을 추가했습니다.
    • 상세 페이지에서 고객 정보, 이동 정보, 가격, 일정, 주소를 표시합니다.
    • 견적 상태에 따라 확정 견적 정보를 조건부로 제공합니다.
  • 개선

    • 거절된 견적 페이지의 로딩 및 빈 목록 표시를 일관된 상태 화면으로 개선했습니다.
    • 날짜와 주소를 읽기 쉽게 표시하도록 정리했습니다.

@coderabbitai

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 643a3641-e5b2-4574-8f65-7e5978f1e59a

📥 Commits

Reviewing files that changed from the base of the PR and between 2caceba and 6a6ff9a.

📒 Files selected for processing (11)
  • src/components/estimate/MoverEstimateTabs.tsx
  • src/components/estimate/RejectedRequestsPage.tsx
  • src/components/estimate/sent/SentEstimateDetailPage.tsx
  • src/components/estimate/sent/SentEstimatesPage.tsx
  • src/hooks/useSentEstimates.ts
  • src/lib/api/moverEstimateRequests.ts
  • src/lib/api/sentEstimates.ts
  • src/lib/constants/apiRoutes.ts
  • src/lib/constants/appRoutes.ts
  • src/lib/constants/queryKeys.ts
  • src/types/sentEstimate.ts
🚧 Files skipped from review as they are similar to previous changes (11)
  • src/lib/constants/queryKeys.ts
  • src/lib/constants/apiRoutes.ts
  • src/components/estimate/RejectedRequestsPage.tsx
  • src/lib/constants/appRoutes.ts
  • src/types/sentEstimate.ts
  • src/lib/api/moverEstimateRequests.ts
  • src/hooks/useSentEstimates.ts
  • src/components/estimate/MoverEstimateTabs.tsx
  • src/components/estimate/sent/SentEstimatesPage.tsx
  • src/lib/api/sentEstimates.ts
  • src/components/estimate/sent/SentEstimateDetailPage.tsx

📝 Walkthrough

Walkthrough

보낸 견적 목록과 상세 화면을 목업 데이터에서 API 조회 방식으로 변경했습니다. 무한 스크롤, 로딩·오류·빈 결과 상태, 재시도, 견적 경로와 타입을 추가했습니다. 반려 요청 화면의 상태 표시도 공통 컴포넌트로 통합했습니다.

Changes

보낸 견적 조회 흐름

Layer / File(s) Summary
견적 데이터 계약과 API 경로
src/types/sentEstimate.ts, src/lib/constants/*, src/lib/api/sentEstimates.ts, src/lib/api/moverEstimateRequests.ts
보낸 견적 타입, 목록·상세 API, API 경로, 앱 경로, 쿼리 키를 추가했습니다. 기존 견적 요청 API는 API_ROUTES 기반 경로를 사용합니다.
보낸 견적 조회 훅
src/hooks/useSentEstimates.ts
페이지 크기 6의 무한 쿼리를 추가했습니다. 유효한 양의 정수 ID일 때만 상세 조회를 실행합니다.
보낸 견적 목록 화면
src/components/estimate/sent/SentEstimatesPage.tsx, src/components/estimate/MoverEstimateTabs.tsx
목록을 API 데이터로 렌더링합니다. 무한 스크롤과 로딩·오류·빈 결과·추가 로딩 상태를 처리합니다. 상세 이동과 탭 경로에 APP_ROUTES 상수를 사용합니다.
상세 화면과 상태 표시
src/components/estimate/sent/SentEstimateDetailPage.tsx, src/components/estimate/RejectedRequestsPage.tsx
상세 데이터를 고객 정보, 이동 정보, 가격, 주소, 날짜, 상태에 연결합니다. 조회 실패 시 재시도 상태를 표시하고 반려 요청 화면의 상태 표시를 EstimatesQueryStatus로 통합합니다.

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

Sequence Diagram(s)

sequenceDiagram
  participant SentEstimatesPage
  participant useSentEstimates
  participant fetchSentEstimates
  participant EstimatesAPI
  SentEstimatesPage->>useSentEstimates: 목록 조회 요청
  useSentEstimates->>fetchSentEstimates: 페이지와 제한값 전달
  fetchSentEstimates->>EstimatesAPI: 보낸 견적 목록 요청
  EstimatesAPI-->>fetchSentEstimates: 목록과 다음 페이지 정보 반환
  fetchSentEstimates-->>useSentEstimates: 조회 결과 반환
  useSentEstimates-->>SentEstimatesPage: 카드 데이터와 페이지 상태 반환
Loading

Possibly related PRs

Suggested labels: 🏢코드리뷰

Suggested reviewers: 9g-g9

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 54.55% 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
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 보낸 견적 목록과 상세 페이지의 API 연동이라는 주요 변경 사항을 명확하게 설명합니다.
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.
✨ 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: 4

🤖 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`:
- Around line 73-89: SentEstimateDetailPage에서 useSentEstimateDetail 호출 직후
estimateId 유효성을 먼저 검사하고, 유효하지 않은 ID는 로딩 상태가 아닌 오류 상태 또는 목록 이동 동작으로 처리하세요. 유효한
ID에 대해서만 기존 query.isPending, query.isError, query.data 분기를 적용해 무한 로딩을 방지하세요.

In `@src/components/estimate/sent/SentEstimatesPage.tsx`:
- Around line 16-32: Update the infinite-scroll effect in SentEstimatesPage to
read isFetchNextPageError from the query and prevent creating or re-registering
the IntersectionObserver when that error state is true; include it in the effect
dependencies. Add a user-triggered retry control for the failed next-page
request, wired to the query’s retry behavior, so automatic retries remain
disabled until the user retries.

In `@src/lib/api/moverEstimateRequests.ts`:
- Line 38: Move the complete request-list, estimate-submit, rejection, and
rejection-list endpoint paths into API_ROUTES in apiRoutes.ts, including the
existing "/requests", "/reject", and "/rejections" segments. Update the affected
functions in moverEstimateRequests.ts to use only the resulting API_ROUTES
constants and remove direct path-string composition.

In `@src/lib/api/sentEstimates.ts`:
- Around line 1-3: sentEstimates API의 브라우저 요청 구현에서 fetchInstance를 제거하고 프로젝트의
axiosInstance를 사용하도록 변경하세요. 응답은 success와 data 계약을 명시적으로 확인해 성공 데이터를 반환하고, 실패 응답은
error.code 기준으로 기존 변환 규칙에 따라 처리하세요. useSentEstimates와 useSentEstimateDetail에서
사용하는 모든 요청 경로에 동일하게 적용하세요.
🪄 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: 6fc381a2-73f4-4d40-a2d6-c50987b654f7

📥 Commits

Reviewing files that changed from the base of the PR and between 2caceba and f6cc88e.

📒 Files selected for processing (10)
  • src/components/estimate/RejectedRequestsPage.tsx
  • src/components/estimate/sent/SentEstimateDetailPage.tsx
  • src/components/estimate/sent/SentEstimatesPage.tsx
  • src/hooks/useSentEstimates.ts
  • src/lib/api/moverEstimateRequests.ts
  • src/lib/api/sentEstimates.ts
  • src/lib/constants/apiRoutes.ts
  • src/lib/constants/appRoutes.ts
  • src/lib/constants/queryKeys.ts
  • src/types/sentEstimate.ts

Comment thread src/components/estimate/sent/SentEstimateDetailPage.tsx
Comment thread src/components/estimate/sent/SentEstimatesPage.tsx Outdated
Comment thread src/lib/api/moverEstimateRequests.ts Outdated
Comment thread src/lib/api/sentEstimates.ts

@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 리뷰

👍 좋았던 점

  • 보낸 견적 목록과 상세 화면을 실제 백엔드 API로 연동하면서 목업 데이터를 깔끔하게 제거했습니다.
  • API 호출을 React Query 훅으로 분리해 컴포넌트와 데이터 조회 로직의 책임을 명확하게 나눈 점이 좋았습니다.
  • 상세 화면에서 고객명, 이사 유형, 견적 금액, 요청일, 이용일, 출발지·도착지 등 필요한 정보를 API 응답으로 자연스럽게 매핑했습니다.
  • 완료된 견적에서 상세 페이지로 이동하는 기존 UI 흐름을 유지하면서 실제 데이터만 연결해 변경 범위를 최소화했습니다.
  • /api 중복 경로를 함께 정리해 실제 호출 경로를 맞춘 점도 좋았습니다.

🔍 확인 및 제안

인라인 코멘트로 아래 내용을 남겼습니다.

  • React Query 훅으로 API 조회 로직을 분리한 점이 좋았습니다.
  • 하드코딩 데이터를 제거하고 기존 UI를 유지한 채 실제 API 응답으로 교체한 점이 좋았습니다.
  • appRoutes, apiRoutes, queryKeys는 현재 충돌을 고려해 제외하신 것으로 이해했는데, 관련 PR들이 정리된 이후 한 번에 통합하는 방향인지 궁금했습니다.

전체적으로 목업 구현을 실제 API 연동으로 자연스럽게 전환한 PR이었습니다. 기존 화면 구조를 크게 변경하지 않으면서 데이터만 실제 API로 교체해 변경 범위를 최소화한 점이 좋았고, React Query 구조도 이후 유지보수하기 쉬운 형태로 잘 정리된 것 같습니다. 수고하셨습니다! 😊

Comment thread src/lib/constants/apiRoutes.ts
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