Ante Dashboard Design Guide
구현체(frontend/src/index.css)의 Tailwind v4 @theme 변수를 기준으로 정리한 디자인 참조 문서.
CSS 작성 시 반드시 아래 토큰을 사용하고, 하드코딩된 색상값을 직접 쓰지 않는다.
1. 색상 팔레트
배경 · 표면 · 테두리
bg
#0b0b10
bg-bg
surface
#141419
bg-surface
surface-hover
#1e1e25
bg-surface-hover / hover:bg-surface-hover
border
#2a2a35
border-border
텍스트
text
#e1e4ea
text-text
text-muted
#8b8fa3
text-text-muted
시맨틱 색상
Bloomberg Terminal 접근성 원칙 기반. Positive=Blue, Negative=Orange-Red로 모든 색각 이상에서 구별 가능.
positive / primary
#1E8EFF
text-positive · bg-primary · bg-positive-bg
negative
#E85830
text-negative · bg-negative · bg-negative-bg
warning
#F0A030
text-warning · bg-warning-bg
accent
#F5C518
text-accent · bg-accent-bg
info
#a78bfa
text-info · bg-info-bg
시맨틱 용도 매핑
| positive (Blue) | 이익, 성공, 활성, 매수, 승인 |
| negative (Orange-Red) | 손실, 오류, 매도, 거부, 위험 |
| warning (Amber) | 경고, 주의, 대기 |
| accent (Gold) | 강조, 하이라이트 |
| info (Violet) | 정보, 중립 보조 |
| primary | = positive. CTA 버튼, 링크, 활성 탭 |
2. 타이포그래피
₩12,345,678 큰 숫자 (stat) — 24px bold
페이지 제목 — 16px semibold
카드 제목 — 15px semibold
본문 텍스트 — 13px regular
라벨 텍스트 — 12px semibold uppercase
뱃지 — 11px semibold
보조 텍스트 — 11px muted
| Font Family | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif |
| Base Size | 14px / line-height 1.5 |
| 페이지 제목 | 16px / font-semibold (600) — Header 컴포넌트 |
| 카드 제목 | 15px / font-semibold (600) |
| 본문 | 13px — 테이블 셀, 상세 텍스트 |
| 라벨 | 12px / font-semibold / text-text-muted / uppercase tracking-wider |
| 뱃지 | 11px / font-semibold |
| 보조 텍스트 | 11px / text-text-muted |
| 큰 숫자 (stat) | 24px / font-bold (700) — 통계 카드 값 |
3. 레이아웃
이 문서 자체가 실제 레이아웃 구조(사이드바 220px + 헤더 56px + 메인 콘텐츠)로 구성되어 있다. 좌측 사이드바와 상단 헤더를 직접 확인.
┌──────────────┬──────────────────────────────────────────┐
│ Sidebar │ Header (h: 56px, fixed) │
│ (w: 220px) │ [제목] [● 한투 국내주식 · 🦁 admin] │
│ fixed ├──────────────────────────────────────────┤
│ │ │
│ bg-surface │ Main Content │
│ border-r │ (ml-sidebar, mt-header, p-4 md:p-6) │
│ border-border│ │
│ │ bg-bg │
│ │ │
└──────────────┴──────────────────────────────────────────┘
| Sidebar 너비 | --spacing-sidebar: 220px → Tailwind: w-sidebar, ml-sidebar |
| Header 높이 | --spacing-header: 56px → Tailwind: h-header, mt-header |
| Content padding | p-4 md:p-6 (16px / 24px) |
| 모바일 | Sidebar: -translate-x-full md:translate-x-0, 햄버거 토글 |
| z-index | Header: 100, Sidebar: 101, 모바일 햄버거: 102, 모달: 50, 드롭다운: 200, 토스트: 9999 |
4. 공용 컴포넌트
StatusBadge
variant prop으로 색상 결정. components/common/StatusBadge.tsx
승인
거부
대기
정보
보관됨
활성
공통 Tailwind: inline-flex items-center px-2 py-0.5 rounded-[10px] text-[11px] font-semibold
| positive | bg-positive-bg text-positive |
| negative | bg-negative-bg text-negative |
| warning | bg-warning-bg text-warning |
| info | bg-info-bg text-info |
| muted | bg-[rgba(139,143,163,0.15)] text-text-muted |
| primary | bg-positive-bg text-primary |
Buttons
Default
Hover
공통 Tailwind: inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-[13px] font-medium border-none cursor-pointer
DataTable
제네릭 테이블 컴포넌트. components/common/DataTable.tsx
| ID | 이름 | 상태 | 수익률 |
|---|---|---|---|
| stg-001 | 모멘텀 전략 | 운용중 | +12.5% |
| stg-002 | 밸류 전략 | 대기 | - |
th: text-left px-3 py-2.5 text-[12px] font-semibold text-text-muted uppercase tracking-wider border-b border-border
td: px-3 py-3 border-b border-border text-[13px]
행 hover: hover:bg-surface-hover
Form Elements
모든 폼 요소는 동일한 기반 스타일을 공유하며, 기본(default)과 소형(sm) 두 가지 사이즈를 지원한다.
공통 기반
| 배경 · 테두리 | bg-bg border border-border focus:outline-none focus:border-primary |
| 색상 | text-text placeholder:text-text-muted |
| disabled | opacity-50 cursor-not-allowed |
사이즈 변형
| default | rounded-lg px-3 py-2.5 text-[14px] — 폼 모달, 상세 페이지 편집 |
| sm | rounded px-2 py-1 text-[13px] — 필터바, 인라인 설정 |
Text Input
| default | w-full bg-bg border border-border rounded-lg px-3 py-2.5 text-text text-[14px] focus:outline-none focus:border-primary placeholder:text-text-muted |
| sm | bg-bg border border-border rounded px-2 py-1 text-text text-[13px] focus:outline-none focus:border-primary placeholder:text-text-muted |
Select
| default | w-full bg-bg border border-border rounded-lg px-3 py-2.5 text-text text-[14px] focus:outline-none focus:border-primary appearance-none cursor-pointer |
| sm | bg-bg border border-border rounded px-2 py-1 text-text text-[13px] focus:outline-none focus:border-primary cursor-pointer |
Textarea
| default | w-full bg-bg border border-border rounded-lg px-3 py-2.5 text-text text-[14px] focus:outline-none focus:border-primary placeholder:text-text-muted resize-y min-h-[80px] |
| sm | w-full bg-bg border border-border rounded px-2 py-1 text-text text-[13px] focus:outline-none focus:border-primary placeholder:text-text-muted resize-y min-h-[56px] |
Label
| 기본 | block text-[12px] font-semibold text-text-muted mb-1.5 |
Modal
components/common/Modal.tsx. ESC 키 / 오버레이 클릭으로 닫기.
전략 등록
새로운 전략을 등록합니다. 등록 후 검증 단계를 거칩니다.
| 오버레이 | fixed inset-0 z-50 flex items-center justify-center bg-black/50 |
| 모달 본체 | bg-surface border border-border rounded-lg p-6 w-full max-w-[440px] shadow-lg |
| 제목 | text-[16px] font-semibold mb-2 |
| 푸터 | flex justify-end gap-2 |
Toast
showToast(message, type) 함수로 호출. 5초 후 자동 소멸.
✓
전략이 성공적으로 등록되었습니다.
✗
요청 처리 중 오류가 발생했습니다.
⚠
잔고가 최소 기준 이하입니다.
| 위치 | fixed top-4 right-4 z-[9999] |
| 공통 | flex items-center gap-2.5 px-4 py-3 rounded-lg text-[13px] border |
| error | bg-negative-bg border-negative |
| success | bg-positive-bg border-positive |
| warning | bg-warning-bg border-warning |
Skeleton (로딩 플레이스홀더)
components/common/Skeleton.tsx. Table, Chart, Card, Page 변형 제공.
TableSkeleton (3 rows × 4 cols)
CardSkeleton (4 stat cards)
| 기본 | bg-surface-hover rounded animate-pulse |
| TableSkeleton | rows × cols 그리드 |
| ChartSkeleton | 제목 + 차트 영역 |
| PageSkeleton | 4개 카드 + 차트 + 테이블 조합 |
Pagination
오프셋 기반. components/common/Pagination.tsx
총 47건 중 1-10
← hover
| 카운트 | text-text-muted text-[13px] — "총 N건 중 M-K" |
| 페이지 버튼 | w-8 h-8 rounded-lg text-[13px] font-medium border |
| 활성 페이지 | border-primary bg-primary text-white |
| 비활성 | border-border bg-transparent text-text-muted hover:bg-surface-hover |
HintTooltip
? 아이콘 호버 시 설명 표시. 성과 지표 등에 사용.
샤프 비율
?
위험 대비 초과수익 비율. 1 이상이면 양호.
최대 낙폭
?
| 아이콘 | w-4 h-4 rounded-full bg-[rgba(139,143,163,0.15)] text-text-muted text-[10px] font-bold |
| 툴팁 | bg-surface border border-border rounded-lg text-[12px] text-text-muted shadow-lg |
5. 간격 규칙
| 카드 내부 패딩 | p-4 ~ p-5 (16px ~ 20px) |
| 카드 간 간격 | gap-4 (16px) |
| 섹션 간 간격 | mb-6 (24px) 또는 space-y-6 |
| 테이블 셀 | px-3 py-2.5 (th) / px-3 py-3 (td) |
| 버튼 내부 | px-4 py-2 (기본) / px-2.5 py-1 (소형) |
| 뱃지 내부 | px-2 py-0.5 |
| 그리드 카드 | grid grid-cols-2 md:grid-cols-4 gap-4 |
6. 테두리 · 라운딩
| 기본 radius | rounded-lg (8px) — 카드, 버튼, 인풋, 모달 |
| 뱃지 radius | rounded-[10px] — pill 형태 |
| 소형 radius | rounded (4px) — 아이콘 버튼, 필터 탭 |
| 원형 | rounded-full — 상태 dot, 스피너, 툴팁 아이콘 |
| 테두리 색상 | border-border — 모든 구분선, 카드 외곽 |
7. 네비게이션
사이드바 메뉴 아이템
좌측 사이드바를 직접 확인. 아래는 상태별 Tailwind 클래스.
| 기본 상태 | text-text-muted hover:bg-surface-hover hover:text-text |
| 활성 상태 | bg-primary !text-white |
| 크기 | px-3 py-[10px] text-[15px] font-medium rounded-lg gap-[10px] |
| 아이콘 | 이모지, text-[16px] w-5 text-center |
| 뱃지 (결재함) | bg-negative text-white text-[11px] px-1.5 rounded-[10px] font-semibold |
Header · 사용자 메뉴
상단 헤더를 직접 확인. 헤더 좌측에 페이지 제목, 우측에 사용자 프로필(클릭 시 드롭다운). 드롭다운에서 설정, 계좌 전환, 로그아웃을 수행한다. 대시보드 전체 데이터는 선택된 계좌 기준으로 렌더링된다.
사용자 드롭다운 열림 상태
대시보드
한투 국내주식
·
🦁
admin
⚙ 설정
한투 국내주식
ACTIVE
한투 해외주식
PAUSED
⏻ 로그아웃
| 고정 | fixed top-0 left-0 md:left-sidebar right-0 h-header |
| 배경 | bg-surface border-b border-border |
| 좌측 | 페이지 제목 (+ 상세 페이지일 때 뒤로가기 버튼) |
| 우측: 사용자 메뉴 | flex items-center gap-2 px-2.5 py-1 rounded-lg text-[13px] text-text-muted hover:bg-surface-hover cursor-pointer |
| 사용자 드롭다운 | absolute top-full right-0 w-[220px] bg-surface border border-border rounded-lg shadow-[0_8px_24px_rgba(0,0,0,0.3)] z-[200] |
| 드롭다운 구분선 | h-px bg-border my-1 |
| 드롭다운 아이템 | flex items-center gap-2 px-3.5 py-2.5 text-[13px] text-text-muted hover:bg-surface-hover |
| 계좌 아이템 | flex items-center gap-2 px-3.5 py-2.5 text-[13px] mx-1 rounded — 상태 dot + 계좌명 + 상태 라벨 |
| 선택된 계좌 | bg-surface-hover font-medium |
| 계좌 상태 dot | w-2 h-2 rounded-full — ACTIVE: bg-positive, PAUSED: bg-warning, HALTED: bg-negative |
| 로그아웃 | text-negative |
계좌 컨텍스트 규칙
| 전역 상태 | 선택된 계좌 ID가 전역 상태로 관리되며, 대시보드 전체 데이터(자금, 전략, 봇, 거래내역 등)가 해당 계좌 기준으로 필터링된다. |
| 상태 dot 귀속 | 시스템 상태 dot은 계좌별 거래 상태를 표시한다. 전역 시스템 상태가 아닌, 선택된 계좌의 trading_status를 반영. |
| 계좌 전환 | 드롭다운에서 다른 계좌 선택 시 페이지 이동 없이 데이터만 리렌더링. URL 파라미터 또는 전역 스토어로 관리. |
| 계좌 이름 표시 | 증권사 약칭 + 계좌 유형으로 구성. 예: "한투 국내주식", "한투 해외주식" |
| 상태 종류 | ACTIVE(bg-positive), PAUSED(bg-warning), HALTED(bg-negative) |
8. Tailwind @theme 토큰 레퍼런스
frontend/src/index.css에서 정의. Tailwind v4의 @theme 블록으로 커스텀 유틸리티 자동 생성.
@theme {
--color-bg: #0b0b10;
--color-surface: #141419;
--color-surface-hover: #1e1e25;
--color-border: #2a2a35;
--color-text: #e1e4ea;
--color-text-muted: #8b8fa3;
--color-positive: #1E8EFF;
--color-positive-hover: #0A7AEE;
--color-positive-bg: rgba(30, 142, 255, 0.12);
--color-negative: #E85830;
--color-negative-hover: #D04820;
--color-negative-bg: rgba(232, 88, 48, 0.12);
--color-warning: #F0A030;
--color-warning-bg: rgba(240, 160, 48, 0.12);
--color-accent: #F5C518;
--color-accent-bg: rgba(245, 197, 24, 0.10);
--color-info: #a78bfa;
--color-info-bg: rgba(167, 139, 250, 0.10);
--color-primary: #1E8EFF;
--color-primary-hover: #0A7AEE;
--spacing-sidebar: 220px;
--spacing-header: 56px;
}
이 토큰들은 Tailwind 유틸리티로 자동 매핑된다:
--color-* → bg-*, text-*, border-*
--spacing-* → w-*, h-*, ml-*, mt-*, p-*