fix: 토너먼트 준비 화면 실시간 아이템 상태 미반영 버그 수정

[kanghaeun]

작업 요약

• 신규 SSE 동기화 이벤트 연동으로 참여자 화면에서 아이템 파싱 완료/실패 및 삭제 상태가 즉시 반영되도록 수정

작업 세부 내용

1. 아이템 파싱 완료 후 로딩바 무한 유지

현상

• 주최자가 링크/이미지로 아이템 추가 시 참여자 화면에 PENDING 로딩바 노출
• 파싱 완료 후에도 참여자 화면에서 로딩바가 사라지지 않음
• 새로고침 후에만 파싱 완료 상태가 반영됨

원인

ITEM_PARSING_COMPLETED / ITEM_PARSING_FAILED 이벤트는 아이템을 추가한 본인에게만 전송됨
참여자는 파싱 완료 시점을 SSE로 알 수 없어 로딩바가 무한히 유지됨

수정

백엔드에서 파싱 완료/실패 시 참여자에게 tournament-item-parsed SSE 동기화 이벤트 신규 추가
onmessage에서 해당 이벤트 분기 처리

• notification 이벤트와 달리 알림/토스트 없이 invalidateQueries만 수행

• TournamentItemParsedSsePayloadT 타입 추가

  필드	타입
  tournamentId	number
  tournamentItemId	number
  status	'READY' | 'FAILED'

---

2. 아이템 삭제 시 다른 참여자 화면 미반영

현상

• 참여자가 아이템을 삭제해도 다른 참여자 화면에 즉시 반영되지 않음
• 새로고침 후에만 삭제된 아이템이 반영됨

원인

TOURNAMENT_ITEM_DELETED 이벤트가 NotificationTypeT에 미정의되어switch의 default 케이스로 빠지면서 토스트만 노출되고 화면 갱신이 발생하지 않음

수정

• NotificationTypeT에 TOURNAMENT_ITEM_DELETED 타입 추가
• TOURNAMENT_ITEM_ADDED와 동일하게 invalidateQueries 처리 → 참여자 화면 즉시 갱신

연관 이슈

closes #260
closes #205

Summary by CodeRabbit

릴리스 노트

• 성능 개선

  • 토너먼트 데이터 자동 새로고침 주기 제거로 불필요한 폴링 감소

• 새로운 기능

  • 토너먼트 아이템 삭제 알림 지원 추가
  • 아이템 파싱 완료/실패 상태 알림 처리 개선

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
depromeet	Ready	Preview, Comment	Jun 19, 2026 5:21am

[coderabbitai]

Walkthrough

useGetTournament에서 30초 폴링(refetchInterval)을 제거하고, SSE 수신 측에서 tournament-item-parsed 이벤트와 TOURNAMENT_ITEM_DELETED 알림을 처리하도록 확장했습니다. 관련 타입(TournamentItemParsedSsePayloadT, TOURNAMENT_ITEM_DELETED)도 추가되었습니다.

Changes

SSE 기반 토너먼트 실시간 동기화 개선

Layer / File(s)	Summary
알림 타입 및 SSE 페이로드 계약 확장 apps/web/src/types/notification.ts	NotificationTypeT 유니온에 TOURNAMENT_ITEM_DELETED 추가, 토너먼트 아이템 파싱 결과를 표현하는 TournamentItemParsedSsePayloadT (tournamentId, tournamentItemId, status: 'READY' | 'FAILED') 신규 정의.
SSE 이벤트 핸들러 확장 및 폴링 제거 apps/web/src/hooks/useNotificationSSE.ts, apps/web/src/app/tournament/[id]/_common/_hooks/useGetTournament.ts	TournamentItemParsedSsePayloadT 임포트 추가, tournament-item-parsed SSE 이벤트 수신 시 tournamentId 기준 쿼리 무효화 처리 추가, TOURNAMENT_ITEM_DELETED 알림을 기존 토스트+무효화 흐름에 포함, useGetTournament의 refetchInterval: 30_000 폴링 제거.

예상 리뷰 노력

🎯 2 (Simple) | ⏱️ ~10 minutes

관련 가능성이 있는 PR

• depromeet/PIKI-Client#171: useNotificationSSE SSE 구독 구현 및 apps/web/src/types/notification.ts 알림 타입 정의를 도입한 PR로, 이번 PR이 그 위에서 이벤트 타입과 핸들러를 확장합니다.
• depromeet/PIKI-Client#174: useGetTournament 폴링 및 useNotificationSSE의 ['tournament', ...] 쿼리 무효화 메커니즘을 동일하게 다루는 PR입니다.

추천 레이블

WEB

추천 리뷰어

• iOdiO89
• ychany

시

