Vite

Vite 프로젝트에서 Featuring Design System을 사용하는 방법을 안내합니다. Vite는 별도의 추가 설정 없이 바로 사용할 수 있습니다.

설정

1. 패키지 설치

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

2. CSS Preset Import

앱 진입점에서 Preset CSS를 import합니다. Reset, Normalize, 브랜드 토큰, CSS Layer 순서가 한 줄로 설정됩니다.

src/main.tsx

import '@featuring-corp/components/preset/featuring';

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

3. 사용 시작

src/App.tsx

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

function App() {
  return (
    <Box $css={{ padding: '$spacing-600', bgColor: '$background-1' }}>
      <VStack $css={{ gap: '$spacing-400', maxWidth: '640px', marginX: 'auto' }}>
        <Typo variant="$heading-2" render={<h1 />}>
          Hello, Featuring!
        </Typo>
        <HStack $css={{ gap: '$spacing-300' }}>
          <Button.Root variant="primary" size="md">
            <Button.Icon><IconHomeFilled /></Button.Icon>
            <Button.Text>Home</Button.Text>
          </Button.Root>
          <Button.Root variant="secondary" size="md">
            <Button.Text>Learn More</Button.Text>
          </Button.Root>
        </HStack>
      </VStack>
    </Box>
  );
}

export default App;

Vite 설정 (참고)

기본 Vite 설정으로 충분하지만, React Compiler를 사용하려면 다음과 같이 설정합니다:

vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['babel-plugin-react-compiler']],
      },
    }),
  ],
});

TypeScript 설정 (참고)

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "skipLibCheck": true
  }
}

참고: Vite는 @vanilla-extract/next-plugin 같은 추가 플러그인이 필요하지 않습니다. 빌드된 CSS가 이미 정적 파일로 제공되기 때문입니다.

설정

1. 패키지 설치

2. CSS Preset Import

3. 사용 시작

Vite 설정 (참고)

TypeScript 설정 (참고)

On this page