Overview
Compare
Inspect
The 설정 menu is a DetailShell + FlatColumn: an untitled identity row, then five TITLED flat SectionBlocks — 계정 / 알림 / 프라이버시 / 앱 / 지원 (regrouped H4, screen-audit-2026-09-23, matched to what each group's rows actually are) — then an untitled danger-toned destructive group. No Card boxes anywhere; pushes to 프로필 수정, 알림 설정, 공개 범위, 동의 관리, and the 회원 탈퇴 danger flow.
route · apps/mobile/app/settings.tsx → profile/src/settings-screen.tsx (+ settings/* sub-routes)
grounded in 5 source file(s)
packages/features/profile/src/settings-screen.tsxpackages/features/profile/src/edit-profile-screen.tsxpackages/features/profile/src/settings-signal-preferences-screen.tsxpackages/features/profile/src/settings-consent-management-screen.tsxpackages/features/profile/src/delete-account-screen.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
메뉴 · 5개 타이틀 섹션
Structure
Row
settings/components.tsx SettingsRow — a thin ListRow wrapper, NO icon avatar; label/subtitle left, trailing = chevron | value text | TogglePill
Titled groups
Regrouped H4 (screen-audit-2026-09-23) — SectionBlock variant="flat" + RowList per group: 계정(프로필 수정/비밀번호 변경) · 알림(3 토글 + 알림 설정) · 프라이버시(개인정보 보호/동의 관리/차단한 사용자) · 앱(테마 + 화면 모드 + 둘러보기 다시 보기/앱 버전/업데이트 확인) · 지원(공지사항/문의하기/이용약관/개인정보 처리방침). The identity row and the danger destructive group stay untitled.
Moved out
코트 "제안 내역"/"없는 장소 추가" left settings entirely (H4) — they were venue-directory content actions, not settings; now on the 테니스장 directory (see courts.jsx).
3
프로필 수정 · 폼 + 저장 밴드
Structure
Shell
DetailShell scroll={false} + ScrollView + pinned BottomCtaBand 저장
Fields
이름 Input (20-char counter, DISPLAY_NAME_MAX) · 성별 3 SelectionChip · 지역 ONE DropdownChip standalone fullWidth (H5, screen-audit-2026-09-23 — retired the always-on 17-chip wall for a picker sheet) — NO bio/phone; avatar is the canonical AvatarBubble (2026-09-17, replacing a hand-rolled circle so edit-profile derives the same monogram as the profile hero)
4
알림 설정 · 조용 시간 + 카테고리 토글
Structure
Explainer
"모든 알림은 알림함에 표시돼요" — toggles gate PUSH only, not the in-app 알림함
Rows
one CategoryPushRow per category — exactly 13 — 32px accent icon-bubble + label + static Badge "알림함" + Switch; payment alone always-push (ignores quiet hours)
5
공개 범위 · 항목별 4단계
Structure
Subtitle
+ 미리보기 ActionButton (Eye) → ProfilePreviewSheet ModalPanel with stranger/club/friend preview
Fields
SectionBlock title + ONE grouped Card (settings-privacy-screen.tsx:351-395) holding 6 FieldRow with a row divider between — 지역 · 구·군 · 프로필 사진 · 자주 가는 지역 · 성별 · 출생연도, each 4 SelectionChip: 전체공개 · 같은 클럽 · 친구만 · 비공개
6
동의 관리 · PIPA §37 플랫 로우
Structure
Row
Flat since 2026-09-17 (Hub-vs-detail law, owner-directed 2026-09-14: a pushed 프로필 sub-screen is a detail page, not a browsing collection) — ConsentBlock inside RowList dividers, no wrapping Card; purpose + ConsentRequirementBadge (필수/선택) + ConsentStateBadge (동의함/안 함) + granted-at, each row owning its own bottom hairline (Divider law's multi-component-block exception)
Footer
required+granted → "회원 탈퇴 시에만 철회" caption; optional+granted → red 철회 pill; optional+ungranted → green 활성화 pill
7
회원 탈퇴 · 위험 플로우
Structure
Warning
AlertTriangle + $warning title + 3 bullet consequences
Confirm
type the exact phrase "탈퇴합니다" → enables a raw Button variant="destructive" (solid red, loudest tier), further gated by a useConfirm double-confirm
Placement
the destructive button is the LAST item in the scrolling content — no pinned BottomCtaBand (delete-account-screen.tsx:134-143)