MSG-517 feat: [웹] 행사 위치 개요 — 개요 패널·시청 인원 30초 폴링+heartbeat·격자 클릭 소속 행사 표시 by gyuhochoime · Pull Request #111 · ASM-MSG/FE

gyuhochoime · 2026-08-31T05:32:45Z

🎫 관련 티켓

Closes MSG-517

📌 작업 내용

행사 웨이브 2 (MSG-518·519와 병렬 진행, 둘 다 이 PR 이전에 머지됨 — 본 브랜치에 origin/develop 머지 완료).

행사 위치 개요 패널: EventRoomBodySwitch overview 분기(case 2줄)로 EventRoomOverview 연결 — 행사명·기간(7.17–8.9 KST 파생)·위치 카드(유형 라벨·운영시간·영상 N 배지·Thumbnail 폴백, 표시 전용)·안내 배너. 셸 무개조.
실시간 시청 인원 = 30초 폴링 (스펙 단계 확정 — 생성물에 SSE 부재, heartbeat 30s 주기·90s 집계 창과 정합): getViewerCount refetchInterval 30s, 0명 보는 중 표시, null·실패는 라벨만 생략·다음 주기 자연 재시도.
heartbeat 30초 전송 (열림 동안, 닫으면 중단): 비로그인은 X-Viewer-Session(sessionStorage UUID — viewerSessionStorage). 실서버 익명 curl 실측: 헤더 有 200 / 無 400.
격자 클릭 소속 행사 표시 (행사방 열림 한정 — 사용자 확정): 소속 위치 영역 강조(theme-festival) + "● {행사명}" 라벨만, 위치 영상·격자 상세 어느 쪽으로도 비진입. 비소속 격자는 기존 경로 그대로(grid-click-routing 예외 1개).
게시자 단일화: use-home-overlay-publish에 suspended 4줄 — 오버레이 스토어 이중 게시 clobber 구조 차단.
지도 채색은 event-tint hex 대신 semantic.primary 전달 — MapCanvas가 자체 fillOpacity 0.4를 곱하는 계약이라 이쪽이 Figma 정본(#06c 저투명)과 렌더 일치 (DECISIONS 기록).

병렬 규칙 준수: pnpm api:generate 미실행(생성물 diff 0), 공유 파일 최소 diff(event-room-store 필드 1·스위치 case 2줄·라우팅 예외 1), MSG-518/519 소유 영역 미접촉 (검증자 grep 감사).

develop 머지 커밋(7a75fae): 518·519 합류 — event-room-store는 강조+위치 선택·back 합집합(back의 방 닫기가 강조도 리셋), EventRoomBodySwitch 4모드 전부 실 본문 완성. merge에서 드러난 교차 exact 중복 1건 단일화(locationTypeLabel 제거 → 518 eventLocationTypeLabel 재사용). 518·519의 "overview 자리표시" 스모크 단정 2건은 517이 교체한 실 본문 기준으로 갱신.

codex 리뷰(push 전, 브랜치 스코프): P1 2건 지적 → 둘 다 오탐 판정 (코드 실측 근거):

"비소속 셀 클릭 삼킴" — 방 열림 중 activeTheme은 항상 null(캡슐 진입이 테마 해제, MSG-516 상호 배타)이라 홈 게시 셀·위임 대상 자체가 없고, 홈 핸들러도 canOpenDetail로 게시 셀만 반응 — 잃는 기존 동작이 없음. 비소속 점령 셀은 셸 점령 분기로 격자 상세(브라우저 실측 통과).
"missionChipActive 우회" — 전제(방 열림 + activeTheme 잔존)가 도달 불가: 행사방은 캡슐 세그먼트로만 열리고 그 진입로가 테마를 먼저 해제, 테마 활성화 호출처는 칩 바(방을 먼저 닫음)와 해제 전용 close-handler뿐(전수 grep).

✅ 체크리스트

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

🔍 검증 요약

자동 검증 (풀 게이트 6종 — 머지 후 재실측): vitest web 1645/1645 + mobile 982/982 · typecheck · lint(oxlint) · format:check · check:duplication · openapi 드리프트 없음 — 전부 통과.

#	기준	판정
1	세그먼트 클릭 → 개요 모드(행사명·기간·위치 N곳)	통과 — 브라우저(스텁) 실관찰, Figma 15518:5707 구조 일치
2	overview 분기만 교체, 셸·판정 무변경	통과 — 스위치 diff 2줄, `event-room-mode` diff 0, 기존 테스트 무변경 GREEN
3	"N명 보는 중" + 30초 폴링, 0 표시	통과 — 폴링 간격 30.00s 실측, 0 전환 렌더 실관찰
4	null·실패 시 인원만 생략·본문 유지·폴링 지속	통과 — 라벨만 소멸·다음 주기 복귀 실관찰
5	heartbeat 30초 + 비로그인 헤더, 닫으면 중단	통과 — 29.99s 간격, 닫힘 39s 전송 0회, 재열림 즉시 재개 실측
6	열림 중 위치 채색+라벨, 닫으면 걷힘	통과 — 4개 영역 채색·라벨, 닫기로 전부 걷힘 실관찰
7	행사 격자 클릭 → 강조+행사명 라벨, 개요 유지·비진입	통과 — 보라 강조 + "● 행사명" 교체, 상세 미진입 실관찰
8	비소속 격자 기존 동작 유지	통과 — 점령→격자 상세 우선·복귀 시 강조 유지, 비점령→기존 위임 실관찰
9	위치 카드 파생(유형 5종·시간 null 생략·영상 N·폴백·클릭 없음)	통과
10	조회 실패 RetryNotice → 재시도 복구	통과 — 404 스텁 → 재시도 복구 실관찰
11	안내 배너 고정 문구 + 행사명 보간	통과
—	실서버 실데이터 경로	확인불가 — 부산 bbox 승인 행사 0건(BE 시딩 MSG-500 대기), 전 AC는 스텁 재현 완료

통과 11 / 실패 0 / 확인불가 1(실데이터 경로 부기) · 콘솔 에러 0 · 탭 가시성·rAF(121fps) 전제 준수

💡 추가 논의할 사항

배너 보조 문구 대비 3.87:1(muted on event-tint) — Figma 정본과 동일 짝, muted on white도 4.29라 토큰 차원 기존 이슈 (별도 티켓 감, 지라 코멘트로 환류)
쿼리 훅 쌍(detail↔locations) 클론은 의도 중복 baseline 등재 — 같은 꼴 훅 3개 이상이면 추출 재검토
BE 시딩(MSG-500) 후 실데이터 1회 확인 권장

🤖 Generated with Claude Code

https://claude.ai/code/session_01FZ5R7MjosuzZu78Su5UPDB

… 표시(열림 한정)

공유 파일 충돌 해소: event-room-store는 강조(517)+위치 선택·back(518) 합집합 (back의 방 닫기가 강조도 리셋), EventRoomBodySwitch는 4모드 전부 실 본문 완성. merge에서 드러난 교차 exact 중복 1건 단일화 — locationTypeLabel(517) 제거, eventLocationTypeLabel(518) 재사용. 518·519의 overview 자리표시 단정 2건은 517이 교체한 실 본문(개요) 기준으로 갱신. 게이트 6종 통과(web 1645·mobile 982). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FZ5R7MjosuzZu78Su5UPDB

claude · 2026-08-31T05:32:59Z

Claude finished @gyuhochoime's task in 3m 53s —— View job

🔍 코드 리뷰 완료

작업 목록

컨텍스트 수집 (PR body, 변경 파일 목록, CLAUDE.md)
git diff origin/develop...HEAD 확인 (34 files, +2466/-651)
핵심 파일 Read로 정독 (model 레이어: event-overview, event-location-overlay, use-event-heartbeat, use-viewer-count-query, use-event-detail/locations-query, event-room-store, storage)
UI 레이어 정독 (EventRoomOverview, EventLocationCard, EventRoomBodySwitch, EventRoomPanel, EventCapsule, ThemeChipsBar)
라우팅/게시 로직 정독 (MapShell, grid-click-routing, use-event-overlay-publish, use-home-overlay-publish, use-home-close-handlers)
인라인 코멘트 작성 (2건)
전체 요약 코멘트 게시

총평

전체적으로 완성도가 높습니다. model 레이어(순수 함수·훅)는 test-first로 엣지 케이스(0 vs null 시청 인원, operatingHours null, 격자 중복 membership, KST 오프셋 경계 등)를 꼼꼼히 다루고 있고, RN 재사용 경계·FSD 규칙을 잘 지켰습니다. 특히 PR 본문에서 codex 리뷰의 P1 지적 2건("비소속 셀 클릭 삼킴", "missionChipActive 우회")을 오탐으로 판정한 근거를 직접 코드 추적으로 검증했는데, 실제로 두 주장 모두 코드상 도달 불가능한 전제(행사방 열림 중 activeTheme은 항상 null)에 기반해 있어 오탐 판정이 맞다는 것을 확인했습니다:

EventCapsule.handleSegmentSelect(세그먼트 클릭)가 방을 열기 전에 활성 테마를 먼저 해제
ThemeChipsBar의 칩 클릭 핸들러가 테마를 켜기 전에 useEventRoomStore.getState().close()로 방을 먼저 닫음
zustand 상태 갱신이 동기적이라 두 상태(방 열림 + 테마 활성)가 동시에 존재하는 렌더가 없음
toggle을 호출하는 곳은 이 두 지점과 use-home-close-handlers(해제 전용)뿐 — 전수 grep 확인

버그성 발견 사항은 없었고, 🟢 사소한 제안 2건만 인라인으로 남겼습니다.

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

apps/web/src/pages/map-home/MapHomePage.tsx:179-181 — use-event-overlay-publish/use-home-overlay-publish 게시 순서 주석("effect 실행 순서가 게시 우선순위")이 실제 안전장치(guard 상호배타)를 설명하지 않아 오해 소지. 동작엔 영향 없음.
apps/web/src/pages/map-home/ui/event-archive-body.smoke.test.tsx:186-198 — 마지막 테스트가 스토어를 직접 open/close하는데 afterEach에 스토어 리셋이 없어, 중간 단정 실패 시 다음 테스트로 상태가 샐 여지(현재는 파일 마지막 테스트라 실질 영향 없음).

확인 못한 부분

실서버 실데이터 경로(부산 bbox 승인 행사 0건, BE 시딩 대기) — PR 본문에 이미 "확인불가"로 명시돼 있어 별도 지적 아님
브라우저 실동작 검증은 PR 작성자 리포트를 신뢰했고, 이 리뷰는 코드 정독으로만 진행했습니다(추측 아님, 명시)

github-actions · 2026-08-31T05:33:10Z

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit e5bec05.}

