Skip to content

refactor: 기사기능 페이지 리팩토링 - #82

Merged
soooob43 merged 4 commits into
devfrom
refactor/mover-estimate
Aug 7, 2026
Merged

refactor: 기사기능 페이지 리팩토링#82
soooob43 merged 4 commits into
devfrom
refactor/mover-estimate

Conversation

@soooob43

@soooob43 soooob43 commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

📋 작업 내용

  • 기사님 견적 관리 페이지의 로딩 및 카드 상호작용을 개선했습니다.
  • 받은 요청, 보낸 견적 조회, 반려 요청 페이지의 로딩 UI를 스켈레톤으로 통일했습니다.

🔥 변경 사항

  • 받은 요청 페이지에서 로딩 중에도 전체 0건 영역이 유지되도록 수정
  • 받은 요청 전용 전체 페이지 및 카드 스켈레톤 추가
  • 보낸 견적 조회와 반려 요청에서 공통 카드 스켈레톤 사용
  • 인증 확인 및 API 조회 단계 모두 동일한 스켈레톤 표시
  • 완료 여부와 관계없이 보낸 견적 카드 전체에서 상세 페이지 이동 지원
  • 실제 Next.js Link를 사용해 링크 접근성과 기본 브라우저 동작 지원
  • 완료 카드의 중복 견적 상세보기 버튼 제거
  • 카드 호버 시 테두리, 그림자 및 상승 효과 추가
  • 완료 카드의 텍스트 드래그 방지
  • 새로고침 중 기사 헤더 내비게이션이 사라지는 현상 수정

✅ 체크리스트

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

📷 스크린샷 (선택)

image

🔗 관련 이슈

Closes #


💬 To Reviewer

  • 완료 카드의 중복 견적 상세보기 버튼 제거했습니다. DB 작업 끝나면 스크린샷 첨부해보겠습니다.

Summary by CodeRabbit

  • 새로운 기능

    • 받은 요청과 발송·거절된 견적 목록에 페이지별 로딩 스켈레톤 UI를 추가했습니다.
    • 카드, 필터, 검색 영역을 포함한 반응형 로딩 화면을 제공합니다.
    • 로딩 상태를 보조기술이 인식할 수 있도록 접근성을 개선했습니다.
  • 개선

    • 로딩 중 텍스트 메시지 대신 콘텐츠 형태의 스켈레톤을 표시합니다.
    • 견적 카드에 호버 효과를 추가하고, 완료된 견적은 비활성 상태로 명확히 표시합니다.

@vercel

vercel Bot commented Aug 7, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
moving-frontend Ready Ready Preview Aug 7, 2026 6:30am
moving-frontend-p2ol Ready Ready Preview Aug 7, 2026 6:30am

@coderabbitai

coderabbitai Bot commented Aug 7, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@soooob43, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 47 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 8497b852-a9e5-421f-99a7-82fab77b0a69

📥 Commits

Reviewing files that changed from the base of the PR and between dd51bf0 and d6ea216.

📒 Files selected for processing (2)
  • src/components/estimate/MoverEstimateListSkeleton.tsx
  • src/components/estimate/ReceivedRequestsSkeleton.tsx
📝 Walkthrough

Walkthrough

견적 관련 페이지의 텍스트 로딩 상태를 반응형 스켈레톤 UI로 교체했습니다. 인증 fallback에도 페이지별 스켈레톤을 연결했습니다. 받은 요청 수 영역에도 로딩 스켈레톤을 적용했습니다. 완료된 견적 카드의 스타일과 표시 내용을 조정했습니다.

Changes

견적 로딩 UI

