← Cockpit Wireframes
Density · 카드 밀도▾
For review
Clubs · 클럽클럽 상세 — 여섯 탭 플랫운영 섹션 — 플랫 목표게스트 → 회원 — 심사 흐름
Approved — build queue
Venue Finder · 코트 찾기
Foundations
Components · 공유 키트상세 페이지 — 플랫 언어Session Card · 밴드 없는 카드
Screens
홈 · Home
Home · 홈└Notifications · 알림
클럽 · Clubs
Club List · 클럽└Club Detail · 클럽 상세└Create Club Wizard · 클럽 만들기
경기 · Play
경기 · Activity└Session Detail · 일정└Live & Scoring · 경기└Host Ops · 호스트└Create / Edit Session · 일정└Courts & Venues · 코트
기록 · Records
Records · 기록└Leaderboards · 리더보드└Head-to-Head · 상대 전적
프로필 · Profile
Profile · 프로필└Settings · 설정└Legal & misc · 약관└Social · 친구·업적└Messaging · 메시지
시작 · Entry
Onboarding · 시작
ArchiveStrip Map · 세션 스트립 전체 시나리오Headers · 헤더 아이콘Compaction — 일정 · 코트 · 스코어카드Compaction — 클럽 상세 · 홈Compaction — 기록 · 프로필Live anchor — 진행 중 밴드Density · 카드 밀도토스트 — 리디자인 제안위저드 내비게이션 — 결정 보드드래프트 복원 — 무음 복원클럽 조 편성 — 모델 결정 보드Session Detail — Redesign · 일정Venue Detail — Redesign · 테니스장Profile Detail — Redesign · 프로필Tournament Detail — Redesign · 대항전Applicant Detail — Redesign · 가입 심사Canvas Migration — 회비 · 멤버 · 규칙Record Detail — Redesign · 기록Venue Filters · 코트 필터 재구성
Decided 2026-07-27 — shipped; kept as the decision record
Interactive kit · grounded in code

Density · 카드 밀도

