Accordion

접었다 펼 수 있는 FAQ·설정 섹션이에요.

사용법

단일 열기

FAQ·설정 항목을 접었다 펼칠 때 사용해요. type="single"이면 한 번에 하나만 열려요.

컴포넌트는 어디서 가져오나요?

@/components/ui에서 import하면 돼요.

스타일을 바꿀 수 있나요?

스타일 커스터마이징

Accordion 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<Accordion
  className="shadow-md"
  style={{
    --gtd-accordion-border-color: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<Accordion
  classNames={{
    root: "my-accordion-root",
    item: "my-accordion-item",
    trigger: "my-accordion-trigger",
    title: "my-accordion-title",
    panel: "my-accordion-panel",
    content: "my-accordion-content"
  }}
/>

CSS 변수

변수	설명
--gtd-accordion-border-color	항목 구분선
--gtd-accordion-trigger-bg	트리거 호버 배경

인터페이스

AccordionProps

속성	타입	기본값	설명
items*	AccordionItem[]	—	패널 목록
type	"single" \| "multiple"	single	동시에 열 수 있는 패널 수
defaultValue	string \| string[]	—	초기에 열린 패널
classNames	Record<string, string>	—	슬롯별 클래스 (root, label, input 등)
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { Accordion } from "@/components/ui/Accordion";