Layer / File(s) Summary
견적 목록 스켈레톤 구성
src/components/estimate/MoverEstimateListSkeleton.tsx, src/components/estimate/ReceivedRequestsSkeleton.tsx
견적 카드, 요청 카드, 반응형 그리드, 페이지 레이아웃 스켈레톤을 추가했습니다. aria-labelaria-busy를 설정했습니다.
페이지 로딩 상태 연결
src/app/estimate/..., src/components/estimate/ReceivedRequestsPage.tsx, src/components/estimate/RejectedRequestsPage.tsx, src/components/estimate/sent/SentEstimatesPage.tsx, src/lib/loading/getMoverProtectedLoadingFallback.tsx
인증 및 초기 데이터 로딩 상태에서 메시지 대신 페이지별 스켈레톤을 렌더링하도록 변경했습니다. 받은 요청 수 영역도 로딩 중 스켈레톤을 표시합니다.
완료 견적 카드 상태 조정
src/components/estimate/sent/SentEstimateCard.tsx
카드에 조건부 스타일과 호버 효과를 추가했습니다. 완료된 카드에서는 선택과 상세보기 링크를 제거하고 완료 메시지만 표시합니다.

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

Possibly related PRs

Suggested reviewers: juengseulki, yooseohyeon, 9g-g9

🚥 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
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 기사 기능 페이지의 주요 변경 범위를 정확히 나타내지만, 스켈레톤 로딩 UI와 카드 상호작용 개선 내용은 구체적으로 설명하지 않습니다.
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 refactor/mover-estimate

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

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

@yooseohyeon yooseohyeon 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.

작업하시느라 수고하셨습니다! 공용 Skeleton을 잘 조합했고, 카드/페이지 레이아웃도 기존 UI에 맞춰 구성했습니다.
아래는 그냥 소소한 의견입니다!
견적 완료 여부에 상관 없이 견적 카드 클릭 시 견적 상세 페이지로 이동하게 되면서, 완료 견적 카드에서도 카드 전체 클릭으로 바꾸고 "견적 상세보기” 버튼을 없애신 의도를 이해했습니다 또한 카드 hover 시 효과를 추가하신 점도 좋았습니다. 하지만 오버레이 때문에 클릭 가능한 요소임이 시각적으로 덜 드러날 수도 있을 것 같습니다. 이건 제 주관적인 느낌일 수도 있고, 오버레이를 사용하지 않는 경우 다른 방식으로 완료 여부를 알려야하기 때문에 아주 나중에 고려해봐도 될 사항인 것 같습니다.

Comment thread src/components/estimate/ReceivedRequestsSkeleton.tsx Outdated

@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

🤖 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/MoverEstimateListSkeleton.tsx`:
- Around line 41-45: 각 스켈레톤 로딩 컨테이너에 상태 역할을 추가하세요.
src/components/estimate/MoverEstimateListSkeleton.tsx#L41-L45의 목록 컨테이너와
src/components/estimate/ReceivedRequestsSkeleton.tsx#L42-L45의 받은 요청 컨테이너에
role="status"를 추가하고, 기존 aria-label 및 aria-busy 속성은 유지하세요.

In `@src/components/estimate/ReceivedRequestsSkeleton.tsx`:
- Around line 32-35: Replace the arbitrary gap-[11px] utility in the
ReceivedRequestsSkeleton layout with the existing spacing token utility, such as
gap-12, while preserving the current responsive grid and skeleton structure.
🪄 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: 3dd4c9ba-61e3-450d-8749-b5919a5743dc

📥 Commits

Reviewing files that changed from the base of the PR and between b41c123 and dd51bf0.

📒 Files selected for processing (10)
  • src/app/estimate/received-requests/page.tsx
  • src/app/estimate/rejected/page.tsx
  • src/app/estimate/sent/page.tsx
  • src/components/estimate/MoverEstimateListSkeleton.tsx
  • src/components/estimate/ReceivedRequestsPage.tsx
  • src/components/estimate/ReceivedRequestsSkeleton.tsx
  • src/components/estimate/RejectedRequestsPage.tsx
  • src/components/estimate/sent/SentEstimateCard.tsx
  • src/components/estimate/sent/SentEstimatesPage.tsx
  • src/lib/loading/getMoverProtectedLoadingFallback.tsx

Comment thread src/components/estimate/MoverEstimateListSkeleton.tsx
Comment thread src/components/estimate/ReceivedRequestsSkeleton.tsx Outdated
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