Interactive kit · grounded in code

Session Hero · 더 조용한 공유 카드 (제안)

Session hero — quieter than the list cardThe shipped share card carries seven elements before the meter — the list card's squeeze grammar (two emoji rows, a chip in the title row) on a page that has room. Every clean event hero in the research reads media → title → ONE when/where line, with status folded in and the viewer's own facts below the fold. Three ways to get there; the shared image follows the chosen one as a strict subset.

⋯

🗺️

NAVER

광진 갤러리 클럽서울특별시 인재개발원 테니스장

9월 20일 (일) 18:00~21:00

복식NTRP 3.0–4.0

모집 중

6/16

호스트내 상태

무료내 참가비

9/19까지응답 기한

정보

경기 유형

정기

경기 방식

경쟁

초대

A · Quiet lines — title, one when line, one what line, the meter says the status

⋯

🗺️

NAVER

모집 중

9월20일요일

광진 갤러리 클럽서울특별시 인재개발원 테니스장

18:00~21:00복식NTRP 3.0–4.0

6/16

호스트내 상태

무료내 참가비

9/19까지응답 기한

정보

경기 유형

정기

경기 방식

경쟁

초대

B · Date tile — the date as a graphic beside the title; the chip moves onto the band

⋯

🗺️

NAVER

광진 갤러리 클럽

서울특별시 인재개발원 테니스장모집 중

📅9/20 (일)

⏰18:00~21:00

🎾복식

🎯3.0–4.0

6/16

호스트내 상태

무료내 참가비

9/19까지응답 기한

정보

경기 유형

정기

경기 방식

경쟁

초대

C · One glyph line — today's grammar folded to a single row; chip stays

⋯

🗺️

NAVER

광진 갤러리 클럽서울특별시 인재개발원 테니스장

👤내 상태

참석 확정

📅일시

9월 20일 (일) 18:00~21:00

🎾종목

복식

🎯실력

NTRP 3.0–4.0

💰참가비

무료

⏳응답 기한

9/19까지

참석 6/16

전체 보기

송

송수연 (나)NTRP 3.0–3.5

호스트

김

김민지NTRP 3.0–3.5

정보

🏷️경기 유형

정기

🏅경기 방식

경쟁반영

☀️날씨

맑음 26°

🔄로테이션

30분마다 교대

호스트

송

송수연NTRP 3.0–3.5

문의하기

바로 참석하기

D · Page-native — no hero component; title, then the page's own fact rows (recommended)

Decision 1Which hero?

AD · Page-native — the detail page uses ITS OWN components from the top: band, title, then FactRows (일시 · 종목 · 실력 · 참가비 · 응답 기한) and the 참석 section with faces and its N/M folded into the title itself (Now, 2026-09-23: one i18n template, '참석 N/M' — no separate meta). No meter, chip or stat strip — the CTA band already states the recruitment state, and '내 상태' is that same state. Continuity with the list card = the same facts in the same order, not its parts. Now (2026-09-24): 참석 마감/신청 마감 renamed 응답 기한 (RSVP-DEADLINE decision — never 마감); 경기 방식's ELO consequence is that row's secondaryValue, never a separate ELO row (round-4 fix). Now (2026-09-27): info-section.tsx merged into session-facts-section.tsx (one fact list, no separate 정보 block); a host's header 수정 → 완료 toggle also turns these SAME FactRows into the session RECORD's edit-state rows in place — not drawn here (read state only); see create-session.jsx's EditStateFrame. Same day, FACT-ROW-RHYTHM: 경기 방식's secondaryValue makes the 정보 FactList below (D's phone still draws it as its own block) 'roomy' — 12px per side, 24 between rows, never mixed with the one-line 상단 사실 block above it; MAP-BAND-2:1: the band itself is now 195 at a 390pt phone (160 at this kit's 320), the same 2:1 formula a club's photo/album hero uses, retiring the map's own fixed 132px band.

BA/B/C reuse the summary card's parts (meter, chip, glyph facts, eyebrow-title block) on a page that has room — they read as a card pasted into a page, which is the visual break the owner sees. The share image is unaffected by any choice: it is rendered from the same model on the web (the OG card), a subset of the page rather than a screen component.

Recommendation → D. Card and detail share a MODEL and a fact ORDER, never components: the card compresses into three lines because it must; the page has the FactRow, the section header, faces — Toss's own cell→detail move. The shipped SessionShareCard stays as the SHARE artifact's spec (web OG, Kakao) and leaves the screen.

Spec (grounding, anatomy)

DECIDED 2026-09-20: D page-native — no hero component; MediaHero (club eyebrow + venue title) then the page’s own fact rows (일시 · 종목 · 실력 · 참가비 · 응답 기한), 참석 with faces. A/B/C reused summary-card parts and did not flow visually. The shared image follows the choice as a strict subset.

grounded in 7 source file(s)

packages/features/sessions/src/session-detail/page/session-hero.tsxpackages/features/sessions/src/session-detail/page/session-info-group.tsxpackages/features/sessions/src/session-detail/page/session-roster-section.tsxpackages/ui/src/media-hero.tsxpackages/app/src/presentation/components/sessions/session-media-row.tsxpackages/ui/src/text-grammar.tspackages/ui/src/text.tsx