Accordion

한눈에#

긴 콘텐츠를 섹션별로 접어 두고 필요한 것만 펼치는 APG Accordion입니다 — single(하나만)·multiple(동시) 펼침을 지원합니다.

사용 시점#

긴 콘텐츠를 섹션별로 접어 필요한 것만 펼치면 Accordion — 한 뷰만 전환하거나 본문 없는 토글은 다른 컴포넌트입니다.

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

import { Accordion } from '@wds/ui-web';

<Accordion
  defaultValue="item-1"
>
  <Accordion.Item value="item-1">
      <Accordion.Trigger>배포는 어떻게 하나요?</Accordion.Trigger>
      <Accordion.Content>main 브랜치 머지 시 자동 배포됩니다.</Accordion.Content>
    </Accordion.Item>
    <Accordion.Item value="item-2">
      <Accordion.Trigger>권한은 어디서 바꾸나요?</Accordion.Trigger>
      <Accordion.Content>설정 → 멤버에서 역할을 변경합니다.</Accordion.Content>
    </Accordion.Item>
</Accordion>

변형#

type이 변형 축입니다 — 'single'(기본)은 새 항목을 펼치면 이전 항목이 접히고, 'multiple'은 여러 항목을 동시에 펼칩니다.

크기#

단일 크기입니다 — 트리거 패딩 space.4/6, 레이블 font-size.body-1, 본문 font-size.body-2 고정. 3단 size는 component 토큰 신설 기준(§4) 미충족으로 도입하지 않았습니다.

상태#

비제어/제어 컴파운드입니다 — 기본은 비제어로 <Accordion type defaultValue>가 펼침 상태(내부적으로 항상 배열)를 소유합니다. value를 주면 제어 모드가 되어 부모가 상태를 소유하고, 트리거 클릭 등 모든 토글은 내부 상태를 쓰지 않고 onValueChange로 펼쳐진 value 배열만 통지합니다(렌더는 부모 value를 따름). value는 defaultValue와 같은 모양 — single은 문자열, multiple은 배열 — 을 받으며 둘 다 내부에서 배열로 정규화됩니다. 펼침/접힘은 aria-expanded와 hidden 토글로 표현되고 Hover/Focus는 CSS 의사클래스입니다.

Props#

점 표기(Accordion.Item)와 평탄 이름(AccordionItem)은 동일 함수입니다 — 서버 컴포넌트(RSC)에서는 클라이언트 참조에 점 접근이 해석되지 않으므로 평탄 이름을 사용하세요(이 문서의 데모도 평탄 이름).

<Accordion> (루트)

<Accordion.Item>

<Accordion.Trigger> — 네이티브 button 속성 확장

<Accordion.Content>

접근성#

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).

관련#