ERP-node/frontend/lib/registry/components/accordion-basic

AccordionBasic 컴포넌트

접을 수 있는 콘텐츠 섹션을 제공하는 아코디언 컴포넌트입니다.

컴포넌트 정보

• ID: accordion-basic
• 카테고리: display
• 웹타입: text
• 기본 크기: 300x200

주요 기능

• 다중 아이템 지원: 여러 개의 접을 수 있는 섹션 제공
• 단일/다중 선택: 한 번에 하나만 열거나 여러 개를 동시에 열 수 있음
• 기본값 설정: 초기에 열려있을 아이템 지정 가능
• 완전 접기: 모든 아이템을 닫을 수 있는 옵션
• 동적 아이템 관리: 상세설정에서 아이템 추가/삭제/편집 가능

설정 옵션

기본 설정

• type: 선택 타입 ("single" | "multiple")
• collapsible: 모든 아이템 접기 가능 여부
• defaultValue: 기본으로 열린 아이템 ID
• disabled: 비활성화 상태

아이템 설정

각 아이템은 다음 속성을 가집니다:

• 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 컴포넌트를 기반으로 구현
• 기본 스타일과 함께 커스텀 스타일링 지원
• 반응형 디자인 지원

참고 자료

• shadcn/ui Accordion
• Radix UI Accordion