Skip to content

fix: 토너먼트·위시 흐름 전반의 뒤로가기 동작 정리 - #409

Merged
iOdiO89 merged 10 commits into
devfrom
refactor/405-use-back-or-hook
Aug 6, 2026
Merged

fix: 토너먼트·위시 흐름 전반의 뒤로가기 동작 정리#409
iOdiO89 merged 10 commits into
devfrom
refactor/405-use-back-or-hook

Conversation

@kanghaeun

@kanghaeun kanghaeun commented Jul 31, 2026

Copy link
Copy Markdown
Contributor

작업 요약

  • 토너먼트·위시 흐름 전반의 뒤로가기 동작을 점검해, 히스토리에 남지 않아야 할 화면이 쌓여 뒤로가기가 엉뚱한 곳으로 가거나 아예 먹히지 않던 문제 수정

수정한 케이스

상황 As is To be
초대 링크로 참여 후 담기 화면에서 뒤로가기 초대 참여하기 화면으로 되돌아감 홈으로 이동
아카이브에서 카드 클릭 → 담기 화면에서 뒤로가기 무조건 홈으로 이동 진입 화면(아카이브)으로 이동
(담기 화면에서) 위시에서 담기 완료 후 뒤로가기 위시에서 담기 화면으로 재진입 진입 화면으로 한 번에 이동
매치 화면에서 뒤로가기 로딩 화면으로 돌아갔다 다시 매치로 밀려남 (탈출 불가) 담기 화면 진입 이전 화면으로 이동
결과 화면에서 뒤로가기 매치 → 결과로 되돌아옴 (탈출 불가) 담기 화면 진입 이전 화면으로 이동
히스토리 없이 진입(딥링크 등) 후 뒤로가기 앱 밖으로 나감 화면별 기본 경로로 이동

원인과 해결

대부분 되돌아갈 이유가 없는 일회성 화면을 push로 쌓거나, 허브 화면으로 복귀할 때 replace를 써서 같은 화면이 연속 두 번 남은 것이 원인이었음.

  • 일회성 전환 화면(초대 참여, 대진표 로딩)은 replace로 히스토리에서 제거
  • 담기 화면으로 복귀하는 경로는 항목을 덜어내는 back()으로 통일 (기존 usePatchTournamentItem과 동일한 방식)
  • 나가기 목적지가 조건에 따라 갈라져 있던 TournamentHeaderhandleExit 하나로 통합
    • hasFriends는 확인 모달 노출 여부만 결정

useBackWithFallback 훅 추가

router.back()은 히스토리가 없으면 앱 밖으로 나가버림.
돌아갈 곳이 없을 때 지정한 경로로 대신 이동하는 훅을 추가하고, 위시 수정·삭제·새로고침, 그룹 결과, 아이템 수정, 담기 화면 나가기에 적용

참고

  • (담기화면에서) 위시에서 담기 완료는 back()으로 바뀌면서 ?action=scroll-to-last 쿼리를 쓸 수 없어, "마지막 바구니로 스크롤" 신호를 sessionStorage 플래그로 전달 (알림 딥링크가 쓰는 기존 쿼리 액션 경로는 그대로 유지)

관련 이슈

Summary by CodeRabbit

새로운 기능

  • 이전 방문 기록이 없을 때 지정된 경로로 이동하는 안정적인 뒤로가기 동작을 추가했습니다.
  • 토너먼트 생성 화면에서 마지막 스크롤 위치를 복원하고 관련 세션 정보를 자동 정리합니다.

버그 수정

  • 위시리스트 및 토너먼트 작업 완료 후 적절한 화면으로 안정적으로 이동합니다.
  • 주요 로딩·결과·참여 완료 화면의 불필요한 히스토리 중복을 줄였습니다.
  • 토너먼트 종료 및 결과 화면의 fallback 이동 동작을 일관되게 개선했습니다.

@vercel

vercel Bot commented Jul 31, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
piki Ready Ready Preview Aug 6, 2026 2:55am

@github-actions
github-actions Bot requested a review from iOdiO89 July 31, 2026 20:52
@github-actions github-actions Bot added fix Something isn't working refactor Extra attention is needed WEB labels Jul 31, 2026
@github-actions

