From d07bd3e0f1dca35536e259087f2cc495fe163dc4 Mon Sep 17 00:00:00 2001 From: dnlee Date: Fri, 17 Apr 2026 13:20:28 +0900 Subject: [PATCH 1/2] =?UTF-8?q?refactor(design):=20color=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20Definition=20=ED=8C=94=EB=A0=88=ED=8A=B8=EB=A1=9C?= =?UTF-8?q?=20=EB=A7=88=EC=9D=B4=EA=B7=B8=EB=A0=88=EC=9D=B4=EC=85=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - bg/stroke/fg grayscale을 쿨톤으로 전환 (#121418, #24272D 등) - Primary #0099DD + Red #D61111 + Yellow #FEDA4A 적용 - ColorPaletteContent 디자인 페이지 값 동기화 - CLAUDE.md 완료된 진행 중 작업 섹션 제거 --- CLAUDE.md | 41 ------- frontend/src/common/styles/base.css | 109 +++++++++--------- .../src/pages/design/ColorPaletteContent.tsx | 96 ++++++++------- 3 files changed, 113 insertions(+), 133 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index eb09ccd..3220db9 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -127,47 +127,6 @@ wing/ - API 인터페이스 변경 시 `memory/api-types.md` 갱신 - 개별 탭 개발자는 공통 가이드를 참조하여 연동 구현 -## 진행 중 작업 (완료 후 삭제) - -### 폰트 크기 업스케일 작업 (진행 중) - -반드시 `memory/font-upscale-plan.md`를 읽고 Phase 진행 상황을 확인할 것. - -**토큰 변경 매핑 (이름 유지, 값만 변경):** -- `caption`/`label-2`/`title-6`: 11px → **12px** (0.75rem) -- `label-1`/`title-5`: 12px → **13px** (0.8125rem) -- `body-2`/`title-4`: 13px → **14px** (0.875rem) -- `body-1`/`title-3`: 14px → **16px** (1rem) - -**네비게이션 클래스 교체:** -- TopBar 메인탭: `text-title-4` → `text-title-2` (16px) -- SubMenuBar 서브탭: `text-title-5` → `text-title-4` (14px) - -**작업 범위:** -- Phase 1: tailwind.config.js + base.css 토큰 값 수정 -- Phase 2: components.css 하드코딩(27곳) + wing.css `.wing-tab` text-xs→text-caption -- Phase 3: TopBar.tsx + SubMenuBar.tsx 클래스 교체 -- Phase 4: text-xs→text-caption, text-sm→text-body-2 스크립트 교체 (design 페이지 제외, 608건) -- Phase 5: prediction 탭 인라인 fontSize 수정 -- Phase 6 (보류): wing-header-bar 패딩 — 폰트 변경 후 유저 확인 후 진행 - -### 디자인 시스템 폰트+색상 통일 작업 - -compact 후 반드시 `memory/design-system-work.md`를 읽고 작업 상태(완료/미완료 컴포넌트)를 확인할 것. - -**색상 규칙:** -- 하드코딩 색상(`#ef4444`, `#a855f7` 등) → CSS 변수 전환 -- `rgba(59,130,246,...)` 등 비-accent 계열 → `rgba(6,182,212,...)` (accent cyan) -- 시맨틱 컬러(`color-accent`, `color-info`, `color-caution` 등)는 다양하게 사용 가능하되, 강조 색상은 **최대 2가지**로 제한 -- `linear-gradient` → 단색으로 단순화 -- 장식용 `border-top`, `border-left` → 제거 여부를 유저에게 확인 후 진행 - -**폰트 규칙:** -- 하드코딩 `fontSize`/`fontWeight` → Tailwind 토큰 (`text-title-2`, `text-caption` 등) -- `fontFamily: monospace` → `var(--font-mono)` -- `fontFamily: sans-serif` / `'Noto Sans KR'` → `var(--font-korean)` -- 인라인 `style={{ fontSize, padding }}` → Tailwind 클래스 전환 (가능한 범위) - ## 환경 설정 - Node.js 20 (`.node-version`, fnm 사용) diff --git a/frontend/src/common/styles/base.css b/frontend/src/common/styles/base.css index b87c5a5..2ddfef9 100644 --- a/frontend/src/common/styles/base.css +++ b/frontend/src/common/styles/base.css @@ -31,25 +31,25 @@ @layer base { :root { /* bg — Background */ - --bg-base: #0a0e1a; - --bg-surface: #0f1524; - --bg-elevated: #121929; - --bg-card: #1a2236; - --bg-surface-hover: #1e2844; + --bg-base: #121418; + --bg-surface: #1B1E23; + --bg-elevated: #24272D; + --bg-card: #24272D; + --bg-surface-hover: #3A3F49; /* stroke — Border */ - --stroke-default: #1e2a42; - --stroke-light: #2a3a5c; + --stroke-default: #24272D; + --stroke-light: #1B1E23; /* fg — Foreground */ - --fg-default: #edf0f7; - --fg-sub: #c0c8dc; - --fg-disabled: #9ba3b8; + --fg-default: #F8F9FC; + --fg-sub: #B9C1C9; + --fg-disabled: #808892; /* color — Palette */ - --color-info: #3b82f6; - --color-accent: #06b6d4; - --color-accent-muted: #0e7490; - --color-danger: #ef4444; + --color-info: #0099DD; + --color-accent: #0099DD; + --color-accent-muted: #007AB1; + --color-danger: #D61111; --color-warning: #f97316; - --color-caution: #eab308; + --color-caution: #FEDA4A; --color-success: #22c55e; --color-tertiary: #a855f7; --color-boom: #f59e0b; @@ -111,29 +111,34 @@ --static-black: #131415; --static-white: #ffffff; - /* Gray */ - --gray-100: #f1f5f9; - --gray-200: #e2e8f0; - --gray-300: #cbd5e1; - --gray-400: #94a3b8; - --gray-500: #64748b; - --gray-600: #475569; - --gray-700: #334155; - --gray-800: #1e293b; - --gray-900: #0f172a; - --gray-1000: #020617; + /* Gray (Definition cool-tone, 15 steps) */ + --gray-0: #FFFFFF; + --gray-50: #F8F9FC; + --gray-100: #F3F6FB; + --gray-200: #EBEFF5; + --gray-250: #E1E6EC; + --gray-300: #D6DBE1; + --gray-400: #B9C1C9; + --gray-500: #808892; + --gray-550: #6C747E; + --gray-600: #565B64; + --gray-700: #3A3F49; + --gray-800: #24272D; + --gray-850: #1B1E23; + --gray-900: #121418; + --gray-1000: #000000; - /* Blue */ - --blue-100: #dbeafe; - --blue-200: #bfdbfe; - --blue-300: #93c5fd; - --blue-400: #60a5fa; - --blue-500: #3b82f6; - --blue-600: #2563eb; - --blue-700: #1d4ed8; - --blue-800: #1e40af; - --blue-900: #1e3a8a; - --blue-1000: #172554; + /* Blue (Primary Blue-Cyan, hue ~200°) */ + --blue-100: #E6F4FB; + --blue-200: #B3E0F5; + --blue-300: #80CCEE; + --blue-400: #4DB8E8; + --blue-500: #0099DD; + --blue-600: #007AB1; + --blue-700: #005C85; + --blue-800: #003D59; + --blue-900: #001F2D; + --blue-1000: #001520; /* Green */ --green-100: #dcfce7; @@ -152,7 +157,7 @@ --yellow-200: #fef08a; --yellow-300: #fde047; --yellow-400: #facc15; - --yellow-500: #eab308; + --yellow-500: #FEDA4A; --yellow-600: #ca8a04; --yellow-700: #a16207; --yellow-800: #854d0e; @@ -160,12 +165,12 @@ --yellow-1000: #422006; /* Red */ - --red-100: #fee2e2; + --red-100: #7A2D2D; --red-200: #fecaca; --red-300: #fca5a5; --red-400: #f87171; - --red-500: #ef4444; - --red-600: #dc2626; + --red-500: #DE4141; + --red-600: #D61111; --red-700: #b91c1c; --red-800: #991b1b; --red-900: #7f1d1d; @@ -189,19 +194,19 @@ /* ── Light theme overrides ── */ [data-theme='light'] { - --bg-base: #f8fafc; - --bg-surface: #ffffff; - --bg-elevated: #f1f5f9; - --bg-card: #ffffff; - --bg-surface-hover: #e2e8f0; - --stroke-default: #cbd5e1; - --stroke-light: #e2e8f0; - --fg-default: #0f172a; - --fg-sub: #475569; - --fg-disabled: #94a3b8; + --bg-base: #FFFFFF; + --bg-surface: #FFFFFF; + --bg-elevated: #F3F6FB; + --bg-card: #FFFFFF; + --bg-surface-hover: #EBEFF5; + --stroke-default: #B9C1C9; + --stroke-light: #E1E6EC; + --fg-default: #121418; + --fg-sub: #24272D; + --fg-disabled: #808892; --hover-overlay: rgba(0, 0, 0, 0.04); --dropdown-bg: rgba(255, 255, 255, 0.97); - --color-accent-muted: #0891b2; + --color-accent-muted: #007AB1; --color-navy: #1d4ed8; --color-navy-hover: #2563eb; } diff --git a/frontend/src/pages/design/ColorPaletteContent.tsx b/frontend/src/pages/design/ColorPaletteContent.tsx index 12f5576..2911f33 100644 --- a/frontend/src/pages/design/ColorPaletteContent.tsx +++ b/frontend/src/pages/design/ColorPaletteContent.tsx @@ -108,7 +108,7 @@ interface SemanticColor { const SEMANTIC_COLORS: SemanticColor[] = [ { name: 'Primary 500', hex: '#0099DD', usages: ['긍정의 의미', '주요 액션 버튼', '링크, 선택 상태'] }, { name: 'Red 600', hex: '#D61111', usages: ['부정 컬러로 사용', '공지 배지의 Text로 사용'] }, - { name: 'Red 100', hex: '#FBD8DC', usages: ['공지 배지의 bg 컬러'] }, + { name: 'Red 100', hex: '#7A2D2D', usages: ['공지 배지의 bg 컬러'] }, { name: 'Yellow 500', hex: '#FEDA4A', usages: ['즐겨찾기/북마크 의미로 사용'] }, ]; @@ -144,31 +144,36 @@ const COLOR_TOKEN_GROUPS: ColorTokenGroup[] = [ { title: 'Gray', tokens: [ - { name: 'gray.100', hex: '#f1f5f9' }, - { name: 'gray.200', hex: '#e2e8f0' }, - { name: 'gray.300', hex: '#cbd5e1' }, - { name: 'gray.400', hex: '#94a3b8' }, - { name: 'gray.500', hex: '#64748b' }, - { name: 'gray.600', hex: '#475569' }, - { name: 'gray.700', hex: '#334155' }, - { name: 'gray.800', hex: '#1e293b' }, - { name: 'gray.900', hex: '#0f172a' }, - { name: 'gray.1000', hex: '#020617' }, + { name: 'gray.0', hex: '#FFFFFF' }, + { name: 'gray.50', hex: '#F8F9FC' }, + { name: 'gray.100', hex: '#F3F6FB' }, + { name: 'gray.200', hex: '#EBEFF5' }, + { name: 'gray.250', hex: '#E1E6EC' }, + { name: 'gray.300', hex: '#D6DBE1' }, + { name: 'gray.400', hex: '#B9C1C9' }, + { name: 'gray.500', hex: '#808892' }, + { name: 'gray.550', hex: '#6C747E' }, + { name: 'gray.600', hex: '#565B64' }, + { name: 'gray.700', hex: '#3A3F49' }, + { name: 'gray.800', hex: '#24272D' }, + { name: 'gray.850', hex: '#1B1E23' }, + { name: 'gray.900', hex: '#121418' }, + { name: 'gray.1000', hex: '#000000' }, ], }, { - title: 'Blue', + title: 'Blue (Primary)', tokens: [ - { name: 'blue.100', hex: '#dbeafe' }, - { name: 'blue.200', hex: '#bfdbfe' }, - { name: 'blue.300', hex: '#93c5fd' }, - { name: 'blue.400', hex: '#60a5fa' }, - { name: 'blue.500', hex: '#3b82f6' }, - { name: 'blue.600', hex: '#2563eb' }, - { name: 'blue.700', hex: '#1d4ed8' }, - { name: 'blue.800', hex: '#1e40af' }, - { name: 'blue.900', hex: '#1e3a8a' }, - { name: 'blue.1000', hex: '#172554' }, + { name: 'blue.100', hex: '#E6F4FB' }, + { name: 'blue.200', hex: '#B3E0F5' }, + { name: 'blue.300', hex: '#80CCEE' }, + { name: 'blue.400', hex: '#4DB8E8' }, + { name: 'blue.500', hex: '#0099DD' }, + { name: 'blue.600', hex: '#007AB1' }, + { name: 'blue.700', hex: '#005C85' }, + { name: 'blue.800', hex: '#003D59' }, + { name: 'blue.900', hex: '#001F2D' }, + { name: 'blue.1000', hex: '#001520' }, ], }, { @@ -193,7 +198,7 @@ const COLOR_TOKEN_GROUPS: ColorTokenGroup[] = [ { name: 'yellow.200', hex: '#fef08a' }, { name: 'yellow.300', hex: '#fde047' }, { name: 'yellow.400', hex: '#facc15' }, - { name: 'yellow.500', hex: '#eab308' }, + { name: 'yellow.500', hex: '#FEDA4A' }, { name: 'yellow.600', hex: '#ca8a04' }, { name: 'yellow.700', hex: '#a16207' }, { name: 'yellow.800', hex: '#854d0e' }, @@ -204,12 +209,12 @@ const COLOR_TOKEN_GROUPS: ColorTokenGroup[] = [ { title: 'Red', tokens: [ - { name: 'red.100', hex: '#fee2e2' }, + { name: 'red.100', hex: '#7A2D2D' }, { name: 'red.200', hex: '#fecaca' }, { name: 'red.300', hex: '#fca5a5' }, { name: 'red.400', hex: '#f87171' }, - { name: 'red.500', hex: '#ef4444' }, - { name: 'red.600', hex: '#dc2626' }, + { name: 'red.500', hex: '#DE4141' }, + { name: 'red.600', hex: '#D61111' }, { name: 'red.700', hex: '#b91c1c' }, { name: 'red.800', hex: '#991b1b' }, { name: 'red.900', hex: '#7f1d1d' }, @@ -771,27 +776,27 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { tokens: [ { name: '--bg-base', - value: '#0a0e1a', + value: '#121418', desc: '페이지 최하단 배경', }, { name: '--bg-surface', - value: '#0f1524', + value: '#1B1E23', desc: '패널, 사이드바', }, { name: '--bg-elevated', - value: '#121929', + value: '#24272D', desc: '테이블 헤더, 섹션', }, { name: '--bg-card', - value: '#1a2236', + value: '#24272D', desc: '카드, 플로팅 요소', }, { name: '--bg-surface-hover', - value: '#1e2844', + value: '#3A3F49', desc: '호버 인터랙션', }, ], @@ -799,11 +804,11 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { { title: 'fg — Foreground', tokens: [ - { name: '--fg-default', value: '#edf0f7', desc: '기본 텍스트' }, - { name: '--fg-sub', value: '#c0c8dc', desc: '보조 텍스트' }, + { name: '--fg-default', value: '#F8F9FC', desc: '기본 텍스트' }, + { name: '--fg-sub', value: '#B9C1C9', desc: '보조 텍스트' }, { name: '--fg-disabled', - value: '#9ba3b8', + value: '#808892', desc: '비활성, 플레이스홀더', }, ], @@ -813,12 +818,12 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { tokens: [ { name: '--stroke-default', - value: '#1e2a42', + value: '#24272D', desc: '기본 구분선', }, { name: '--stroke-light', - value: '#2a3a5c', + value: '#1B1E23', desc: '연한 구분선', }, ], @@ -921,11 +926,12 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { 설명 {[ - { name: '--color-accent', value: '#06b6d4', desc: '주요 강조' }, - { name: '--color-info', value: '#3b82f6', desc: '정보' }, - { name: '--color-danger', value: '#ef4444', desc: '위험' }, + { name: '--color-accent', value: '#0099DD', desc: '주요 강조' }, + { name: '--color-accent-muted', value: '#007AB1', desc: '차분한 강조' }, + { name: '--color-info', value: '#0099DD', desc: '정보' }, + { name: '--color-danger', value: '#D61111', desc: '위험' }, { name: '--color-warning', value: '#f97316', desc: '주의' }, - { name: '--color-caution', value: '#eab308', desc: '경고' }, + { name: '--color-caution', value: '#FEDA4A', desc: '경고' }, { name: '--color-success', value: '#22c55e', desc: '성공' }, { name: '--color-tertiary', @@ -942,6 +948,16 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { value: '#fbbf24', desc: '오일붐 호버', }, + { + name: '--color-navy', + value: '#1e40af', + desc: 'Navy 강조', + }, + { + name: '--color-navy-hover', + value: '#1d4ed8', + desc: 'Navy 호버', + }, ].map((tk) => (
Date: Fri, 17 Apr 2026 13:22:25 +0900 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=EB=A6=B4=EB=A6=AC=EC=A6=88=20?= =?UTF-8?q?=EB=85=B8=ED=8A=B8=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/RELEASE-NOTES.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/RELEASE-NOTES.md b/docs/RELEASE-NOTES.md index 6f6c794..afbe0a6 100644 --- a/docs/RELEASE-NOTES.md +++ b/docs/RELEASE-NOTES.md @@ -4,6 +4,9 @@ ## [Unreleased] +### 변경 +- 디자인 시스템: color 토큰 Definition 팔레트로 마이그레이션 (bg/stroke/fg 쿨톤 전환, Primary #0099DD 적용) + ### 수정 - 빌드 에러 수정 - 타입 import 정리 및 미사용 코드 제거 -- 2.45.2