Accordion

접고 펼 수 있는 콘텐츠 패널 컴포넌트입니다. FAQ, 설정 메뉴 등에 활용됩니다.

설치

Terminal

npx @msub-core/ui-cli add accordion

사용법

TSX

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@msub-core/ui/components/accordion"

function MyComponent() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>제목</AccordionTrigger>
        <AccordionContent>내용</AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}

단일 선택 (Single)

아코디언은 접었다 펼 수 있는 콘텐츠 섹션을 제공하는 UI 컴포넌트입니다. 주로 FAQ, 설정 메뉴 등에서 사용됩니다.

Accordion, AccordionItem, AccordionTrigger, AccordionContent 컴포넌트를 조합하여 사용합니다. type="single"은 하나만 열 수 있고, type="multiple"은 여러 개를 동시에 열 수 있습니다.

네, className prop을 사용하여 커스텀 스타일을 적용할 수 있습니다. Tailwind CSS 클래스를 자유롭게 사용하세요.

Prop	Type	Default	Required	Description
type	"single" \| "multiple"	-	Yes	선택 모드 (단일/다중)
collapsible	boolean	false	No	모두 닫을 수 있는지 (single에서만)
value	string \| string[]	-	No	제어 모드 열린 값
defaultValue	string \| string[]	-	No	기본 열린 값
onValueChange	(value) => void	-	No	값 변경 콜백

다중 선택 (Multiple)

프로젝트의 기본 정보를 설정합니다. 이름, 설명, 버전 등을 관리할 수 있습니다.

고급 설정 옵션입니다. 캐시, 최적화, 빌드 옵션 등을 세부적으로 조정할 수 있습니다.

이메일, 푸시 알림, 슬랙 연동 등 알림 관련 설정을 관리합니다.

type="multiple"을 사용하면 여러 항목을 동시에 열 수 있습니다.

기본값 설정

첫 번째 답변입니다.

두 번째 답변입니다. 이 항목은 기본적으로 열려 있습니다.

세 번째 답변입니다.

FAQ 예제

네, 14일간 무료로 모든 기능을 체험하실 수 있습니다. 신용카드 정보 없이 바로 시작하세요.

구독 취소 후에도 결제 기간이 끝날 때까지 서비스를 이용하실 수 있습니다. 데이터는 30일간 보관되며, 이후 삭제됩니다.

프로 플랜부터 무제한 팀원 초대가 가능합니다. 스타터 플랜은 최대 3명까지 초대할 수 있습니다.

결제 후 7일 이내에 요청하시면 전액 환불해 드립니다. 자세한 내용은 환불 정책 페이지를 참고해 주세요.