# 대시보드 디자인 레퍼런스

> 대시보드 구현 시 참고할 디자인 사례 모음.
> 이미지와 README를 이 디렉토리에 플랫하게 관리.

## 사용법

1. 이미지(PNG/JPG)를 이 디렉토리에 저장
2. 아래 **레퍼런스 목록**에 이미지 링크 + 설명 추가
3. 구현 시 이 문서를 열어 비교 참조. 개별 레퍼런스가 없으면 **공통 테마** 섹션을 따름

---

## 공통 테마

Ante 대시보드의 전체 톤앤매너. 화면별 레퍼런스가 없을 때 이 섹션을 기본 가이드로 사용.

### 분위기

- **다크 테마 기본** — 트레이딩 대시보드 표준, 장시간 모니터링에 적합
- **데이터 밀도 높음** — 한 화면에 많은 정보, 불필요한 여백 최소화
- **금융 전문 도구 느낌** — 화려한 애니메이션보다 정보 전달 우선
- **상태가 한눈에** — 색상으로 정상/경고/위험을 즉시 구분

### 컬러 팔레트 (초안)

| 용도 | 색상 | 코드 | 비고 |
|------|------|------|------|
| 배경 (메인) | 진한 남색 | `#0f1419` | TradingView 참조 |
| 배경 (카드/패널) | 약간 밝은 남색 | `#1a1f2e` | 카드, 사이드바 |
| 배경 (호버) | | `#252b3b` | 행 호버, 선택 |
| 텍스트 (주) | 밝은 회색 | `#e0e0e0` | 본문 |
| 텍스트 (보조) | 중간 회색 | `#8899a6` | 라벨, 부가 정보 |
| 양봉 / 수익 / 정상 | 초록 | `#26a69a` | TradingView 기본 |
| 음봉 / 손실 / 위험 | 빨강 | `#ef5350` | TradingView 기본 |
| 경고 | 노랑 | `#ffb74d` | 시스템 경고 상태 |
| 액센트 (primary) | 파랑 | `#2196f3` | 버튼, 링크 |
| 비활성 | 어두운 회색 | `#3a3f4b` | disabled 상태 |

> shadcn/ui + Tailwind 기반이므로 실제 구현 시 CSS 변수로 정의.
> 라이트 테마는 MVP 이후 고려.

### 타이포그래피

- **숫자/금액**: 모노스페이스 (`font-variant-numeric: tabular-nums`)
- **본문**: 시스템 폰트 스택 (Inter 또는 시스템 sans-serif)
- **크기 계층**: KPI 숫자(2xl) > 섹션 제목(lg) > 본문(sm) > 라벨(xs)

### 공통 UI 패턴

| 패턴 | 설명 | 참고 |
|------|------|------|
| KPI 카드 | 숫자 + 라벨 + 변화율(%) 표시, 상단에 가로 배열 | Grafana, TradingView |
| 상태 뱃지 | 작은 원형 dot + 텍스트 (`ACTIVE` 초록, `SUSPENDED` 빨강) | — |
| 데이터 테이블 | 고정 헤더, 행 호버, 정렬 가능, 숫자 우측 정렬 | shadcn/ui Table |
| 액션 버튼 | 위험 액션은 빨간색 + 확인 다이얼로그 | 킬스위치, 봇 중지 |
| 실시간 갱신 | 값 변경 시 잠깐 하이라이트 (fade), 깜빡임 없이 | WebSocket 수신 시 |
| 빈 상태 | 회색 아이콘 + "데이터 없음" 메시지, 액션 유도 | 봇 없을 때 등 |
| 로딩 | skeleton UI (shadcn Skeleton), 스피너 지양 | — |
| 차트 | TradingView Lightweight Charts, 다크 테마 맞춤 | 캔들 + 거래 마커 |

### 참고할 제품/서비스

| 서비스 | 참고 포인트 |
|--------|-----------|
| TradingView | 차트 UX, 다크 테마 컬러, 캔들 색상 |
| Grafana | KPI 카드 레이아웃, 대시보드 구성, 패널 그리드 |
| Bybit/Binance | 트레이딩 대시보드 레이아웃, 주문/포지션 테이블 |
| Linear | 사이드바 네비게이션, 미니멀 UI, 상태 관리 UX |
| Vercel Dashboard | 카드 기반 레이아웃, 깔끔한 상태 표시 |

---

## 레퍼런스 목록

이미지를 추가할 때 아래 형식으로 기록.

<!-- 예시:
### tradingview-chart.png
![tradingview-chart](tradingview-chart.png)
- **출처**: TradingView
- **참고 포인트**: 캔들 차트 색상, 다크 테마 배경, 하단 볼륨 바
- **적용 화면**: 거래 차트
- **컬러 코드**: 배경 #131722, 양봉 #26a69a, 음봉 #ef5350
-->

(이미지 추가 시 여기에 기록)
