Store Surface Matrix — 점장 모드(STORE_MANAGER) stub ↔ 기획 대응표
기획 원문 docs/planning/12-prd-client-store-mode.md(Page 1~9) 대비 현재 구현·stub 현황 추적표.
코드 현황 기준이며, 신규 기능 정의가 아니라 갭 가시화용이다. 점장 모드는 apps/space
(space.linkmusic.io)의 /store/* 라우트로 구현된다(본사 모드와 한 앱).
Overview
점장(STORE_MANAGER) PRD 는 9 페이지다. 현재 구현은 player 홈(Page 1) + 온보딩 풀 플로우
(Page 9 — 비번변경·환경점검·간단소개·음악시작) 가 동작하고, 나머지는 placeholder stub
(_stub/store-stub-page.tsx) 또는 화면 미존재다.
점장 모드는 저-touch 설계(홈에 90% 체류, 사이드바 없음)라 보조 화면들이 홈의 보조 버튼 링크로만
연결돼 있고 대부분 stub 이다.
store-scoped BE endpoint 현황: 점장 토큰으로 호출 가능한 endpoint 는
GET /api/v1/store/me(본인 매장)·GET /api/v1/store/queue(재생 큐)·GET /api/v1/store/announcements/pending(본사 송출 pending)·POST /api/v1/store/announcements/{dispatchId}/ack(재생 ack)·POST /api/v1/store/broadcasts/preview(즉시방송 TTS 미리듣기)·POST /api/v1/store/broadcasts/recording(즉시방송 녹음 업로드)·POST /api/v1/store/broadcasts/{announcementId}/send(즉시방송 송출)·CS 티켓 4종 (GET·POST /api/v1/store/tickets·GET /api/v1/store/tickets/{id}·POST /api/v1/store/tickets/{id}/comments, SPEC #112) 이다(generated client 확인). 점장 자기매장 플레이리스트 선택·템플릿·스케줄 endpoint 는 아직 BE 에 없다. 코드:packages/api-client/src/generated/endpoints/store-mode·store-playback.
stub ↔ 기획 대응표
구현 상태 범례: 구현 = 동작 / stub = _stub/store-stub-page.tsx placeholder(링크 보호용) /
없음 = 라우트·화면 미존재.
| 화면 / 플로우 | PRD 근거 | 시안 | 구현 상태 | 막힌 선행조건 |
|---|---|---|---|---|
| 홈(재생 화면) | Page 1 | home-classic.jsx → store-player.jsx (design_14 §8G-① · 정식 시안) | 구현·design_14 시안 정합 완료 — 재생 큐 소비·<audio> 재생·진행바·볼륨·자동 다음·큐 소진 refetch·source/빈 상태·재시작 + 본사 안내방송 삽입 재생(20초 폴링·곡 끝 1회 재생·ack). 4상태 즉시구분·상태별 brand 그라데이션 커버·dead-end CTA·CS 새 답변 dot 시각 교체(동작 보존) | — |
| 본사 안내방송 수신·재생 | (송출 백본) | (홈 내부 — “본사 안내방송 재생 중” 배지) | 구현(첫 슬라이스) — pending 폴링→곡 끝 삽입 재생→ack→음악 복귀 | 송출 슬라이스(즉시 중단·더킹·우선순위는 후속) |
| 점장 즉시 방송(now) — TTS 탭 | Page 2 | broadcast-now.jsx §tts | 구현(첫 슬라이스, TTS 탭) — /store/broadcast/now 2-step 미리듣기 게이트(previewStoreBroadcast→<audio> 미리듣기→sendStoreBroadcast 송출, 재미리듣기 무효화·“송출 후 취소 불가” 경고). 송출은 기존 player pending 폴링이 재생 | 긴급(isEmergency)·대기 큐·송출 audit/rate limit 후속 |
| 점장 즉시 방송(now) — 녹음 탭 | Page 2 | broadcast-now.jsx §recording (stub만 — 정식 시안 공백) | 구현(첫 슬라이스, 녹음 탭) — 마이크 녹음(MediaRecorder webm/opus 협상·30초 자동 정지)→<audio> 미리듣기→recordStoreBroadcast(multipart file+durationSeconds) 업로드→TTS 와 공유 미리듣기 게이트 활성→sendStoreBroadcast 송출. 마이크 권한 거부 UX(NotAllowed/NotFound)·업로드 에러(RECORDING_*)·탭 전환 무효화. TTS 레이아웃 미러(시안 stub → handoff 요청 briefs/requests/store-broadcast-recording.md, 인터랙션 “탭 토글” 확인 요망) | 정식 시안 정합·Safari 트랜스코딩·긴급·rate limit 후속 |
| 점장 즉시 방송(now) — 자주 쓰는 방송 탭 | Page 2 | broadcast-now.jsx §templates (행 레이아웃 정적 mock — CRUD 시안 공백) | 구현(자주쓰는방송 슬라이스) — /store/broadcast/now 3번째 탭. 템플릿 CRUD(useListBroadcastTemplates·useCreateBroadcastTemplate·useUpdateBroadcastTemplate·useDeleteBroadcastTemplate) — 목록(updated_at DESC·빈상태)·인라인 저장/편집 폼(name 1briefs/requests/store-broadcast-templates.md, 임시 인터랙션 확인 요망) | 정식 시안 정합·녹음 템플릿(텍스트만 현재)·후속 |
| 활성 플레이리스트 선택 | Page 4 | store-active-playlist.jsx (design_14 §8G-⑤ · 정식 시안) | 구현(SPEC #129)·design_14 시안 정합 완료 — /store/playlist 본사 PL 목록·[선택]·[본사 기본으로](활성 해제). 파생 상태 4종 라벨. 공용 StoreSubHeader. 시각만 교체·동작 보존 | 완료(시각 정합) |
| 예약 방송(schedule) | Page 5 | (점장 전용 슬롯 그리드 시안 없음) | 부분 — 예약 송출은 /store/broadcast/now 즉시/예약 토글(#083)로 동작하고, 예약 목록/취소·미리듣기(/store/broadcast/scheduled)는 design_14 §8G-③ 정합 완료. 5분 슬롯 그리드 schedule UI 는 미구현 | 5분 슬롯 그리드·반복 차단은 본사 예약 슬롯 모델 후속 대형 SPEC(자유 시각 입력 유지) |
| 매장 프로필 | Page 6 | store-profile.jsx (design_14 §8G-④ · 정식 시안) | 구현(SPEC #087/#100)·design_14 시안 정합 완료 — /store/profile read-only 8행·매니저 이름 편집·비번 변경·고객지원 진입 카드. 공용 StoreSubHeader. 시각만 교체·동작 보존 | 완료(시각 정합) |
| 장애 복구(재시작) | Page 7 | troubleshoot.jsx | 부분 — 홈 [음악이 이상하면 재시작](in-app 큐 refetch + 위치 리셋, #064). 전용 화면은 없음 | 3회 카운트·자동 리포트(device-check류) BE 없음 |
| 고객지원 | Page 8 | store-support.jsx (design_14 §8G-② · 정식 시안) | 구현(SPEC #112)·design_14 시안 정합 완료 — /store/support 목록·작성·상세 3화면. 본인 매장 격리 CS 티켓(작성·조회·댓글, category 필수). category 큰 칩 5종·댓글 좌우 말풍선·확인 종료 1종. 상태/우선순위 변경은 운영자 전담(점장 읽기 전용). 진입=player 헤더·프로필. 공용 StoreSubHeader. 시각만 교체·동작 보존 | 완료(category 자동선택·첨부·상태변경은 후속) |
| 온보딩 — 비밀번호 변경 강제 | Page 9 (FR-9.1) | ops-change-password.jsx (본사·점장 공용) | 구현 — /onboarding/change-password 본사·점장 공용 관문(login + /store layout 가드가 me.passwordMustChange 로 강제). 변경 완료 후 /store | #050 / 자기-변경·reset 후속 |
| 온보딩 — 환경 점검 | Page 9 (FR-9.2) | onboarding.jsx + onboarding-supplement.jsx | 구현(축소) — /store/onboarding 4항목 점검 + 보강 상태(브라우저 fail·절전 수동확인·스피커 3단계·인터넷 폴백/warn) supplement 시안 정합(아래 드리프트 참조) | FR-9.2 서버 device-check 미구현(클라 best-effort 로 축소) |
| 온보딩 — 간단 소개(4슬라이드) | Page 9 (FR-9.3, intro) | store-onboarding-intro-start.jsx (design_10 · 정식 시안) | 구현(SPEC #110)·design_10 시안 정합 완료 — /store/onboarding/intro 4슬라이드 캐러셀(점 인디케이터·이전/다음·건너뛰기). 시안 INTRO_SLIDES(PRD Page 9) 그대로. 슬라이드 3(긴급)=warn 톤 차등 + “긴급 상황 한정” StatusPill + danger 경고 박스. 환경 점검 “다음으로”가 intro 로 체이닝 | 완료(시각 정합) |
| 온보딩 — 음악 시작(완료) | Page 9 (FR-9.4, start) | store-onboarding-intro-start.jsx (design_10 · 정식 시안) | 구현(SPEC #110)·design_10 시안 정합 완료 — /store/onboarding/start 준비 완료(PartyPopper 큰 success 원·glow + 체크리스트 3줄) → [음악 시작하기](64px 큰 탭) → 완료 플래그(done) 저장 + /store(player 홈 자동재생 진입) | 완료(시각 정합) · 완료 BE 연동(FR-9.5 이력)은 후속 |
온보딩 환경 점검 — FR-9.2 드리프트(중요)
PRD FR-9.2 / FR-9.2-1 / FR-9.2-2 는 서버 측 device-check 를 요구한다 —
POST /api/store/maintenance/device-check(30-TRD §7-7-5)로 RAM·브라우저 종류·해상도·인터넷 속도를 자동 측정해 기준 미달 시 빨간 배지 + 즉시 차단(브라우저)·경고(RAM·해상도) + 온보딩 이력 기록(FR-9.5). 구현은 이를 클라이언트 best-effort 측정·경고로 축소한다.
| FR | PRD 요구 | 구현 현황 |
|---|---|---|
| FR-9.2 브라우저 최신 | 서버 device-check 자동 차단 | navigator.userAgent Chromium 감지(Chrome/Edge pass, 그 외 fail) — 클라 측정 |
| FR-9.2-1 RAM/해상도 자동 측정 | device-check 응답으로 RAM·해상도 배지 | 미측정 — RAM·해상도 항목 없음(브라우저 한계) |
| FR-9.2-1 인터넷 속도 | 서버 측정값 | navigator.connection.downlink best-effort(미지원 시 “측정 미지원, 양호 가정” pass · 느림 시 warn 톤+“주의” 배지) |
| FR-9.2-2 브라우저 자동 차단 | 진행 불가 + Chrome 다운로드 링크 | fail 톤(danger)+“확인 필요” 배지 + 4/4 게이트 + 푸터 danger 안내. 강제 차단·다운로드 링크는 클라 안내 수준 |
| 절전·스피커 | (체크리스트 항목) | OS 절전·실제 스피커는 브라우저 측정 불가 → 수동 확인 버튼(절전)·Web Audio 440Hz 3단계 반자동(스피커: idle→playing→confirm→pass) |
| FR-9.5 환경 체크 이력 | 서버 기록 | 미기록 — 진행은 localStorage 에만 저장(서버 device-check 부재) |
상세는 Store Env Check 참조. 서버 device-check 도메인 도착 시 자동 차단· RAM/해상도·이력 기록을 후속 SPEC 에서 보강한다([[feedback_design_only_from_handoff]]).
References
- 기획 원문
docs/planning/12-prd-client-store-mode.md(Page 1~9, FR-9.2 =30-TRD §7-7-5) - 시안: workspace parent dir
design_handoff_linkmusic/design/screens/home-classic.jsx·broadcast-now.jsx·troubleshoot.jsx·onboarding.jsx. 묶음5 정식 시안 = design_14 핸드오프 Phase 8 §8G-①~⑤ (store-player.jsx·store-support.jsx·store-scheduled-broadcasts.jsx·store-profile.jsx·store-active-playlist.jsx) — 점장 5화면 시안 정합 완료. - 코드:
apps/space/src/app/store/*(홈·stub·온보딩) ·packages/api-client/src/generated/endpoints/store-mode·store-playback(store-scoped endpoint 2종) - 구현 상세: Store Player Home · Store Env Check
- SPEC #064(player 홈·stub 라우트)·#050(점장 라우팅·레이아웃 가드)