feat: 결승 직후 매치 스켈레톤 제거 및 결과 진입 중복 조회 정리

[ychany]

작업 요약

• 결승 직후 매치 화면에 대진 스켈레톤이 뜨던 문제를 해결합니다.
• 결과 진입 시 같은 데이터를 두 번 조회하던 중복을 제거합니다.
• 결승 기록 응답으로 캐시를 시드해 결과 화면을 재조회 없이 그립니다.

작업 세부 내용

결과 페이지는 이미 SSR 이지만, RSC 응답이 도착할 때까지 내비게이션이 커밋되지 않아 매치 화면에 머물며 스켈레톤이 노출됐습니다. 이슈의 A + A-2 + B 를 함께 적용했습니다.

A. Suspense 경계로 즉시 전환

result/layout.tsx 를 추가했습니다. create/layout.tsx 와 동일하게 Suspense 래퍼 역할만 합니다.

loading.tsx 는 같은 레벨의 layout 을 감싸지 않으므로, 데이터를 기다리는 부분을 page 의 async 자식(ResultContent)으로 내려 fallback 이 실제로 걸리게 했습니다. redirect 가드는 서버에 그대로 두어 직접 URL 진입 처리가 유지됩니다.

A-2. 중복 fetch 제거

상위 [id]/layout.tsx 가 이미 getTournament 을 호출해 캐시에 심는데, result/page.tsx 가 또 호출하고 있었습니다. 서버 QueryClient 는 요청 단위로 공유되므로 ensureQueryData 로 그 값을 재사용합니다.

const tournamentData = await queryClient.ensureQueryData({
  queryKey: ['tournament', tournamentId],
  queryFn: () => getTournament(tournamentId),
});

B. 기록 응답으로 캐시 시드

확인 결과 기록 응답의 completed 만으로는 시드가 불가능했습니다.

	필드
COMPLETED 응답이 요구	tournamentId, name, isOwner, isRoot, status
기록 응답 completed	result, hasGroupResult, canAddItem, playLinkExpiresAt?

정체성 필드가 빠져 있습니다. 다만 기존 IN_PROGRESS 캐시에 그 값들이 모두 있어, 둘을 합쳐 완전한 COMPLETED 를 구성했습니다. 캐시가 없는 경우엔 조합할 수 없으므로 기존처럼 removeQueries 후 SSR 응답에 맡깁니다.

기존 주석의 "stale 한 hasGroupResult=false" 우려는 기록 응답에 해당 값이 포함되어 해소됐습니다.

참고

utils/queryClient.ts 에 pending 쿼리 dehydrate 가 이미 설정돼 있고 주석에 "페이지 전환 블로킹 제거의 전제"라고 명시돼 있습니다. 이번 변경이 그 구조를 실제로 활용합니다.

연관 이슈

closes #487

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
piki	Ready	Preview	Aug 12, 2026 5:10pm

[coderabbitai]

Warning

Review limit reached

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

Next review available in: 55 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: e622c1c9-3a6a-44e7-bb8e-a657d9928a40

📥 Commits

Reviewing files that changed from the base of the PR and between 0512f8b and 1334006.

📒 Files selected for processing (4)

• apps/web/src/app/tournament/[id]/match/_hooks/useTournament.ts
• apps/web/src/app/tournament/[id]/result/_components/ResultLoadingFallback.tsx
• apps/web/src/app/tournament/[id]/result/layout.tsx
• apps/web/src/app/tournament/[id]/result/page.tsx

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

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