Interactive kit · grounded in code

Clubs · 클럽

The 클럽 tab is ONE segmented screen — 내 클럽 (my clubs) vs 둘러보기 (discovery) — plus the invite-code join. The club card is a single component projected by isMember. Inspect a part, see the whole in Overview, or Compare states.

route · apps/mobile/app/(tabs)/(clubs)/index.tsx → clubs/src/club-list-screen.tsx

grounded in 5 source file(s)

packages/features/clubs/src/club-list-screen.tsxpackages/features/clubs/src/shared/club-card.tsxpackages/features/clubs/src/clubs-discover-screen.tsxpackages/features/clubs/src/shared/club-discovery-controls.tsxpackages/features/clubs/src/join-club-screen.tsx

States → Parts

내 클럽 · 목록

클럽

🔑

내 클럽

둘러보기

내 클럽2개

운영

강남

김

이

박

+21

24/40

강남 라켓클럽

B~C

알림 3건

다가오는 일정

양재 시민의숲 코트하드 · 2면

토요 정기모임토 7/24 · 09:00

모집 중

4/8

회원

서초

김

이

박

+15

18/30

서초 테니스 모임

C~D

다가오는 일정

반포 종합운동장클레이 · 3면

수요 나이트수 7/28 · 20:00

4자리

8/12

클럽 만들기

내 클럽 · 비어있음

클럽

🔑

내 클럽

둘러보기

👥

아직 가입한 클럽이 없어요관심 있는 클럽을 둘러보고 가입해 보세요

클럽 둘러보기

클럽 만들기

둘러보기 · 결과

클럽

🔑

내 클럽

둘러보기

클럽 이름 검색

필터

탐색 결과24개 클럽

모집 중 · 4자리

방배

김

이

박

+13

16/24

방배 우먼스 클럽

C~E

📍방배동

·👥0 : 8

·📅매주 일

여성 회원 중심의 편안한 주말 클럽이에요

초급 환영여성가입 승인제월 1.5만

모집 중

교대

김

이

박

+27

30/50

교대 직장인 테니스

B~D

📍서초구

·👥5 : 5

·📅평일 저녁

퇴근 후 가볍게 치는 직장인 모임이에요

중급혼성바로 가입월 3만

둘러보기 · 필터

클럽

🔑

내 클럽

둘러보기

클럽 이름 검색

필터3

남복

강남구

B ~ D

요일

시간대

가입 방식

모집 중 · 4자리

방배

김

이

박

+13

16/24

방배 우먼스 클럽

C~E

📍방배동

·👥0 : 8

·📅매주 일

여성 회원 중심의 편안한 주말 클럽이에요

초급 환영여성가입 승인제월 1.5만

둘러보기 · 결과 없음

클럽

🔑

내 클럽

둘러보기

클럽 이름 검색

필터3

🧭

조건에 맞는 클럽이 없어요필터를 조정하거나 초기화해 보세요

필터 초기화

초대코드 가입

클럽 가입

강

강남 라켓클럽

초대코드를 입력하세요

A1B2C3

클럽에서 받은 6자리 코드

가입하기

Spec

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 #F6F8F5 · $card #FFFFFF · $surfaceTertiary #E6F4EC

Brand

$primary #006633 · $primarySubtle #E6F4EC

Text

$text #131A14 · $textSecondary #455D49 · $textTertiary #607565

Border

$border #D5E3D6 · $borderSubtle #EAF0EA

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

pageTitle

24 / 32 · 700

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.

Shell · 제목 + 초대 Key

Structure

Component

MainTabShell (main-tab-shell.tsx:42) · title 클럽

Header action

ClubJoinHeaderAction (club-join-header-action.tsx:5) — ghost Key button → routes.joinClub()

Note

No bell — Clubs’ one global action is join-by-code, not notifications

Design

Primitives

MainTabShell · Button variant=ghost · Icon (Key)

Spacing

header row padding $4 (16px)

Typography

role="pageTitle" — 24 / 32 · 700

Color

bg $background #F6F8F5 · icon $textSecondary #455D49

Rationale

The Key sits where Home’s bell sits — each tab owns one global action.

탭 · 내 클럽 / 둘러보기

Structure

Component

SegmentedTabs → PillNav (segmented-tabs.tsx:42, club-list-screen.tsx:256)

Options

내 클럽 · 둘러보기 · local useState<'my'|'discover'>

Preload

preloadTabs="visited" (mount on first visit)

Design

Primitives

SegmentedTabs · PillNav

Spacing

paddingHorizontal $4 · paddingBottom $4

Color

track $surfaceTertiary #E6F4EC · active pill $card #FFFFFF

Rationale

