HYOJIN c2a71c1b77 feat(design): 디자인 시스템 적용 (CSS 토큰, Button/Badge, 차트, 다크모드) (#48 )

- 디자인 시스템 가이드 문서 11개 생성 (docs/design/)
- CSS 변수 토큰 시스템 (@theme + :root/.dark 전환)
- cn() 유틸리티 (clsx + tailwind-merge)
- Button/Badge 공통 컴포넌트 (variant/size, 다크모드 대응)
- 하드코딩 Tailwind 색상 → CSS 변수 토큰 리팩토링 (30개 파일)
- 차트 팔레트 다크모드 색상 업데이트 (CHART_COLORS_HEX)
- 버튼 다크모드 채도/대비 강화 (primary-600 기반)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

2026-04-15 16:38:00 +09:00

5.5 KiB

Raw Blame 히스토리

컬러 시스템

해양 데이터 시스템을 위한 컬러 시스템. 신뢰감과 전문성을 기반으로 하며, 해양·항법 데이터의 정확성을 시각적으로 표현한다.

브랜드 컬러 원본

역할	HEX	설명
Primary	#6D94C5	Slate Blue — 신뢰, 전문성
Secondary	#CBDCEB	Powder Blue — 부드러운 보조
Accent	#E8DFCA	Warm Sand — 따뜻한 포인트
Background	#F5EFE6	Warm Cream — 배경색

브랜드 컬러 스케일

각 브랜드 컬러는 50(가장 밝음)에서 950(가장 어두움)까지 11단계 스케일로 확장된다.

Primary (Slate Blue, hue ≈ 213°)

Token	HEX	용도 예시
primary-50	#F5F7F9	subtle 배경
primary-100	#E5EBF2	hover 배경
primary-200	#D2DAE5	비활성 테두리
primary-300	#B7C5D7	비활성 텍스트
primary-400	#8AA5C7	보조 아이콘
primary-500	#6D94C5	브랜드 원본
primary-600	#507FB9	기본 버튼 배경 (Light)
primary-700	#3B669C	hover 상태
primary-800	#2D507B	active 상태
primary-900	#1B2C41	다크 배경 subtle
primary-950	#0E1A2B	다크 배경 강조

Secondary (Powder Blue, hue ≈ 210°)

Token	HEX	용도 예시
secondary-50	#F5F7F9	subtle 배경
secondary-100	#E6EDF5	hover 배경
secondary-200	#D1DAE5	비활성 테두리
secondary-300	#B7C8D7	비활성 텍스트
secondary-400	#89AAC8	보조 아이콘
secondary-500	#CBDCEB	브랜드 원본
secondary-600	#6B9AC8	보조 버튼 (Light)
secondary-700	#4E88BB	hover 상태
secondary-800	#396E9D	active 상태
secondary-900	#1B2F41	다크 배경 subtle
secondary-950	#0E1A2B	다크 배경 강조

Accent (Warm Sand, hue ≈ 38°)

Token	HEX	용도 예시
accent-50	#F9F8F6	subtle 배경
accent-100	#F2EDE4	hover 배경
accent-200	#E4E0D7	비활성 테두리
accent-300	#D5CDB9	비활성 텍스트
accent-400	#C4B48C	보조 아이콘
accent-500	#E8DFCA	브랜드 원본
accent-600	#B59854	포인트 버튼 (Light)
accent-700	#9A7E3E	hover 상태
accent-800	#786230	active 상태
accent-900	#3F351D	다크 배경 subtle
accent-950	#2B2312	다크 배경 강조

디자인 토큰 (CSS 변수)

컴포넌트에서 직접 HEX를 사용하지 않고 반드시 토큰을 사용한다.

Primary 토큰

CSS 변수	Light	Dark
`--color-primary`	#507FB9	#B7C5D7
`--color-primary-hover`	#3B669C	#D2DAE5
`--color-primary-active`	#2D507B	#8AA5C7
`--color-primary-subtle`	#F5F7F9	#1B2C41
`--color-primary-text`	#2D507B	#D2DAE5

Secondary 토큰

CSS 변수	Light	Dark
`--color-secondary`	#CBDCEB	#B7C8D7
`--color-secondary-hover`	#89AAC8	#D1DAE5
`--color-secondary-active`	#4E88BB	#89AAC8
`--color-secondary-subtle`	#F5F7F9	#1B2F41
`--color-secondary-text`	#396E9D	#D1DAE5

Accent 토큰

CSS 변수	Light	Dark
`--color-accent`	#E8DFCA	#D5CDB9
`--color-accent-hover`	#C4B48C	#E4E0D7
`--color-accent-active`	#B59854	#C4B48C
`--color-accent-subtle`	#F9F8F6	#3F351D
`--color-accent-text`	#786230	#E4E0D7

시멘틱 컬러

상태를 나타내는 컬러. 의미가 명확하므로 브랜드 컬러와 혼용하지 않는다.

역할	CSS 변수	Light	Dark
Success	`--color-success`	#059669	#34D399
Warning	`--color-warning`	#D97706	#FBBF24
Danger	`--color-danger`	#DC2626	#FCA5A5
Info	`--color-info`	#0284C7	#38BDF8

뉴트럴 (Surface & Text)

역할	CSS 변수	Light	Dark	설명
기본 배경	`--color-bg-base`	#F5EFE6	#131416	페이지 최외곽
카드 배경	`--color-bg-surface`	#FFFFFF	#1E2023	카드, 패널
모달 배경	`--color-bg-elevated`	#FFFFFF	#282A2E	모달, 드롭다운
기본 테두리	`--color-border`	#D5D2CC	#3A3C41	카드, 인풋
강조 테두리	`--color-border-strong`	#9198A1	#5C6570	포커스, 구분선
본문 텍스트	`--color-text-primary`	#1E2329	#F4F5F5	제목, 본문
보조 텍스트	`--color-text-secondary`	#5C6570	#9198A1	설명, 레이블
약한 텍스트	`--color-text-tertiary`	#9198A1	#5C6570	placeholder

차트 팔레트

데이터 시각화 전용. Cool(Blue 계열)과 Warm(Sand 계열)을 교차하여 구분성을 높인다.

순서	CSS 변수	Light HEX	Dark HEX
1번	`--color-chart-1`	#507FB9	#6D94C5
2번	`--color-chart-2`	#B59854	#C4B48C
3번	`--color-chart-3`	#4E88BB	#6B9AC8
4번	`--color-chart-4`	#9A7E3E	#B59854
5번	`--color-chart-5`	#3B669C	#8AA5C7
6번	`--color-chart-6`	#C4B48C	#D5CDB9

차트에서는 CHART_COLORS 상수(src/constants/chart.ts)를 사용한다.

사용 규칙

컴포넌트에서 HEX 직접 사용 금지. 반드시 CSS 변수 토큰 사용.
시멘틱 컬러(success, warning, danger, info)를 브랜드 컬러 대용으로 사용 금지.
다크 모드는 .dark 클래스 또는 prefers-color-scheme: dark 미디어 쿼리로 자동 전환.

5.5 KiB Raw Blame 히스토리