# 시작하기

## 설치

```bash
# npm
npm install @croquiscom/pds @emotion/react @emotion/styled
# yarn
yarn add @croquiscom/pds @emotion/react @emotion/styled
```

**필수 의존성:**

-   React 18+ 또는 19+
-   @emotion/react ^11.4.0
-   @emotion/styled ^11.3.0

---

## 기본 사용법

Provider 없이 바로 컴포넌트를 사용할 수 있습니다:

```tsx
import { Button, DataTable, Modal } from '@croquiscom/pds';
import { semantic_colors, spacing } from '@croquiscom/pds';
import styled from '@emotion/styled';
// 컴포넌트 사용
<Button kind="primary" size="medium">
  저장
</Button>
// 스타일 토큰 사용
const Container = styled.div`
  color: ${semantic_colors.content.primary};
  padding: ${spacing.spacing_4};
`;
```

---

## Provider 설정 (선택사항)

전역 기본값이 필요한 경우에만 Provider를 사용합니다. **Provider 없이도 모든 컴포넌트가 정상 동작합니다.**

```tsx
import { Provider } from '@croquiscom/pds';
function App() {
  return (
    <Provider
      components={{
        modal: { fill: true, dense: false },
        pagination: { siblingCount: 2 },
        section: { responsive: 'auto' },
      }}
    >
      <YourApp />
    </Provider>
  );
}
```

### Locale 설정

다국어 지원이 필요한 경우:

```tsx
import { Provider } from '@croquiscom/pds';
import { en } from '@croquiscom/pds/locales/en';
<Provider locale={en}>
  <App />
</Provider>
```

### Context 범위 밖에서 사용

React Portal 등 context 범위 밖에서 PDS를 사용할 경우 `setContextConfig`로 직접 설정합니다:

```tsx
import { setContextConfig } from '@croquiscom/pds';
import { ja } from '@croquiscom/pds/locales/ja';
setContextConfig({ locale: ja });
```