Overview
Compare
Inspect
The 경기 tab is ONE segmented hub (ActivityScreen) with four lenses — 내 경기 · 번개 찾기 · 저장됨 · 테니스장 — three of which share the same WFSessionCard (SessionCardV2). Now (2026-09-18 pm): the 경기 feeds are grouped by day under SessionDayHeader and the card is the 2+2 card (⏰ time · 🎾 format / 🎯 tier | fee; no date, no static section title, quick chips reversed) — see /wireframes/session-list-frame; the cards on this board are not redrawn.
route · apps/mobile/app/(tabs)/(sessions)/index.tsx → activity/src/activity-screen.tsx
grounded in 5 source file(s)
packages/features/activity/src/activity-screen.tsxpackages/features/activity/src/shared/filter-groups.tspackages/ui/src/filter-head.tsxpackages/app/src/presentation/components/sessions/session-card-v2.tsxpackages/app/src/presentation/components/venue-explore/venue-explore-pane.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
Shell · 제목 + 코트 지도
Structure
Component
MainTabShell (main-tab-shell.tsx) · title 경기
Header action
CourtsHeaderAction — MapPin icon → /courts; HIDDEN only on the 테니스장 tab (activity-screen.tsx:461)
3
탭 · 4-분할
Structure
Options
내 경기 · 번개 찾기 · 저장됨 · 테니스장 — each its own FeedList/finder instance
4
필터 바 · 접힘
Structure
Component
ActivityListControls → PickupFilterBar (shared/pickup-filters.tsx:195-346)
Shown on
내 경기 AND 번개 찾기 — 저장됨 renders no header control at all
5
내 경기 목록
Structure
List
FeedList of WFSessionCard (SessionCardV2) under a SectionHeader variant="list" title, "다가오는 일정" (sectionMyMatches) — added 2026-09-17, hub section grammar: "the pane's own title, never the tab label again"; renders in the FeedList header slot, so it shows above the empty state too, not just a filled list
Hook
useMyParticipatingSessions (RSVP-sourced) + useSessionCardModels (Protocol A)
6
번개 필터 · GPS 힌트
Structure
Component
same PickupFilterBar, collapsed — date lives INSIDE the panel now, not a chrome row
GpsRegionHintChip
replaces the collapsed slot while filters.regions came from the GPS fallback (pickup-filters.tsx:156-187)
Section title
a SectionHeader variant="list" "번개" (common.membershipPickup) now sits between the filter bar and the card list (added 2026-09-17, same hub section grammar as 내 경기/저장됨)
7
번개 필터 · 펼침
Structure
Dimensions
날짜 → 종목 → 지역/구 → 티어(RangeChip) → 경기 방식 → 코트 → 요금(RangeChip)
Not chrome
날짜 was DatePickupChromeBar; folded into this panel as the first DropdownChip row
8
번개 카드
Structure
Component
the SAME WFSessionCard as 내 경기 — pickups are just open sessions
Source
useOpenPickupsInfinite · infinite scroll (hasMore/onEndReached)
9
번개 만들기 CTA
Structure
Component
BottomCtaBand + primary Button
Rule
rendered ONLY on the 번개 찾기 tab (not the other three)
10
저장됨
Structure
List
FeedList of WFSessionCard — bookmarked sessions, still no filter bar, but NOW a SectionHeader variant="list" title "저장한 일정" (sectionSaved, added 2026-09-17) where before this pane had NO header at all
Hook
useSavedSessionIds + useSessionsByIds
11
테니스장 · 필터 + 5-칩 내비
Structure
Component
VenueFilterBar (search+facets) then the 5-chip nav row (venue-finder-header.tsx:74-101)
Chips
전체 · 코트 · 연습장 · 샵 · 즐겨찾기 — each carries a live count except 즐겨찾기
12
테니스장 목록
Structure
Component
FeedList of WFVenueCard (DirectoryVenueCard), province-grouped
Row
map thumb + name + trust badge + one glyph row (kind · district · court count · indoor/lighting/parking · price)
13
비어있음 · 내 경기
Structure
Component
EmptyState variant="compact" — filtered vs true-empty copy differ (noPickupsFiltered / noPickupsEmpty)
CTA
→ 번개 찾기 (discover a pickup to join)