leedano
d0491c3f0f
- react-router-dom 도입, /design 경로에 디자인 토큰/컴포넌트 카탈로그 페이지 추가 - SCAT 지도에서 하드코딩된 제주 해안선 좌표 제거, 인접 구간 기반 동적 방향 계산으로 전환 - @/ path alias 추가, SVG 아이콘 에셋 추가
3.0 KiB
3.0 KiB
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 | 카드, 모달, 패널 |