# ComponentName

간단한 설명 (한 줄)

## 설치

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

## 기본 사용법

\`\`\`tsx
<ComponentName>기본 사용</ComponentName>
\`\`\`

## Props

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

## 예제

### Variants

\`\`\`tsx
<ComponentName variant="default">Default</ComponentName>
<ComponentName variant="secondary">Secondary</ComponentName>
\`\`\`

### Sizes

\`\`\`tsx
<ComponentName size="sm">Small</ComponentName>
<ComponentName size="md">Medium</ComponentName>
<ComponentName size="lg">Large</ComponentName>
\`\`\`

### With Icon

\`\`\`tsx
<ComponentName>
  <Icon className="mr-2" />
  With Icon
</ComponentName>
\`\`\`

## 접근성

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

## 관련 컴포넌트

- [RelatedComponent1](../RelatedComponent1/README.md)
- [RelatedComponent2](../RelatedComponent2/README.md)

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