MSG-520 feat: [웹] 행사 영상 미니 패널 — 재생·도움돼요·댓글(행사 한정) + ⋯ 재생 유틸리티 by gyuhochoime · Pull Request #113 · ASM-MSG/FE

gyuhochoime · 2026-08-31T07:46:08Z

🎫 관련 티켓

Closes MSG-520

📌 작업 내용

행사 웨이브 3 (MSG-521과 병렬) — 행사방 위치별 영상 카드 클릭 → 미니 패널 재생 + 도움돼요·댓글.

카드 클릭 → EventVideoMiniPanel (left-97, 기존 미니 패널 자리): getVideoDetail의 presigned playbackUrl 자동재생, 제목 폴백(zone > 행정동 > 위치명 > "영상"), Escape는 미니 패널 우선 + back 3단(영상→위치→방 — 기존 Escape 배선 무수정, event-room-store videoId 확장)
좋아요·댓글은 행사 한정 확정 (스펙 승인): API 실측 결과 도움돼요·댓글은 /api/event-videos/** 전용이고 일반 영상 엔드포인트가 없다 → 홈·도감 VideoMiniPanel은 무변경, 재생 표면만 VideoPlaybackSurface로 추출 공유(기존 스모크 무수정 green)
도움돼요 토글: 비낙관 — 멱등 PUT/DELETE 응답을 setQueryData seed. 상세 캐시 invalidate 금지(재조회가 타인 조회수를 올리는 부작용 실측), 위치 목록만 무효화(카드 "♥ N · 댓글 M" 동기화)
댓글: 상세 내장 첫 20건(오래된순) + hasNext 시 "더 보기" 커서 이어붙기, 작성 1~500자 → append + 카운트 seed. 완료 콜백은 제출 videoId 대조(codex 리뷰 P2 — 영상 전환 후 입력 오삭제 차단)
비로그인 게이트: 도움돼요·댓글 입력 시도 시 요청 0건 + login-modal-store 로그인 모달
헤더 ⋯ = 재생 유틸리티 3종만 (사용자 결정): 다운로드·재생 속도(0.5~2x)·PIP(미지원 숨김). 소유자 액션(삭제·공개·신고)은 mine 판정 재료 부재로 후속
interactionLocked(아카이브) 시 입력 비활성, 실패는 사용자 언어 토스트(13422 "종료된 행사" 분기) + 재생 유지
검증이 잡은 결함 1건 반영: 테마 칩 바 이동 조건이 행사 패널을 몰라 X·⋯이 가려짐(X 클릭이 뒤 칩을 눌러 행사방 전체 닫힘 재현) → ThemeChipsBar 조건 합류로 해소
api:generate 미실행(필요 API 전부 MSG-516 생성물에 기존재), MSG-521 소유 파일 무접촉, origin/develop(MSG-521 머지 후) 합류 완료

✅ 체크리스트

pnpm lint / pnpm typecheck / pnpm --filter web test run 통과
수용 기준 검증 완료 (검증 리포트 요약을 아래에 첨부)
필요한 경우 문서(README, docs/) 업데이트 — STATUS.md 한 줄 · docs/spec/MSG-520.md(작업 로그 포함) · DECISIONS.md 3행

🔍 검증 요약

자동 검증 (머지·리뷰 반영 후 재실측):

게이트	결과
vitest (web)	통과 — 225 files / 1714 tests
typecheck	통과 (exit 0)
lint (oxlint)	통과 (exit 0)
format:check (oxfmt)	통과
check:duplication	통과 — 0 new·0 changed (baseline 재등재는 digest 구·신 대조 감사, 무관 흡수 손 제거)

수용 기준 13건: 전부 통과 (1차 12/13 → 칩 바 가림 재작업 → 재검증 13/13)

AC	판정	비고
1 카드 클릭→패널·자동재생	통과	left-97 동일 rect, paused=false 실측
2 카드 교체·button 낭독	통과	aria-label 확인
3 X·Escape 닫기 (back 3단)	통과	재작업 후 X 실클릭·Escape 단계별 스토어 스냅숏
4 제목 폴백·메타 (조회수 미표시 = DTO 부재)	통과	zone → 행정동 폴백 실측
5 도움돼요 토글 비낙관 seed·aria-pressed	통과(스텁)	PUT/DELETE 왕복
6 비로그인 로그인 모달 게이트	통과	요청 0건 확인
7 댓글 첫 페이지+더 보기 커서	통과(스텁)	커서 이어붙기·버튼 소멸
8 댓글 작성 append·카운트·입력 비움	통과(스텁)	빈 입력 비활성 포함
9 실패 토스트(13422 분기)·재생 유지	통과(스텁)	영상·캐시 불변
10 interactionLocked 입력 비활성	통과(스텁)	기존 표시 유지
11 홈·도감 미니 패널 회귀 없음	통과	기존 스모크 무수정 green + 실동작 재확인
12 목록 카운트 무효화 동기화	통과(스텁)	상세 GET 재발사 없음(조회수 억제) 네트워크 로그 실측
13 ⋯ 유틸리티 3종 (다운로드·속도·PIP)	통과	2x 적용·소스 교체 후 유지 실측

확인불가: 실서버 상호작용(도움돼요 실반영·댓글 실저장·실 13422) — 서버 승인 행사·영상 0건이라 fetch 스텁으로 대체. BE 시딩(MSG-500) 후 실서버 재확인 권장.

codex 리뷰 (push 전, branch scope): P2 1건 → 반영 커밋 941fb4f (댓글 완료 콜백 videoId 대조).

📸 스크린샷 (선택)

_workspace/MSG-520/screenshots/ (gitignore — 필요 시 요청)

💡 추가 논의할 사항

홈 미니 패널 + 행사 미니 패널 동시 열림 가능 (실측): 같은 rect에 완전 겹침 + 홈 영상 계속 재생(이중 오디오). 스펙 미규정이라 이번 범위 밖 — UX 후속 후보 (유틸리티 메뉴 열림 중 Escape 1회가 메뉴+영상을 함께 닫는 것과 묶어서)
댓글 21건+ 상태에서 "더 보기" 병행 시 새 댓글이 중간 삽입될 수 있는 경계(내용 유실 없음) — DECISIONS 수용 기록

🤖 Generated with Claude Code

https://claude.ai/code/session_0168FrMFYw5hZ4yUbfu3gpQ7

… 표면 추출 공유

…ini-panel-likes-comments # Conflicts: # docs/STATUS.md # docs/decisions/DECISIONS.md # nose.baseline.json

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0168FrMFYw5hZ4yUbfu3gpQ7

claude · 2026-08-31T07:46:24Z

github-actions · 2026-08-31T07:46:36Z

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit d5d4a4a.}

claude · 2026-08-31T07:52:37Z

🔍 코드 리뷰 요약 (MSG-520, PR #113)

event-room-store·event-video-view·뮤테이션 훅·EventVideoMiniPanel 및 하위 컴포넌트, 공유 재생 표면 추출(VideoPlaybackSurface)까지 diff와 주변 코드를 함께 Read로 확인했습니다. 서브에이전트·병렬 실행 없이 순차로 진행했습니다.

👍 잘한 점

상세 캐시 invalidate 금지 결정이 실제로 지켜짐: use-event-video-mutations.ts의 도움돼요·댓글 뮤테이션이 setQueryData seed만 쓰고 getVideoDetailQueryKey는 절대 invalidate하지 않는 것을 코드·테스트(isInvalidated 어서션) 양쪽에서 확인했습니다. 조회수 부작용 방지라는 스펙 리스크가 실코드로 정확히 반영됨.
event-room-store.back() 3단 전환이 기존 2단 로직을 깨끗하게 확장(videoId 우선 → location → room), open()의 "같은 행사 재open은 유지" 규칙에도 videoId 케이스가 정확히 합류. 테스트(event-room-store.test.ts)가 모든 분기(닫기·전환·같은 행사 재open·다른 행사 open)를 촘촘히 커버.
VideoPlaybackSurface 추출이 순수 리팩터링: 기존 VideoMiniPanel(홈)의 재생 로직과 diff 대조 결과 동작 변경 없이 공유 표면만 뽑아냄 — unavailableMessage optional prop으로 행사 패널(항상 playbackUrl 존재)과 기존 패널(3분기 필요) 요구사항 차이를 자연스럽게 흡수.
codex 리뷰 반영(941fb4f)이 정확함: useCreateComment의 onCreated 콜백에 videoId를 전달하고, 호출부(EventVideoMiniPanel)가 submittedVideoId === videoId 대조 후에만 setDraft("") — "전송 중 카드 전환 시 새 입력 오삭제" 레이스를 올바르게 차단. 훅 레벨 테스트로 onCreated가 videoId를 받는 계약도 고정됨.
ThemeChipsBar 가림 버그 수정이 근본 원인(이동 조건이 행사 미니 패널의 존재를 몰랐음)을 정확히 짚고 eventVideoOpen 조건 합류로 해소.
댓글 목록 렌더링은 JSX 텍스트 노드로만 출력되어 XSS 위험 없음, 다운로드 링크도 rel="noreferrer"로 reverse-tabnabbing 방어됨.
테스트 커버리지가 전반적으로 매우 두터움(스토어·순수 함수·훅·스모크 전 레이어).

🟡 권장 (인라인 코멘트 참고)

EventVideoMiniPanel.tsx: codex P2로 고친 "댓글 전송 중 영상 전환" 레이스가 훅 레벨(onCreated가 올바른 videoId를 받는지)로는 테스트되지만, 컴포넌트 레벨에서 실제로 입력이 안 지워지는지 재현하는 회귀 테스트는 없습니다. 향후 리팩터링 안전망으로 추가를 권합니다.

🟢 사소한 제안 (인라인 코멘트 참고)

EventVideoCommentInput.tsx: maxLength={500}이 trim 전 원문 기준이라, 앞뒤 공백을 포함해 입력하면 trim 후 500자를 다 못 채우는 경계가 있습니다(실사용 영향은 미미).

확인했으나 문제없다고 판단한 부분 (추측 아님, 근거 확인함)

eventVideoTitle의 zoneName/zoneCell 비대칭 null 가능성 — 생성된 API 타입 주석(types.gen.ts)에 "zoneName과 항상 쌍이라 구역 밖이면 함께 null"이 서버 계약으로 명시돼 있어 실제 위험 없음.
Escape 우선순위(홈 미니 패널 > 행사 3단 back) — use-home-close-handlers.ts의 backEventRoomMiniFirst가 홈 video-mini-panel-store를 먼저 체크하고, 그다음 event-room-store.back()의 3단 내부 로직에 위임하는 구조를 확인해 PR 설명("Escape는 미니 패널 우선 + back 3단")과 일치함을 검증.
홈 미니 패널과 행사 미니 패널 동시 열림 가능 이슈는 PR 본문에서 이미 스펙 범위 밖으로 명시적으로 플래그되어 있어 별도 지적하지 않음.

전반적으로 스펙 리스크(조회수 부작용, 레이스 컨디션)를 정확히 인지하고 코드·테스트·문서(DECISIONS.md) 삼박자로 방어한 견고한 구현입니다. 위 인라인 코멘트 2건은 병합을 막을 이슈는 아니고 개선 제안입니다.

View job run

claude · 2026-08-31T08:19:47Z

🔍 코드 리뷰 진행 중

이번 트리거는 새 푸시(95d072c)에 대한 재검토입니다. 이전 리뷰(941fb4f 기준)에서 남긴 🟡 코멘트(댓글 전송 레이스 컴포넌트 레벨 회귀 테스트 권장)에 대한 반영 커밋으로 보입니다.

작업 목록

컨텍스트 파악 (이전 리뷰·PR 본문·트리거 확인)
diff 확인 (git diff 941fb4f..95d072c — 신규 커밋 변경분)
신규 커밋 상세 리뷰 (Read로 주변 코드 포함)
이전 리뷰 지적사항 반영 여부 확인
인라인 코멘트 작성 (필요 시)
전체 요약 코멘트 게시 (gh pr comment)

View job run

claude · 2026-08-31T08:20:50Z

Claude finished @gyuhochoime's task in 2m 9s —— View job

✅ 코드 리뷰 완료 (신규 커밋 `d5d4a4a` 반영분)

작업 목록

컨텍스트 파악 (이전 리뷰 2건 확인 — 941fb4f 시점 리뷰 완료, 이번은 새 커밋 d5d4a4a 반영분)
diff 확인 (git diff origin/develop...HEAD, 새 커밋 위주)
새 커밋(d5d4a4a) 변경분 상세 리뷰 — event-video-mini-panel.smoke.test.tsx와 관련 소스(EventVideoMiniPanel.tsx, use-event-video-mutations.ts, use-event-video-detail-query.ts, event-video-fixture.ts) 대조
인라인 코멘트 작성 — 이번 변경분은 새 이슈 없어 추가 인라인 코멘트 없음
전체 요약 코멘트 게시 (gh pr comment)

이번 커밋(d5d4a4a)은 이전 리뷰의 🟡 권장사항(댓글 전송 레이스의 컴포넌트 레벨 회귀 테스트 부재)에 대한 정확한 대응입니다. 42번 영상 댓글 전송을 보류시킨 채 43번으로 전환 → 43에 새 초안 입력 → 42 응답 도착이라는 실제 레이스를 재현하고, useCreateComment의 onCreated(variables.videoId) vs 컴포넌트 최신 videoId 대조 가드가 정확히 이 시점차를 막는지 검증합니다. 가드 없이는 RED임을 코멘트로 명시했고, 42 재전환 시 seed된 댓글이 렌더되는지까지 확인해 가드가 draft 초기화만 건너뛰고 캐시 seed는 정상 반영됨을 함께 고정했습니다. 새로운 버그나 회귀는 발견하지 못했습니다.

전체 요약은 별도 코멘트로 게시했습니다: #113 (comment)

참고: 이 환경에서 pnpm --filter web test run 등 실행형 명령이 승인 대기로 막혀 실제 실행 확인은 못했고, 정적 분석(코드 대조)으로만 검증했습니다.

claude · 2026-08-31T08:22:59Z

🔍 코드 리뷰 요약 (MSG-520, PR #113) — 신규 커밋 `d5d4a4a` 반영분

이전 리뷰(코멘트)에서 남긴 🟡 권장사항(댓글 전송 레이스의 컴포넌트 레벨 회귀 테스트 부재)에 대한 대응 커밋(d5d4a4a)을 diff와 관련 소스(EventVideoMiniPanel.tsx, use-event-video-mutations.ts, use-event-video-detail-query.ts, event-video-fixture.ts)를 함께 Read로 확인했습니다. 서브에이전트·병렬 실행 없이 순차 진행. 변경 파일은 event-video-mini-panel.smoke.test.tsx 1개(+81/-1)뿐입니다.

👍 확인된 점

요청한 회귀 테스트가 정확히 추가됨: "댓글 전송 중 다른 영상으로 전환하면 지연 완료가 새 영상의 입력을 지우지 않는다 (codex 리뷰 P2)" 테스트가 42번 영상의 POST를 releasePost 콜백으로 보류시킨 뒤, 응답 도착 전에 43번으로 전환 → 43에 새 초안 입력 → 42의 응답을 그제서야 흘려보내는 순서로 실제 레이스를 재현합니다.
가드 로직과 정확히 맞물림: useCreateComment의 onSuccess는 mutate 시점의 variables.videoId(=42)를 onCreated에 넘기고, EventVideoMiniPanel의 onCreated 콜백은 이를 컴포넌트의 최신 videoId(=43, react-query가 최신 옵저버 옵션의 콜백을 사용)와 비교합니다. 테스트가 이 시점차를 정확히 포착해 가드 없이는 실제로 RED(43 입력이 지워짐)임을 코멘트로 명시(가드 없으면 여기서 ""로 지워진다).
완료 증거까지 검증: 42로 재전환 시 seed된 새 댓글("현장 분위기 최고 3", "댓글 3")이 렌더되는지 확인해, 가드가 콜백을 완전히 무시하는 게 아니라 draft 초기화만 건너뛴다는 것(캐시 seed는 정상 반영)을 함께 고정했습니다.
42 재조회 시 네트워크 재요청 없이 캐시 seed가 그대로 보이는 이유도 확인: useEventVideoDetailQuery가 전역 기본 staleTime(30초)을 쓰고 refetchOnWindowFocus/Reconnect를 꺼둬서, 테스트 실행 시간 내 42 캐시가 fresh 상태로 남아 재요청 없이 seed 값이 그대로 노출됩니다. 테스트가 우연히 통과하는 게 아니라 이 계약에 기반해 안정적으로 통과합니다.
픽스처(EVENT_VIDEO_DETAIL.commentCount: 2, eventComment(3) → "현장 분위기 최고 3")와 어서션 값이 정확히 일치.

참고

이전 리뷰의 🟢 사소한 제안(EventVideoCommentInput.tsx의 maxLength={500}이 trim 전 기준이라 공백 포함 시 500자를 다 못 채우는 경계)은 이번 커밋 범위 밖이며 여전히 미반영 상태입니다 — 병합을 막을 사안은 아니라는 기존 판단 유지.
이번 세션에서는 pnpm --filter web test run 등 실행형 명령이 이 환경에서 승인 대기로 막혀 실제 실행 확인은 못했습니다(정적 분석으로 로직 대조만 수행) — 이전 리뷰 시점 vitest 통과 실측(225 files/1714 tests)과 이번 diff가 그 계약을 깨지 않는다는 점을 코드 대조로 확인했습니다.

결론

새 커밋은 이전 권장사항을 정확히 반영한 견고한 회귀 테스트이며, 새로운 버그나 회귀는 발견하지 못했습니다. 추가로 막아야 할 이슈 없음.

View job run

gyuhochoime and others added 3 commits August 31, 2026 16:38

MSG-520 feat: [웹] 행사 영상 미니 패널 — 카드 클릭 재생·도움돼요·댓글(행사 한정)+⋯ 재생 유틸리티, 재생…

02aa9b4

… 표면 추출 공유

Merge remote-tracking branch 'origin/develop' into feat/event-video-m…

30e7966

…ini-panel-likes-comments # Conflicts: # docs/STATUS.md # docs/decisions/DECISIONS.md # nose.baseline.json

MSG-520 fix: codex 리뷰 반영 — 댓글 완료 콜백에 제출 videoId 대조, 영상 전환 후 입력 초안 오삭제 차단

941fb4f

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0168FrMFYw5hZ4yUbfu3gpQ7

claude Bot reviewed Aug 31, 2026

View reviewed changes

Comment thread apps/web/src/pages/map-home/ui/EventVideoMiniPanel.tsx

claude Bot reviewed Aug 31, 2026

View reviewed changes

Comment thread apps/web/src/pages/map-home/ui/EventVideoCommentInput.tsx

MSG-520 test: PR 리뷰 반영 — 댓글 지연 완료×영상 전환 레이스 스모크 추가 (가드 무력화 RED 실측)

d5d4a4a

gyuhochoime force-pushed the feat/event-video-mini-panel-likes-comments branch from 95d072c to d5d4a4a Compare August 31, 2026 08:20

gyuhochoime merged commit b362c2c into develop Aug 31, 2026
6 checks passed

Navigation Menu

Uh oh!

MSG-520 feat: [웹] 행사 영상 미니 패널 — 재생·도움돼요·댓글(행사 한정) + ⋯ 재생 유틸리티 - #113

MSG-520 feat: [웹] 행사 영상 미니 패널 — 재생·도움돼요·댓글(행사 한정) + ⋯ 재생 유틸리티#113
gyuhochoime merged 4 commits into
developfrom
feat/event-video-mini-panel-likes-comments

gyuhochoime commented Aug 31, 2026 •

edited by atlassian Bot

Loading

Uh oh!

claude Bot commented Aug 31, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 31, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

claude Bot commented Aug 31, 2026

Uh oh!

claude Bot commented Aug 31, 2026 •

edited

Loading

Uh oh!

claude Bot commented Aug 31, 2026 •

edited

Loading

Uh oh!

claude Bot commented Aug 31, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

gyuhochoime commented Aug 31, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎫 관련 티켓

📌 작업 내용

✅ 체크리스트

🔍 검증 요약

📸 스크린샷 (선택)

💡 추가 논의할 사항

Uh oh!

claude Bot commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ 코드 리뷰 완료

Uh oh!

github-actions Bot commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

claude Bot commented Aug 31, 2026

🔍 코드 리뷰 요약 (MSG-520, PR #113)

👍 잘한 점

🟡 권장 (인라인 코멘트 참고)

🟢 사소한 제안 (인라인 코멘트 참고)

확인했으나 문제없다고 판단한 부분 (추측 아님, 근거 확인함)

Uh oh!

claude Bot commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 코드 리뷰 진행 중

Uh oh!

claude Bot commented Aug 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ 코드 리뷰 완료 (신규 커밋 d5d4a4a 반영분)

Uh oh!

claude Bot commented Aug 31, 2026

🔍 코드 리뷰 요약 (MSG-520, PR #113) — 신규 커밋 d5d4a4a 반영분

👍 확인된 점

참고

결론

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

gyuhochoime commented Aug 31, 2026 •

edited by atlassian Bot

Loading

claude Bot commented Aug 31, 2026 •

edited

Loading

github-actions Bot commented Aug 31, 2026 •

edited

Loading

claude Bot commented Aug 31, 2026 •

edited

Loading

claude Bot commented Aug 31, 2026 •

edited

Loading

✅ 코드 리뷰 완료 (신규 커밋 `d5d4a4a` 반영분)

🔍 코드 리뷰 요약 (MSG-520, PR #113) — 신규 커밋 `d5d4a4a` 반영분