Accordion
제목 클릭으로 콘텐츠를 펼치거나 접을 수 있는 아코디언 컴포넌트
개요
Accordion 컴포넌트는 Header 영역 클릭을 통해 콘텐츠 영역을 펼치거나 접을 수 있는 UI를 제공합니다. 단일/다중 펼침, 기본 펼침 상태, 제어 모드 등을 지원합니다.
주요 특징
- ✅ 펼치기/접기: Header 클릭으로 콘텐츠 토글
- ✅ 접기/펼치기 아이콘: 상태에 따라 아이콘 방향 자동 변경
- ✅ 단일/다중 펼침: 기본 단일 펼침, multiple prop으로 다중 허용
- ✅ 기본 펼침 설정: defaultValue로 초기 펼침 상태 지정
- ✅ 제어 모드: value/onValueChange로 상태를 프로그래밍적으로 제어
- ✅ 디자인 토큰: 테마 커스터마이징 지원
사용 예시
기본 사용
Preview
다중 펼침
Preview
기본 펼침 상태 설정
Preview
이 항목은 defaultValue로 인해 기본으로 열려 있습니다.
제어 모드 (상태 초기화)
Preview
value/onValueChange로 외부에서 상태를 제어합니다.
API Reference
Accordion
| Prop | Type | Default | Description |
|---|---|---|---|
multiple | boolean | false | 다중 패널 동시 펼침 허용 |
defaultValue | string[] | [] | 초기 펼침 패널 value 배열 |
value | string[] | - | 제어 모드 펼침 상태 |
className | string | - | 추가 CSS 클래스 |
Events (Accordion)
| Event | Type | Description |
|---|---|---|
onValueChange | (value: string[]) => void | 펼침 상태 변경 |
AccordionItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | auto | 패널 고유 식별자 |
className | string | - | 추가 CSS 클래스 |
AccordionTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Header 텍스트 |
className | string | - | 추가 CSS 클래스 |
AccordionContent
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | 콘텐츠 영역 |
className | string | - | 추가 CSS 클래스 |
접근성
키보드 내비게이션
- Enter / Space: 포커스된 패널 펼치기/접기
- Tab: 다음 Header로 포커스 이동
권장 사항
- ✅ 각 Header에 콘텐츠를 예측할 수 있는 명확한 제목 사용
- ✅ 단일 펼침과 다중 펼침을 업무 흐름에 맞게 선택
- ✅ 초기 펼침 상태를 화면 목적에 맞게 설정
관련 컴포넌트
- Collapsible: 단일 콘텐츠 펼치기/접기
- Tabs: 탭 기반 콘텐츠 전환
Last updated on