Overview
Compare
Inspect
호스트 관리 and 정산 are `DetailShell` + `FlatColumn` with bare rows (Card count → 0); 참가자 관리 and 출석 확인 are the deliberate exception, staying virtualized `GroupedFeedList`/`FeedList` bodies with real `Card` rows under canon's Lists "may grow" case.
route · apps/mobile/app/sessions/[sessionId]/{host,participants,payments,attendance}.tsx
grounded in 4 source file(s)
packages/features/sessions/src/pickup-host-dashboard-screen.tsxpackages/features/sessions/src/participants-screen.tsxpackages/features/sessions/src/session-payments-screen.tsxpackages/features/sessions/src/session-attendance-screen.tsx
Spec
1
Foundations · 디자인 시스템
Spacing · 4px grid
$1 – $4
4 · 8 · 12 · 16 px
$5 – $10
20 · 24 · 32 · 40 · 48 · 64 px
Radius
$2 8 · $3 12 · $4 16 · $7 9999 (pill)
Color · Classic Grass (light)
Surface
$background #F8FBF9 · $card #FFFFFF · $surfaceTertiary #E5FAEA
Brand
$primary #006D37 · $primarySubtle #E5FAEA
Text
$text #0D100E · $textSecondary #4F5851 · $textTertiary #626C64
Border
$border #CAD4CC · $borderSubtle #DFE7E1
Status
$success #14804A · $warning #946200 · $error #B8332E
Badge intents
accent #E0F8F3/#007B6B · warning #FFF4D6/#946200 · error #FDECEC/#B8332E
Court
$courtClay #B84A2E · $courtHard #247BA0 · $courtGreen #006633
Typography · Pretendard
cardTitle · navTitle
16 / 24 · 600 · 17 / 22 · 600
cardBody · cardMeta
14 / 22 · 400 · 13 / 18 · 500
badge · micro
12 / 18 · 600 · 10 / 14 · 600
display Sm/Md/Lg/Xl
20/28 · 28/36 · 36/44 · 48/56 · 700
Primitives · @twomore/ui
Layout
YStack · XStack · Card (default/flat) · Well · Divider
Controls
Pressable · Badge · Icon · PillNav · MainTabShell · BottomCtaBand
Data viz
DateTile · CapacityRing · ProgressBar · AvatarStack · SegmentedDonutChart
Domain cards
SessionCard · ClubCard · VenueHero · SessionCompactRow · member row
Box sizes
AVATAR XS 28 · SM 32 · MD 40 · LG 44 · 2XL 88 · TOUCH_TARGET 44
Rationale
Every part is built from these — one 4px grid, the Pretendard type scale, the Classic-Grass palette, and the shared @twomore/ui primitives + domain cards.
2
호스트 관리 · 신청 + 취소 — flattened
Structure
Component
pickup-host-dashboard-screen.tsx:321-400 — DetailShell + ONE FlatColumn: 대기 중인 신청 SectionBlock(전체 승인 when 2+) → RowList dividers of bare ApplicationRows (avatar 40 + name + relative time + 거절/승인 inline) → 번개 취소 SectionBlock tone="danger". Zero-pending → Well placeholder (was Card tone="flat").
Gate
HOST-ONLY — session.createdBy === userId (stricter than canManageDues)
3
참가자 관리 · 로스터 — stays boxed
Structure
Component
participants-screen.tsx — DetailShell + a virtualized GroupedFeedList (참가 확정 / 대기자 / 취소됨); NOT wrapped in a FlatColumn.
4
정산 · 결제 로스터 — flattened
Structure
Component
session-payments-screen.tsx — the summary Card became a plain YStack and every PaymentRow became a BARE XStack (no Card) — Card count 3 → 0.
Gate
canManageDues || isSessionHost
5
출석 확인 · Well 요약 + 박스 로스터
Structure
Component
session-attendance-screen.tsx — header summary retires its Card for a Well (rendered as the FeedList's own header).
Gate
canManageClub + attendanceTrackingEnabled