← Cockpit Wireframes
Canvas Migration — 회비 · 멤버 · 규칙▾
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-09-07 — shipped; kept as the decision record
Interactive kit · grounded in code

Canvas Migration — 회비 · 멤버 · 규칙

Decision 1Migration order for the ~44 still-tinted list/settings shells — decided 2026-09-07
ABy risk: shell first, then chrome, starting with screens whose rows are already flat (회비 · 멤버), multi-panel screens last. Every migrated screen must satisfy the group-spread law and the seam ladder.
BBig-bang (all ~44 screens, ~189 Card instances in one pass) or by nav tree (tab by tab).
Recommendation → A — ratified by the owner: flat is the way to go, on the condition that component positions, spacing, alignment and equal distribution on a row are taken care of.
⚖️Ground and components flatten together, never one without the other (the 2026-08-22 pilot flattened only the ground and every card read as a floating object). Rows are bare and spacing-separated; sections are divided by the full-bleed hairline FlatColumn draws; headline numbers are a StatStrip in the lead slot, never a boxed StatGrid.
⚖️Row composition (the owner's condition): peers on one row are equal flex cells with a constant 8px gap and 8px padding inside each cell, content centered — CellRow. The text rail is 16, full-bleed is 0. space-between and centered fixed-width clusters are the drift signatures to reject.
회비 — 플랫 목표
회비 관리
2026년 9월
6명완납
2명미납
0명부분납
입금 계좌
카카오뱅크 3333-01-234567예금주 정현우
회비 목록8명
김
김민준₩30,000현금으로 직접 전달
완납⋮
이
이서연₩30,000메모 추가
확인
박
박도윤₩30,000메모 추가
미납⋮
최
최지우₩30,000메모 추가
완납⋮
멤버 — 플랫 목표
멤버
올림픽 테니스 클럽
총 9명
🧾
가입 심사검토 대기
2
🌱
추천할 만한 게스트방문 한도에 가까운 게스트
✨
파트너 추천실력이 맞는 멤버 찾기
대표
정
정현우
🌳⋮
총무
김
김민준 (나)1조
🌿⋮
멤버7
이
이서연2조
🌱⋮
박
박도윤1조
🌱⋮
최
최지우3조
🌿⋮
규칙 — 무엇이 평평해지나
규칙
플랫이 되는 것
땅
$background → $card
리스트 행
맨 행 · 간격으로 분리
요약 숫자
StatStrip (lead)
월 선택 · 진입 줄
맨 행
세션 카드 (임베드)
embedded 변형
카드로 남는 것
세션 · 클럽 · 코트
브라우징 목록의 객체 카드
모달 · 폼 섹션
Card 유지
한 줄의 구성
동료 셀
같은 폭 flex 1
셀 간격
8 고정
셀 안 여백
8 · 내용 중앙
정렬 레일
텍스트 16 · 풀블리드 0
space-between
금지
Spec (grounding, anatomy)

Decision record. Flat canvas for the remaining tinted list/settings shells, migrated by risk (shell, then chrome), with the group-spread law and the seam ladder as the acceptance condition. The three phones are the target composition of the first batch, drawn with the shared flat primitives the real screens use.

route · packages/features/clubs/src/club-dues-screen.tsx · club-members-screen.tsx (first batch) → every DetailShell still on ground="tinted" grounded in 8 source file(s)
packages/ui/src/place-shell.tsxpackages/ui/src/detail-shell.tsxpackages/features/clubs/src/club-detail/club-schedule-rows.tsxpackages/app/src/presentation/components/sessions/session-card-v2.tsxpackages/features/clubs/src/club-detail/members-pane.tsxpackages/features/clubs/src/club-detail/dues-pane.tsxpackages/features/clubs/src/dues/dues-row.tsxdocs/canon/components.md