Interactive kit · grounded in code

Profile · 프로필

States → Parts

내 프로필

프로필

💬

⚙️

🙂

김민준

⭐

🥇NTRP 3.5

강

강남 테니스 클럽🎾3년 차

ELO1,482

마스터까지 518점

47총 경기

68%승률

3승연속

12이번 달

92%출석률

친구24명

전체 보기

업적3 / 24

전체보기 ›

🏆

🔥

🤝

10명과 경기서로 다른 10명의 상대와 경기를 완료했어요

소셜2일 전

참석률

연속 참석

5주

매너 태그

⏱️ 시간 약속을 잘 지켜요 ×12😊 매너가 좋아요 ×9🎾 실력이 좋아요 ×6

통계 공유

›

연습 기록

›

환경설정

›

로그아웃

홈

새 사용자 · 비어있음

프로필

💬

⚙️

🙂

이서연

🥈NTRP 3.0

ELO1,200

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

친구

함께 친 사람을 친구로 추가하세요친구 찾기

업적

아직 획득한 업적이 없어요

매너 태그

아직 받은 매너 태그가 없어요

연습 기록

›

환경설정

›

로그아웃

홈

공개 프로필 · 타인

박준호

💬

🙂

박준호

🥇NTRP 3.5📍서초구 교대📊측정 중

ELO1,556

132총 세션

90%출석률

⭐ 신뢰 멤버신뢰 등급

플레이

선호 형식

복식복식

승률

최근 132경기 64%

🤝 이미 친구예요 — isFriend일 때만 렌더

친구 추가

홈

티어 안내 · 모달

프로필

💬

⚙️

🙂

김민준

🔥

🥇NTRP 3.5

강

강남 테니스 클럽🎾3년 차

티어 안내

신뢰도측정 중

그랜드마스터복식 NTRP 4.5+

단식 NTRP 4.5+참고치

2,500+ ELO

마스터복식 NTRP 4.0~4.5

단식 NTRP 4.0~4.5참고치

2,000 – 2,500 ELO

골드복식 NTRP 3.5~4.0

단식 NTRP 3.5~4.0참고치

1,400 – 2,000 ELO

실버복식 NTRP 3.0~3.5

단식 NTRP 3.0~3.5참고치

900 – 1,400 ELO

브론즈복식 NTRP 2.0~3.0

단식 NTRP 2.0~3.0참고치

400 – 900 ELO

단식 수치는 복식 기준 티어에서 유도된 참고치예요

홈

신뢰 등급 안내 · 모달

프로필

💬

⚙️

🙂

김민준

⭐

🥇NTRP 3.5🎾3년 차

신뢰 등급이란

🏅

베테랑 멤버참석 50회, 가입 6개월, 매너 태그 20개 이상이면 베테랑 멤버가 돼요

⭐

신뢰 멤버참석 20회, 매너 태그 10개, 출석률 90% 이상이면 신뢰 멤버가 돼요

🟢

활동 멤버일정 5회 이상 참석하면 활동 멤버가 돼요

🌱

새싹일정에 처음 참석했어요

해결되지 않은 신고가 3건 이상이면 활동 멤버로 낮아져요

홈

Spec (grounding, anatomy)

The 프로필 tab is my own profile — MainTabShell ground="canvas" → TypeHero → FlatColumn (hero-zone lead: ELO fact + progress + StatStrip(s)/empty Well, then 친구/업적/출석/매너 태그 SectionBlocks + a titleless RowList menu) — while another player's profile is the structurally different PublicProfileScreen (DetailShell ground="canvas").

route · apps/mobile/app/(tabs)/(profile)/index.tsx → profile/src/profile-screen.tsx grounded in 10 source file(s)

