[refactor] front: 미사용 sidebar 토큰 제거 및 design.md 삭제
- 프로젝트에 사이드바 없음 → --sidebar-* 토큰 및 @theme 매핑 제거 - 토큰 출처 문서(design.md) 삭제 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
158e7ba29a
commit
fbbe8b3427
112
front/design.md
112
front/design.md
@ -1,112 +0,0 @@
|
|||||||
---
|
|
||||||
|
|
||||||
## 색상 (Color)
|
|
||||||
|
|
||||||
값은 `tokens.css`의 `:root`(light) / `.dark`(dark) 정의. 모두 hex (일부 8자리 hex = 알파 포함), `--background-rgb`만 raw rgb.
|
|
||||||
|
|
||||||
| 토큰 | Tailwind 유틸 | Light | Dark | 용도 |
|
|
||||||
|---|---|---|---|---|
|
|
||||||
| `--background` | `bg-background` | `#ffffff` (흰색) | `#0a0a0a` (거의 검정) | 페이지 배경 |
|
|
||||||
| `--background-rgb` | — | `250, 250, 250` | `9, 9, 11` | rgba() 조합용 raw 값 |
|
|
||||||
| `--foreground` | `text-foreground` | `#0a0a0a` | `#fafafa` | 기본 텍스트 |
|
|
||||||
| `--card` | `bg-card` | `#ffffff` | `#171717` | 카드 배경 |
|
|
||||||
| `--card-foreground` | `text-card-foreground` | `#0a0a0a` | `#fafafa` | 카드 텍스트 |
|
|
||||||
| `--popover` | `bg-popover` | `#ffffff` | `#171717` | 팝오버 배경 |
|
|
||||||
| `--popover-foreground` | `text-popover-foreground` | `#0a0a0a` | `#fafafa` | 팝오버 텍스트 |
|
|
||||||
| `--primary` | `bg-primary` | `#171717` (다크 그레이) | `#e5e5e5` (라이트 그레이) | 주요 액션/버튼 |
|
|
||||||
| `--primary-foreground` | `text-primary-foreground` | `#fafafa` | `#171717` | primary 위 텍스트 |
|
|
||||||
| `--secondary` | `bg-secondary` | `#f5f5f5` | `#262626` | 보조 배경 |
|
|
||||||
| `--secondary-foreground` | `text-secondary-foreground` | `#171717` | `#fafafa` | 보조 텍스트 |
|
|
||||||
| `--muted` | `bg-muted` | `#f5f5f5` | `#262626` | 흐린 배경 |
|
|
||||||
| `--muted-foreground` | `text-muted-foreground` | `#737373` | `#a1a1a1` | 흐린 텍스트/캡션 |
|
|
||||||
| `--accent` | `bg-accent` | `#f5f5f5` | `#262626` | 강조 배경(hover 등) |
|
|
||||||
| `--accent-foreground` | `text-accent-foreground` | `#171717` | `#fafafa` | accent 위 텍스트 |
|
|
||||||
| `--border` | `border-border` | `#e5e5e5` | `#ffffff1a` (흰색 10%) | 테두리/구분선 |
|
|
||||||
| `--input` | `border-input` | `#e5e5e5` | `#ffffff26` (흰색 15%) | 인풋 테두리 |
|
|
||||||
| `--ring` | `ring-ring` | `#a1a1a1` | `#737373` | 포커스 링 |
|
|
||||||
| `--destructive` | `bg-destructive` | `#e7000b` (빨강) | `#ff6467` | 위험/삭제 |
|
|
||||||
| `--success` | `bg-success` | `#10b981` (초록) | `#10b981` | 성공 (light/dark 동일) |
|
|
||||||
| `--warning` | `bg-warning` | `#f59e0b` (주황) | `#f59e0b` | 경고 (light/dark 동일) |
|
|
||||||
|
|
||||||
### 차트 (Chart) — 무채색 스케일
|
|
||||||
|
|
||||||
| 토큰 | Light | Dark |
|
|
||||||
|---|---|---|
|
|
||||||
| `--chart-1` | `#d4d4d4` | `#d4d4d4` |
|
|
||||||
| `--chart-2` | `#737373` | `#737373` |
|
|
||||||
| `--chart-3` | `#525252` | `#525252` |
|
|
||||||
| `--chart-4` | `#404040` | `#404040` |
|
|
||||||
| `--chart-5` | `#262626` | `#262626` |
|
|
||||||
|
|
||||||
### 사이드바 (Sidebar)
|
|
||||||
|
|
||||||
| 토큰 | Light | Dark |
|
|
||||||
|---|---|---|
|
|
||||||
| `--sidebar` | `#fafafa` | `#171717` |
|
|
||||||
| `--sidebar-foreground` | `#0a0a0a` | `#fafafa` |
|
|
||||||
| `--sidebar-primary` | `#171717` | `#1447e6` (보라) |
|
|
||||||
| `--sidebar-primary-foreground` | `#fafafa` | `#fafafa` |
|
|
||||||
| `--sidebar-accent` | `#f5f5f5` | `#262626` |
|
|
||||||
| `--sidebar-accent-foreground` | `#171717` | `#fafafa` |
|
|
||||||
| `--sidebar-border` | `#e5e5e5` | `#ffffff1a` |
|
|
||||||
| `--sidebar-ring` | `#a1a1a1` | `#737373` |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 타이포그래피 (Typography)
|
|
||||||
|
|
||||||
`<Typography variant="...">` 로 사용. 출처: [src/components/ui/typography.tsx](src/components/ui/typography.tsx). `defaultVariant`는 `body`.
|
|
||||||
|
|
||||||
| variant | 기본 태그 | 클래스 | 용도 |
|
|
||||||
|---|---|---|---|
|
|
||||||
| `h1` | `<h1>` | `text-4xl font-bold tracking-tight text-foreground` | 페이지 제목 |
|
|
||||||
| `h2` | `<h2>` | `text-2xl font-bold tracking-tight text-foreground` | 섹션 제목 |
|
|
||||||
| `h3` | `<h3>` | `text-xl font-bold text-foreground` | 서브 제목 |
|
|
||||||
| `h4` | `<h4>` | `text-lg font-semibold text-foreground` | 소제목 |
|
|
||||||
| `body` | `<p>` | `text-base text-foreground` | 본문 (기본값) |
|
|
||||||
| `small` | `<p>` | `text-sm text-foreground` | 작은 본문 |
|
|
||||||
| `muted` | `<p>` | `text-sm text-muted-foreground leading-relaxed` | 보조 설명 |
|
|
||||||
| `label` | `<span>` | `text-xs font-semibold uppercase tracking-wider text-foreground` | 폼 라벨 |
|
|
||||||
| `mono` | `<span>` | `text-xs font-mono uppercase tracking-wider text-muted-foreground` | 콘솔/메타 캡션 |
|
|
||||||
| `caption` | `<span>` | `text-[11px] text-muted-foreground leading-normal` | 사이드바/헤더 chrome 메타 |
|
|
||||||
|
|
||||||
`as` prop으로 의미 태그 교체 가능(예: `label` variant를 `<label htmlFor>`로). 색은 variant에 토큰 클래스로 고정됨.
|
|
||||||
|
|
||||||
모든 텍스트 색은 `text-foreground`(또는 muted 계열)로 토큰화됨.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 폰트 (Font Family)
|
|
||||||
|
|
||||||
| 토큰 | 스택 | 비고 |
|
|
||||||
|---|---|---|
|
|
||||||
| `--font-sans` | `'Pretendard Variable', 'Geist Variable', system-ui, sans-serif` | 본문 기본 (`@theme inline`이 최종 적용) |
|
|
||||||
| `--font-mono` | `'JetBrains Mono', ui-monospace, SFMono-Regular, monospace` | 모노 |
|
|
||||||
| `--font-heading` | `var(--font-sans)` | 헤딩 = sans |
|
|
||||||
|
|
||||||
Pretendard는 `public/fonts/PretendardVariable.woff2`로 self-host (weight 45–920 가변).
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 모서리 반경 (Radius)
|
|
||||||
|
|
||||||
기준값 `--radius: 0.625rem` (10px). 나머지는 배수로 계산됨 (`@theme inline`).
|
|
||||||
|
|
||||||
| 토큰 | Tailwind 유틸 | 계산식 | 값 |
|
|
||||||
|---|---|---|---|
|
|
||||||
| `--radius-sm` | `rounded-sm` | `radius * 0.6` | `0.375rem` (6px) |
|
|
||||||
| `--radius-md` | `rounded-md` | `radius * 0.8` | `0.5rem` (8px) |
|
|
||||||
| `--radius-lg` | `rounded-lg` | `radius * 1.0` | `0.625rem` (10px) |
|
|
||||||
| `--radius-xl` | `rounded-xl` | `radius * 1.4` | `0.875rem` (14px) |
|
|
||||||
| `--radius-2xl` | `rounded-2xl` | `radius * 1.8` | `1.125rem` (18px) |
|
|
||||||
| `--radius-3xl` | `rounded-3xl` | `radius * 2.2` | `1.375rem` (22px) |
|
|
||||||
| `--radius-4xl` | `rounded-4xl` | `radius * 2.6` | `1.625rem` (26px) |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 기타
|
|
||||||
|
|
||||||
- **스크롤바**: 6px, thumb = `--border`, hover thumb = `--muted-foreground` (webkit)
|
|
||||||
- **전역 전환**: `body`에 `background-color/color 0.2s ease` (테마 전환용)
|
|
||||||
- **다크 모드**: `.dark` 클래스 기반 (`@custom-variant dark`)
|
|
||||||
- **간격(spacing)**: 별도 토큰 정의 없음 — Tailwind 기본 스케일 사용
|
|
||||||
@ -5,7 +5,7 @@
|
|||||||
/* ============================================================
|
/* ============================================================
|
||||||
디자인 토큰 (출처: design.md)
|
디자인 토큰 (출처: design.md)
|
||||||
- 이 프로젝트는 다크모드 없음 → light 값만 사용 (.dark / @custom-variant 미사용)
|
- 이 프로젝트는 다크모드 없음 → light 값만 사용 (.dark / @custom-variant 미사용)
|
||||||
- 차트(--chart-*) 미사용 → 정의하지 않음
|
- 차트(--chart-*) / 사이드바(--sidebar-*) 미사용 → 정의하지 않음
|
||||||
============================================================ */
|
============================================================ */
|
||||||
:root {
|
:root {
|
||||||
color-scheme: light;
|
color-scheme: light;
|
||||||
@ -43,16 +43,6 @@
|
|||||||
--destructive: #e7000b;
|
--destructive: #e7000b;
|
||||||
--success: #10b981;
|
--success: #10b981;
|
||||||
--warning: #f59e0b;
|
--warning: #f59e0b;
|
||||||
|
|
||||||
/* --- 사이드바 --- */
|
|
||||||
--sidebar: #fafafa;
|
|
||||||
--sidebar-foreground: #0a0a0a;
|
|
||||||
--sidebar-primary: #171717;
|
|
||||||
--sidebar-primary-foreground: #fafafa;
|
|
||||||
--sidebar-accent: #f5f5f5;
|
|
||||||
--sidebar-accent-foreground: #171717;
|
|
||||||
--sidebar-border: #e5e5e5;
|
|
||||||
--sidebar-ring: var(--brand-500); /* 포커스 링 = 브랜드 light(500), --ring 과 통일 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================
|
/* ============================================================
|
||||||
@ -87,16 +77,6 @@
|
|||||||
--color-success: var(--success);
|
--color-success: var(--success);
|
||||||
--color-warning: var(--warning);
|
--color-warning: var(--warning);
|
||||||
|
|
||||||
/* 사이드바 */
|
|
||||||
--color-sidebar: var(--sidebar);
|
|
||||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
||||||
--color-sidebar-primary: var(--sidebar-primary);
|
|
||||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
||||||
--color-sidebar-accent: var(--sidebar-accent);
|
|
||||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
||||||
--color-sidebar-border: var(--sidebar-border);
|
|
||||||
--color-sidebar-ring: var(--sidebar-ring);
|
|
||||||
|
|
||||||
/* 폰트 */
|
/* 폰트 */
|
||||||
--font-sans: 'Pretendard Variable', 'Geist Variable', system-ui, sans-serif;
|
--font-sans: 'Pretendard Variable', 'Geist Variable', system-ui, sans-serif;
|
||||||
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
|
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user