leedano
d0491c3f0f
- react-router-dom 도입, /design 경로에 디자인 토큰/컴포넌트 카탈로그 페이지 추가 - SCAT 지도에서 하드코딩된 제주 해안선 좌표 제거, 인접 구간 기반 동적 방향 계산으로 전환 - @/ path alias 추가, SVG 아이콘 에셋 추가
80 lines
3.0 KiB
Markdown
80 lines
3.0 KiB
Markdown
# WING-OPS 디자인 시스템
|
|
|
|
## 개요
|
|
|
|
WING-OPS UI 디자인 시스템의 비주얼 레퍼런스 카탈로그.
|
|
Google Stitch MCP로 생성된 스크린을 기반으로 일관된 UI 구현을 유도한다.
|
|
|
|
## Stitch 프로젝트
|
|
|
|
- **프로젝트명**: WING-OPS Design System v1
|
|
- **프로젝트 ID**: `5453076280291618640`
|
|
|
|
## 스크린 목록
|
|
|
|
| # | 스크린 | Screen ID | 용도 |
|
|
|---|--------|-----------|------|
|
|
| 1 | Design Tokens | `ce520225d85c4c38b2024e93ec6a4fb2` | 색상, 타이포그래피, 간격, 라운딩 토큰 |
|
|
| 2 | Component Catalog (Buttons/Badges) | `42fa9cf1a3d341a7972a1bc10ba00a8c` | 버튼 variant, 뱃지, 아이콘 버튼 |
|
|
| 3 | Form Components | `7331ad8a598f4cc59f62a14226c1d023` | 입력, 선택, 날짜, 토글, 폼 레이아웃 |
|
|
| 4 | Table & List Patterns | `5967382c70f9422ba3a0f4da79922ecf` | 데이터 테이블, 사이드바 리스트, 페이지네이션 |
|
|
| 5 | Modal Catalog | `440be91f8db7423cbb5cc89e6dd6f9ca` | 모달 3사이즈, 확인 다이얼로그, 폼 모달 |
|
|
| 6 | Operational Shell (Layout) | `86fd57c9f3c749d288f6270838a9387d` | TopBar, SubMenu, 3컬럼 레이아웃 |
|
|
| 7 | Container & Navigation | `201c2c0c47b74fcfb3427d029319fa9d` | 카드, 섹션, 탭바, KV 행, 헤더바 |
|
|
|
|
## 디자인 토큰 요약
|
|
|
|
### 배경색
|
|
| 토큰 | Tailwind | 값 | 용도 |
|
|
|------|----------|-----|------|
|
|
| `--bg0` | `bg-bg-0` | `#0a0e1a` | 페이지 배경, 입력 배경 |
|
|
| `--bg1` | `bg-bg-1` | `#0f1524` | 사이드바, 패널 |
|
|
| `--bg2` | `bg-bg-2` | `#121929` | 테이블 헤더 |
|
|
| `--bg3` | `bg-bg-3` | `#1a2236` | 카드, 버튼(secondary) |
|
|
| `--bgH` | `bg-bg-hover` | `#1e2844` | 호버 상태 |
|
|
|
|
### 텍스트
|
|
| 토큰 | Tailwind | 값 | 용도 |
|
|
|------|----------|-----|------|
|
|
| `--t1` | `text-text-1` | `#edf0f7` | 주요 텍스트 |
|
|
| `--t2` | `text-text-2` | `#b0b8cc` | 보조 텍스트 |
|
|
| `--t3` | `text-text-3` | `#8690a6` | 비활성, 플레이스홀더 |
|
|
|
|
### 보더
|
|
| 토큰 | Tailwind | 값 |
|
|
|------|----------|-----|
|
|
| `--bd` | `border-border` | `#1e2a42` |
|
|
| `--bdL` | `border-border-light` | `#2a3a5c` |
|
|
|
|
### 강조색
|
|
| 토큰 | Tailwind | 값 | 용도 |
|
|
|------|----------|-----|------|
|
|
| `--cyan` | `text-primary-cyan` | `#06b6d4` | Primary accent, 활성 상태 |
|
|
| `--blue` | `text-primary-blue` | `#3b82f6` | Secondary accent |
|
|
| `--purple` | `text-primary-purple` | `#a855f7` | Tertiary accent |
|
|
|
|
### 상태색
|
|
| 토큰 | 값 | 용도 |
|
|
|------|-----|------|
|
|
| `--red` | `#ef4444` | 위험, 삭제 |
|
|
| `--orange` | `#f97316` | 주의 |
|
|
| `--yellow` | `#eab308` | 경고 |
|
|
| `--green` | `#22c55e` | 정상, 성공 |
|
|
|
|
### 타이포그래피
|
|
| 크기 | 용도 | 폰트 |
|
|
|------|------|------|
|
|
| 9px | 메타정보 | Noto Sans KR |
|
|
| 10px | 테이블/KV 데이터 | Noto Sans KR |
|
|
| 11px | 입력, 버튼, 값 표시 | Noto Sans KR |
|
|
| 13px | 섹션 헤더 | Noto Sans KR, bold |
|
|
| 15px | 패널 타이틀 | Noto Sans KR, bold |
|
|
| 수치 데이터 | 모든 숫자 | JetBrains Mono |
|
|
|
|
### Border Radius
|
|
| 크기 | 값 | 용도 |
|
|
|------|-----|------|
|
|
| sm | 6px | 버튼, 입력, 소형 카드 |
|
|
| md | 10px | 카드, 모달, 패널 |
|
|
|