packages/features/profile/src/profile-screen.tsxpackages/features/profile/src/profile-hero-card.tsxpackages/features/profile/src/public-profile-screen.tsxpackages/features/profile/src/attendance-section.tsxpackages/app/src/presentation/components/tier-info-sheet.tsxpackages/app/src/presentation/components/reliability-pill.tsxpackages/app/src/presentation/components/trust-tier-badge.tsxpackages/features/profile/src/manner-tags-section.tsxpackages/ui/src/type-hero.tsxpackages/ui/src/glyph-fact-row.tsx

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 #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

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 ground="canvas" (profile-screen.tsx:199)

Header actions

2 HeaderIconButton — DM 받은함(unread dot $badgeWarningBg) · 설정 gear → routes.settings

히어로 · TypeHero (D9, 2026-09-08 hero identity pattern)

Structure

Component

TypeHero (profile-screen.tsx:276-290) — leading 56px AvatarBubble + title(name) + ONE inline titleBadge (TrustTierBadge) + ONE facts GlyphFactRow: 🥇 ELO tier → club chip (glyph=logo/initials, label=name) → 🎾 tennis career

Retired

the old two-badge row (EloTierBadge + ReliabilityPill) and the club/구력 meta lines — EloTierBadge's tap-to-TierInfoSheet affordance moved onto the ELO hero fact below; ReliabilityPill moved INTO that sheet

Self-hide

titleBadge (trust) hides at sprout — omitted entirely, not an empty slot

ELO 히어로 팩트 + 진행도

Structure

Component

FlatColumn lead block, part 1 (profile-screen.tsx:308-333) — a Pressable (→ TierInfoSheet) wrapping the label/value fact row (displayMd $primary) + ProgressBar(3px) toward next tier + a right-aligned next-tier caption

스탯 스트립

Structure

Component

FlatColumn lead block, part 2 (profile-screen.tsx:325-386) — StatStrip (총 경기/승률/연속) + a 2nd StatStrip (이번 달/출석률) when attendance data exists; else one 4-cell strip; else (0 matches) a Well EmptyState replaces BOTH strips

Cap

총 경기 shows "50+" once MATCH_HISTORY_LIMIT is hit, never a false exact total

친구 요약

Structure

Component

FriendsSummaryCard → SectionBlock variant="flat" title 친구 (friends-summary-card.tsx:89) — AvatarStack row + chevron → routes.profileFriends; 0 friends → Well + EmptyState CTA 친구 찾기

업적 미리보기

Structure

Component

AchievementsPreviewSection (achievements-preview-section.tsx:94) — SectionBlock title 업적, meta "N / 전체수", equal flex:1 tinted tiles (group-spread law) + the latest achievement as a ListRow (icon, name, description, category+relative-date trailing); 0 → Well+EmptyState

Gate

useFeatureGate().entitlements.achievementsVisibleCount

참석률

Structure

Component

AttendanceSection (attendance-section.tsx:94-99) — OWN-profile only; FactList(연속 참석 ONLY) + Callout tone="warning" when a strike is in-window

2026-09-08

출석률 row DROPPED from the FactList — this page's own StatStrip already shows it; showing it twice duplicated the signal

Hide

renders NOTHING (not an empty Well) when summary.total === 0

매너 태그

Structure

Component

MannerTagsSection (manner-tags-section.tsx:60) — Badge chip wrap, sorted by count desc, no title meta; 0 → Well+EmptyState

메뉴 · 통계공유/연습/설정/로그아웃

Structure

Component

ProfileMenuCard → titleless RowList (profile-menu-card.tsx:44) — 통계 공유(conditional on loaded profile) · 연습 기록 → routes.practice · 환경설정 → routes.settings · 로그아웃(tone="danger", confirm) — no dividers, spacing-only peers

비어있음 · 새 사용자

Structure

Sections

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

Hide

출석 renders NOTHING (not shown at all) — summary.total === 0

티어 안내 · 모달

Structure

Component

TierInfoSheet (tier-info-sheet.tsx:22) — a ModalPanel (NOT a bottom Sheet); title "티어 안내"

