Interactive kit · grounded in code

Club Dashboard · 클럽

A club’s dashboard — a DetailShell + top SegmentedTabs (홈 / 소식 / 기록 / 관리[admin-only]), panes inline. Non-members are redirected to the PublicClubProfileScreen preview. The 관리 tab is the organizer’s attention snapshot + management nav.

route · apps/mobile/app/clubs/[clubId]/index.tsx → clubs/src/club-detail-screen.tsx

grounded in 5 source file(s)

packages/features/clubs/src/club-detail-screen.tsxpackages/features/clubs/src/club-detail/home-tab.tsxpackages/features/clubs/src/club-detail/admin-tab.tsxpackages/features/clubs/src/club-detail/admin-snapshot-cells.tspackages/features/clubs/src/public-club-profile-screen.tsx

홈 · 회원

강남 라켓클럽

⋮

홈

소식

기록

강남

강남 라켓클럽📍 강남구

B~C

복식중급주말 활동

24 / 40명

💳

회비 미납 · 2만원7월 회비를 납부해 주세요

납부하기

다가오는 일정3개

양재 시민의숲 테니스장

☀️ 24°

양재 시민의숲하드 · 2면

토요일 7월 24일 · 09:00–11:00

정기모임남복B ~ C

아메리카노 · 4게임무료

김

이

박

최

6/8 확정

소식

강남 라켓클럽

⋮

홈

소식

기록

공지8월 정기모임 일정 안내

8월부터 토요일 오전 정기모임을 주 2회로 확대합니다. 많은 참여 부탁드려요.

7/20💬 4👍 12

자유라켓 공동구매 하실 분?

윌슨 프로스태프 공동구매 진행하려고 합니다. 관심 있으신 분 댓글 주세요.

7/18💬 4👍 12

후기지난 주 번개 후기 🎾

날씨도 좋고 다들 실력이 많이 느셨어요. 다음에 또 쳐요!

7/15💬 4👍 12

글쓰기

기록 · 랭킹

강남 라켓클럽

⋮

홈

소식

기록

클럽 랭킹이번 시즌

🥇

이

이서연+241,642

🥈

박

박준호+111,598

🥉

정

정민수-61,571

김

김민준 (나)+181,482

관리 · 운영

강남 라켓클럽

⋮

홈

소식

기록

관리

관리 현황처리 필요

3송금 확인

2가입 신청

5회비 미납

0신고

1출석 주의

멤버 관리가입 승인 · 역할

회비미납 5명

출석출석 주의 1명

분석클럽 성장 지표

일정 관리

클럽 설정

비회원 미리보기

강남

강남 라켓클럽📍 강남구

B~C

복식중급주말 활동

24 / 40명

24/40

이

박

정

최

+20

모집 중16자리 남음

주간 활동

월

화

수

목

금

토

일

주말마다 즐겁게 치는 강남 지역 동호회입니다. 초중급 환영, 매너 있는 분들과 함께해요 🎾

가입 신청하기

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.

탭 · 홈/소식/기록/관리

Structure

Component

SegmentedTabs → top PillNav (segmented-tabs.tsx:111) under the DetailShell header

Tabs

['home','news','ranking', …admin?] — labels 홈 / 소식 / 기록 / 관리 (ko/clubs.ts:137); 관리 only if isAnyAdmin

Render

panes are INLINE (display:none swap); admin sub-items push to separate screens

Design

Primitives

WFDetailShell · WFPill

Color

track $surfaceTertiary · active $card

Rationale

A club is a place with rooms — tabs, not a scroll; 관리 appears only for organizers.

클럽 아이덴티티

Structure

Component

inside HomeTab (home-tab.tsx:200): ClubBannerPlaceholder(3:1) + ClubLogoBubble(36) + name + region + chip strip + member-count + capacity ProgressBar

Header action

HeaderActionsMenu — 설정(canManageClub) / 나가기(member-non-owner)

Design

Primitives

banner + WFAvatarBubble-style logo + WFChip · WFTierRangeBadge · WFProgressBar

Color

banner court gradient · capacity $primary

Rationale

The club’s face — who they are, what level, how full — before any content.

내 회비

Structure

Component

MyDuesCard (home-tab.tsx:304) — self-gating: renders ONLY when unpaid/partial

CTA

납부하기 → dues flow

Design

Primitives

warning-tinted Card + CTA

Color

$badgeWarningBg / $warning

Rationale

A gentle personal nudge — shown only when you actually owe.

다가오는 일정

Structure

Component

next session = FULL SessionCard (home-tab.tsx) — NOT the compact row/well (those are the club-LIST card)

Then

a collapsible 다가오는 일정 summary + a FeedList of SessionCards

Admin

canManageSchedule → a 일정 만들기 BottomCtaBand on this tab only

Design

Domain card

WFSessionCard

Rationale

The club’s next games, full-fidelity — the reason to open the club.

소식 · 게시판

Structure

Component

the news pane → useClubPosts; pinned 공지 posts (max 3, warning badge) on top, then PostRow cards

Row

type/audience Badge + title + 2-line body + date · 댓글 · 반응 meta

CTA

글쓰기 BottomCtaBand (members)

Design

Primitives

WFCard + WFBadge + meta row

Color

공지 $badgeWarning

Rationale

The club’s wall — announcements pinned, chatter below.

기록 · 클럽 랭킹

Structure

Component

the ranking pane → useClubEloLeaderboard + useClubProfiles

Row

rank(medal for 1–3) + AvatarBubble + name + ELO + delta; my row highlighted

Design

Primitives

rank rows + WFAvatarBubble

Color

my row $primarySubtle · delta $success/$warning

Rationale

Standing within the club — the friendly competition that keeps people coming.

관리 · 현황 스냅샷

Structure

Component

AdminSnapshotStrip (admin-snapshot-cells.ts:57) — 5 cells, 3-per-row: 송금 확인 · 가입 신청 · 회비 미납 · 신고(count-only) · 출석 주의

Data

useClubAdminSnapshot → RPC get_club_admin_snapshot (raises for non-admins; gated canManageClub)

Highlight

cell tints $badgeErrorBg/$badgeErrorText when count > 0

Design

Primitives

count+label cells (3-per-row) — WFStatTile-adjacent, tinted on attention

Color

hot $badgeErrorBg #FDECEC / $badgeErrorText #B8332E

Rationale

The organizer’s triage board — what needs me, right now, in red.

관리 · 메뉴

Structure

Component

per-permission AdminNavRows (admin-nav-row.tsx:25) — icon + title + subtitle + chevron (+ badge)

Gates

멤버(canManageMembers) · 회비(canManageDues) · 출석/분석/게시판/대회/코트/설정(canManageClub, analytics also entitlement) · 일정(canManageSchedule)

Push

each → a separate routed screen (members/dues/… → Phase B2–B4)

Design

Primitives

WFLinkRow (icon bubble + title + sub + chevron)

Rationale

One tap to each management surface — role-gated so you only see your levers.

비회원 미리보기

Structure

Route

non-members are hard-redirected (club-detail-screen.tsx:90) to PublicClubProfileScreen (/clubs/[clubId]/preview)

Content

banner/logo/name/tagline → vitals (SegmentedDonutChart ring + AvatarStack) → chips → DayDotsRow weekly schedule → gallery → policy-aware BottomCtaBand

CTA

open → 가입하기 · approval → 가입 신청하기 · invite_only → 초대코드로 가입

Design

Primitives

banner + WFCapacityRing + WFFaces + day dots + WFBottomCta

Color

capacity ring $primary · schedule dots $primary

Rationale

A join-seeker’s view — enough to trust the club, one policy-aware CTA to join.