One screen, two lenses — my clubs vs discovery — a segmented control, never a filter.

내 클럽 목록

Structure

Header

MyClubListControls → SectionHeader "내 클럽" (my-club-list-controls.tsx:6)

List

FeedList (feed-list.tsx:343) of ClubCard isMember · flat, NOT role-grouped (club-card-summary.ts:58 sorts by next-session + region)

Hooks

useMyClubs(userId) + bulk siblings (upcoming / media / stats — Protocol A)

Archived

card muted to TERMINAL_MUTE_OPACITY when archivedAt set (club-card.tsx:177)

Design

Domain card

WFClubCard variant=member — banner + AdminRow + 다가오는 일정 well

Primitives

FeedList · ClubCard · SectionHeader

Spacing

rows gap $3 (12px) · list paddingHorizontal $4

Rationale

Member cards lead with obligations + the next session — what a member actually needs.

클럽 만들기 CTA

Structure

Component

BottomCtaBand (bottom-cta-band.tsx:23) + ActionButton size=lg action=primary → /create-club

Rule

NOT a FAB — a pinned band, my tab only (club-list-screen.tsx:283); zero FAB usage in clubs/src

Design

Primitives

BottomCtaBand · ActionButton

Spacing

paddingTop $3 · sides + bottom $4 · border-top 1px $borderSubtle

Color

button $primary #006633 / text $primaryText #FFFFFF

Rationale

One primary action, docked — the Toss one-CTA rule, not a floating button.

비어있음 · 내 클럽

Structure

Component

EmptyState variant="full" (empty-state.tsx:125) · icon Users

CTA

→ routes.discoverClubs — jump straight to 둘러보기 (club-list-screen.tsx:223)

Design

Primitives

EmptyState (full) — 64px icon bubble $primarySubtle

Typography

title 16 / 600 · sub 14 $textSecondary

Color

icon bubble $primarySubtle #E6F4EC · CTA $primary

Rationale

Zero clubs routes you straight to discovery — the only useful next step.

탐색 필터

Structure

Component

ExpandableFilterBar (expandable-filter-bar.tsx:66) — SearchBar + count badge + expanding $card panel

Panel

DiscoverFilterPanel (discover-filters.tsx:49) chips: 종목 · 지역→지구 · 급수 range · 요일 · 시간대 · 가입 방식

Not present

NO distance / price filter (confirmed in code)

State

DiscoverFiltersState (discover-filter-model.ts:11)

Design

Primitives

ExpandableFilterBar · DropdownChip · RangeChip · SearchBar

Spacing

chips gap $2 wrap · panel $card radius $4

Color

active chip $primarySubtle / $primary · panel $card

Rationale

Filters collapse to a count so results stay the focus; the panel opens only on demand.

탐색 결과 · 클럽 카드

Structure

Component

SAME ClubCard (club-card.tsx:85), isMember=false projection

Non-member zones

top-right ClubRecruitBadge (모집 중 · N자리) · GlyphFactRow×3 (📍지역 · 👥성비 · 📅빈도) · tagline · chips (스타일 + 가입 방식 + 회비)

Tap

→ routes.clubPreview (club-card.tsx:166)

Hook

useViewerDiscoverClubs (use-viewer-discover-clubs.ts:34) · infinite scroll

Design

Domain card

WFClubCard variant=potential

Color

recruit badge accent #E0F8F3 / #007B6B · glyphs 📍$courtClay 👥$courtHard 📅$primary

Note

chips are join-terms + dues only — no price/distance chip today

Rationale

One card, projected — join-seekers see the pitch (recruit + facts + terms), members see obligations.

결과 없음 · 필터

Structure

Component

EmptyState variant="compact" (empty-state.tsx:125) · icon Compass

Filter-aware

isFiltered swaps copy + adds 필터 초기화 reset CTA (clubs-discover-screen.tsx:124)

Design

Primitives

EmptyState (compact) — 44px icon

Color

icon $primary on $primarySubtle · CTA $primary

Rationale

When a filter empties the list, offer the reset — not a dead end.

초대코드 가입

Structure

Route

routes.joinClub() → join-club-screen.tsx:37 — DetailShell + KeyboardAvoidingView

Origin

club identity row (AvatarBubble + name) when originClubId passed

Input

giant centered code RNTextInput (32px · letterSpacing 4 · underline) → useJoinClub

CTA

ActionButton "가입하기" · club-mismatch confirm via useConfirm

Design

Primitives

DetailShell (WFDetailShell) · AvatarBubble · code input · ActionButton

Typography

code 32 / 800 · letter-spacing 4 · underline $primary

Spacing

centered stack gap $6 · screen padding $5

Rationale

A single high-focus field — the invite code — nothing else competes.