# Component/Menu

사이드 내비게이션의 메뉴를 구성합니다. MenuItem, MenuGroup, MenuSection을 합성하고 asChild로 라우터 링크를 사용할 수 있습니다.

## Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `selected` | `string | undefined` | No |  | 선택된 메뉴 ID |
| `onChange` | `((id: string | undefined) => void) | undefined` | No |  | 메뉴 선택 시 호출되는 함수 |
| `onGroupOpenChange` | `((id: string | undefined) => void) | undefined` | No |  | MenuGroup 서브 메뉴 open/close시 이벤트를 전달합니다. |
| `accordion` | `boolean | undefined` | No | false | 한 번에 하나의 MenuGroup만 열리게 합니다. |
| `collapsible` | `boolean | undefined` | No | false | 열려 있는 MenuGroup을 다시 눌러 닫을 수 있는지 여부입니다. accordion일 때만 적용되며, 기본 동작(다중 열림)에서는 항상 토글되므로 무시됩니다. |
| `dense` | `boolean | undefined` | No | true |  |


## Subcomponents


### MenuGroup



#### Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `label` | `string` | Yes |  |  |
| `onClick` | `(() => void) | undefined` | No |  | 메뉴 그룹을 열거나 닫을 때 호출되는 함수 |
| `id` | `string` | Yes |  |  |
| `leftIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  |  |
| `rightContent` | `ReactNode` | No |  |  |



### MenuItem



#### Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `asChild` | `boolean | undefined` | No | false | 단일 ReactElement를 메뉴 아이템 루트로 합성합니다. |
| `label` | `string | undefined` | No |  |  |
| `id` | `string` | Yes |  |  |
| `variant` | `undefined "default" "sub"` | No | default | 메뉴 깊이에 따른 시각적 형태 |
| `leftIcon` | `ReactElement<IconProps, string | JSXElementConstructor<any>> | undefined` | No |  |  |
| `rightContent` | `ReactNode` | No |  |  |



### MenuSection



#### Props


| Name | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `label` | `string` | Yes |  |  |
| `divider` | `boolean | undefined` | No | false | 섹션 라벨 우측에 구분선을 표시할지 여부 |