[FIX] 라이브 공유 모달 레이어 및 청중 선입장 대기 화면 by coli-geonwoo · Pull Request #505 · debate-timer/debate-timer-fe

coli-geonwoo · 2026-09-26T12:24:46Z

배경

공유 모달 레이어: 타이머 화면이 작아지면 라이브 공유 모달이 타이머·라운드 버튼 밑에 깔리거나 비쳐 보이고, 닫기 버튼이 클릭되지 않았다. 공유 영역에 z-index가 없어 DOM상 뒤에 오는 타이머 요소가 위에 그려졌고, 모달에 배경색이 없었다.

청중 선입장: 사회자보다 청중이 먼저 들어오면 1초 뒤 첫 순서 타이머가 정지 상태로 뜨고, 서버의 CHAIRMAN_ABSENT(또는 15초 경과)를 받으면 "사회자 연결이 끊겼어요" 화면으로 바뀌었다. 사회자가 아직 연결한 적 없는 상황이므로 대기 상태로 보여야 한다.

작업

공유 모달 레이어

공유 버튼/모달 래퍼에 z-20 (헤더 z-30보다 낮고 타이머보다 높게)
모달에 불투명 배경과 그림자

청중 대기 화면

첫 메시지 전 초기 타이머 화면(createInitialDisplayData) fallback 제거
사회자 메시지를 한 번도 받지 못했다면 CHAIRMAN_ABSENT를 받아도 "토론 시작을 대기 중입니다." 유지, 사회자 SYNC(heartbeat 5초)를 받으면 타이머 화면으로 전환
사회자가 한 번 연결된 뒤 끊기면 기존대로 끊김 안내 표시
사회자 부재 중 청중이 새로고침하면 이 세션에서 사회자 메시지를 받은 적이 없으므로 대기 화면 표시 (의도된 동작)

대기 애니메이션

DebateWaitingNotice 컴포넌트 분리
새 의존성 없이 SVG + framer-motion으로 모래시계를 그림
- 위쪽 모래가 줄어들고 아래쪽에 봉긋하게 쌓이며, 목에서 알갱이가 한 알씩 떨어짐
- 다 떨어지면 뒤집고, 위아래 대칭 구조라 다음 주기와 끊김 없이 이어짐
- 회전해도 잘리지 않도록 정사각형 viewBox 사용
- prefers-reduced-motion이면 정지 상태로 표시
검토한 라이브러리: lottie(애니메이션 JSON·라이선스 확인 필요, 번들 약 250KB 증가), rive(.riv 제작 필요), react-loader-spinner(1.6MB, 회전 방식), react-spinners(모래시계 없음)

그 외

docs/live-share-timer-sync.md에 청중 선입장 시 대기 화면 유지 규약 추가

테스트

신규: TimerPage.liveShare.test.tsx (모달 레이어, 불투명 배경, 닫기), AudienceSharePage.integration.test.tsx (소켓 훅만 대체한 선입장 → CHAIRMAN_ABSENT → SYNC 흐름, 연결 후 부재 회귀)
보강: useAudienceShareState, AudienceSharePage
통합 테스트는 수정 전 로직에서 실패하는 것을 확인
npm run test 519개 통과, npm run lint·npm run build 통과
로컬에서 백엔드·프론트를 띄워 작은 화면 모달, 청중 선입장 → 사회자 연결 연동, 연결 후 사회자 이탈 시나리오를 수동 검증

Closes #504

🤖 Generated with Claude Code

Summary by CodeRabbit

새 기능
- 사회자 메시지를 받기 전에는 부재 알림이나 대기 시간이 지나도 토론 대기 화면을 유지합니다. 첫 동기화 메시지를 받으면 타이머 화면으로 전환됩니다.
- 대기 화면에 모래시계 애니메이션을 추가했습니다. 동작 감소 설정을 사용하면 애니메이션 없이 표시됩니다.
개선 사항
- 라이브 공유 버튼과 모달이 타이머 및 라운드 버튼 위에 표시되며, 모달에 흰색 배경과 그림자를 적용했습니다.

- 공유 버튼/모달 래퍼에 z-20을 주어 타이머와 라운드 버튼 위에 그려지고 클릭되도록 함 - 공유 모달에 불투명 배경과 그림자를 주어 뒤의 타이머가 비치지 않도록 함 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

청중이 사회자보다 먼저 들어오면 1초 뒤 첫 순서 타이머를 정지 상태로 띄우고, 이어서 CHAIRMAN_ABSENT를 받으면 "사회자 연결이 끊겼어요" 오버레이가 표시되었다. - 첫 메시지 전 초기 타이머 화면(createInitialDisplayData) fallback 제거 - 사회자 메시지를 받기 전까지는 CHAIRMAN_ABSENT를 받아도 waiting 상태를 유지 - 사회자 SYNC를 받으면 곧바로 타이머 화면으로 전환 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

