Overview
Compare
Inspect
호스트 관리 and 정산 are `DetailShell` + `FlatColumn` with bare rows (Card count → 0); 참가자 관리 and 출석 확인 keep the deliberate LIST-container exception — virtualized `GroupedFeedList`/`FeedList` bodies, never wrapped in a `FlatColumn`, under canon's Lists "may grow" case — but their ROWS are flat `PersonRow` too (F1/EXCEPTION-LEDGER, screen audit 2026-09-23): no per-row Card, no redundant status badge repeating the section/roster header.
route · apps/mobile/app/sessions/[sessionId]/{host,participants,payments,attendance}.tsx
grounded in 3 source file(s)
packages/features/sessions/src/pickup-host-dashboard-screen.tsxpackages/features/sessions/src/participants-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 · 12 / 16 · 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:273-343 — DetailShell + ONE FlatColumn holding a SINGLE SectionBlock: 대기 중인 신청 (전체 승인 when 2+) → RowList dividers of ApplicationRows (avatar 40 + name + relative time + 거절/승인 inline). Zero-pending → ONE calm Well line ("신청자가 없어요" — see the 신청 없음 state), never a full EmptyState.
Removed
B7/B8 (decision log ROUND-3, 2026-09-23): the dashboard's own 번개 취소 SectionBlock tone="danger" is GONE — it duplicated the session page's own host-cancel action, now a header ⋯ menu item (Now 2026-09-28 — 위험 구역 no longer exists as a page section at all).
Gate
HOST-ONLY — session.createdBy === userId (stricter than canManageDues)
3
참가자 관리 · 로스터 — list stays virtualized, rows are flat
Structure
Component
participants-screen.tsx — DetailShell + a virtualized GroupedFeedList (참가 확정 / 대기자 / 취소됨); NOT wrapped in a FlatColumn.
Rows
Flat PersonRow (RsvpParticipantRow, no Card — U-29, 2026-09-16). A confirmed row with nothing to flag shows ONLY name — no per-row 확정 badge (the section title already says it). A waitlisted row adds a plain-text "#N" position (never a badge, never "N번") plus a group/guest gate marker when it applies. 제거 is an icon-only RemoveIconButton, not a bordered text pill.
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).
Rows
EXCEPTION-LEDGER (decision log ROUND-4, 2026-09-23; screen audit C7): flat PersonRow (AttendanceParticipantRow, no Card — replaces the former ✓참석/✗불참 ActionButton pair). 참석 (or not-yet-marked) is silent — no badge, no filled control; the row's ONE affordance is a small ✕ ActionIconButton that marks 불참 (tap again to undo). A marked row alone gets a 불참 Badge plus the ✕ recolored $warning.
Gate
canManageClub + attendanceTrackingEnabled