Store Landing — /landing (점장 공개 랜딩)
SPEC #079 도입. design_handoff_linkmusic_9 정식 시안 정합 완료 — 시각만 교체, 동작·라우팅 보존. FE-only · BE 변경 0.
Overview
점장(STORE_MANAGER)이 매장에서 “링크뮤직 스페이스” 검색 → space.linkmusic.io 접속 시
가장 먼저 만나는 공개 랜딩 페이지. 본사 매니저는 보통 /login 으로 곧장 접속하지만, 점장은
마케팅 공개 페이지가 자연스럽다.
시안 정합 완료:
design_handoff_linkmusic_9/design/screens/store-landing.jsx정식 시안의 완성형 마케팅 레이아웃을 반영했다(이전 atom-grounded 임시 레이아웃 대체). 시안의 프로토타입 전용 CSS 변수는 실제 atom·semantic 토큰으로 매핑, lucide 아이콘은 레포 idiom 대로 사용, 카피는 시안 문구 그대로(점장 시나리오 검증). 시각만 교체하고 동작·라우팅은 100% 보존.
범위: 공개 랜딩 1페이지(헤더 + 히어로 + 기능 6카드 + 3스텝 + 4FAQ + 하단 CTA + 푸터). 회원가입·결제 안내·다국어·운영사/본사 마케팅 페이지는 범위 밖.
구성
app/landing/page.tsx— Server Component. 본문 fetch 없음(정적 페이지).- 미들웨어
middleware.tsisPublic()에/landing등록 — 미인증 진입 허용. - 인증 사용자 redirect 는 page 가 책임(미들웨어가 우회시키므로).
페이지 구조
| 영역 | 내용 |
|---|---|
헤더 (landing-header) | L 마크 배지(--brand-3→--mag-1 gradient) + “LinkMusic Space” wordmark + 우측 점장 로그인 ChevronRight 아이콘 |
| 히어로 | 라이브 도트 펄스 배지(“매장에서 켜두기만 하면 됩니다”) + h1 “매장 음악·안내방송을 한 곳에서 자동으로”(gradient 강조) + 보조 문구 + 큰 CTA 점장 로그인 + 보조 안내 “계정은 본사 매니저가 발급합니다. 계정이 없다면 소속 본사에 문의해주세요.”(C3) |
기능 카드 6종 (landing-features · landing-feature-*) | mobile stack · md=2열 · lg=3열. 자동 재생(Music) / 안내방송(Megaphone) / 즉시 방송(Mic) / 예약 송출(Calendar) / 긴급 안내방송(AlertTriangle · warn 톤 차등 + caution 박스) / 환경 점검(CheckCircle2) — 각 카드 = 아이콘 배지 + 제목 + 1문단 |
3스텝 (landing-steps · landing-step-*) | 번호 원형 배지(1·2·3, brand/info/success accent) + 제목 + 본문. 본사 준비 → 매장 PC 자동 재생 → 필요할 때 직접 방송 |
FAQ 4문항 (landing-faqs · landing-faq-*) | native <details> 아코디언. 첫 항목(점장 계정 발급) defaultOpen. 계정·장비·음악·방송 주체 |
| 하단 CTA | ”계정이 있다면 바로 시작하세요” + 점장 로그인 + “계정이 없다면 소속 본사 매장관리팀에 문의해주세요.” |
푸터 (landing-footer) | L 마크 + ”© 2026 Chilloen · LinkMusic Space” + “문의는 소속 본사 매장관리팀으로”. 외부 링크 0 |
기능 카드 카피는 시안 문구 그대로(점장 시나리오 검증) — 본사가 정한 음악 자동 재생 / 본사 정기 안내 자동 송출 / 점장 즉시 방송 / 오픈·런치·마감 예약 송출 / 긴급 안내방송(안전·고지 의무 한정) / 첫 사용 환경 점검. 긴급 안내방송은 surface ① FR-2.8 민감 기능이라 warn 톤으로 차등하고 “안전·고지 의무 한정 — 마케팅·이벤트 안내에는 사용할 수 없습니다” caution 을 명시한다.
인증 분기 (§D10·D11)
- 미인증 (
session.accessToken부재): 정상 노출. 로그인 강제 X. - 인증된 HQ_MANAGER:
/admin으로 server-sideredirect(). - 인증된 STORE_MANAGER:
/store로 server-sideredirect(). - 인증된 알 수 없는 role(OPERATOR · 기타):
/login으로 fail-closed(defense-in-depth).
session.role 은 login / refresh / change-password 핸들러가 세션에 저장한다
(lib/session.ts SessionData.role). /landing 은 본문 fetch 가 없는 정적 페이지라
refreshIfNeeded·me 호출 없이 cookie 만 보고 분기한다.
스타일 정책
- 색·반경·폰트는 항상 정의된 semantic 토큰 + Tailwind 유틸로 매핑:
--primary·--primary-fg·--primary-soft·--brand-2·--brand-3·--mag-1·--surface·--surface-2·--hairline·--fg·--fg-muted·--warn·--info·--success·--radius·--radius-lg·--shadow-2. - lucide 아이콘(
Music·Megaphone·Mic·Calendar·AlertTriangle·CheckCircle2·ChevronRight) — 레포 idiom(import { … } from "lucide-react") 대로. - 시안의 프로토타입 전용 변수 중 실제 토큰에 없는 것은 가장 가까운 기존 토큰으로 대체(임의 색
발명 0). 히어로 라이브 도트 =
lm-glow-pulse키프레임(prefers-reduced-motion 시 자동 정지). - 반응형 mobile-first —
md:이상 hero 중앙 정렬·기능 그리드 2열,lg:이상 3열. - 외부 이미지 0 — L 마크는 CSS gradient 배지(자산 발명 없음). C6 외부 의존 0 유지.
a11y
- heading 계층 — h1(히어로) → h2(각 섹션 제목). 헤더·본문·푸터는 시맨틱 landmark
(
<header>·<main>·<footer>). 섹션은aria-labelledby/aria-label. - [점장 로그인] 진입은 모두
<Link href="/login">(next/link) — 라우팅 이동이므로 link 시맨틱. - C5 고대비·색만 의존 X: 긴급 카드는 색(warn)뿐 아니라 아이콘 + caution 텍스트로 의미 병기.
장식 아이콘·배지는
aria-hidden.
미구현 / 후속
- F2 다국어 (한국어 + 영어 토글).
- F3 SEO 메타 (og:image · twitter card · robots).
- F4 운영사·본사용 별도 랜딩 (별 도메인 또는 별 SPEC).
References
- SPEC #079 — 본 문서의 단일 출처.
- 시안: workspace parent dir
design_handoff_linkmusic_9/design/screens/store-landing.jsx(정합 대상) - 요청서:
design_handoff_linkmusic/briefs/requests/store-landing.md§3 apps/space/src/app/landing/page.tsx·apps/space/src/app/landing/page.test.tsxapps/space/middleware.ts(/landingpublic 등록)