1a60177fe4
- admin/screenMng, dataflow 페이지에 tableMng 레퍼런스 레이아웃 적용 - admin/standards 페이지 JSX 괄호 문제 수정 - 전체 관리자 페이지 UI 일관성 향상 - bg-gray-50 배경, container 구조, 통일된 제목 스타일 적용 |
||
|---|---|---|
| .. | ||
| AccordionBasicComponent.tsx | ||
| AccordionBasicConfigPanel.tsx | ||
| AccordionBasicRenderer.tsx | ||
| README.md | ||
| index.ts | ||
| types.ts | ||
README.md
AccordionBasic 컴포넌트
접을 수 있는 콘텐츠 섹션을 제공하는 아코디언 컴포넌트입니다.
컴포넌트 정보
- ID:
accordion-basic - 카테고리:
display - 웹타입:
text - 기본 크기: 300x200
주요 기능
- 다중 아이템 지원: 여러 개의 접을 수 있는 섹션 제공
- 단일/다중 선택: 한 번에 하나만 열거나 여러 개를 동시에 열 수 있음
- 기본값 설정: 초기에 열려있을 아이템 지정 가능
- 완전 접기: 모든 아이템을 닫을 수 있는 옵션
- 동적 아이템 관리: 상세설정에서 아이템 추가/삭제/편집 가능
설정 옵션
기본 설정
type: 선택 타입 ("single" | "multiple")collapsible: 모든 아이템 접기 가능 여부defaultValue: 기본으로 열린 아이템 IDdisabled: 비활성화 상태
아이템 설정
각 아이템은 다음 속성을 가집니다:
id: 고유 식별자title: 아이템 제목 (헤더에 표시)content: 아이템 내용 (접었다 펼 수 있는 부분)defaultOpen: 기본으로 열림 상태
사용 예시
// 기본 사용
<AccordionBasic
items={[
{
id: "item-1",
title: "제품 정보",
content: "제품에 대한 상세 정보...",
defaultOpen: true,
},
{
id: "item-2",
title: "배송 정보",
content: "배송에 대한 상세 정보...",
},
]}
type="single"
collapsible={true}
/>
이벤트
onValueChange: 아이템 선택 상태가 변경될 때 호출
스타일링
- shadcn/ui의 Accordion 컴포넌트를 기반으로 구현
- 기본 스타일과 함께 커스텀 스타일링 지원
- 반응형 디자인 지원