Interactive kit · grounded in code

Session Share Card · 히어로 = 공유 카드

Session share card — the hero is the object you shareThe detail page opens with ONE viewer-neutral card in the list card's own grammar — map band, club eyebrow, venue + recruitment chip, two inline glyph-fact rows, the meter — and the very same projection renders the web share page, its OG image and the Kakao feed bubble. Everything about the viewer (standing, fee, 🔒) and everyone's faces stay below the card, which is what lets the card be forwarded to strangers.

단식+복식9월 20일 (일)

하남유니온파크 테니스장

자동 승인

🎾단식+복식🏷️NTRP 4.0+📅9월 20일 (일)⏰10:00~13:00

정보

시작 시간

10:00

최대 인원

12명

참가비

10,000원

호스트

송

송수연NTRP 3.0–3.5

문의하기

0명 참석 중 | 4자리 남음

바로 참석하기

Now — four chips, the date stated three times, the map two screens down

⋯

🗺️

NAVER

광진 갤러리 클럽

하남유니온파크 테니스장모집 중

📅9월 20일 (일)

⏰10:00~13:00

🎾단식+복식

🎯NTRP 4.0+

4/12

미신청내 상태

10,000원내 참가비

9/19까지응답 기한

정보

경기 유형

번개

경기 방식

친선

최대 인원

12명

대진 방식

라운드 로빈

바로 참석하기

Decided — the hero is the share card; viewer facts in the StatStrip

테니스 단톡방

수연

이번 주 일요일 번개 같이 가요 🎾

오후 2:10

수

🗺️

광진 갤러리 클럽하남유니온파크 테니스장📅 9월 20일 (일) ⏰ 10:00~13:00🎾 단식+복식 🎯 NTRP 4.0+

모집 중4/12

하남유니온파크 테니스장9월 20일 (일) 10:00~13:00NTRP 4.0+

참여하기

갈게요!

오후 2:12

메시지 입력…

↑

Decided — what a recipient sees in KakaoTalk (feed template + OG image)

⋯

호스트

송

송수연NTRP 3.0–3.5

문의하기

참여4명

송

송수연호스트

김

김민재참석 확정

이

이서연참석 확정

테니스장

상세

주소

하남시 미사대로 710

코트

하드 2면

운영

07:00~21:00

바로 참석하기

Decided — below the card: 호스트 · 참여 · 테니스장 rows, no second map

Decided (2026-09-20): `SessionShareCard` replaces the hero on 일정 상세 — the folded list card opened up (2:1 map band, club eyebrow, venue title + ONE recruitment-state chip, 📅·⏰ / 🎾·🎯 inline facts, RecruitmentMeter); a new `share` projection of `SessionInfoModel` feeds it, the web share page, the 1200×630 OG image (tile + column, the list card's layout) and the Kakao FEED template (image + venue + 2-line description + 참여하기). Viewer state (standing, 내 참가비, 🔒, deadline) moves to the StatStrip; faces stay in 호스트/참여; the page drops every restatement (nav subtitle, 시작 시간, the venue card's second map). Rejected: an on-device screenshot share (needs react-native-view-shot — a native dep, no OTA — and bakes the sharer's own 🔒/standing into what strangers receive); keeping chip density on the hero (the "collection of badges"); Kakao's custom template (text-only, console-reviewed per redesign); host or attendee faces on a forwardable image (PII).

Spec (grounding, anatomy)

DECIDED 2026-09-20: 일정 상세 opens with SessionShareCard — one viewer-neutral card in the list card grammar (map band, club eyebrow, venue + recruitment chip, 📅·⏰ / 🎾·🎯 inline facts, meter). The same `share` projection renders the web share page, the OG image and the Kakao feed bubble; viewer facts move to the StatStrip; the page stops restating the card.

grounded in 11 source file(s)

packages/features/sessions/src/session-detail/page/session-hero.tsxpackages/app/src/presentation/utils/session-share-model.tspackages/ui/src/media-hero.tsxpackages/app/src/presentation/components/sessions/session-card-v2.tsxpackages/app/src/presentation/components/sessions/session-strip-ui.tsxpackages/features/sessions/src/session-detail-screen.tsxpackages/features/sessions/src/session-detail/page/session-info-group.tsxpackages/features/sessions/src/session-detail/page/session-notice.tsxpackages/app/src/presentation/utils/share-cards.tspackages/app/src/adapters/share/share.native.tsapps/web/lib/og-card.tsx