# ssg-ui

## Introduction 😊

- ssg-ui/components는 React, chakra-ui 기반의 ssg-ui 디자인 시스템 컴포넌트 라이
  브러리입니다.
- 유연하고 확장성이 있습니다.
- WAI_ARIA 웹접근성 지침을 준수합니다.
- 다크모드를 지원합니다.

## Installing SSG UI Components 🎉

```sh
$ yarn add @ssg-ui/components framer-motion @emotion/react @emotion/styled
# or
$ npm install --save @ssg-ui/components framer-motion @emotion/react @emotion/styled
```

## Getting Started 👏

ssg ui 컴포넌트를 사용하기 위해, 아래의 순서를 따라해주세요. To start using the
components, please follow these steps:

1. **@ssg-ui/components**의 `SsgThemeProvider, ColorModeProvider`로 애플리케이션
   을 래핑해주세요.

```jsx
import { ThemeProvider, ColorModeProvider } from "@ssg-ui/components";

const App = ({ children }) => (
  <SsgThemeProvider>
    <ColorModeProvider>{children}</ColorModeProvider>
  </SsgThemeProvider>
);
```

`ColorModeProvider`는 컴포넌트에 라이트 모드와 컬러 모드를 제공하는 컨텍스트 프
로바이더입니다. 시스템의 컬러 모드를 사용할 수도 있고, 커스텀 컬러 모드를 사용할
수도 있습니다. 자세한 사용법은 chakra-ui 공식문서
(https://chakra-ui.com/docs/features/color-mode)를 참조해주시기 바랍니다.

2. 이제는 컴포넌트를 사용하실 수 있습니다.

```jsx
import { Button } from "@ssg-ui/components";

const MyComponent = () => <Button>SSG-UI 버튼을 사용합니다.</Button>;
```