feat: 상세 페이지 네비게이션 UX 개선 - #64
Merged
Merged
Conversation
기사·견적 상세 Header에 작은 뒤로가기를 두고, 이력이 없으면 목록 fallback으로 이동한다. Co-authored-by: Cursor <cursoragent@cursor.com>
AppShell에 컬러 캐릭터 TOP 버튼을 마운트하고, 인증·프로필 화면에서는 숨긴다. Co-authored-by: Cursor <cursoragent@cursor.com>
SENT_DETAIL_ROOT invalidate를 추가하고, focus ring이 잘리지 않도록 overflow-clip을 제거한다. Co-authored-by: Cursor <cursoragent@cursor.com>
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthrough상세 화면에 내부 진입을 고려한 fallback 뒤로가기를 추가했습니다. 견적·기사 상세 이동을 기록하고, 공통 최상단 이동 버튼을 연결했습니다. 견적 취소 후 보낸 견적 목록과 상세 캐시를 무효화합니다. Changes상세 화면 내비게이션과 공통 UI 제어
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant EstimateList
participant DetailNavigation
participant DetailPage
participant DetailBackButton
participant NextRouter
EstimateList->>DetailNavigation: 내부 상세 경로 기록
EstimateList->>NextRouter: 상세 페이지로 이동
DetailPage->>DetailBackButton: fallbackHref 전달
DetailBackButton->>DetailNavigation: 내부 진입 상태 소비
DetailNavigation->>NextRouter: router.back() 또는 fallbackHref로 replace()
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 (2)
src/components/estimate/detail/EstimateDetailHeader.tsx (1)
1-1: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win불필요한
"use client"를 제거하세요.
EstimateDetailHeader는 hook, 이벤트 처리, 브라우저 API를 사용하지 않습니다.DetailBackButton만 Client Component로 유지하면 됩니다.
"use client"는 이 파일의 import와 하위 컴포넌트를 클라이언트 그래프에 포함합니다. 정적 헤더까지 Client Component로 만들면 전송 JavaScript 범위가 불필요하게 커집니다. (nextjs.org)수정 예시
-"use client"; -As per coding guidelines, “불필요한 상태·
useEffect·Client Component를 추가하지 않는다” 규칙을 적용했습니다.🤖 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/detail/EstimateDetailHeader.tsx` at line 1, Remove the top-level "use client" directive from EstimateDetailHeader so it remains a Server Component. Keep DetailBackButton as the only Client Component boundary and preserve the existing header rendering.Sources: Coding guidelines, Path instructions
src/components/common/ScrollToTopButton.tsx (1)
87-90: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win위치 spacing에 기존 디자인 토큰을 사용하세요.
1rem,1.5rem,2rem,7rem을 직접 지정하면 공통 spacing 및 반응형 위치 값과 분리됩니다. Safe-area 처리가 필요하면 기존 토큰 또는 공통 safe-area 유틸과 조합하세요.As per path instructions,
src/styles/tokens.theme.css는 Scroll To Top 버튼의 spacing 및 반응형 레이아웃에 토큰 alias 사용을 요구합니다.🤖 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/common/ScrollToTopButton.tsx` around lines 87 - 90, Update the position classes in ScrollToTopButton to use the existing spacing-token aliases for the 1rem, 1.5rem, 2rem, and 7rem values, including the responsive variants. Preserve the current safe-area handling by combining those tokens with the established safe-area utility or token.Sources: Coding guidelines, 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/hooks/useDetailBackNavigation.ts`:
- Around line 13-19: Update the fallback navigation in the
useDetailBackNavigation callback to call router.replace(fallbackHref) instead of
router.push(fallbackHref), while preserving the existing router.back() behavior
when browser history is available.
---
Nitpick comments:
In `@src/components/common/ScrollToTopButton.tsx`:
- Around line 87-90: Update the position classes in ScrollToTopButton to use the
existing spacing-token aliases for the 1rem, 1.5rem, 2rem, and 7rem values,
including the responsive variants. Preserve the current safe-area handling by
combining those tokens with the established safe-area utility or token.
In `@src/components/estimate/detail/EstimateDetailHeader.tsx`:
- Line 1: Remove the top-level "use client" directive from EstimateDetailHeader
so it remains a Server Component. Keep DetailBackButton as the only Client
Component boundary and preserve the existing header rendering.
🪄 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: f6a2b08a-8500-4df5-b1f3-e9c6392efb4f
📒 Files selected for processing (13)
src/components/common/DetailBackButton.tsxsrc/components/common/ScrollToTopButton.tsxsrc/components/estimate/detail/EstimateDetailHeader.tsxsrc/components/estimate/detail/EstimateDetailLayout.tsxsrc/components/estimate/detail/EstimateDetailView.tsxsrc/components/estimate/pending/PendingEstimateDetailView.tsxsrc/components/estimate/requests/EstimateRequestDetailView.tsxsrc/components/layout/AppShell.tsxsrc/components/mover/detail/MoverDetailView.tsxsrc/hooks/useCancelEstimateRequest.tssrc/hooks/useDetailBackNavigation.tssrc/icons/index.tssrc/lib/constants/queryKeys.ts
yooseohyeon
reviewed
Aug 4, 2026
Contributor
There was a problem hiding this comment.
작업하느라 수고하셨습니다!
탑 버튼이 적절한 위치에 잘 등장하며 등장하는 애니메이션까지 넣으신 점이 좋았습니다! 디자인도 서비스 기존 디자인과 잘 어울러지게 센스 있게 잘 만들어주신 것 같아요! 뒤로 버튼도 페이지 상단에 너무 크지 않게 위치해 사용자 입장에서 직관적이고 자연스러운 것 같습니다! (콘텐츠 흐름을 끊지 않으면서, 페이지 진입 시 바로 나갈 수 있는 버튼이 보이므로)
다만 기사 상세 페이지는 공유 기능이 있어 외부에서 해당 페이지로 바로 진입하는 케이스가 있을 수 있습니다. 이 경우에 대비해 수정이 필요한 부분이 보여 인라인 코멘트로 남겼습니다!
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/lib/utils/detailNavigation.ts (1)
14-83: 📐 Maintainability & Code Quality | 🔵 Trivial | 🏗️ Heavy lift
src/lib에서 브라우저 상태 접근을 분리하세요.
readInternalDetailNavigation,clearStoredInternalDetailNavigation,markInternalDetailNavigation은sessionStorage에 의존하거나 이를 변경합니다. 현재src/lib/**/*.ts규칙의 순수 함수 조건을 만족하지 않습니다.클라이언트 전용 storage 접근은 Hook 또는 client adapter로 이동하세요.
src/lib/utils/detailNavigation.ts에는 순수한 pathname 판별 로직만 유지하세요.As per path instructions, "
src/lib/**/*.ts: 순수 함수로 작성하고 부수효과를 두지 않습니다."🤖 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/lib/utils/detailNavigation.ts` around lines 14 - 83, Move the sessionStorage-dependent functions readInternalDetailNavigation, clearStoredInternalDetailNavigation, and markInternalDetailNavigation out of detailNavigation.ts into a client-only storage adapter or Hook. Keep detailNavigation.ts limited to pure pathname comparison and decision logic, and update consumeInternalDetailNavigation, clearInternalDetailNavigation, and markInternalDetailNavigationOnClick to use the adapter without introducing side effects in src/lib.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 123: Update both loading and error branches in SentEstimateDetailPage to
pass backFallbackHref={APP_ROUTES.MOVER_ESTIMATES.SENT}, matching the normal
EstimateDetailQueryState render and preserving the page’s fallback navigation in
all states.
---
Nitpick comments:
In `@src/lib/utils/detailNavigation.ts`:
- Around line 14-83: Move the sessionStorage-dependent functions
readInternalDetailNavigation, clearStoredInternalDetailNavigation, and
markInternalDetailNavigation out of detailNavigation.ts into a client-only
storage adapter or Hook. Keep detailNavigation.ts limited to pure pathname
comparison and decision logic, and update consumeInternalDetailNavigation,
clearInternalDetailNavigation, and markInternalDetailNavigationOnClick to use
the adapter without introducing side effects in src/lib.
🪄 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: 4cc2ee82-a4ec-4c9e-b3c2-756281c463fd
📒 Files selected for processing (13)
src/components/common/EmptyState/EmptyState.tsxsrc/components/estimate/pending/PendingEstimateCard.tsxsrc/components/estimate/received/EstimateOfferCard.tsxsrc/components/estimate/request/ActiveEstimateBlocked.tsxsrc/components/estimate/request/EstimateRequestForm.tsxsrc/components/estimate/requests/EstimateRequestCard.tsxsrc/components/estimate/sent/SentEstimateDetailPage.tsxsrc/components/estimate/sent/SentEstimatesPage.tsxsrc/components/mover/MoverCard.tsxsrc/components/review/MyReviewCard.tsxsrc/hooks/useDetailBackNavigation.tssrc/hooks/useMoverDesignation.tssrc/lib/utils/detailNavigation.ts
6 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📋 작업 내용
상세 페이지의 이동 편의성을 개선하기 위해 공통 뒤로가기 버튼과 Scroll To Top 버튼을 추가했습니다.
🔥 변경 사항
공통 뒤로가기
에 작은 Ghost 형태의 뒤로가기 버튼을 추가했습니다.
router.back()기반 이동aria-label적용Scroll To Top
로그인·회원가입·프로필 생성 및 수정 화면을 제외한 일반 페이지에 공통 Top 버튼을 적용했습니다.
TOP텍스트 표시✅ 체크리스트
📷 스크린샷 (선택)
🔗 관련 이슈
Closes #
💬 To Reviewer
router.back()과 fallback 경로가 의도한 대로 동작하는지 확인 부탁드립니다.Summary by CodeRabbit
새 기능
개선 사항