Copy link
Copy Markdown

Discord 스레드 연동용 메타데이터입니다. discord-pr-bot 워크플로가 자동 생성하며, 수정·삭제하면 PR 과 Discord 알림 연동이 끊깁니다.

@coderabbitai

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

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

Next review available in: 28 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: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 0c644452-ae09-412d-9d87-f3334100d8ce

📥 Commits

Reviewing files that changed from the base of the PR and between 1b9c1c1 and 483a336.

📒 Files selected for processing (8)
  • apps/web/src/app/archive/wish/[id]/_hooks/useDeleteWish.ts
  • apps/web/src/app/archive/wish/[id]/_hooks/usePatchWish.ts
  • apps/web/src/app/tournament/[id]/_common/_hooks/useDeleteTournamentItem.ts
  • apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentHeader.tsx
  • apps/web/src/app/tournament/[id]/create/_hooks/usePostTournamentStart.ts
  • apps/web/src/app/tournament/[id]/create/by-wish/_hooks/usePostTournamentItemsByWish.ts
  • apps/web/src/app/tournament/[id]/item/[itemId]/_hooks/usePatchTournamentItem.ts
  • apps/web/src/app/tournament/[id]/match/_hooks/useTournament.ts
📝 Walkthrough

Walkthrough

위시리스트와 토너먼트 흐름에 useBackWithFallback을 적용했습니다. 주요 성공·종료 이동은 replace로 변경했습니다. 토너먼트 생성 화면은 sessionStorage 기반 스크롤 복원을 지원합니다.

Changes

위시리스트 및 토너먼트 내비게이션

