Beaubrain Design System

Beaubrain 웹 제품을 위한 리액트 기반 디자인 시스템 라이브러리입니다. 일관된 사용자 경험을 제공하고 생산성을 높이기 위해 재사용 가능한 UI 컴포넌트와 스타일 토큰을 제공합니다.

디자인 시안

피그마

설치

패키지 매니저를 사용하여 설치할 수 있습니다.

# pnpm (권장)
pnpm add @beaubrain/web-design-system

# npm
npm install @beaubrain/web-design-system

# yarn
yarn add @beaubrain/web-design-system

사용 방법

1. 스타일 시트 불러오기

프로젝트의 진입점(예: App.tsx 또는 main.tsx)에서 스타일 파일을 import 해야 합니다.

import '@beaubrain/web-design-system/dist/index.css';

2. 컴포넌트 사용하기

import { Button, Text, Flex } from '@beaubrain/web-design-system';

function App() {
  return (
    <Flex direction="column" gap="4">
      <Text size="5" weight="bold">
        Hello, Beaubrain!
      </Text>
      <Button variant="fill-primary" onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
    </Flex>
  );
}

제공되는 컴포넌트

현재 제공되는 주요 컴포넌트는 다음과 같습니다.

• Layout: Flex, Outlet, Base
• Form & Action: Button
• Typography: Text
• Feedback: Spinner
• Utils: VisuallyHidden

자세한 사용법과 속성은 Storybook 문서를 참고하세요.

개발 환경 설정

의존성 설치

pnpm install

Storybook 실행 (개발 서버)

컴포넌트를 개발하고 테스트하기 위해 Storybook을 실행합니다.

pnpm dev
# 또는
pnpm storybook

새로운 컴포넌트 생성 (Plop)

터미널 명령어로 컴포넌트 스캐폴딩을 생성할 수 있습니다.

pnpm template

빌드

pnpm build

테스트

pnpm test