…d 근거로 정정

claude · 2026-08-31T05:48:28Z

Claude finished @gyuhochoime's task in 4m 20s —— View job

🔍 코드 리뷰 완료

작업 목록

컨텍스트 수집 (PR body, 변경 파일 목록, CLAUDE.md)
git diff origin/develop...HEAD 확인 (34 files, +2469/-651)
model 레이어 정독 (event-overview, event-location-overlay, use-event-heartbeat, use-viewer-count-query, use-event-detail/locations-query, event-room-store, storage)
UI 레이어 정독 (EventRoomOverview, EventLocationCard, EventRoomBodySwitch, EventRoomPanel)
라우팅/게시 로직 정독 (MapShell, grid-click-routing, use-event-overlay-publish, use-home-overlay-publish, MapHomePage)
이전 리뷰(2건) 반영 확인 — 둘 다 정확히 반영됨
인라인 코멘트 작성 (1건)
전체 요약 코멘트 게시 (MSG-517 feat: [웹] 행사 위치 개요 — 개요 패널·시청 인원 30초 폴링+heartbeat·격자 클릭 소속 행사 표시 #111 (comment))

요약

이전 리뷰 지적 2건(archive 스모크 afterEach 스토어 리셋, 게시자 단일화 주석)이 커밋 e5bec05에서 정확히 반영된 것을 확인했습니다. 나머지 전체 diff(34 files)를 model/UI/라우팅 레이어별로 Read로 정독했으며, 버그성 발견 사항은 없었습니다. MapShell.tsx:179-183에 사소한 관찰(행사방 오픈 직후 위치 쿼리 pending 중 짧은 타이밍 창) 1건만 인라인으로 남겼고, 상세 근거는 요약 코멘트에 게시했습니다.

claude · 2026-08-31T05:51:51Z

+    () => eventGridIdSet(eventLocations),
+    [eventLocations],
+  );
  const handleCellClick = useMemo(


🟢 사소한 관찰 (추측 — 브라우저 실측은 안 했습니다) — 행사방이 막 열린 직후, useEventLocationsQuery(179행)가 아직 로딩 중이면 eventGridIds가 빈 Set입니다. 이 순간 그 행사 위치에 속한 점령 격자를 클릭하면 buildCellClickHandler(grid-click-routing.ts:33-41)가 eventGrid=false로 판정해 openGridDetail(격자 상세)로 빠지고, 위치 데이터가 로드된 뒤에야 정상적으로 sectionHandler(위치 강조)로 위임됩니다.

캐시가 개요 패널·use-event-overlay-publish와 공유되므로(use-event-locations-query.ts 주석) 창은 보통 매우 짧고(첫 조회 왕복 1회), 로딩 스켈레톤이 개요 패널에도 함께 뜨는 시점이라 실사용 영향은 제한적으로 보입니다. 블로킹 이슈는 아니고, 재현 빈도가 눈에 띄면 eventGridIds가 아직 비어 있고 조회가 pending인 동안은 이 예외를 보류하는 방안 정도를 고려해볼 만합니다.

Fix this →

claude · 2026-08-31T05:52:48Z

🔍 코드 리뷰 완료 (재푸시 반영, `e5bec05` 기준)

작업 목록

컨텍스트 수집 (PR body, 변경 파일 목록, CLAUDE.md)
git diff origin/develop...HEAD 확인 (34 files, +2469/-651)
model 레이어 정독 (event-overview, event-location-overlay, use-event-heartbeat, use-viewer-count-query, use-event-detail/locations-query, event-room-store, storage)
UI 레이어 정독 (EventRoomOverview, EventLocationCard, EventRoomBodySwitch, EventRoomPanel)
라우팅/게시 로직 정독 (MapShell, grid-click-routing, use-event-overlay-publish, use-home-overlay-publish, MapHomePage)
이전 리뷰(2건) 반영 확인
인라인 코멘트 작성 (1건)
전체 요약 코멘트 게시

총평

이전 푸시(직전 리뷰) 이후 커밋 e5bec05가 그 리뷰의 지적 2건을 정확히 반영했습니다:

event-archive-body.smoke.test.tsx의 afterEach에 useEventRoomStore.setState(getInitialState(), true)가 추가돼, 마지막 테스트의 단정 실패 시에도 스토어가 새는 경로가 막혔습니다.
MapHomePage.tsx:179-183의 게시자 단일화 주석이 "effect 선언 순서" 근거에서 "React가 destroy 전부 → create 전부 순으로 실행"하는 두 guard(suspended / room === null)의 상호 배타 근거로 정확히 정정됐습니다 — 실제 React 두 단계 커밋 동작과 일치합니다.

전반적으로 model 레이어(순수 함수·훅)가 test-first로 엣지 케이스를 꼼꼼히 커버합니다: 시청 인원 0 vs null, operatingHours null 생략, 격자 중복 membership(먼저 온 위치 우선), KST 날짜 경계, heartbeat 로그인/비로그인 헤더 분기, 폴링 실패 시 자연 재시도 등. EventRoomOverview가 자급 컨테이너로 스토어·쿼리를 직접 구독하는 구조도 EventCapsule 선례를 그대로 따르고, 상세/위치 쿼리가 EventRoomPanel·use-event-overlay-publish·MapShell·개요 패널 4곳에서 동일 queryKey를 공유해 실제 네트워크 요청은 1회로 dedupe됨을 코드로 확인했습니다(use-event-archive-query.ts:13-17 주석과 일치).

격자 클릭 라우팅(grid-click-routing.ts)의 행사 격자 예외도 기존 missionChipActive 예외와 동형 구조로 깔끔하게 얹혔고, 테스트(grid-click-routing.test.ts)가 점령/비점령 × 소속/비소속 4개 조합을 전부 커버합니다.

버그성 발견 사항은 없었습니다. 🟢 사소한 관찰 1건만 인라인으로 남겼습니다.

🟢 사소한 관찰 (인라인 코멘트 참고, 추측)

apps/web/src/widgets/map-shell/MapShell.tsx:179-183 — 행사방이 막 열린 직후 useEventLocationsQuery가 아직 pending이면 eventGridIds가 빈 Set이라, 그 짧은 창 동안 행사 위치 소속 점령 격자를 클릭하면 위치 강조 대신 격자 상세로 빠집니다. 캐시가 4곳에서 공유돼 창이 매우 짧고 그 시점엔 개요 패널도 로딩 스켈레톤이라 실사용 영향은 제한적으로 보이나, 브라우저로 직접 재현 확인은 하지 않았습니다 — 블로킹 이슈 아님.

확인 못한 부분

실서버 실데이터 경로(부산 bbox 승인 행사 0건, BE 시딩 대기) — PR 본문에 이미 "확인불가"로 명시돼 있어 별도 지적 아님
브라우저 실동작 검증은 PR 작성자 리포트를 신뢰했고, 이 리뷰는 코드 정독으로만 진행했습니다(추측 아님, 명시)

View job run

gyuhochoime and others added 2 commits August 31, 2026 14:19

MSG-517 feat: [웹] 행사 위치 개요 — 개요 패널·시청 인원 30초 폴링+heartbeat·격자 클릭 소속 행사…

2994636

… 표시(열림 한정)

claude Bot reviewed Aug 31, 2026

View reviewed changes

Comment thread apps/web/src/pages/map-home/ui/event-archive-body.smoke.test.tsx Outdated

claude Bot reviewed Aug 31, 2026

View reviewed changes

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

MSG-517 fix: PR 리뷰 반영 — archive 스모크 afterEach 스토어 리셋·게시자 단일화 주석을 guar…

e5bec05

…d 근거로 정정

claude Bot reviewed Aug 31, 2026

View reviewed changes

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

Navigation Menu

Uh oh!

MSG-517 feat: [웹] 행사 위치 개요 — 개요 패널·시청 인원 30초 폴링+heartbeat·격자 클릭 소속 행사 표시 - #111

MSG-517 feat: [웹] 행사 위치 개요 — 개요 패널·시청 인원 30초 폴링+heartbeat·격자 클릭 소속 행사 표시#111
gyuhochoime merged 3 commits into
developfrom
feat/MSG-517-event-overview-panel

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 •

edited

Loading

Uh oh!

claude Bot Aug 31, 2026

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 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 코드 리뷰 완료

요약

Uh oh!

claude Bot Aug 31, 2026

Choose a reason for hiding this comment

Uh oh!

claude Bot commented Aug 31, 2026

🔍 코드 리뷰 완료 (재푸시 반영, e5bec05 기준)

총평

🟢 사소한 관찰 (인라인 코멘트 참고, 추측)

확인 못한 부분

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

🔍 코드 리뷰 완료 (재푸시 반영, `e5bec05` 기준)