75 lines
1.9 KiB
Markdown
75 lines
1.9 KiB
Markdown
|
# AccordionBasic 컴포넌트
|
||
|
|
|
||
|
|
접을 수 있는 콘텐츠 섹션을 제공하는 아코디언 컴포넌트입니다.
|
||
|
|
|
||
|
|
## 컴포넌트 정보
|
||
|
|
|
||
|
|
- **ID**: `accordion-basic`
|
||
|
|
- **카테고리**: `display`
|
||
|
|
- **웹타입**: `text`
|
||
|
|
- **기본 크기**: 300x200
|
||
|
|
|
||
|
|
## 주요 기능
|
||
|
|
|
||
|
|
- **다중 아이템 지원**: 여러 개의 접을 수 있는 섹션 제공
|
||
|
|
- **단일/다중 선택**: 한 번에 하나만 열거나 여러 개를 동시에 열 수 있음
|
||
|
|
- **기본값 설정**: 초기에 열려있을 아이템 지정 가능
|
||
|
|
- **완전 접기**: 모든 아이템을 닫을 수 있는 옵션
|
||
|
|
- **동적 아이템 관리**: 상세설정에서 아이템 추가/삭제/편집 가능
|
||
|
|
|
||
|
|
## 설정 옵션
|
||
|
|
|
||
|
|
### 기본 설정
|
||
|
|
|
||
|
|
- `type`: 선택 타입 ("single" | "multiple")
|
||
|
|
- `collapsible`: 모든 아이템 접기 가능 여부
|
||
|
|
- `defaultValue`: 기본으로 열린 아이템 ID
|
||
|
|
- `disabled`: 비활성화 상태
|
||
|
|
|
||
|
|
### 아이템 설정
|
||
|
|
|
||
|
|
각 아이템은 다음 속성을 가집니다:
|
||
|
|
|
||
|
|
- `id`: 고유 식별자
|
||
|
|
- `title`: 아이템 제목 (헤더에 표시)
|
||
|
|
- `content`: 아이템 내용 (접었다 펼 수 있는 부분)
|
||
|
|
- `defaultOpen`: 기본으로 열림 상태
|
||
|
|
|
||
|
|
## 사용 예시
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
// 기본 사용
|
||
|
|
<AccordionBasic
|
||
|
|
items={[
|
||
|
|
{
|
||
|
|
id: "item-1",
|
||
|
|
title: "제품 정보",
|
||
|
|
content: "제품에 대한 상세 정보...",
|
||
|
|
defaultOpen: true,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "item-2",
|
||
|
|
title: "배송 정보",
|
||
|
|
content: "배송에 대한 상세 정보...",
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
type="single"
|
||
|
|
collapsible={true}
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 이벤트
|
||
|
|
|
||
|
|
- `onValueChange`: 아이템 선택 상태가 변경될 때 호출
|
||
|
|
|
||
|
|
## 스타일링
|
||
|
|
|
||
|
|
- shadcn/ui의 Accordion 컴포넌트를 기반으로 구현
|
||
|
|
- 기본 스타일과 함께 커스텀 스타일링 지원
|
||
|
|
- 반응형 디자인 지원
|
||
|
|
|
||
|
|
## 참고 자료
|
||
|
|
|
||
|
|
- [shadcn/ui Accordion](https://ui.shadcn.com/docs/components/accordion)
|
||
|
|
- [Radix UI Accordion](https://www.radix-ui.com/primitives/docs/components/accordion)
|