# Component/CategorySelector

카테고리를 선택할 때 사용하며 최대 네 단계까지의 하위 카테고리를 선택할 수 있습니다.

## Usage Notes

### Legacy 방식 (deprecated)
`categoriesByLevels` prop을 사용하는 방식

```typescript
const categoriesByLevels = [
  [
    {
      key: '1',
      label: '전자제품',
      name: '전자제품',
      parentKey: '',
      level: 0,
      childrenKeys: ['1-1', '1-2']
    }
  ],
  [
    {
      key: '1-1',
      label: '전자제품/컴퓨터',
      name: '컴퓨터',
      parentKey: '1',
      level: 1
    },
    {
      key: '1-2',
      label: '전자제품/스마트폰',
      name: '스마트폰',
      parentKey: '1',
      level: 1
    }
  ],
  ...
];

<CategorySelector
  categoriesByLevels={categoriesByLevels}
  selectedKeys={selectedKeys}
  onSelectedKeysChange={handleChange}
/>
```

### 새로운 방식 (권장)
`items` prop을 사용하는 트리 구조 방식

```typescript
const items = [
  {
    id: '1',
    name: '전자제품',
    children: [
      {
        id: '1-1',
        name: '컴퓨터',
        children: [...],
      },
      {
        id: '1-2',
        name: '스마트폰',
        children: [...],
      },
    ],
  },
];

<CategorySelector
  items={items}
  selectedKeys={selectedKeys}
  onSelectedKeysChange={handleChange}
/>
```

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `categoriesByLevels` | `Category[][] | undefined` | No |  | 레벨별 카테고리 데이터 |
| `items` | `CategoryEntry[] | undefined` | No |  | 트리 구조 카테고리 데이터 |
| `className` | `string | undefined` | No |  |  |
| `selectedKeys` | `string[]` | Yes |  |  |
| `onSelectedKeysChange` | `(selectedKeys: string[], isLeaf?: boolean | undefined) => void` | Yes |  | 선택값 변경 이벤트 |
| `multiple` | `boolean | undefined` | No | false | 체크박스 사용여부 true일 경우 멀티 셀렉트 가능 |
| `disabled` | `boolean | undefined` | No | false |  |
| `width` | `number | undefined` | No | 240 | 각 ListItem의 너비 |
| `height` | `number | undefined` | No | 332 | 각 List의 높이 |