- 토론 시작 대기 화면을 DebateWaitingNotice 컴포넌트로 분리 - 모래시계 아이콘을 주기적으로 뒤집어 화면이 멈춘 것이 아니라 기다리는 중임을 표시 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

소켓 훅만 대체하고 청중 상태 훅, 화면 판단 로직, 페이지를 실제 코드로 검증한다. - 사회자 부재 알림과 부재 판단 시간이 지나도 토론 대기 화면 유지 - 사회자 SYNC 수신 시 타이머 화면으로 전환 - 사회자가 한 번 연결된 뒤 부재 알림을 받으면 끊김 안내 표시 (회귀) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

아이콘을 통째로 뒤집는 방식이라 모래가 위로 올라가는 것처럼 보였다. 새 의존성 없이 SVG와 framer-motion으로 모래시계를 직접 그린다. - 위쪽 모래는 표면이 목 쪽으로 내려가며 줄어들고, 아래쪽 모래는 봉긋한 더미로 차오름 - 목에서 모래 알갱이가 시차를 두고 한 알씩 떨어지며 중력처럼 점점 빨라짐 - 모래가 다 떨어지면 모래시계를 뒤집고, 대칭 구조라 다음 주기와 끊김 없이 이어짐 - 동작 줄이기(prefers-reduced-motion) 설정이면 멈춘 모래시계만 표시 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

세로로 긴 viewBox(64x80) 안에서 모래시계를 돌리면 가로로 눕는 순간 폭이 영역을 넘어 잘렸다. 중심에서 가장 먼 모서리까지 담기는 정사각형 viewBox로 바꿔 어느 각도에서도 잘리지 않게 한다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

coderabbitai · 2026-09-26T12:25:03Z

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 39734f2b-0c0c-4b0e-8a0a-5bac4b0cc9db

📥 Commits

Reviewing files that changed from the base of the PR and between 354cb37 and de7f0a7.

📒 Files selected for processing (11)

docs/live-share-timer-sync.md
src/page/AudienceSharePage/AudienceSharePage.integration.test.tsx
src/page/AudienceSharePage/AudienceSharePage.test.tsx
src/page/AudienceSharePage/AudienceSharePage.tsx
src/page/AudienceSharePage/components/DebateWaitingNotice.tsx
src/page/AudienceSharePage/hooks/EventInterpreter.ts
src/page/AudienceSharePage/hooks/useAudienceShareState.test.ts
src/page/AudienceSharePage/hooks/useAudienceShareState.ts
src/page/TimerPage/TimerPage.liveShare.test.tsx
src/page/TimerPage/TimerPage.tsx
src/page/TimerPage/components/LiveShareModal.tsx

💤 Files with no reviewable changes (1)

src/page/AudienceSharePage/hooks/EventInterpreter.ts

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

Walkthrough

청중이 첫 사회자 메시지를 받기 전에는 부재 알림이나 타임아웃 후에도 대기 화면을 유지하도록 변경했습니다. 대기 화면에 모래시계 애니메이션을 추가했습니다. 라이브 공유 버튼과 모달의 레이어 순서를 높이고 모달 배경을 적용했습니다.

Changes

청중 첫 메시지 대기

Layer / File(s)	Summary
첫 SYNC까지 대기 상태 유지 `src/page/AudienceSharePage/hooks/useAudienceShareState.ts`, `src/page/AudienceSharePage/hooks/EventInterpreter.ts`, `src/page/AudienceSharePage/hooks/useAudienceShareState.test.ts`, `src/page/AudienceSharePage/AudienceSharePage.integration.test.tsx`, `docs/live-share-timer-sync.md`	첫 사회자 메시지를 받기 전에는 타임아웃이나 부재 알림이 있어도 대기 상태를 유지합니다. 첫 `SYNC` 수신 후 타이머 화면으로 전환하는 흐름과 관련 테스트 및 규약을 추가했습니다.
대기 화면 안내와 모래시계 `src/page/AudienceSharePage/components/DebateWaitingNotice.tsx`, `src/page/AudienceSharePage/AudienceSharePage.tsx`, `src/page/AudienceSharePage/AudienceSharePage.test.tsx`	`WAITING` 상태에서 `DebateWaitingNotice`를 사용합니다. 모래시계는 9초 주기로 움직이며, 동작 감소 설정이 활성화되면 애니메이션을 표시하지 않습니다.

라이브 공유 모달 표시

Layer / File(s)	Summary
모달 레이어와 배경 `src/page/TimerPage/TimerPage.tsx`, `src/page/TimerPage/components/LiveShareModal.tsx`, `src/page/TimerPage/TimerPage.liveShare.test.tsx`	공유 버튼과 모달 컨테이너에 `z-20`을 설정했습니다. 모달에 흰색 배경과 그림자를 적용했습니다. 테스트는 레이어, 배경, 열기 및 닫기 동작을 확인합니다.

