@cdp-frontend/design

공통 디자인 시스템 패키지입니다.
CSS 변수(디자인 토큰)와 Tailwind v4 테마 설정을 제공합니다.

구조

src/
  tokens/
    colors.css       ← 색상 변수
    typography.css   ← 폰트 관련 변수
    spacing.css      ← 간격 변수
    radius.css       ← 모서리 반경 변수
    shadow.css       ← 그림자 변수
    breakpoints.css  ← 반응형 브레이크포인트 변수
  theme/
    tailwind.css     ← Tailwind v4 @theme 블록 (토큰 → Tailwind 클래스 연결)
  reset.css          ← CSS 기본 초기화
  index.css          ← 진입점 (토큰 + reset)

설치

pnpm add @cdp-frontend/design --workspace

사용법

Agent 컨텍스트 문서

이 패키지는 런타임 CSS 토큰뿐 아니라, 개발 agent가 화면 작업 전에 참조할 디자인 규격 문서도 함께 배포합니다.

• node_modules/@cdp-frontend/design/design.md: 레이아웃 합성 규칙, 컴포넌트 variant 사용 의미
• node_modules/@cdp-frontend/design/figma-tokens.json: Figma 변수 경로와 CSS 토큰 매핑 참고용

패키지 exports도 열려 있으므로 도구에서 subpath를 해석할 수 있으면 @cdp-frontend/design/design.md 또는 @cdp-frontend/design/figma-tokens.json로 접근할 수 있습니다.

Tailwind v4 앱 (권장)

앱의 global CSS 파일에 아래 순서로 import합니다.

/* apps/your-app/src/index.css */
@import '@cdp-frontend/design'; /* CSS 변수 + reset */
@import '@cdp-frontend/design/tailwind'; /* Tailwind @theme 연결 */
@import 'tailwindcss'; /* Tailwind 유틸리티 클래스 생성 */

이후 Tailwind 클래스로 토큰을 사용할 수 있습니다.

<button className='bg-primary shadow-surface rounded-md text-white'>버튼</button>

CSS Modules (ui 패키지 등)

/* packages/ui/src/components/Button/Button.module.css */
@import '@cdp-frontend/design'; /* 진입점에서 index.css import */

.button {
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  box-shadow: var(--shadow-surface);
}

CSS Modules 환경에서는 var(--토큰명)으로 직접 참조합니다.

토큰 일부만 import

필요한 토큰만 선택적으로 가져올 수 있습니다.

@import '@cdp-frontend/design/tokens/colors';
@import '@cdp-frontend/design/tokens/typography';

토큰 목록

Colors

| 변수 | 값 | | --------------------------------------- | ------------- | | --color-primary | #3e71f0 | | --color-red | #ee4951 | | --color-green | #00a313 | | --color-grey-100 ~ --color-grey-900 | 회색 팔레트 | | --color-blue-100 ~ --color-blue-300 | 파란색 팔레트 |

Typography

| 변수 | 값 | Figma Text Style | | ----------------------------------------------- | ----------------------------------- | ---------------- | | --font-family-base | Inter, Noto Sans KR, system-ui, ... | — | | --font-size-xs | 0.75rem (12px) | text-xs | | --font-size-sm | 0.8125rem (13px) | text-sm | | --font-size-base | 0.9375rem (15px) | text-base | | --font-size-lg | 1.125rem (18px) | text-lg | | --font-size-xl | 1.5rem (24px) | text-xl | | --font-size-2xl | 1.875rem (30px) | text-2xl | | --line-height-tight ~ --line-height-relaxed | 1.25 ~ 1.75 | — | | --font-weight-regular | 400 | — | | --font-weight-medium | 500 | — | | --font-weight-semibold | 600 | — | | --font-weight-bold | 700 | — |

Spacing

--spacing-1 ~ --spacing-16 (0.25rem ~ 4rem)

Radius

--radius-sm ~ --radius-full (0.25rem ~ 9999px)

Shadow

--shadow-surface

Breakpoints

| 변수 | 값 | | ----------------- | -------- | | --breakpoint-xs | 360px | | --breakpoint-sm | 1024px |

토큰 추가 / 수정

1. src/tokens/ 하위 해당 파일에 CSS 변수를 추가합니다.
2. Tailwind 클래스로도 노출하려면 src/theme/tailwind.css의 @theme 블록에도 추가합니다.
3. 이 README의 토큰 목록을 업데이트합니다.