Getting Started

Featuring Design System 시작하기 — 패키지 구조, 핵심 개념, 기술 스택

Featuring Design System

피처링의 모든 프로덕트에서 일관된 사용자 경험을 만드는 React 디자인 시스템입니다. 디자이너와 개발자가 같은 토큰으로 이야기합니다.

패키지 구성

패키지 다섯 개로 나뉩니다. 필요한 것만 골라 쓰세요.

패키지	설명
`@featuring-corp/design-tokens`	디자인 토큰 306개 — 색상, 간격, 타이포그래피, 반지름, 그림자
`@featuring-corp/components`	React UI 컴포넌트 37종 + Legacy 26종 — Layout, Form, Feedback, Navigation
`@featuring-corp/icons`	시스템 아이콘 349개 + 서비스 아이콘 27개
`@featuring-corp/charts`	recharts 기반 차트 래퍼 — `$` 토큰 문법 + 디자인 시스템 기본값
`@featuring-corp/data-grid`	TanStack Table 위 헤드리스 데이터 그리드 — 셀 선택·인라인 편집·클립보드·셀 병합 (peer: `@tanstack/react-table`)

패키지 의존성

design-tokens ← icons (독립) ← components (둘 다 의존)
              ← charts (recharts peer + design-tokens)
              ← data-grid (@tanstack/react-table peer + design-tokens·icons)

design-tokens는 의존성이 없고, icons는 독립적이며, components가 두 패키지를 사용합니다. charts는 design-tokens와 peer dependency recharts ^3.8.0을 요구합니다. data-grid는 design-tokens·icons에 얹혀 동작하고, peer로 @tanstack/react-table ^8.21.3을 요구합니다.

핵심 개념

$css Prop

레이아웃 컴포넌트(Box, Flex, HStack, VStack, Center, Grid, Typo)의 토큰 기반 스타일링 API.

import { Box } from '@featuring-corp/components';

<Box $css={{
  padding: '$spacing-400',
  bgColor: { default: '$background-1', hover: '$background-2' },
  borderRadius: '$radius-200',
}}>
  Token-based styling
</Box>

토큰 값($spacing-400)과 임의 CSS 값(100%, 16px) 모두 지원하며, 반응형·인터랙티브 조건을 네이티브로 처리합니다.

자세한 내용: $css Prop

반응형 디자인

레이아웃 속성에 객체를 전달하면 브레이크포인트별로 다른 값이 적용됩니다.

<Box $css={{
  padding: { mobile: '$spacing-300', desktop: '$spacing-600' },
  display: { mobile: 'block', tablet: 'flex' },
}}>
  Responsive content
</Box>

4단계 브레이크포인트: mobile(0px) → tablet(768px) → desktop(1024px) → wide(1440px)

자세한 내용: Responsive Design

render Prop

모든 레이아웃 컴포넌트는 render prop으로 렌더링할 HTML 요소를 바꿉니다.

import { Box, Typo } from '@featuring-corp/components';

// section으로 렌더링
<Box render={<section />} $css={{ padding: '$spacing-400' }}>
  Content
</Box>

// h1으로 렌더링
<Typo render={<h1 />} variant="$heading-5">
  Page Title
</Typo>

3-Layer Token System

레이어	역할	예시
Global	브랜드가 정의한 원시 값 (Color Set 포함)	`--global-colors-primary-60`, `--global-spacing-400`
Semantic	UI 용도에 매핑	`--semantic-color-text-1`, `--semantic-color-background-1`
Component	컴포넌트별 디자인 토큰	Button의 `primary.default`, Tag의 `red.hover`

자세한 내용: Design Philosophy

브랜드 테마

두 브랜드 테마를 지원합니다. CSS 파일 교체만으로 전체 테마가 전환됩니다.

테마	Primary 색상	CSS 파일
Featuring	`#5e51ff` (`primary-60`, 보라색)	`featuring.css`
DataEffect	`#0065ff` (`primary-60`, 파란색)	`dataEffect.css`

기술 스택

기술	역할
React 18+	UI 렌더링
TypeScript	타입 안전성
Vanilla Extract	Zero-runtime CSS-in-JS
Rainbow Sprinkles	`$css` prop — 토큰 기반 atomic CSS
Base UI	Polymorphic rendering (`useRender`, `mergeProps`)

빠른 시작

// 1. CSS import (앱 진입점)
import '@featuring-corp/components/preset/featuring';

// 2. 컴포넌트 사용
import { Box, HStack, Typo, Button } from '@featuring-corp/components';
import { IconSearchOutline } from '@featuring-corp/icons';

function App() {
  return (
    <Box $css={{ padding: '$spacing-600' }}>
      <Typo variant="$heading-3" render={<h1 />}>
        Welcome
      </Typo>
      <HStack $css={{ gap: '$spacing-300', marginTop: '$spacing-400' }}>
        <Button.Root variant="primary" size="md">
          <Button.Icon><IconSearchOutline /></Button.Icon>
          <Button.Text>Search</Button.Text>
        </Button.Root>
      </HStack>
    </Box>
  );
}

다음: Installation

On this page