Getting Started

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

Featuring Design System

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

패키지 구성

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

패키지	설명
`@featuring-corp/design-tokens`	디자인 토큰 306개 — 색상, 간격, 타이포그래피, 반지름, 그림자
`@featuring-corp/components`	React UI 컴포넌트 35종 + Legacy 26종 — Layout, Form, Feedback, Navigation
`@featuring-corp/icons`	시스템 아이콘 342개 + 서비스 아이콘 27개
`@featuring-corp/charts`	recharts 기반 차트 래퍼 — `$` 토큰 문법 + 디자인 시스템 기본값

패키지 의존성

design-tokens ← icons (독립) ← components (둘 다 의존)
              ← charts (recharts peer + design-tokens)

design-tokens는 의존성이 없고, icons는 독립적이며, components가 두 패키지를 사용합니다. charts는 design-tokens와 peer dependency recharts ^3.8.0을 요구합니다.

핵심 개념

$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