fix: QA 통합 — 토너먼트 시작 흐름 모달 / 영수증 캡처 / 초대 마감 보정 (#236)

[ychany]

작업 요약

• 토너먼트 시작 흐름에 안내 모달 3종 추가 (부전승 / 담기 시간 종료 / 주최자 시작 알림)
• 초대 마감 시각 picker 의 시간대 / 9시간 어긋남 / 만료 표시 / drag·remount 이슈 일괄 수정
• 영수증 이미지 캡처에서 상품 사진 누락 및 CORS 차단 회피
• 토큰 갱신·홈/보관함 헤더 등 기타 자잘한 QA 보정 누적분 머지

작업 세부 내용

토너먼트 시작 흐름

• ByeWarningDialog 신규 — 후보 수가 2의 거듭제곱이 아닐 때 시작 직전에 노출 (부전승 안내)
• DepositClosedDialog 신규 — 담기 시간 만료 시 주최자에게 자동 노출, 시작 유도
• OwnerStartedDialog 신규 — 주최자 시작 SSE(TOURNAMENT_STARTED) 신호를 받아 ownerStarted: false→true 변화 감지 시 참여자에게 자동 노출
• 시작 버튼 비활성 조건 정리 — 초대 마감 시 참여자는 후보 수와 무관하게 시작 불가
• 기존 ConfirmStartDialog / ConfirmExitDialog 의 raw <button> → 공통 Button 컴포넌트로 통일

초대 마감 시각 picker (변경 시트)

• 휠 picker 드래그 후 본인 위치가 유지되지 않고 한 칸으로 되돌아가는 버그 수정 (key 에서 inviteExpiresAt 의존 제거 → drag 중 react-query refetch 로 인한 remount 차단)
• ISO 8601 UTC (Z 접미사 포함) 형식으로 전송하도록 변경 — 서버 OffsetDateTime/Instant 호환
• 서버가 정상 ISO UTC 로 응답한 후로는 parseServerLocalDateTime 의 Z 제거 로직을 제거 (9시간 어긋남으로 "만료됨" 잘못 표시되던 문제 해결)

영수증 이미지 공유

• 상품 사진만 캡처에서 빠지던 문제 — next/image proxy URL (/_next/image?url=...) 로 same-origin 우회
• html-to-image 의 cacheBust: false + fetchRequestInit: { cache: 'force-cache', mode: 'cors' } 로 S3 / 외부 도메인 CORS 차단 완화

결과 페이지

• 플레이 체험 게스트(CLONE) 사용자에게는 결과 페이지의 "전체 결과 보기" 카드를 노출하지 않음

연관 이슈

closes #236

Summary by CodeRabbit

릴리스 노트

• New Features

  • 토너먼트 초대 마감 기간 설정 기능 추가 (기본 30분)
  • 담기 마감 시 자동 알림 다이얼로그 추가
  • 주최자가 토너먼트 시작 시 참여자 알림 다이얼로그 추가
  • 토너먼트 시작 전 부전승 경고 안내 추가

• Bug Fixes

  • 영수증 이미지 공유 시 이미지 로딩 최적화
  • 참여자 선택 휠 드래그 상호작용 개선
  • 그룹 결과 표시 조건 수정

• Improvements

  • 버튼 스타일 일관성 강화
  • 날짜/시간 형식 처리 개선

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
depromeet	Ready	Preview, Comment	Jun 18, 2026 8:15am

[github-actions]

No description provided.

[coderabbitai]

Warning

Review limit reached

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

More reviews will be available in 39 minutes and 1 second. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

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

🚦 How do rate limits work?

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

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, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5190f34d-3bdc-46d4-a06b-9e3315361ac6

📥 Commits

Reviewing files that changed from the base of the PR and between e1226f9 and c4e745e.

📒 Files selected for processing (5)

• apps/web/src/app/not-found.tsx
• apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
• apps/web/src/app/tournament/[id]/create/_components/deposit-closed-dialog/DepositClosedDialog.tsx
• apps/web/src/app/tournament/[id]/create/_components/invite-friends/WheelColumn.tsx
• apps/web/src/app/tournament/[id]/create/_components/owner-started-dialog/OwnerStartedDialog.tsx

Walkthrough

토너먼트 생성 요청에 기본 초대 마감 시간(30분)을 추가하고, 초대 만료 시각 포맷을 UTC ISO 8601로 통일했습니다. 담기 마감·주최자 시작·부전승 경고 안내 모달 3종을 신설해 토너먼트 시작 흐름을 확장했으며, WheelColumn의 드래그 인터랙션을 직접 구현으로 대체했습니다. 결과 영수증 이미지 캡처 시 크로스오리진 문제를 Next.js 프록시 URL로 해결했습니다.

Changes

토너먼트 초대 만료 시각 UTC 형식 통일

Layer / File(s)	Summary
날짜 파싱 유틸 및 InviteExpiresPicker UTC 전환 apps/web/src/utils/formatDate.ts, apps/web/src/app/tournament/[id]/create/_components/invite-friends/InviteExpiresPicker.tsx	parseServerLocalDateTime이 Z 접미사를 제거하던 로직을 원문 그대로 파싱하도록 변경. InviteExpiresPicker는 toServerDateTimeString(UTC ISO 8601)으로 교체해 onConfirm에 UTC 문자열 전달.
토너먼트 생성 시 기본 초대 마감 시간(30분) 추가 apps/web/src/app/home/_types/tournament.ts, apps/web/src/app/home/_components/CreateTournamentDialog.tsx	PostCreateTournamentRequestT에 inviteDurationMinutes?: number 추가, CreateTournamentDialog에서 DEFAULT_INVITE_DURATION_MINUTES = 30 상수로 생성 요청에 포함.

WheelColumn 드래그 인터랙션 재구현 및 피커 리마운트 버그 수정

Layer / File(s)	Summary
WheelColumn 드래그/클릭 인터랙션 재구현 apps/web/src/app/tournament/[id]/create/_components/invite-friends/WheelColumn.tsx	hasInitializedRef로 초기 스크롤 1회 제한, handlePointerDown/Move/End로 직접 드래그 처리, snap 클래스 제거 및 드래그 중 클릭 차단 로직 추가.
InviteFriendsDialog 피커 리마운트 버그 수정 apps/web/src/app/tournament/[id]/create/_components/invite-friends/InviteFriendsDialog.tsx	InviteExpiresPicker의 key를 inviteExpiresAt 기반에서 isPickerOpen 기반으로 변경해 값 변경 시 리마운트 방지.

토너먼트 시작 흐름 개선 (모달 3종 신설 + 부전승 경고)

Layer / File(s)	Summary
DepositClosedDialog, OwnerStartedDialog, ByeWarningDialog 신규 컴포넌트 apps/web/src/app/tournament/[id]/create/_components/deposit-closed-dialog/DepositClosedDialog.tsx, ...owner-started-dialog/OwnerStartedDialog.tsx, ...tournament-start-button/ByeWarningDialog.tsx	담기 마감 안내, 주최자 시작 알림, 부전승 경고 모달을 각각 open/onOpenChange/onStart props 기반으로 구현.
TournamentCreateClient에 DepositClosed/OwnerStarted 모달 연결 apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx	useEffect+useRef로 ownerStarted 전이 감지 및 자동 모달 오픈, dismissed 플래그로 재오픈 차단, postTournamentStartMutation()으로 시작 연결.
TournamentStartButton 부전승 경고 흐름 및 비활성화 조건 수정 apps/web/src/app/tournament/[id]/create/_components/tournament-start-button/TournamentStartButton.tsx	isPowerOfTwo(count) 체크로 비거듭제곱 시 ByeWarningDialog 오픈, isDepositClosed가 항상 버튼을 비활성화하도록 조건 수정.
다이얼로그 버튼을 공용 Button 컴포넌트로 교체 apps/web/src/app/tournament/[id]/create/_components/tournament-header/ConfirmExitDialog.tsx, ...tournament-start-button/ConfirmStartDialog.tsx	네이티브 <button>을 공용 Button 컴포넌트(variant/size 포함)로 교체. 클릭 핸들러 연결 동일 유지.

결과 영수증 이미지 캡처 및 표시 수정

Layer / File(s)	Summary
ReceiptPaper 이미지 프록시 전환 및 shareReceiptImage 캡처 옵션 수정 apps/web/src/app/tournament/[id]/result/_components/ReceiptPaper.tsx, .../_utils/shareReceiptImage.ts	Image 컴포넌트 제거, toSameOriginImageUrl 헬퍼로 프록시 URL 생성 후 img + crossOrigin="anonymous" 사용. shareReceiptImage는 force-cache/cors 옵션으로 전환.
GroupResultEntryCard ROOT 조건부 렌더링 apps/web/src/app/tournament/[id]/result/_components/ResultClient.tsx	tournamentData.isRoot인 경우에만 GroupResultEntryCard를 렌더링하고 sourceTournamentId 기반 매핑 로직 제거.

코드 포맷/순서 정리 (동작 변경 없음)

Layer / File(s)	Summary
error.tsx, not-found.tsx, loginRedirect.ts 포맷 정리 apps/web/src/app/error.tsx, apps/web/src/app/not-found.tsx, apps/web/src/utils/loginRedirect.ts	className 클래스 순서 재정렬, 멀티라인 JSX 재구성, import 순서 교체 등 동작 변경 없는 코드 정리.

Sequence Diagram(s)

sequenceDiagram
    rect rgba(100, 149, 237, 0.5)
        Note over TournamentCreateClient: 담기 마감 감지 흐름
    end
    participant TournamentCreateClient
    participant DepositClosedDialog
    participant OwnerStartedDialog
    participant usePostTournamentStart

    TournamentCreateClient->>TournamentCreateClient: isOwner && !ownerStarted && isExpired 조건 충족
    TournamentCreateClient->>DepositClosedDialog: open=true (dismissed=false 시)
    DepositClosedDialog-->>TournamentCreateClient: onStart 호출
    TournamentCreateClient->>usePostTournamentStart: postTournamentStartMutation()
    DepositClosedDialog-->>TournamentCreateClient: onOpenChange(false) → dismissed=true

    rect rgba(144, 238, 144, 0.5)
        Note over TournamentCreateClient: 주최자 시작 감지 흐름
    end
    TournamentCreateClient->>TournamentCreateClient: ownerStarted false→true 전이 감지(useEffect+useRef)
    TournamentCreateClient->>OwnerStartedDialog: open=true (dismissed=false 시)
    OwnerStartedDialog-->>TournamentCreateClient: onStart 호출
    TournamentCreateClient->>usePostTournamentStart: postTournamentStartMutation()
    OwnerStartedDialog-->>TournamentCreateClient: onOpenChange(false) → dismissed=true

Loading

sequenceDiagram
    rect rgba(255, 165, 0, 0.5)
        Note over User,TournamentStartButton: 부전승 경고 흐름
    end
    participant User
    participant TournamentStartButton
    participant ByeWarningDialog
    participant ConfirmStartDialog

    User->>TournamentStartButton: 시작 버튼 클릭
    TournamentStartButton->>TournamentStartButton: isPowerOfTwo(count) 체크
    alt count가 2의 거듭제곱이 아닐 때
        TournamentStartButton->>ByeWarningDialog: isByeWarningOpen=true
        ByeWarningDialog-->>TournamentStartButton: onConfirm (handleByeWarningConfirm)
        TournamentStartButton->>TournamentStartButton: proceedAfterByeCheck()
    else 2의 거듭제곱일 때
        TournamentStartButton->>TournamentStartButton: proceedAfterByeCheck()
    end
    alt 주최자 && 친구 있음
        TournamentStartButton->>ConfirmStartDialog: isConfirmStartOpen=true
    else 참여자 또는 친구 없는 주최자
        TournamentStartButton->>TournamentStartButton: startTournamentMutation()
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• depromeet/PIKI-Client#167: TournamentCreateClient.tsx의 ownerStarted 및 담기 마감 관련 시작 흐름을 동일하게 수정해 코드 레벨 변경이 직접 겹침.
• depromeet/PIKI-Client#210: shareReceiptImage.ts의 shareReceiptImage 구현(toBlob 옵션)을 동일하게 수정하는 후속 변경.
• depromeet/PIKI-Client#196: ReceiptPaper.tsx와 shareReceiptImage.ts의 영수증 캡처/공유 기능 구현을 함께 수정하는 관련 PR.

Suggested labels

fix, WEB

Suggested reviewers

• kanghaeun

Poem

🐰 토끼가 코드 밭을 깡충깡충 뛰어다니며~
드래그는 이제 부드럽게, Z 포맷도 딱 맞게 🕐
마감 모달 짠! 시작 모달 짠! 부전승도 경고해~
영수증 이미지는 프록시로 뚝딱 캡처됐어요 🖼️
버그들아 안녕~ 토끼는 오늘도 행복해 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 21.43% 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	PR 제목은 주요 변경사항인 '토너먼트 시작 흐름 모달 / 영수증 캡처 / 초대 마감 보정'을 명확하게 요약하며, raw_summary의 다양한 파일 변경사항들과 일치합니다.
Linked Issues check	✅ Passed	연결된 이슈 #236은 QA 통합 이슈로, 특정 페이지/기능에 국한되지 않고 일반적인 동작/UI/UX 문제를 트리아지하는 메타 추적 이슈입니다. PR의 변경사항들은 토너먼트 시작 흐름 모달, 영수증 캡처, 초대 마감 시간 처리 등 QA에서 발견된 다양한 버그 수정에 해당하므로 이슈의 의도와 부합합니다.
Out of Scope Changes check	✅ Passed	모든 변경사항이 토너먼트 시작 흐름(모달 추가), 영수증 캡처(이미지 처리), 초대 마감(시간 포맷 수정)과 관련된 QA 버그 수정 범위 내입니다. 클래스 순서 정렬이나 버튼 컴포넌트 교체 등도 관련 기능 개선의 일부로 범위 내 변경입니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/236-qa-fixes

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (2)

apps/web/src/app/tournament/[id]/create/_components/tournament-start-button/TournamentStartButton.tsx (1)

8-9: ⚡ Quick win

신규 import도 @/* 절대 경로 규칙으로 맞춰 주세요.

Line 8-9에서 ./ByeWarningDialog, ./ConfirmStartDialog를 상대 경로로 가져오고 있습니다.
현재 규칙 기준으로는 @/app/... alias import를 사용해야 합니다.

As per coding guidelines, apps/web/src/**/*.{ts,tsx}에서는 상대 경로 대신 @/* 절대 경로를 사용해야 합니다.

🤖 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/app/tournament/`[id]/create/_components/tournament-start-button/TournamentStartButton.tsx
around lines 8 - 9, The imports for ByeWarningDialog and ConfirmStartDialog in
TournamentStartButton.tsx are using relative paths (./ByeWarningDialog and
./ConfirmStartDialog) which violates the project's coding guideline that
requires all imports in apps/web/src files to use the `@/`* absolute path alias
instead. Replace both relative imports with their corresponding `@/app/`...
absolute paths to maintain consistency with the established import conventions.

Source: Coding guidelines

apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx (1)

16-20: ⚡ Quick win

상대 경로 import를 @/* 절대 경로로 통일해 주세요.

Line 16-20에서 새로 추가된 ..//./ 상대 경로 import가 규칙과 다릅니다. 이 파일도
@/app/... alias로 맞추는 편이 이동/리팩터링 내구성에 유리합니다.

As per coding guidelines, apps/web/src/**/*.{ts,tsx}에서는 상대 경로 대신 @/* 절대 경로를 사용해야 합니다.

🤖 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/app/tournament/`[id]/create/_components/TournamentCreateClient.tsx
around lines 16 - 20, Convert the relative path imports (using `../` and `./`)
in the TournamentCreateClient.tsx file to use the `@/` absolute path alias
instead. Replace all imports of usePostTournamentStart, useScrollToLast,
DepositClosedDialog, MemberJoinConfirmDialog, and OwnerStartedDialog with their
full absolute paths starting from `@/app/tournament/[id]/create/`. This ensures
consistency with the project's coding guidelines and improves maintainability
when files are moved or refactored.

Source: Coding guidelines

🤖 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/not-found.tsx`:
- Around line 18-23: Remove the cursor-pointer class from the Link component
that has href={ROUTES.HOME} in the className prop, as Next.js Link elements
render as native anchor elements which already have the browser's default
pointer cursor. Keep all other classes in the className intact while removing
only the cursor-pointer portion.

In
`@apps/web/src/app/tournament/`[id]/create/_components/invite-friends/WheelColumn.tsx:
- Around line 123-149: The click blocking logic in handleItemMouseClick fails
because dragStateRef.current is set to null in handlePointerEnd before the click
event fires. Since pointerup precedes click in the event sequence, the state is
already null when handleItemMouseClick executes, making the state?.moved check
always falsy. Extract the moved flag into a separate ref (movedRef or similar)
that persists beyond dragStateRef being cleared. Update handlePointerEnd to set
this moved flag ref to true when dragging occurs, check this moved flag ref
instead of state?.moved in handleItemMouseClick, and then reset the moved flag
ref after handling the click to prevent future clicks from being incorrectly
blocked.

In
`@apps/web/src/app/tournament/`[id]/create/_components/TournamentCreateClient.tsx:
- Around line 100-107: The postTournamentStartMutation function in
handleStartFromDepositClosed and the similar handler around lines 130-134 lack
pending state guards, allowing rapid clicks to trigger duplicate mutation calls.
Add a guard condition checking if pending is falsy before calling
postTournamentStartMutation in both locations to ensure the mutation only
executes when no request is already in flight. This prevents duplicate
tournament start requests from being sent to the server.

---

Nitpick comments:
In
`@apps/web/src/app/tournament/`[id]/create/_components/tournament-start-button/TournamentStartButton.tsx:
- Around line 8-9: The imports for ByeWarningDialog and ConfirmStartDialog in
TournamentStartButton.tsx are using relative paths (./ByeWarningDialog and
./ConfirmStartDialog) which violates the project's coding guideline that
requires all imports in apps/web/src files to use the `@/`* absolute path alias
instead. Replace both relative imports with their corresponding `@/app/`...
absolute paths to maintain consistency with the established import conventions.

In
`@apps/web/src/app/tournament/`[id]/create/_components/TournamentCreateClient.tsx:
- Around line 16-20: Convert the relative path imports (using `../` and `./`) in
the TournamentCreateClient.tsx file to use the `@/` absolute path alias instead.
Replace all imports of usePostTournamentStart, useScrollToLast,
DepositClosedDialog, MemberJoinConfirmDialog, and OwnerStartedDialog with their
full absolute paths starting from `@/app/tournament/[id]/create/`. This ensures
consistency with the project's coding guidelines and improves maintainability
when files are moved or refactored.

🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1b4c1ee2-e53c-4ff1-8646-72440e0be7a8

📥 Commits

Reviewing files that changed from the base of the PR and between 7a5382a and e1226f9.

📒 Files selected for processing (19)

• apps/web/src/app/error.tsx
• apps/web/src/app/home/_components/CreateTournamentDialog.tsx
• apps/web/src/app/home/_types/tournament.ts
• apps/web/src/app/not-found.tsx
• apps/web/src/app/tournament/[id]/create/_components/TournamentCreateClient.tsx
• apps/web/src/app/tournament/[id]/create/_components/deposit-closed-dialog/DepositClosedDialog.tsx
• apps/web/src/app/tournament/[id]/create/_components/invite-friends/InviteExpiresPicker.tsx
• apps/web/src/app/tournament/[id]/create/_components/invite-friends/InviteFriendsDialog.tsx
• apps/web/src/app/tournament/[id]/create/_components/invite-friends/WheelColumn.tsx
• apps/web/src/app/tournament/[id]/create/_components/owner-started-dialog/OwnerStartedDialog.tsx
• apps/web/src/app/tournament/[id]/create/_components/tournament-header/ConfirmExitDialog.tsx
• apps/web/src/app/tournament/[id]/create/_components/tournament-start-button/ByeWarningDialog.tsx
• apps/web/src/app/tournament/[id]/create/_components/tournament-start-button/ConfirmStartDialog.tsx
• apps/web/src/app/tournament/[id]/create/_components/tournament-start-button/TournamentStartButton.tsx
• apps/web/src/app/tournament/[id]/result/_components/ReceiptPaper.tsx
• apps/web/src/app/tournament/[id]/result/_components/ResultClient.tsx
• apps/web/src/app/tournament/[id]/result/_utils/shareReceiptImage.ts
• apps/web/src/utils/formatDate.ts
• apps/web/src/utils/loginRedirect.ts