Overview
Compare
Inspect
PlaceShell → ONE screen-level `ClubPlaceHeader` (album banner → identity+chips → PillNav underline 홈·일정·채팅·기록·멤버·회비) rendered as an absolute layer above `SegmentedTabs chrome="none"` — the header never remounts on tab switch, each pane pads under its measured height. 관리 is top-bar chrome, not a pane — admins get their own "관리" `HeaderTextAction` (2026-09-17, U-05) left of the ⋯ trigger, which now carries only 공유/나가기; both route to/toward the separate ClubAdminScreen DetailShell. Non-members bounce to the guest PublicClubProfileScreen preview.
route · apps/mobile/app/clubs/[clubId]/index.tsx → club-detail-screen.tsx (+ /admin, guest bounce)
grounded in 19 source file(s)
packages/features/clubs/src/club-detail-screen.tsxpackages/features/clubs/src/club-detail/club-place-header.tsxpackages/features/clubs/src/club-detail/club-hero-model.tspackages/features/clubs/src/club-detail/home/home-pane.tsxpackages/features/clubs/src/club-detail/home/feed-head.tsxpackages/features/clubs/src/club-detail/chat-pane.tsxpackages/features/clubs/src/club-detail/records-pane.tsxpackages/features/clubs/src/club-detail/records/records-list.tsxpackages/features/clubs/src/club-detail/members-pane.tsxpackages/features/clubs/src/club-members/member-row.tsxpackages/features/clubs/src/club-detail/dues-pane.tsxpackages/features/clubs/src/club-dues-screen.tsxpackages/features/clubs/src/club-dues/page/dues-lead.tsxpackages/features/clubs/src/club-dues/page/dues-person-row.tsxpackages/features/clubs/src/club-detail/visitor/visitor-page.tsxpackages/features/clubs/src/shared/post-row.tsxpackages/app/src/presentation/components/sessions/session-card-v2.tsxpackages/ui/src/pill-nav.tsxpackages/features/clubs/src/club-detail/club-manage-sheet.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
공유 헤더 — ClubPlaceHeader
Structure
Banner
ClubAlbumBanner — full-bleed under the status bar
Identity
ClubIdentityHeader — avatar + name + 📍/🎾/📅 fact chips, NO tagline (owner 2026-08-23: tagline belongs to the discovery card only)
Nav
PillNav variant="underline" 홈·일정·채팅·기록·멤버·회비 — bold + 2px $ink underline on the active tab, NOT the segmented-pill grammar
3
홈 — mission + feed
Structure
Mission
ClubMissionCard — member, in-progress mission only. Changed 2026-09-14: an eyebrow "시작 미션 N/3" progress line sits above the bold mission title (was one glued "미션 · 제목" string); remaining missions stack as plain lines below, first prefixed "다음:"
Schedule rows
ClubScheduleRows — collapsible D-day + venue + RSVP utility rows
Chips
ClubFeedChips — 전체·공지·자유·후기·소개·운영진방 (officials-gated)
Feed
PostFeedRow flat hairline rows mixed with two AUTO rows (전체 only, no cards): 경기 결과, and — new 2026-09-17 — 사진 업로드 (HomeAutoMediaRow: uploader sentence + FeedPhotoStrip)
4
일정 — embedded session rows
Structure
Segment
SessionSegmentChips — 예정/완료, 2-chip SelectionChip toggle
Row
SessionCardV2 variant="embedded" — same strip+thumb+body+meter anatomy as the browse card, NO outer Card chrome, bottom hairline instead
5
채팅 — pinned room + DM threads
Structure
Pinned
the club group room (get_or_create_club_room) always first, mandatory
Rows
DmThreadRow — the SAME shared row the DM inbox uses; no compose affordance in this tab
6
기록 — flat leaderboard
Structure
Toggle
전체/조별 SelectionChip pair, only when the club has ≥1 active group
Row
LeaderboardRow — group dot (전체 view only) · rank · name(+나) · a quiet second line (W-L + 7d ELO delta, delta omitted at 0) · ELO right, flat hairline, viewer row tinted, windowed to top-3+neighbors with a lone-chevron ExpandToggle footer (Now 2026-09-28, RANKING-FOLD: the 전적/변동 columns are gone — the record+delta fold under the name; the footer was a tinted "전체 보기"/"접기" text pill)
7
멤버 — role-grouped, 멤버 collapsed
Structure
Header
"총 N명" count line, then — new 2026-09-16 (U-25), only once the club has 2+ active groups — a 조 legend caption; a member-gated "복식 파트너 추천" entry row follows (U-35, moved here from the full members screen)
Sections
ROLE_ORDER: 오너 → 운영진 → 경기부장 → 멤버 — bare title, no card
Row
MemberRow — avatar, name, 조 편성 meta + 수동 badge (BOTH gated on 2+ active groups now, U-25 — hidden entirely below that), TrustTierBadge, kebab (역할 변경/조 지정/추방)
멤버 group
starts COLLAPSED (count + chevron only) until tapped — the shipped default drawn here
8
회비 — month selector + card-less summary + rows
Structure
Selector
MonthSelector — ‹ 2026년 9월 › PeriodScrubberShell
Summary
DuesSummary (dues-summary-card.tsx) — card-less StatStrip (납부 완료/미납/일부 COUNTS ONLY) + ProgressBar, in the hero-zone lead; the per-status amount subtotals a boxed SummaryCard used to carry are dropped
Row
DuesRow — flat hairline, avatar+name+amount+a note line (manager view: real text or a muted "메모 추가" cue, U-14 new); right side is a status badge + inline verb pills (미납/일부납: 납부 확인+면제 처리; paid CURRENT month only: 납부 취소) that replaced the old kebab→modal entirely — tapping the manager row itself now opens the note editor. Viewer's own unpaid row still carries an inline self-attest "입금 완료" action.
Section header
"이번 달 회비" — new 2026-09-17 (U-15): its right slot gets a "전체 납부 확인" bulk CTA once 2+ rows are eligible
9
관리 — its own routed DetailShell
Structure
Frame
ClubAdminScreen — a plain DetailShell, no place header, no bottom tab bar (owner 2026-08-22q: 관리 = chrome, not a content tab)
Snapshot
AdminSnapshotStrip (CellRowGrid columns=3) — 5 count+label cells split 3+2 (short row padded to 3 columns), tone as TEXT COLOR only, no border/tint tile, no chevron — a routed cell's resting cue is affordance="surface" (invisible at rest), a route-less cell (신고) just stays inert
운영
bare AdminNavRow ListRows (icon + title/sub + auto chevron, no Card) — 멤버·출석·회비·일정·코트·대항전, each role-gated
설정
성장 분석 · 클럽 설정 — changed 2026-09-16 (usability fix #4): 성장 분석 no longer hides on !growthAnalyticsEnabled, it always shows with a "준비 중" badge trailing only while locked
10
게스트 공개 프로필 — flat canvas
Structure
Hero
MediaHero kind="album" — avatar + title + badges [가입정책·티어·focus] + meta [지역·개설연도·멤버수]
Leading row
faces + capacity pill directly under the hero (graphics-lead law — never a right-anchored overlay)
클럽 정보
FactList — 형식·실력·가입 방식·홈 코트·회비
정기 일정 / 소개 / 갤러리
FlatColumn sections, unboxed
Application
a Well with a message box — approval-gated clubs only
CTA
pinned in DetailShell's footer (JoinCtaBand) — never inline; label varies by joinPolicy (바로 참여하기 / 가입 신청하기 / 초대 코드로 가입). Once a request is pending, the disabled "신청 검토 중" button gained a second-line hint underneath it (new 2026-09-16): "총무가 승인하면 알려드릴게요" — not drawn as its own phone here, see guest-roster.jsx (e).