Priority: ➖ Normal

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

Change: Bug fix · Severity of issue fixed: Medium

Suggested reviewers: i-meant-to-be

Merge Risk: ⚪ Minimal · up to de7f0

The audience waiting flow and live-share modal changes have no established merge-blocking issue; the change is mergeable after normal checks.

Security Architecture Review

Security architecture risk: 🔵 Low · up to de7f0

The changed audience flow waits for a live message instead of showing an initial timer, and the review found no demonstrated new path to a privileged operation. The authority of messages delivered over the room channel could not be verified here.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

inferred — The examined state change affects what an audience member sees for the subscribed room. The changed waiting-render path was not shown to perform a write or privileged action.

Trust Boundaries and Controls

observed — Structural and version checks constrain room messages at client ingress. They do not themselves authenticate a publisher; whether the server restricts publication to an authoritative source remains unverified.

Resilience and Maintainability Implications

observed — After a display exists, the hook retains it through a transient disconnect; exhausted retries instead mark the connection lost. A new message can replace the retained display after reconnection.

Hardening Proposals

proposed — Confirm that room-channel publication is restricted to the authoritative chairman or server, and clarify whether non-SYNC timer events are intentionally permitted to establish the first audience display.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 6 functions across 9 files. (1 skipped: 1…	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의 주요 내용을 정확하게 요약합니다.
Linked Issues check	✅ Passed	직접 연결된 이슈 `#504의` 코딩 요구사항을 충족합니다. `TimerPage.tsx`는 공유 버튼과 모달 컨테이너에 `z-20`을 적용하고, `LiveShareModal.tsx`는 불투명 흰색 배경과 그림자를 적용합니다. `useAudienceShareState.ts`는 사회자 메시지가 없고 `displayData`가 없으면 `CHAIRMAN_ABSENT`…
Out of Scope Changes check	✅ Passed	변경 범위는 이슈 `#504와` 연결됩니다. `docs/live-share-timer-sync.md`의 규약 추가는 새 대기 상태 동작을 문서화합니다. `AudienceSharePage` 변경과 `DebateWaitingNotice` 추가는 대기 화면과 모래시계 요구사항을 구현합니다. 관련 단위 테스트와 통합 테스트는 해당 동작을 검증합니다. 타이머 모달 테스…

Full details: Docstring Coverage

Explanation

Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 6 functions across 9 files. (1 skipped: 1 unsupported.)

Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

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

_{대기 화면에 모래가 사르르 쌓이고
첫 SYNC가 타이머를 깨우네
모달은 환한 배경을 두르고
공유 버튼은 위쪽에 자리하네
토끼는 귀를 쫑긋 세우고
수정된 흐름을 반기네}

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

github-actions · 2026-09-26T12:25:45Z

🚀 Preview 배포 완료!

환경	URL
Preview	열기
API	Dev 환경

PR이 닫히면 자동으로 정리됩니다.

github-actions · 2026-09-26T12:33:42Z

🧹 Preview 배포가 정리되었습니다.

coli-geonwoo and others added 7 commits September 26, 2026 19:30

[DOCS] 청중 선입장 시 대기 화면 유지 규약 추가

de7f0a7

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

coli-geonwoo deployed to PREVIEW_ENV September 26, 2026 12:24 — with GitHub Actions Active

coli-geonwoo merged commit 985d1b6 into develop Sep 26, 2026
3 checks passed

coli-geonwoo deployed to PREVIEW_ENV September 26, 2026 12:33 — with GitHub Actions Active

coli-geonwoo deployed to DEPLOY_DEV September 26, 2026 12:33 — with GitHub Actions Active

Navigation Menu

Repository navigation

[FIX] 라이브 공유 모달 레이어 및 청중 선입장 대기 화면 - #505

[FIX] 라이브 공유 모달 레이어 및 청중 선입장 대기 화면#505
coli-geonwoo merged 7 commits into
developfrom
fix/#504-live-share-modal-layer-audience-waiting

coli-geonwoo commented Sep 26, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Sep 26, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot commented Sep 26, 2026

Uh oh!

Uh oh!

github-actions Bot commented Sep 26, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

coli-geonwoo commented Sep 26, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

배경

작업

공유 모달 레이어

청중 대기 화면

대기 애니메이션

그 외

테스트

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Sep 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Security Architecture Review

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot commented Sep 26, 2026

🚀 Preview 배포 완료!

Uh oh!

Uh oh!

github-actions Bot commented Sep 26, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

coli-geonwoo commented Sep 26, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Sep 26, 2026 •

edited

Loading