Interactive kit · grounded in code

Profile · 프로필

The 프로필 tab is my own profile — a plain scroll of cards (hero + stats + friends + achievements + attendance + manner + menu), own-only. Another player is a structurally different PublicProfileScreen. No club/nationality affiliation chips ship yet.

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

grounded in 5 source file(s)

packages/features/profile/src/profile-screen.tsxpackages/features/profile/src/profile-hero-card.tsxpackages/features/profile/src/public-profile-screen.tsxpackages/app/src/presentation/components/tier-info-sheet.tsxpackages/features/profile/src/manner-tags-section.tsx

States → Parts

내 프로필

프로필

💬

↗

⚙️

김

김민준

🎾 B2 · 중상급🔥⚡ 신뢰 95%

1,482

47총 경기

68%승률

3승연속

12이번 달

92%출석률

이

박

최

정

친구 24명

업적8 / 전체보기 ›

🏆첫 승리경기

🔥3연승연속

🤝10명과 경기소셜

출석

92%출석률

5주연속 출석

매너 태그

⏱️시간 약속을 잘 지켜요×12

😊매너가 좋아요×9

🎾실력이 좋아요×6

📋연습 기록

⚙️설정

🚪로그아웃

새 사용자 · 비어있음

프로필

💬

↗

⚙️

이

이서연

🎾 미배정

—

🏆

아직 기록이 없어요첫 경기를 치르면 전적이 쌓여요

👥

친구를 추가해 보세요함께 친 사람을 친구로 추가하세요

친구 찾기

공개 프로필 · 타인

💬

박

박준호

🎾 B1 · 상급⚡ 신뢰 88%

1,556ELO

📍 서초구 · 교대

132경기

90%출석

⭐ 신뢰신뢰도

복식 선호승률 64% · 132전 84승

친구 추가

티어 안내 · 모달

프로필

💬

↗

⚙️

김

김민준

🎾 B2 · 중상급🔥⚡ 신뢰 95%

1,482

ELO 티어 안내

A상급1,600+

B중상급1,300–1,599

C중급1,000–1,299

D초중급700–999

E초급~699

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.

Header · 제목 + DM/공유/설정

Structure

Component

MainTabShell (no tabs → bare scroll, main-tab-shell.tsx:77)

Header actions

3 HeaderIconButton — DM 받은함(unread dot $badgeWarningBg) · 공유(own-only) · 설정 gear → routes.settings

Design

Primitives

MainTabShell · HeaderIconButton × 3

Typography

role="pageTitle" 24 / 700

Color

unread dot $badgeWarningBg #FFF4D6

Rationale

Three quiet actions — message, share, settings — never competing with the identity below.

히어로 · 아바타+티어+ELO

Structure

Component

ProfileHeroCard (profile-hero-card.tsx:128) — AvatarBubble XL + name(displaySm) + tappable EloTierBadge(full → TierInfoSheet) + TrustTierBadge + ReliabilityPill + ELO(displayLg)

Self-hide

trust hides at sprout, reliability hides at established

No affiliations

club/nationality chips do NOT render (nationalityCode exists but unused — ATP Phase B)

Design

Primitives

WFAvatarBubble XL(80) · WFTierRangeBadge(full) · WFTrustTierBadge · reliability pill

Typography

name displaySm 20/700 · ELO displayLg 36/700

Rationale

Identity first — who, what tier, what number — the tier badge opens the ladder.

스탯 그리드

Structure

Component

StatTile(wrap="card") — row1 총 경기(primary, "50+" at cap) + 승률(success, progress); row2 연속 + 이번달 + (출석률 if present)

Data

computeStats — winRate = 승/(승+패) excluding draws; a draw breaks the streak

Design

Primitives

WFStatTile (wrap=card, optional progress)

Color

total $primary · winRate $success

Rationale

The season at a glance — matches, win-rate, momentum, attendance.

친구 요약

Structure

Component

FriendsSummaryCard (friends-summary-card.tsx:123) — 4-avatar overlap stack + count + chevron → routes.profileFriends

Empty

EmptyState(icon=Users) + CTA → add-friend