Layer / File(s) Summary
Fallback 뒤로가기와 위시리스트 이동
apps/web/src/hooks/useBackWithFallback.ts, apps/web/src/components/Providers.tsx, apps/web/src/app/archive/wish/[id]/_hooks/*
앱 히스토리 깊이를 추적합니다. 깊이가 있으면 router.back()을 호출하고, 없으면 fallback 경로로 router.replace()를 호출합니다. 위시리스트 작업 성공 후 이동에 적용했습니다.
토너먼트 생성 복귀 흐름
apps/web/src/app/tournament/[id]/create/..., apps/web/src/app/tournament/[id]/_common/_hooks/useDeleteTournamentItem.ts, apps/web/src/app/tournament/[id]/item/[itemId]/_hooks/usePatchTournamentItem.ts
종료·삭제·수정 후 이동에 fallback 뒤로가기를 적용했습니다. 생성 항목 처리 후 sessionStorage에 스크롤 복원 상태를 저장하고, 생성 화면에서 해당 값을 읽은 뒤 삭제합니다.
토너먼트 전환 경로 정리
apps/web/src/app/tournament/[id]/loading/page.tsx, apps/web/src/app/tournament/[id]/match/_hooks/useTournament.ts, apps/web/src/app/tournament/join/[id]/_components/JoinPreviewClient.tsx, apps/web/src/app/tournament/[id]/result/group/_components/GroupResultClient.tsx
시작·로딩·매치·참여 성공 후 이동을 router.replace()로 변경했습니다. 그룹 결과 화면의 뒤로가기에 tournament result fallback을 적용했습니다.

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

Possibly related PRs

  • TeamPiKi/client#322: usePatchWish.ts의 동일 파일 변경과 관련되지만, 해당 PR은 HTTP 오류 처리를 다룹니다.
  • TeamPiKi/client#347: 위시리스트 라우팅과 ROUTES.WISHLIST를 함께 변경했습니다.
  • TeamPiKi/client#401: useDeleteWish.ts의 삭제 후 이동 동작과 직접 관련됩니다.

Suggested reviewers: iodio89

Sequence Diagram(s)

sequenceDiagram
  participant AppProviders
  participant useTrackAppHistoryDepth
  participant WishOrTournamentFlow
  participant NextRouter
  AppProviders->>useTrackAppHistoryDepth: 앱 경로 변경 감시 시작
  useTrackAppHistoryDepth->>useTrackAppHistoryDepth: history.state에 앱 히스토리 깊이 저장
  WishOrTournamentFlow->>NextRouter: backWithFallback(fallback)
  alt 앱 히스토리 깊이 > 0
    NextRouter->>NextRouter: router.back()
  else 앱 히스토리 깊이 = 0
    NextRouter->>NextRouter: router.replace(fallback)
  end
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
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 토너먼트와 위시 흐름의 뒤로가기 동작을 정리한다는 변경 내용이 제목에 명확하게 반영되어 있습니다.
Linked Issues check ✅ Passed 이슈 #405의 다섯 대상 호출처에 공용 fallback 훅을 적용하고, 히스토리가 없을 때만 replace로 이동하도록 구현했습니다.
Out of Scope Changes 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 refactor/405-use-back-or-hook

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.

@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
`@apps/web/src/app/tournament/`[id]/create/by-wish/_hooks/usePostTournamentItemsByWish.ts:
- Around line 20-22: 성공 처리의 router.back() 호출을 공용 useBackWithFallback 훅으로 교체하세요.
해당 훅에 ROUTES.TOURNAMENT_CREATE(tournamentId)를 fallback으로 전달해 히스토리가 있으면 기존 back
동작을 유지하고, 없으면 replace로 생성 화면으로 이동하도록 하며, 기존 sessionStorage scroll marker 기록은
유지하세요.

In `@apps/web/src/hooks/useBackWithFallback.ts`:
- Around line 6-17: Update useBackWithFallback to track whether the current
session contains an app-created history entry or marker, and call router.back()
only when that app-internal history is valid. Do not rely solely on
window.history.length; otherwise preserve the existing router.replace(fallback)
path for external deep links and sessions without a tracked app history.
🪄 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: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 56261a8b-785e-484a-9985-13c772cc4d25

📥 Commits

Reviewing files that changed from the base of the PR and between 6a07452 and ba2b1f6.

📒 Files selected for processing (14)
  • apps/web/src/app/archive/wish/[id]/_hooks/useDeleteWish.ts
  • apps/web/src/app/archive/wish/[id]/_hooks/usePatchWish.ts
  • apps/web/src/app/archive/wish/[id]/_hooks/usePostWishRefresh.ts
  • apps/web/src/app/tournament/[id]/_common/_hooks/useDeleteTournamentItem.ts
  • apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
  • apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentHeader.tsx
  • apps/web/src/app/tournament/[id]/create/_hooks/usePostTournamentStart.ts
  • apps/web/src/app/tournament/[id]/create/by-wish/_hooks/usePostTournamentItemsByWish.ts
  • apps/web/src/app/tournament/[id]/item/[itemId]/_hooks/usePatchTournamentItem.ts
  • apps/web/src/app/tournament/[id]/loading/page.tsx
  • apps/web/src/app/tournament/[id]/match/_hooks/useTournament.ts
  • apps/web/src/app/tournament/[id]/result/group/_components/GroupResultClient.tsx
  • apps/web/src/app/tournament/join/[id]/_components/JoinPreviewClient.tsx
  • apps/web/src/hooks/useBackWithFallback.ts

Comment thread apps/web/src/hooks/useBackWithFallback.ts Outdated
@kanghaeun
kanghaeun marked this pull request as draft August 1, 2026 06:33
@kanghaeun
kanghaeun marked this pull request as ready for review August 3, 2026 14:24

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

🧹 Nitpick comments (1)
apps/web/src/hooks/useBackWithFallback.ts (1)

23-42: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

동일 pathname의 쿼리 이동도 깊이에 반영하세요.

useTrackAppHistoryDepth의 dependency가 pathname뿐이라 동일 pathname에서 query만 변경하는 router.push()currentDepth와 히스토리 스탬프가 갱신되지 않습니다. 이후 깊이 0 화면에서 backWithFallback()을 호출하면 back() 대신 fallback replace()가 실행될 수 있습니다. pathsearchParams를 포함한 route key를 추적하세요.

🤖 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 `@apps/web/src/hooks/useBackWithFallback.ts` around lines 23 - 42, Update the
history-depth effect in useTrackAppHistoryDepth to track a route key composed of
both pathname and searchParams, so query-only router.push() navigation also
recalculates currentDepth and updates the history stamp. Use that combined route
key as the effect dependency while preserving the existing depth and
history-length logic.
🤖 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.

Nitpick comments:
In `@apps/web/src/hooks/useBackWithFallback.ts`:
- Around line 23-42: Update the history-depth effect in useTrackAppHistoryDepth
to track a route key composed of both pathname and searchParams, so query-only
router.push() navigation also recalculates currentDepth and updates the history
stamp. Use that combined route key as the effect dependency while preserving the
existing depth and history-length logic.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d86f4ca8-d213-4d6c-ab22-1593557cd336

📥 Commits

Reviewing files that changed from the base of the PR and between ba2b1f6 and 1b9c1c1.

📒 Files selected for processing (15)
  • apps/web/src/app/archive/wish/[id]/_hooks/useDeleteWish.ts
  • apps/web/src/app/archive/wish/[id]/_hooks/usePatchWish.ts
  • apps/web/src/app/archive/wish/[id]/_hooks/usePostWishRefresh.ts
  • apps/web/src/app/tournament/[id]/_common/_hooks/useDeleteTournamentItem.ts
  • apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
  • apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentHeader.tsx
  • apps/web/src/app/tournament/[id]/create/_hooks/usePostTournamentStart.ts
  • apps/web/src/app/tournament/[id]/create/by-wish/_hooks/usePostTournamentItemsByWish.ts
  • apps/web/src/app/tournament/[id]/item/[itemId]/_hooks/usePatchTournamentItem.ts
  • apps/web/src/app/tournament/[id]/loading/page.tsx
  • apps/web/src/app/tournament/[id]/match/_hooks/useTournament.ts
  • apps/web/src/app/tournament/[id]/result/group/_components/GroupResultClient.tsx
  • apps/web/src/app/tournament/join/[id]/_components/JoinPreviewClient.tsx
  • apps/web/src/components/Providers.tsx
  • apps/web/src/hooks/useBackWithFallback.ts
🚧 Files skipped from review as they are similar to previous changes (13)
  • apps/web/src/app/tournament/[id]/match/_hooks/useTournament.ts
  • apps/web/src/app/archive/wish/[id]/_hooks/usePatchWish.ts
  • apps/web/src/app/archive/wish/[id]/_hooks/useDeleteWish.ts
  • apps/web/src/app/tournament/[id]/loading/page.tsx
  • apps/web/src/app/tournament/[id]/_common/_hooks/useDeleteTournamentItem.ts
  • apps/web/src/app/archive/wish/[id]/_hooks/usePostWishRefresh.ts
  • apps/web/src/app/tournament/[id]/create/_hooks/usePostTournamentStart.ts
  • apps/web/src/app/tournament/join/[id]/_components/JoinPreviewClient.tsx
  • apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
  • apps/web/src/app/tournament/[id]/create/by-wish/_hooks/usePostTournamentItemsByWish.ts
  • apps/web/src/app/tournament/[id]/create/_components/tournament-header/TournamentHeader.tsx
  • apps/web/src/app/tournament/[id]/item/[itemId]/_hooks/usePatchTournamentItem.ts
  • apps/web/src/app/tournament/[id]/result/group/_components/GroupResultClient.tsx

…or-hook

# Conflicts:
#	apps/web/src/app/archive/wish/[id]/_hooks/useDeleteWish.ts
#	apps/web/src/app/archive/wish/[id]/_hooks/usePatchWish.ts
#	apps/web/src/app/tournament/[id]/_common/_hooks/useDeleteTournamentItem.ts
#	apps/web/src/app/tournament/[id]/create/by-wish/_hooks/usePostTournamentItemsByWish.ts
#	apps/web/src/app/tournament/[id]/item/[itemId]/_hooks/usePatchTournamentItem.ts
#	apps/web/src/app/tournament/[id]/match/_hooks/useTournament.ts
@iOdiO89
iOdiO89 merged commit e659d6b into dev Aug 6, 2026
7 checks passed
@iOdiO89
iOdiO89 deleted the refactor/405-use-back-or-hook branch August 6, 2026 02:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fix Something isn't working refactor Extra attention is needed WEB

Projects

None yet

Development

Successfully merging this pull request may close these issues.

refactor: router.back 실패 시 fallback 이동 처리 추가

2 participants