Rows

[...TIER_DEFINITIONS].reverse() — 그랜드마스터(2,500+)→마스터(2,000-2,500)→골드(1,400-2,000)→실버(900-1,400)→브론즈(400-900) ELO, each with its real light-mode dot hex; current tier gets $primarySubtle fill + $primary left border

Reliability line (D9)

tier-info-sheet.tsx — a matchesPlayed prop renders "신뢰도" + "{status}" under the title via MetaSegments (a 1px hairline break, never a "·" glyph), relocated from the hero's retired standalone ReliabilityPill

Trigger

tap the ELO hero fact block (not a hero badge — that badge is retired); usability fix 2026-09-16 wires the SAME sheet onto public-profile-screen.tsx's ELO fact too — this screen had NO tier sheet before

NTRP only

UTR display RETIRED 2026-09-14 (owner) — both 복식/단식 rows read NTRP; 단식 carries a separate "참고치" segment (hairline break), never a parenthetical UTR number

신뢰 등급 안내 · 모달 (NEW)

Structure

Component

TrustTierInfoSheet (trust-tier-info-sheet.tsx, NEW 2026-09-16, U-07c) — a ModalPanel mirroring TierInfoSheet; title "신뢰 등급이란"

Rows

reversed 4-tier ladder (베테랑→신뢰→활동→새싹), each row a templated requirement sentence from describeTrustTierRequirements (trust-tier.rules.ts, mirrors the SQL private.recalculate_trust_tier behind a parity gate) — never a hand-typed threshold

Trigger

own profile: tap the hero title badge (only when a badge shows — sprout hides it, no dead tap zone); public profile: tap the 신뢰 등급 stat cell

Demotion note

footer caption — 3+ unresolved reports demotes a member back to 활동 멤버 (TRUST_TIER_THRESHOLDS.demotionReports)

공개 프로필 · 신원

Structure

Route

/profile/[userId] → PublicProfileScreen (public-profile-screen.tsx:289) — DetailShell ground="canvas" (not MainTabShell); self-view redirects at the route layer

공개 프로필 · TypeHero (D9)

Structure

Component

TypeHero (public-profile-screen.tsx:370-381) — leading avatar + name, NO titleBadge (no single entity-state concept on this screen) + ONE facts row: 🥇 ELO tier → 📍 region+district MERGED into one fact (not two meta lines) → 📊 reliability status

Reliability stays a fact

unlike profile-screen.tsx (which folds reliability into TierInfoSheet), this screen has no titleBadge slot for it to compete with, so it stays a hero fact

Sheets added 2026-09-16

this screen now DOES wire both TierInfoSheet (ELO fact, below) and TrustTierInfoSheet (신뢰 등급 stat cell, below) — see the shared "tierInfo"/"tierTrust" states

Masking

region / gender / birthYear silently vanish per the target's profile_visibility (no "hidden" placeholder)

공개 프로필 · ELO + 스탯 + 플레이

Structure

Component

FlatColumn lead — ELO fact (no progress bar here, tappable → TierInfoSheet) + StatStrip(총 세션 · 출석률 · 신뢰 등급 via valueSlot, cell tappable → TrustTierInfoSheet) (public-profile-screen.tsx)

Trust cell value

reads the tier's WORD (e.g. "새싹") when the badge hides at sprout — QA 2026-09-16 fix: a valueSlot rendering null used to leave the cell's value blank ("—") instead

Deferred

NO achievements · NO manner tags · NO H2H list · NO club/nationality chips. 신고/차단 live only in the DM thread.

공개 프로필 · 친구 비트 + CTA

Structure

Component

Well tone="primary" — renders ONLY when isFriend

CTA

BottomCtaBand → FriendshipButton — 친구 추가 / 친구(remove, destructive) / 요청 보냄(cancelable) / 수락+거절 pair; hidden on self/anon/blocked view