DecidedP1 (place-first square tile) shipped as SessionCardV2 on 2026-07-27 and runs on all ten session-list sites; the owner ratified the final on 2026-09-07.
Bookmark placement (owner question 2026-09-07): the saved mark does not belong on the participation row. Its home is the strip band's RIGHT pole — the "me" edge of the v6 strip model (left = the session, right = my marks: host · RSVP · saved), which is exactly where the shipped card renders it. A saved-only card gets a calm neutral band carrying just the bookmark; the closing row stays the recruitment meter alone.Kept as the decision record. P2/P3 and the club-card sketches below are the rejected permutations; the live card is the WFSessionCard mock in the shared kit.
최종 비교 · 현재 vs P1
현재 구현session-card.tsx — ~400px/카드, 화면당 ~1.2개
양재 클레이코트☀️ 24°
토 7/2409:00–11:00무료
남복친선
NTRP 3.0 –4.0
모집 중
6/8
한강시민공원 테니스장🌤 26°
토 7/2409:00–11:001만원
혼복친선
NTRP 3.0 –4.0
모집 중
3/8
정보 이동 지도 — 항목 · 현재 · P1
장소WHERE-led 타이틀 + 히어로 오버레이L1 — 카드의 제목 그 자체 (순수 텍스트)
지도/사진132px 와이드 배너 (지도/사진)64×64 정사각 위성 타일 (실제 타일)
날씨히어로 위 글랜스L1 우측 플레인 텍스트
날짜 · 시간날짜 타일 + WHEN 밴드L2 — 전체 폭 한 줄
유형/포맷/티어/요금2단 칩 스트립L3 — 칩 4개 한 줄
상태 (LIVE 등)풀폭 상태 스트립같은 톱 스트립 재사용 — 상태 있는 카드만 (조건부, 카운트다운 문구 유지)
호스트타이틀 크라운 배지마감줄 호스트 배지
RSVP/결제칩 스트립 내 배지마감줄 배지
참여 인원캐퍼시티 링 + 얼굴들풀폭 미터 + 카운트 (상태색)
로테이션칩상세 화면으로 이동
코트 정보히어로 오버레이상세 화면으로 이동
참여자 얼굴참여 섹션상세 화면으로 이동
호스트 메모카드 노트상세 화면으로 이동
저장(북마크)헤더 저장 버튼 (액션+표시)표시 = 마감줄 저장됨 배지 (규칙4: 나의 관계) · 저장/해제 액션은 상세 화면 · 스트립은 아님 (수동적·비긴급·지속 상태)
주황 = 카드에서 상세 화면으로 이동한 항목. 모두 탭 한 번 거리 — 카드는 탐색용, 상세는 결정용. 높이 ~400px → ~130px (3.2×), 정보는 삭제가 아니라 재배치.
지도 레버 · 실물 타일
지도 레버 · 실물
아래는 전부 실제 타일이에요 — 배포된 엣지 함수(maptype/scale/transit 추가됨)로 venues 테이블의 실제 좌표를 렌더링. 판단은 실물로.
① 위성 — 좌표가 맞으면 압도적한강시민공원 테니스장
실제 위성 타일
① 위성 — 좌표가 빗나가면 무의미양재 클레이코트 (센트로이드 좌표)
코트 대신 고가도로가 잡혀요
→ 위성 히어로는 coord_confidence 높음(또는 유저 보정 좌표)일 때만, 아니면 벡터 폴백
② 넓은 줌 벡터 — 좌표 오차에 강함강 + 다리 + 5호선이 곧 동네
한강 + 원효대교 + 지하철
양재천 + 시민의숲
③ 지하철 오버레이 + 야간 틴트public_transit · 클라이언트 틴트
강남 — 노선색이 동네 정체성
새벽 세션 — 같은 지도, 야간 틴트 🌙
P1 · 스퀘어 타일 · 장소 우선 (~3.5개)
P2 · 스퀘어 타일 · 시간 우선 (~3.5개)
P3 · 와이드 배너 (~2.5개)
어텐션 모델 · 리졸버
어텐션 모델
같은 세션, 네 명의 시청자 — 리졸버가 각자에게 맞는 스트립 하나를 고릅니다. 이 세션은 지금 동시에: 마감 3시간 전 · 내 입금 홀드 만료 임박 · 가입 신청 2건 · 비 예보 80%.
방문자 (미참가) → 모집 마감
마감 3시간 전
한강시민공원 테니스장🌧 26°
일 7/2510:00–12:00
번개혼복C ~ D1만원
7/8
참가 확정 → 우천 경보 (마감은 이미 참가한 사람에겐 무의미)
비 예보 80%
한강시민공원 테니스장🌧 26°
일 7/2510:00–12:00
번개혼복C ~ D1만원
참가 확정
7/8
입금 필요 (나) → 입금 홀드 카운트다운
입금 마감 7분 전
한강시민공원 테니스장🌧 26°
일 7/2510:00–12:00
번개혼복C ~ D1만원
입금 필요
7/8
호스트 → 가입 신청
가입 신청 2건 대기
한강시민공원 테니스장🌧 26°
일 7/2510:00–12:00
번개혼복C ~ D1만원
호스트
7/8
리졸버 규칙표 — kind · 대상 · 틴트 · 순위 · 소스
cancelled모두grey0세션 상태 + 카드 뮤팅
live모두red10세션 상태 (펄스)
payment_hold나amber20내 pending 홀드 + 만료 시각 (formatDeadline)
score_confirm참가자amber30match_score_calls 미합의
host_actions호스트amber40pendingApplicationCount > 0
closing미참가amber50모집 마감 임박 — 이미 확정된 사람에겐 비표시
weather_risk참가자amber60야외 × 세션 시간대 강수 (weather_cache)
waitlist대기자(나)amber70내 대기 순번 (아이콘 users — 줄 선 사람들)
starting_soon확정자green80오늘 + N시간 내 시작
자격(대상) 필터 → 순위 정렬 → 하나만. 순수 함수, 설정표 기반 — deriveRecruitmentStatus와 같은 결. 핵심 정제: closing은 이미 참가한 사람에게 보이지 않아요 (모집 압박은 참가할 사람의 정보).
클럽 · 현재 (~1.5개)
클럽
내 클럽
둘러보기
NTRP 4.0
강남
김
이
박
24/40
강남 라켓클럽
5분 전 활동
토 7/2409:00
양재 시민의숲
4/8
NTRP 3.5
한강
김
이
박
18/30
한강 선데이즈
5분 전 활동
토 7/2409:00
양재 시민의숲
4/8
클럽 · 컴팩트 (~3.5개)
클럽
내 클럽
둘러보기
강남 라켓클럽
NTRP 4.0
가입됨
강남구매주 토 09시남4 여6
24/40
“주말마다 즐겁게 치는 동호회예요”
초급 환영가입 승인제월 2만원다음 토 7/24 09:00
한강 선데이즈
NTRP 3.5
가입됨
서초구격주 일 10시남5 여5
18/30
“한강에서 일요일 아침을 여는 사람들”
누구나무료다음 일 7/25 10:00
둘러보기
양재 파워랠리
NTRP 4.0 –4.5
서초구매주 화·목 20시남6 여4
31/36
“빡세게 치고 시원하게 마무리”
중급 이상가입 승인제월 2만원다음 화 7/27 20:00
Spec (grounding, anatomy)

A HARMONY CONTRACT — exact ratios only (1:1 tile or ~4:1 banner), the no-truncation rule (one flexible element per line; the venue never shares its line with anything that can push it), one chrome level (chips are the only bordered minis; weather is plain text, on-image chrome only on the wide banner), and status+join closing the card together. Three complete permutations differ in exactly one structural dimension each: P1 square-tile place-first, P2 square-tile time-first, P3 wide-banner. All render identical worst-case fixtures (한강시민공원 테니스장, badge+crown, night). Cards tap through to session-detail; club cards follow AFTER the session card finalizes.

route · PROPOSAL — the harmony contract: three COMPLETE satellite-thumbnail permutations on one contract; every map is a real NCP tile of a real venues row grounded in 4 source file(s)
packages/app/src/presentation/components/sessions/session-card-v2.tsxpackages/app/src/presentation/components/sessions/venue-hero.tsxpackages/app/src/presentation/components/sessions/session-compact-row.tsxpackages/features/clubs/src/shared/club-card.tsx