Featuring Design System

피처링 프로덕트를 위한 React 컴포넌트, 디자인 토큰, 아이콘

Overview

피처링의 프로덕트를 만드는 React 디자인 시스템입니다. CSS Cascade Layers 기반으로, !important 없이 컴포넌트 스타일을 오버라이드할 수 있습니다.

Packages

패키지	설명
`@featuring-corp/components`	UI 컴포넌트 28종 + Layout primitives 7종 + Legacy 26종 + CSS Preset
`@featuring-corp/design-tokens`	디자인 토큰 306개 (Global 219 + Semantic 87) — CSS 변수 + JS 객체
`@featuring-corp/icons`	시스템 아이콘 342개 + 서비스 아이콘 27개
`@featuring-corp/charts`	recharts 기반 차트 — `$` 토큰 문법 + 디자인 시스템 기본값

Quick Start

1. 설치

npm install @featuring-corp/design-tokens @featuring-corp/components @featuring-corp/icons

차트가 필요하다면 @featuring-corp/charts와 peer dependency recharts를 추가로 설치합니다.

npm install @featuring-corp/charts recharts

2. CSS Preset

// 앱 진입점 — reset, normalize, 브랜드 토큰, CSS Layer 순서를 한 번에 설정
import '@featuring-corp/components/preset/featuring';

3. 사용

import { Box, HStack, Typo, Button } from '@featuring-corp/components';
import { IconSearchOutline } from '@featuring-corp/icons';

function SearchSection() {
  return (
    <Box $css={{ padding: '$spacing-600', bgColor: '$background-1' }}>
      <Typo variant="$heading-3" render={<h2 />}>
        Search
      </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>
  );
}

차트도 동일한 $ 토큰 문법을 씁니다. fill/stroke에 $primary-50 같은 토큰을 바로 전달합니다.

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  ChartTooltip,
  ResponsiveContainer,
} from '@featuring-corp/charts';

const data = [
  { month: '1월', revenue: 4200 },
  { month: '2월', revenue: 3800 },
  { month: '3월', revenue: 5200 },
];

function RevenueChart() {
  return (
    <ResponsiveContainer width="100%" height={280}>
      <BarChart data={data}>
        <CartesianGrid />
        <XAxis dataKey="month" />
        <YAxis />
        <Bar dataKey="revenue" fill="$primary-50" />
        <ChartTooltip />
      </BarChart>
    </ResponsiveContainer>
  );
}

핵심 특징

$css Prop

토큰 기반 스타일링 API. 반응형과 인터랙션 조건을 객체 하나로 선언합니다.

<Box $css={{
  padding: { mobile: '$spacing-300', desktop: '$spacing-600' },
  bgColor: { default: '$background-1', hover: '$background-2' },
  borderRadius: '$radius-200',
}}>
  Responsive & Interactive
</Box>

$css Prop 자세히 보기

3-Layer Token Architecture

레이어	역할	예시
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 자세히 보기

Polymorphic Rendering

render prop으로 시맨틱 HTML을 유지하면서 디자인 시스템 스타일링을 적용합니다.

<Box render={<section />} $css={{ padding: '$spacing-400' }}>
  <Typo render={<h1 />} variant="$heading-1">Title</Typo>
  <Typo render={<p />} variant="$body-1">Description</Typo>
</Box>

Multi-Brand Theming

Preset import를 바꾸면 Featuring ↔ DataEffect 테마가 전환됩니다.

// Featuring 테마
import '@featuring-corp/components/preset/featuring';

// DataEffect 테마
import '@featuring-corp/components/preset/dataEffect';

Theming 자세히 보기

문서 구조

섹션	내용
Guide	설치, 프레임워크 설정, 설계 원칙, $css prop, 반응형, 테마
Design Tokens	색상, 간격, 타이포그래피, 반지름, 그림자
Components	Layout, UI 컴포넌트, Legacy (Core*), Utils
Charts	recharts 래퍼 — Bar/Line/Area/Pie 외 9종 + Building Blocks
Icons	시스템 아이콘, 서비스 아이콘

On this page