기본 사용법

```tsx 기본 사용 ```

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary"`	`"default"`	스타일 변형
`size`	`"sm" \| "md" \| "lg"`	`"md"`	크기
`disabled`	`boolean`	`false`	비활성화
`onClick`	`() => void`	-	클릭 핸들러

예제

Variants

```tsx Default Secondary ```

Sizes

```tsx Small Medium Large ```

With Icon

```tsx With Icon ```

접근성

키보드: Tab으로 포커스, Enter/Space로 활성화
ARIA: 적절한 role과 aria-* 속성 자동 적용
포커스: focus-visible 스타일 제공

관련 컴포넌트


---

## Composition 컴포넌트 템플릿

```markdown
# Sidebar

접을 수 있는 사이드바 컴포넌트

## 설치

\`\`\`tsx
import { Sidebar } from "@pf-dev/ui";
\`\`\`

## 기본 사용법

\`\`\`tsx
<Sidebar defaultCollapsed={false}>
<Sidebar.Header title="Dashboard" />
<Sidebar.Content>
<Sidebar.Section label="메뉴">
<Sidebar.Item icon={<HomeIcon />} active>홈</Sidebar.Item>
<Sidebar.Item icon={<SettingsIcon />}>설정</Sidebar.Item>
</Sidebar.Section>
</Sidebar.Content>
<Sidebar.Footer>
<Sidebar.Item icon={<LogOutIcon />}>로그아웃</Sidebar.Item>
</Sidebar.Footer>
</Sidebar>
\`\`\`

## 서브 컴포넌트

### Sidebar (Root)

| Prop                | Type                           | Default | Description           |
| ------------------- | ------------------------------ | ------- | --------------------- |
| `defaultCollapsed`  | `boolean`                      | `false` | 초기 접힘 상태        |
| `collapsed`         | `boolean`                      | -       | 제어 모드용 접힘 상태 |
| `onCollapsedChange` | `(collapsed: boolean) => void` | -       | 접힘 상태 변경 콜백   |
| `width`             | `number`                       | `240`   | 펼친 상태 너비        |
| `collapsedWidth`    | `number`                       | `64`    | 접힌 상태 너비        |

### Sidebar.Header

| Prop    | Type        | Default | Description |
| ------- | ----------- | ------- | ----------- |
| `title` | `string`    | -       | 헤더 제목   |
| `logo`  | `ReactNode` | -       | 로고 이미지 |

### Sidebar.Item

| Prop      | Type         | Default | Description |
| --------- | ------------ | ------- | ----------- |
| `icon`    | `ReactNode`  | -       | 아이콘      |
| `active`  | `boolean`    | `false` | 활성 상태   |
| `badge`   | `number`     | -       | 뱃지 숫자   |
| `onClick` | `() => void` | -       | 클릭 핸들러 |

### Sidebar.Section

| Prop          | Type      | Default | Description    |
| ------------- | --------- | ------- | -------------- |
| `label`       | `string`  | -       | 섹션 레이블    |
| `collapsible` | `boolean` | `false` | 접을 수 있는지 |

### Sidebar.CollapseButton

| Prop       | Type      | Default | Description   |
| ---------- | --------- | ------- | ------------- |
| `iconOnly` | `boolean` | `false` | 아이콘만 표시 |

## Context Hook

\`\`\`tsx
import { useSidebarContext } from "@pf-dev/ui";

function CustomItem() {
const { collapsed, toggleCollapse } = useSidebarContext();

return (
<button onClick={toggleCollapse}>
{collapsed ? "펼치기" : "접기"}
</button>
);
}
\`\`\`

## 제어 모드

\`\`\`tsx
function App() {
const [collapsed, setCollapsed] = useState(false);

return (
<Sidebar
      collapsed={collapsed}
      onCollapsedChange={setCollapsed}
    >
{/_ ... _/}
</Sidebar>
);
}
\`\`\`

## 스타일 커스터마이징

\`\`\`tsx
<Sidebar className="bg-gray-900">
<Sidebar.Item className="hover:bg-gray-800">
커스텀 스타일
</Sidebar.Item>
</Sidebar>
\`\`\`

기본 사용법

Props

예제

Variants

Sizes

With Icon

접근성

관련 컴포넌트

문서 작성 체크리스트

pf-doc-component

PF 컴포넌트 문서 생성기

README 템플릿

More from pluxity/pf-frontend

cesium-expert

streaming-expert

pf-perf

pf-a11y

pf-test-store

pf-code-review