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

KPI 숫자 카드 — .stat-num 30px/800 + tabular-nums.

총 클릭

128,940

스마트링크

이번 주 CTR

38.2%

활성 캠페인

상태 표시 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}

권장

금지