@aivsw/design-system

AiV Design System

AiV Design System은 React 프로젝트에서 일관된 스타일과 UI 컴포넌트를 제공하기 위한 디자인 시스템입니다.

설치

디자인 시스템을 설치하려면 npm 또는 yarn을 사용하세요.

npm install @aivsw/design-system

또는

yarn add @aivsw/design-system

사용법

디자인 시스템을 사용하여 프로젝트의 스타일과 폰트를 설정하는 방법을 설명합니다.

1. CSS 파일을 프로젝트 최상단에서 import

먼저, 스타일과 폰트가 적용되도록 프로젝트의 최상단에서 CSS 파일을 import해야 합니다. 이는 ADSThemeProvider를 통해 자동으로 스타일과 폰트가 적용되지 않기 때문입니다.

// index.js 또는 App.js의 최상단에 추가
import '@aivsw/design-system/dist/assets/index.css';

2. Provider 설정

그 다음, 디자인 시스템의 ADSThemeProvider를 사용하여 테마를 설정합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { ADSThemeProvider } from '@aivsw/design-system';

const App = () => (
  <ADSThemeProvider defaultTheme="light">
    <div>
      <h1>My App</h1>
      <p>This is a sample application with custom theme.</p>
    </div>
  </ADSThemeProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

3. 컴포넌트 사용

ADSThemeProvider 하위 컴포넌트에서 design-system의 컴포넌트를 사용할 수 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import { ADSThemeProvider, Button } from '@aivsw/design-system';

const App = () => (
  <ADSThemeProvider defaultTheme="light">
    <div>
      <Button>Click Me</Button>
    </div>
  </ADSThemeProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

주요 기능

- 글로벌 스타일: 기본적인 리셋 스타일과 폰트 설정을 포함합니다.
- 테마 제공: Light/Dark 테마 지원.
- 컴포넌트: Button, Input, Modal 등 다양한 UI 컴포넌트를 제공합니다.
- 유틸리티: 자주 사용하는 유틸리티 클래스 및 함수를 제공합니다.

예제

디자인 시스템의 컴포넌트를 사용하는 예제를 제공합니다.

Button 컴포넌트

import React from 'react';
import { Button } from '@aivsw/design-system';

const Example = () => (
  <div>
    <Button>Click Me</Button>
  </div>
);