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

3.6 KiB

Raw Blame 히스토리

아이콘

라이브러리

Lucide React 사용. 일관된 선 굵기(strokeWidth=1.5)와 스타일로 전체 UI의 시각적 통일성을 유지한다.

npm install lucide-react

import { ChevronRight, Search, Bell } from 'lucide-react';

사이즈

이름	px	Tailwind 클래스	용도
xs	12px	`size-3`	배지 내부, 인라인 보조
sm	16px	`size-4`	버튼 내부, 레이블
md	20px	`size-5`	기본 UI 아이콘
lg	24px	`size-6`	네비게이션, 강조
xl	32px	`size-8`	상태 표시, 빈 상태 일러스트

기본값은 md (20px). 별도 지정이 없으면 size-5 사용.

strokeWidth

컨텍스트	strokeWidth
기본 UI	1.5 (Lucide 기본값)
굵은 강조	2
가는 장식	1

기본값 그대로 사용. 의도적인 경우에만 override.

색상 규칙

아이콘에 직접 color HEX를 지정하지 않는다. 부모 텍스트 색상을 상속하거나 CSS 변수를 사용한다.

상황	클래스
본문과 함께	`text-[var(--color-text-primary)]` 상속
보조 아이콘	`text-[var(--color-text-secondary)]`
비활성	`text-[var(--color-text-tertiary)]`
강조 (Primary)	`text-[var(--color-primary)]`
성공	`text-[var(--color-success)]`
경고	`text-[var(--color-warning)]`
오류	`text-[var(--color-danger)]`
정보	`text-[var(--color-info)]`

사용 패턴

버튼 내 아이콘

<button class="flex items-center gap-2 ...">
  <ChevronRight className="size-4" />
  다음
</button>

텍스트와 인라인 정렬

<span class="flex items-center gap-1.5 text-sm text-[var(--color-text-secondary)]">
  <Clock className="size-4 shrink-0" />
  2시간 전
</span>

아이콘 전용 버튼

<button
  aria-label="알림"
  class="rounded-lg p-2 hover:bg-[var(--color-bg-surface)] text-[var(--color-text-secondary)]"
>
  <Bell className="size-5" />
</button>

상태 아이콘

<CheckCircle className="size-5 text-[var(--color-success)]" />
<AlertTriangle className="size-5 text-[var(--color-warning)]" />
<XCircle className="size-5 text-[var(--color-danger)]" />
<Info className="size-5 text-[var(--color-info)]" />

접근성

장식용 아이콘: aria-hidden="true" 필수
의미 있는 아이콘: aria-label 또는 시각적으로 숨긴 텍스트 제공

// 장식용
<ChevronRight aria-hidden="true" className="size-4" />

// 의미 있는 아이콘 버튼
<button aria-label="삭제">
  <Trash2 className="size-5" aria-hidden="true" />
</button>

자주 쓰는 아이콘 목록

용도	아이콘
검색	`Search`
알림	`Bell`
설정	`Settings`
사용자	`User`, `Users`
메뉴	`Menu`, `MoreVertical`, `MoreHorizontal`
닫기	`X`
확인	`Check`, `CheckCircle`
오류	`XCircle`, `AlertCircle`
경고	`AlertTriangle`
정보	`Info`
편집	`Pencil`, `Edit2`
삭제	`Trash2`
추가	`Plus`, `PlusCircle`
이동	`ChevronRight`, `ChevronDown`, `ArrowRight`
새로고침	`RefreshCw`
다운로드	`Download`
업로드	`Upload`
링크	`ExternalLink`
복사	`Copy`
필터	`Filter`, `SlidersHorizontal`
정렬	`ArrowUpDown`
로그	`FileText`, `ClipboardList`
차트	`BarChart2`, `LineChart`, `PieChart`
서버	`Server`, `Database`
API	`Zap`, `Code2`
시간	`Clock`, `Calendar`

3.6 KiB Raw Blame 히스토리

아이콘