Design

Primitives

WFFaces (overlap) + count + chevron

Color

faces on $card

Rationale

Doubles is social — friends are one tap from the identity.

업적 미리보기

Structure

Component

AchievementsPreviewSection (achievements-preview-section.tsx:37) — icon + name + desc + category Badge + date, footer 전체보기

Gate

useFeatureGate().entitlements.achievementsVisibleCount

Design

Primitives

Card + achievement rows + WFBadge(neutral)

Rationale

A teaser of earned badges — the full gallery is one tap away.

출석

Structure

Component

AttendanceSection (attendance-section.tsx:30) — OWN-profile only; rate% + ProgressBar / streak + CalendarCheck; optional strike-warning banner

Hide

hideWhenAbsent — renders nothing if no data

Design

Primitives

Card + WFProgressBar + streak

Color

fill $primary

Rationale

Reliability made visible — attendance is trust currency in a club.

매너 태그

Structure

Component

MannerTagsSection (manner-tags-section.tsx:38) — emoji + label + ×count rows, sorted by count desc

Empty

Card tone="flat" + EmptyState(icon=Star)

Design

Primitives

Card + tag rows

Rationale

Peer-given reputation — the social proof behind the number.

메뉴 · 연습/설정/로그아웃

Structure

Component

ProfileMenuCard (profile-menu-card.tsx:45) — 연습 기록 → routes.practice · 설정 → routes.settings · 로그아웃(danger, confirm)

Design

Primitives

Card + rows

Color

로그아웃 $error

Rationale

The utility footer — practice log, settings, sign-out.

비어있음 · 새 사용자

Structure

Sections

each section self-empties: no-matches(Trophy) · no-friends(Users+CTA) · no-achievements · no-manner-tags(Star)

Hide

attendance + friends(if undefined) render NOTHING rather than empty chrome

No banner

there is NO "incomplete profile" banner — missing name falls back to noName text

Design

Primitives

EmptyState per section (Trophy / Users / Star)

Rationale

A new player sees gentle per-section prompts, not one nagging completion bar.

티어 안내 · 모달

Structure

Component

TierInfoSheet (tier-info-sheet.tsx:22) — a ModalPanel (NOT a bottom Sheet)

Content

all 5 ELO tiers with ranges, current tier highlighted

Trigger

tap the EloTierBadge on the hero

Design

Primitives

ModalPanel — grabber + tier rows

Color

current tier $primarySubtle / $primary

Rationale

The ladder in context — tap your tier to see where the next one starts.

공개 프로필 · 신원

Structure

Route

/profile/[userId] → PublicProfileScreen (public-profile-screen.tsx) — a DetailShell (not MainTabShell); self-view redirects at the route layer

Card

centered AvatarBubble XL + name(displaySm) + EloTierBadge(full) + ELO(displayLg) + ReliabilityPill + region line (only if profile.region)

Masking

region / gender / birthYear silently vanish per the target’s profile_visibility (no “hidden” placeholder)

Design

Primitives

WFDetailShell · WFAvatarBubble XL · tier + reliability pills

Typography

name displaySm · ELO displayLg $primary

Rationale

A stranger’s identity, centered — everything private is simply absent, never teased.

공개 프로필 · 플레이 + 친구

Structure

Component

PlayProfileCard (title-less, 3 beats): 3 StatTile (경기 · 출석% · 신뢰 tier via valueSlot) → Divider → 종목 선호 Badge + 승률 → (친구면) Badge("친구")

CTA

BottomCtaBand → FriendshipButton only — 친구 추가 / 친구(remove) / 요청 보냄 / 거절 + 수락; DM via header icon

Deferred

NO achievements · NO manner tags · NO H2H list · NO club/nationality chips (all deferred out of scope). 신고/차단 live only in the DM thread.

Design

Primitives

WFStatTile ×3 (trust via WFTrustTierBadge slot) · WFDivider · WFBadge · WFBottomCta

Color

format badge $badgeAccent · friend CTA $primary

Rationale

Just enough to decide to connect — play summary + one friendship action, nothing social-graph-heavy yet.