Accordion

Accordion은 접을 수 있는 콘텐츠 패널을 제공하여 정보를 깔끔하게 표시하는 컴포넌트입니다.

접근성이 고려된 아코디언 인터페이스를 제공합니다
단일 패널 또는 다중 패널 표시를 지원합니다
부드러운 확장/축소 애니메이션을 포함합니다

Installation

npx @jongh/cli add accordion

Usage

Accordion 컴포넌트는 Radix UI의 Accordion 컴포넌트를 기반으로 구현되었으며, 여러 하위 컴포넌트로 구성됩니다.

컴포넌트 구조

Accordion.Root: 아코디언의 모든 파트를 감싸는 컨테이너입니다.
Accordion.Item: 각각의 아코디언 항목을 나타냅니다.
Accordion.Header: 아코디언 항목의 헤더 영역입니다.
Accordion.Trigger: 아코디언 항목을 펼치거나 접는 버튼입니다.
Accordion.Content: 아코디언 항목이 펼쳐졌을 때 표시되는 내용입니다.

주요 Props

Accordion.Root

type ("single" | "multiple"): 한 번에 하나만 열릴지("single") 또는 여러 개가 열릴 수 있는지("multiple") 지정합니다.
collapsible (boolean): type="single" 일 때, 선택된 항목을 다시 클릭하여 접을 수 있는지 여부를 지정합니다.
defaultValue (string | string[]): 초기에 열려 있는 항목의 값입니다.
value (string | string[]): 현재 열려 있는 항목의 값입니다 (제어 모드).
onValueChange ((value: string | string[]) => void): 열린 항목이 변경될 때 호출되는 함수입니다 (제어 모드).

Accordion.Item

value (string): 이 아코디언 항목과 연결된 고유한 값입니다.

CSS 클래스 적용

각 컴포넌트는 className 속성을 통해 스타일을 커스터마이징할 수 있습니다.

Example

import * as Accordion from "@/components/accordion"
import { css } from "@styled-system/css"
import { ChevronDown } from "lucide-react"

// 기본 사용 예시 (단일 패널 모드)
<Accordion.Root type="single" collapsible>
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>
        아코디언 제목 1
        <ChevronDown />
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      아코디언 내용 1. 이 영역은 아코디언 항목이 펼쳐졌을 때만 표시됩니다.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Header>
      <Accordion.Trigger>
        아코디언 제목 2
        <ChevronDown />
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      아코디언 내용 2. 이 영역은 아코디언 항목이 펼쳐졌을 때만 표시됩니다.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

// 다중 패널 모드 예시
<Accordion.Root type="multiple" defaultValue={["item-1"]}>
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger>
        아코디언 제목 1
        <ChevronDown />
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      아코디언 내용 1. 여러 패널이 동시에 열릴 수 있습니다.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Header>
      <Accordion.Trigger>
        아코디언 제목 2
        <ChevronDown />
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content>
      아코디언 내용 2. 여러 패널이 동시에 열릴 수 있습니다.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>

// 스타일 커스터마이징 예시
<Accordion.Root
  type="single"
  collapsible
  className={css({
    maxW: "600px",
    border: "base",
    borderRadius: "md",
    overflow: "hidden"
  })}
>
  <Accordion.Item value="item-1">
    <Accordion.Header>
      <Accordion.Trigger
        className={css({
          bg: "muted",
          color: "primary",
          fontWeight: "bold",
          px: "4"
        })}
      >
        커스텀 아코디언 제목
        <ChevronDown />
      </Accordion.Trigger>
    </Accordion.Header>
    <Accordion.Content
      className={css({
        p: "4",
        bg: "card",
        color: "card.foreground"
      })}
    >
      커스텀 스타일이 적용된 아코디언 내용입니다.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Root>