App Components
기본 컴포넌트
실제 .shell 컴포넌트를 그대로 재현했습니다 — 버튼 · 폼 · 카드 · 표 · 뱃지 · 스탯 · 알림. 전부 8–12px 라운드 · 화이트 표면 · 퍼플 액센트.
버튼
.btn 기본 + 변형. radius 6px. 한 화면 핵심 액션은 primary 하나.
.btn · .btn-primary · .btn-ghost · .btn-danger · .btn-sm · :disabled(.45)
.btn-brand · .btn-lime — app.css에서 둘 다 purple로 alias(동일 표면) · .btn-block{width:100%}
폼 · 입력
.field — 라벨 + 입력. 포커스는 accent 보더 + 링. surface-2 배경.
카드 · 표
.card = surface + 보더 + radius 8. 표 헤더는 대문자 muted, 행 호버.
최근 스마트링크 LIVE
| 제목 | 클릭 | 상태 |
|---|---|---|
| Golden Hour | 12,480 | live |
| Supernova | 8,210 | draft |
| Drama | 3,905 | archived |
스탯
KPI 숫자 카드 — .stat-num 30px/800 + tabular-nums.
총 클릭
128,940
스마트링크
42
이번 주 CTR
38.2%
활성 캠페인
7
뱃지
상태 표시 pill — live(그린) · draft(muted) · archived(흐림).
live
draft
archived
알림
.alert-* 4종 — 라이트 틴트 배경 + 같은 계열 텍스트.
정보 — 캠페인이 곧 시작됩니다.
성공 — 스마트링크가 게시되었습니다.
주의 — 미발매 스토어가 2곳 있습니다.
오류 — URL을 인식하지 못했습니다.
모노 유틸
.mono — 모노스페이스 + tabular-nums. ID·해시·수치 등 정렬·고정폭이 필요한 인라인 텍스트용.
링크 ID 8f21a0c4 · 클릭 128,940 · CTR 38.2%
.mono{font-family:JetBrains Mono;font-variant-numeric:tabular-nums;font-size:.92em}
사용 규칙
권장
- · 한 화면 핵심 액션은
.btn-primary하나 - · 표·KPI 숫자는
tabular-nums정렬 - · 상태는 뱃지 색(live=green·draft=muted)으로 일관
- · 포커스는 항상 accent 링 — 키보드 접근성
금지
- · 마케팅
btn-sr-primary(Dark+Lime) 사용 - · 큰 라운드(16/24) — 앱은 6/8px
- · 한 카드에 위계 없는 버튼 여러 개
- · 밝은 배경 위 컴포넌트 배치