🐇 폴링은 이제 그만, SSE로 달려요~
tournament-item-parsed, 귀 쫑긋 듣는 토끼
삭제도 추가도 실시간으로 쏙쏙!
새로고침 없이 화면이 반짝반짝 ✨
버그는 사라지고 당근만 남았네 🥕

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경 내용의 핵심을 명확하게 반영하고 있습니다. '토너먼트 준비 화면 실시간 아이템 상태 미반영 버그 수정'은 두 가지 핵심 이슈(아이템 파싱 상태, 아이템 삭제 상태)를 모두 포괄하는 간결한 설명입니다.
Linked Issues check	✅ Passed	PR이 #260과 #205의 모든 코딩 요구사항을 충족합니다. 새로운 tournament-item-parsed SSE 이벤트 처리 [#260], TOURNAMENT_ITEM_DELETED 타입 추가 및 쿼리 무효화 [#205], 관련 타입 정의 등이 모두 구현되었습니다.
Out of Scope Changes check	✅ Passed	useGetTournament에서 30초 폴링 제거는 SSE 기반의 실시간 동기화로의 전환을 반영하는 범위 내 변경입니다. 모든 변경이 #260, #205의 요구사항과 일관성 있게 연관되어 있습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/tournament-item-sync

---

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

[github-actions]

No description provided.

[coderabbitai]

🧹 Nitpick comments (1)

apps/web/src/hooks/useNotificationSSE.ts (1)

113-116: ⚡ Quick win

tournament-item-parsed payload를 런타임 스키마로 검증해주세요.

현재는 타입 단언만 사용해서 payload shape 불일치가 런타임에서 걸러지지 않습니다. tournamentId가 비정상인 경우 잘못된 queryKey 무효화로 실시간 갱신 누락이 생길 수 있습니다.

제안 diff

+import { z } from 'zod';
 import type { NotificationSsePayloadT, TournamentItemParsedSsePayloadT } from '`@/types/notification`';

+const tournamentItemParsedSsePayloadSchema = z.object({
+  tournamentId: z.number(),
+  tournamentItemId: z.number(),
+  status: z.enum(['READY', 'FAILED']),
+});

 // ...
         onmessage: event => {
           if (event.event === 'tournament-item-parsed') {
             try {
-              const payload = JSON.parse(event.data) as TournamentItemParsedSsePayloadT;
+              const parsed = tournamentItemParsedSsePayloadSchema.safeParse(JSON.parse(event.data));
+              if (!parsed.success) return;
+              const payload: TournamentItemParsedSsePayloadT = parsed.data;
               queryClient.invalidateQueries({ queryKey: ['tournament', payload.tournamentId] });
             } catch {
               // malformed JSON — 무시
             }
             return;
           }

As per coding guidelines, apps/web/src/**/*.{ts,tsx}에서 "Use Zod for schema validation" 규칙을 적용해야 합니다.

🤖 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/useNotificationSSE.ts` around lines 113 - 116, The
tournament-item-parsed event handler uses a type assertion without runtime
validation of the payload structure, which allows invalid payloads to pass
through and cause incorrect queryKey invalidations. Create a Zod schema that
validates the TournamentItemParsedSsePayloadT structure, then replace the type
assertion in the JSON.parse line (where the event.data is cast as
TournamentItemParsedSsePayloadT) with Zod's .safeParse() method. Handle the
validation result by checking if parsing succeeded before proceeding with the
queryClient.invalidateQueries call, and log an error or return early if
validation fails to prevent invalid tournamentId values from being used.

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.

Nitpick comments:
In `@apps/web/src/hooks/useNotificationSSE.ts`:
- Around line 113-116: The tournament-item-parsed event handler uses a type
assertion without runtime validation of the payload structure, which allows
invalid payloads to pass through and cause incorrect queryKey invalidations.
Create a Zod schema that validates the TournamentItemParsedSsePayloadT
structure, then replace the type assertion in the JSON.parse line (where the
event.data is cast as TournamentItemParsedSsePayloadT) with Zod's .safeParse()
method. Handle the validation result by checking if parsing succeeded before
proceeding with the queryClient.invalidateQueries call, and log an error or
return early if validation fails to prevent invalid tournamentId values from
being used.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 139bc487-2bc6-42de-a891-b68301026c34

📥 Commits

Reviewing files that changed from the base of the PR and between 2278b1d and 7cbea0e.

📒 Files selected for processing (3)

• apps/web/src/app/tournament/[id]/_common/_hooks/useGetTournament.ts
• apps/web/src/hooks/useNotificationSSE.ts
• apps/web/src/types/notification.ts

💤 Files with no reviewable changes (1)

• apps/web/src/app/tournament/[id]/_common/_hooks/useGetTournament.ts