[feat] front: design.md 기반 디자인 토큰 + 브랜드 컬러 적용

- index.css 를 shadcn 스타일 토큰 시스템(Tailwind v4 @theme inline)으로 교체 - 다크모드/차트 토큰 제외 (프로젝트 미사용), light 전용 - 브랜드 블루 숫자 스케일 추가: --brand-500/600/700 (hover=톤다운 700) - --primary=brand-600, --ring/--sidebar-ring=brand-500 로 통일 - 폰트: Pretendard CDN(@import, dynamic-subset, 버전 고정) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-16 11:39:22 +09:00 · 2026-06-16 11:39:22 +09:00 · 158e7ba29a
commit 158e7ba29a
parent 8caaa36af2
2 changed files with 243 additions and 101 deletions
--- a/front/design.md
+++ b/front/design.md
@ -0,0 +1,112 @@
+---
+ 
+## 색상 (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 기본 스케일 사용
--- a/front/src/index.css
+++ b/front/src/index.css
@ -1,113 +1,143 @@
+/* Pretendard (CDN, 버전 고정 + dynamic-subset: 사용 글리프만 로드) */
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css');
@import "tailwindcss";

+/* ============================================================
+   디자인 토큰 (출처: design.md)
+   - 이 프로젝트는 다크모드 없음 → light 값만 사용 (.dark / @custom-variant 미사용)
+   - 차트(--chart-*) 미사용 → 정의하지 않음
+   ============================================================ */
 :root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+  color-scheme: light;

-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
+  --radius: 0.625rem; /* 10px (기준값) */

-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  /* --- 브랜드 메인 컬러 (blue, 숫자 스케일) --- */
+  --brand-500: #3b7de0;  /* light : 강조/포커스 등 밝은 변형 */
+  --brand-600: #0046b0;  /* base  : 기본 메인 컬러 (= --primary) */
+  --brand-700: #003380;  /* deep  : hover/pressed 등 톤다운 상태 */

-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
+  /* --- 색상 --- */
+  --background: #ffffff;
+  --background-rgb: 250, 250, 250; /* rgba() 조합용 raw 값 */
+  --foreground: #0a0a0a;
+
+  --card: #ffffff;
+  --card-foreground: #0a0a0a;
+  --popover: #ffffff;
+  --popover-foreground: #0a0a0a;
+
+  --primary: var(--brand-600);      /* 메인 컬러 = 브랜드 base(600) */
+  --primary-foreground: #fafafa;    /* primary 위 텍스트(흰색) */
+  --secondary: #f5f5f5;
+  --secondary-foreground: #171717;
+  --muted: #f5f5f5;
+  --muted-foreground: #737373;
+  --accent: #f5f5f5;
+  --accent-foreground: #171717;
+
+  --border: #e5e5e5;
+  --input: #e5e5e5;
+  --ring: var(--brand-500);         /* 포커스 링 = 브랜드 light(500) */
+
+  --destructive: #e7000b;
+  --success: #10b981;
+  --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 과 통일 */
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
-
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
+/* ============================================================
+   Tailwind 테마 매핑 (@theme inline)
+   토큰을 유틸로 노출: bg-*, text-*, border-*, rounded-*, font-* 등
+   ============================================================ */
+@theme inline {
+  /* 브랜드 메인 컬러 (bg-brand-600 / text-brand-700 / hover:bg-brand-700 ...) */
+  --color-brand-500: var(--brand-500);
+  --color-brand-600: var(--brand-600);
+  --color-brand-700: var(--brand-700);
+
+  /* 색상 */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --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-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+  --font-heading: var(--font-sans);
+
+  /* 모서리 반경 (--radius 의 배수) */
+  --radius-sm: calc(var(--radius) * 0.6);  /* 6px  */
+  --radius-md: calc(var(--radius) * 0.8);  /* 8px  */
+  --radius-lg: var(--radius);              /* 10px */
+  --radius-xl: calc(var(--radius) * 1.4);  /* 14px */
+  --radius-2xl: calc(var(--radius) * 1.8); /* 18px */
+  --radius-3xl: calc(var(--radius) * 2.2); /* 22px */
+  --radius-4xl: calc(var(--radius) * 2.6); /* 26px */
 }

+/* ============================================================
+   기본 스타일
+   ============================================================ */
+@layer base {
  body {
    margin: 0;
+    min-height: 100svh;
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    font-synthesis: none;
+  }
 }

-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
+/* 스크롤바 (webkit) — 6px, thumb=border / hover=muted-foreground */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
 }
-
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
+::-webkit-scrollbar-thumb {
+  background-color: var(--border);
+  border-radius: 9999px;
 }
-}
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
-  }
-}
-p {
-  margin: 0;
-}
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
+::-webkit-scrollbar-thumb:hover {
+  background-color: var(--muted-foreground);
 }