diff --git a/docs/DESIGN-SYSTEM.md b/docs/DESIGN-SYSTEM.md index 811c957..14b7934 100644 --- a/docs/DESIGN-SYSTEM.md +++ b/docs/DESIGN-SYSTEM.md @@ -3,26 +3,6 @@ ## 개요 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 행, 헤더바 | - ---- ## Foundations @@ -87,8 +67,22 @@ UI 전반에서 사용하는 기본 색조 팔레트. Navy는 배경 전용 5단 | 토큰 | Dark | Light | 용도 | |------|------|-------|------| | `text-1` | `#edf0f7` | `#0f172a` | 기본 텍스트, 아이콘 기본 | -| `text-2` | `#b0b8cc` | `#475569` | 보조 텍스트 | -| `text-3` | `#8690a6` | `#94a3b8` | 비활성, 플레이스홀더 | +| `text-2` | `#c0c8dc` | `#475569` | 보조 텍스트 | +| `text-3` | `#9ba3b8` | `#94a3b8` | 비활성, 플레이스홀더 | + +> **TODO: 텍스트 토큰 시맨틱 리네이밍** +> +> Tailwind config의 `colors.text` 키를 `colors.color`로 변경하여 클래스명을 직관적으로 개선한다. +> +> | 현재 | 변경 후 | 용도 | +> |------|---------|------| +> | `text-text-1` | `text-color` (DEFAULT) | 기본 텍스트 | +> | `text-text-2` | `text-color-sub` | 보조 텍스트 | +> | `text-text-3` | `text-color-disabled` | 비활성, 플레이스홀더 | +> +> - 영향 범위: 96개 파일, 2,685회 참조 +> - CSS 변수(`--t1/2/3`)도 `--color-default/sub/disabled`로 동기화 +> - 기계적 find-and-replace로 처리 가능 **Background** @@ -132,11 +126,11 @@ UI 전반에서 사용하는 기본 색조 팔레트. Navy는 배경 전용 5단 | 이름 | className | Font Stack | 용도 | |------|-----------|------------|------| -| Noto Sans KR | `font-korean` | `'Noto Sans KR', sans-serif` | 기본 UI 텍스트, 한국어 콘텐츠 전반 | -| JetBrains Mono | `font-mono` | `'JetBrains Mono', monospace` | 좌표, 수치, 코드, 토큰 이름 | -| Outfit | `font-sans` | `'Outfit', 'Noto Sans KR', sans-serif` | 영문 헤딩, 브랜드 타이틀 | +| PretendardGOV | `font-korean` | `'PretendardGOV', sans-serif` | 기본 UI 텍스트, 한국어/영문 콘텐츠 전반 | +| PretendardGOV | `font-mono` | `'PretendardGOV', sans-serif` | 좌표, 수치, 데이터 값 | +| PretendardGOV | `font-sans` | `'PretendardGOV', sans-serif` | body 기본 폰트 | -> Body 기본 스택: `font-family: 'Outfit', 'Noto Sans KR', sans-serif` +> Body 기본 스택: `font-family: 'PretendardGOV', sans-serif` #### Typography Tokens (`.wing-*` 클래스) diff --git a/docs/RELEASE-NOTES.md b/docs/RELEASE-NOTES.md index 2a62d7a..de36c3f 100644 --- a/docs/RELEASE-NOTES.md +++ b/docs/RELEASE-NOTES.md @@ -4,6 +4,15 @@ ## [Unreleased] +### 추가 +- 다크/라이트 테마 전환 기능 (TopBar 퀵메뉴에서 토글) +- themeStore (Zustand) 테마 상태 관리 + localStorage 영속화 + +### 변경 +- 디자인 시스템 토큰 시맨틱 네이밍 전환 (하드코딩 색상 → CSS 변수) +- PretendardGOV 폰트 적용 +- 라이트 테마 CSS 변수 오버라이드 및 컴포넌트별 스타일 대응 + ## [2026-03-30] ### 추가 diff --git a/frontend/index.html b/frontend/index.html index 92f98e0..b97769e 100755 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,6 +8,12 @@ frontend +
diff --git a/frontend/public/fonts/PretendardGOV-Black.otf b/frontend/public/fonts/PretendardGOV-Black.otf new file mode 100644 index 0000000..7e901ca Binary files /dev/null and b/frontend/public/fonts/PretendardGOV-Black.otf differ diff --git a/frontend/public/fonts/PretendardGOV-Bold.otf b/frontend/public/fonts/PretendardGOV-Bold.otf new file mode 100644 index 0000000..a548de9 Binary files /dev/null and b/frontend/public/fonts/PretendardGOV-Bold.otf differ diff --git a/frontend/public/fonts/PretendardGOV-ExtraBold.otf b/frontend/public/fonts/PretendardGOV-ExtraBold.otf new file mode 100644 index 0000000..0399b25 Binary files /dev/null and b/frontend/public/fonts/PretendardGOV-ExtraBold.otf differ diff --git a/frontend/public/fonts/PretendardGOV-ExtraLight.otf b/frontend/public/fonts/PretendardGOV-ExtraLight.otf new file mode 100644 index 0000000..866618a Binary files /dev/null and b/frontend/public/fonts/PretendardGOV-ExtraLight.otf differ diff --git a/frontend/public/fonts/PretendardGOV-Light.otf b/frontend/public/fonts/PretendardGOV-Light.otf new file mode 100644 index 0000000..53f0e04 Binary files /dev/null and b/frontend/public/fonts/PretendardGOV-Light.otf differ diff --git a/frontend/public/fonts/PretendardGOV-Medium.otf b/frontend/public/fonts/PretendardGOV-Medium.otf new file mode 100644 index 0000000..c24083f Binary files /dev/null and b/frontend/public/fonts/PretendardGOV-Medium.otf differ diff --git a/frontend/public/fonts/PretendardGOV-Regular.otf b/frontend/public/fonts/PretendardGOV-Regular.otf new file mode 100644 index 0000000..879bd58 Binary files /dev/null and b/frontend/public/fonts/PretendardGOV-Regular.otf differ diff --git a/frontend/public/fonts/PretendardGOV-SemiBold.otf b/frontend/public/fonts/PretendardGOV-SemiBold.otf new file mode 100644 index 0000000..1cc77f3 Binary files /dev/null and b/frontend/public/fonts/PretendardGOV-SemiBold.otf differ diff --git a/frontend/public/fonts/PretendardGOV-Thin.otf b/frontend/public/fonts/PretendardGOV-Thin.otf new file mode 100644 index 0000000..1b26273 Binary files /dev/null and b/frontend/public/fonts/PretendardGOV-Thin.otf differ diff --git a/frontend/public/fonts/PretendardGOVVariable.ttf b/frontend/public/fonts/PretendardGOVVariable.ttf new file mode 100644 index 0000000..69602dc Binary files /dev/null and b/frontend/public/fonts/PretendardGOVVariable.ttf differ diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 80b677e..2a1a3ba 100755 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -61,9 +61,9 @@ function App() {
- WING + WING
준비 중입니다...
+ return
준비 중입니다...
} } diff --git a/frontend/src/common/components/auth/LoginPage.tsx b/frontend/src/common/components/auth/LoginPage.tsx index c1f86a5..e4371ef 100644 --- a/frontend/src/common/components/auth/LoginPage.tsx +++ b/frontend/src/common/components/auth/LoginPage.tsx @@ -55,7 +55,7 @@ export function LoginPage() { } return ( -
+
{/* Background image */}
@@ -98,11 +98,11 @@ export function LoginPage() {
{/* User ID */}
-