# 시작하기

## 설치

```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

---

## 네이밍 전환 중입니다

PDS 2.0 네이밍 전환으로 일부 prop 이름이 바뀌었습니다(예: Button `kind` → `variant`·`color`, Modal `opened` → `open`). `@croquiscom/pds` 는 옛 이름과 새 이름을 둘 다 받고, 이 문서의 예시는 모두 새 이름 기준입니다.

-   새 코드는 새 이름을 씁니다.
-   기존 코드의 옛 이름도 동작하지만 deprecated 이고, 개발 모드에서 `[PDS deprecated] Modal.opened → open` 같은 경고가 납니다.
-   한 태그에 옛 이름과 새 이름이 섞여도 됩니다. 같은 뜻의 두 prop 이 같이 오면 새 이름이 이깁니다.
-   한꺼번에 바꾸려면 `@croquiscom/eslint-plugin-pds` 의 `no-deprecated` 규칙을 `--fix` 로 돌립니다. import 경로는 바뀌지 않습니다.

전환이 끝나면(메이저) 옛 이름은 빠집니다.

---

## 기본 사용법

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

```tsx
import { Button, DataTable, Modal } from '@croquiscom/pds';
import { semantic_colors, spacing } from '@croquiscom/pds';
import styled from '@emotion/styled';
// 컴포넌트 사용
<Button variant="filled" color="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 });
```