Accordion

구조는 당근 SEED Accordion(rootage accordion.json · accordion-item.json, @seed-design/react 2.0.0 — Apache-2.0)을 따른다 — 트리거(앞 아이콘 · 제목 · 설명 · 꺾쇠)와 펼친 내용, 변형 둘(inline · separated), 회전 · 펼침 300ms, 누르면 좌우 6 들어온 바탕 + 콘텐츠만 축소. 크기는 SEED medium 하나이고, 여럿 열기 · "모두 펼치기" · 상세 없는 항목 · 카드 상세의 쓰임은 groo 가 정했다(2026-10-10 사용자 결정). 값은 groo 토큰이고, SEED 와 다른 자리는 맨 아래 "SEED 와 다른 점" 에 적었다. 옛 Accordion 스펙(Radix 베이스 · 아래 선만 · 꺾쇠 16 · 하나만 여는 모드 · 불투명도 막힘)을 대신한다.

수치 원본은 accordion.yaml이다. 수치 표 자리([표: …])와 그림 자리([그림: …])는 사이트가 그 파일로 그린다 — GitHub 에서는 그 파일 · 그림 코드로 가는 링크로 보인다.

직접 골라 보기제목 링크 복사

변형(inline · separated) · 설명 · 앞 아이콘 · 상세 없는 항목 · 막힘 · 모션 줄이기를 고르면 스펙대로 그린 아코디언과 그 코드가 바뀐다. 트리거를 눌러 펼치고, 초점을 두고 ↓ ↑ · Home · End · Enter 를 눌러 볼 수 있다 — "모두 펼치기" 도 함께 있다.

import { useState } from "react"
import {
  Accordion,
  AccordionContent,
  AccordionExpandAll,
  AccordionHeader,
  AccordionItem,
  AccordionPlainItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const [open, setOpen] = useState<string[]>([]) // 처음에는 모두 접힘
const expandable = ["pay", "coffee", "telecom", "movie"] // 상세가 있는 항목

<AccordionHeader title={"혜택 상세 · 12건"}>
  <AccordionExpandAll controls="benefit-detail" values={open} expandable={expandable} onValuesChange={setOpen} />
</AccordionHeader>
<Accordion id="benefit-detail" variant="separated" values={open} onValuesChange={setOpen}>
  <AccordionItem value="pay">
    <AccordionTrigger title="온라인 간편결제 · 배달앱 · 해외 직구 통합 할인" description="네이버페이 · 카카오페이 · 토스페이 결제 시 이용금액의 10% 결제일 할인(월 최대 2만 원)" />
    <AccordionContent>{details.pay}</AccordionContent>
  </AccordionItem>
  <AccordionItem value="coffee">
    <AccordionTrigger title="커피" description="골목커피 · 숲속다방 · 달빛로스터리 50% 할인" />
    <AccordionContent>{details.coffee}</AccordionContent>
  </AccordionItem>
  {/* 상세가 없으면 그냥 줄 — 막힌 트리거로 그리지 않는다 */}
  <AccordionPlainItem title="대중교통" description="버스 · 지하철 10% 청구할인" />
  <AccordionItem value="telecom">
    <AccordionTrigger title="통신" description="SKT · KT · LG U+ 자동이체 5천 원 할인" />
    <AccordionContent>{details.telecom}</AccordionContent>
  </AccordionItem>
  {/* 상세가 없으면 그냥 줄 — 막힌 트리거로 그리지 않는다 */}
  <AccordionPlainItem title="편의점" description="GS25 · CU · 세븐일레븐 5% 할인" />
  <AccordionItem value="movie">
    <AccordionTrigger title="영화" description="CGV · 롯데시네마 · 메가박스 4천 원 할인" />
    <AccordionContent>{details.movie}</AccordionContent>
  </AccordionItem>
</Accordion>

Anatomy제목 링크 복사

한 트리거는 두 층이다 — 바탕 층(누름 · 호버 바탕)과 콘텐츠 층(앞 아이콘 · 본문 · 꺾쇠). 누르면 바탕이 좌우 6 들어와 모서리 10 으로 둥글어지고, 콘텐츠 층만 2px 거리로 준다 — List 줄과 같은 짜임이다(기초 Feedback v104 — "목록 줄 · 아코디언은 콘텐츠만").

부위

Properties제목 링크 복사

Variant제목 링크 복사

SEED 의 두 변형을 그대로 둔다(사용자 결정 1B).

• inline(기본) — 연속 목록 + 항목 사이 선. 화면 · 카드 안에서 목록으로 읽히는 자리 — 카드 상세의 혜택 · 유의사항. 선은 List 의 들인 선과 같다 — 1px stroke-neutral-subtle · 좌우 24 · 첫 항목 위와 마지막 항목 아래에는 긋지 않는다.
• separated — 항목마다 Card 모양(1px stroke-neutral-weak 테두리 · 모서리 16 · 사이 8 · 그림자 없음 — 면은 칠하지 않는다). 항목 하나하나가 따로 읽히는 정보 묶음 — 카드 혜택 상세 시트 · 대화상자. 면은 놓인 표면 그대로다(시트 · 대화상자의 bg-layer-floating). 그래서 separated 는 흰 표면(시트 · 대화상자 · 띠 · 흰 화면) 위에만 둔다 — 회색 바닥 위의 접는 목록은 흰 면(카드 · 띠 — 어느 화면이 어느 쪽인지는 DESIGN.md Layout 의 "화면 바탕") 안의 inline 이다(2026-10-21 사용자 결정 — 03-G 결정 7 A — 항목 면을 흰색으로 칠하는 안은 고르지 않았다). 띠 안에 테두리 카드를 두지 않는 규칙의 예외다(2026-10-22 사용자 결정 2B). SEED 의 모서리 12 · 사이 12 는 카드에서 거절된 값이라 쓰지 않는다(데이터 표시 5A).

두 변형 모두 트리거 · 눌림 · 꺾쇠 · 펼침은 같고 면만 다르다. 모든 아코디언을 카드 모양으로 하는 안(1C)과 지금처럼 자리마다 짜는 안(1A)은 고르지 않았다.

변형

Size제목 링크 복사

크기는 SEED medium 하나다 — 폰 · 데스크톱이 같다(사용자 결정 2A). 트리거는 위아래 16 · 좌우 24(화면 가장자리 규칙 — SEED 16), 제목 16 / 22 · 500 fg-neutral, 설명 13 / 18 · 500 fg-neutral-subtle(제목 아래 2), 꺾쇠 20 fg-neutral-subtle, 앞 아이콘 22 — 앞 아이콘 · 본문 · 꺾쇠 사이는 12 다. 제목만이면 54, 설명이 있으면 74 이고, 제목이 줄을 바꾸면 늘어난다. List 줄 · 카드 머리와 같은 16 이라 한 화면 안에서 글 크기가 갈리지 않는다. 데스크톱에서 커지는 SEED large(제목 20 · 설명 16 · 꺾쇠 24)와 지금의 14 는 고르지 않았다.

설명 있음 · 없음

트리거

콘텐츠 층

앞 아이콘

본문

제목

설명

꺾쇠

펼친 내용제목 링크 복사

펼친 내용은 트리거와 같은 좌우 24, 아래 16 안에 둔다 — 위 여백은 0 이라 트리거 아래 16 에 바로 이어진다. 글은 text-article-note(14 / 22 — 긴 글 보조) · fg-neutral-muted 다. SEED 의 AccordionContent 는 여백 · 글자가 없어 쓰는 쪽이 정하는데, groo 는 혜택 상세처럼 긴 설명이 대부분이라 이 글 모양을 기본으로 둔다. 앞 아이콘이 있어도 펼친 내용은 24 에서 시작한다 — 줄 폭을 쓴다. 내용이 길어도 패널 안에서 스크롤하지 않는다 — 페이지 · 시트 본문이 스크롤한다(SEED "Content Panel 내 스크롤 지양").

펼친 내용

펼친 내용의 글

상세가 없는 항목제목 링크 복사

목록 가운데 상세가 없는 항목(혜택 "대중교통" — 요약뿐)은 트리거가 아닌 그냥 줄이다(사용자 결정 5A) — 꺾쇠가 없고, 머리말 · 단추로 감싸지 않아 Tab 이 건너뛰며, 글만 읽힌다. 위아래 16 · 좌우 24 · 글 크기가 다른 항목과 같아 높이와 글 시작이 같다. 누르거나 올려도 바탕이 생기지 않는다. 막힌 트리거(5B — "사용할 수 없음" 으로 읽혀 혜택이 막힌 것처럼 들린다)와 꺾쇠만 뒤집히는 줄(5C — 눌러도 열리는 것이 없다)은 고르지 않았다.

상세 있음 · 없음

모두 펼치기제목 링크 복사

여럿을 함께 열고(사용자 결정 4A), 목록 머리 오른쪽에 "모두 펼치기" 글 단추를 둔다 — groo 확장이다(SEED 에 없다). 상세가 있는 항목을 모두 펼치고, 모두 펼쳐져 있으면 글이 "모두 접기" 로 바뀐다. 모양은 Card 머리 동작과 같은 글 버튼(SEED Text Button)이다 — 14 · 700 · fg-neutral-muted, 아이콘 없이 보이는 36(좌우 14) · 누르는 44(2026-10-16 사용자 결정 — 글자 역할 D2, DESIGN.md Typography 의 "글자 역할" R16). 머리가 카드 머리면 그 오른쪽 동작 자리에, 시트 · 대화상자면 목록 머리 줄(제목 16 / 22 · 700 + 건수 — 카드 머리와 같은 글, 높이 36 · 아래 8)의 오른쪽에 둔다. 하나만 여는 모드(4C — 다른 항목을 열면 앞 항목이 닫힌다)와 단추 없이 하나씩 여는 안(4B)은 고르지 않았다. 큰 글자에서 오른쪽 동작이 머리 폭의 절반을 넘으면 제목 아래 줄 오른쪽 끝으로 내린다 — 제목은 한 줄 전체 폭으로 읽히고 머리가 버튼 한 줄(36)만큼 높아진다. 평소(100% · 130%)는 한 줄 그대로다. Button 짝의 반 폭 판정과 같고, 카드 머리 · 아코디언 목록 머리 · List Header 가 같은 규칙이다(2026-10-21 사용자 결정 — 03-G 결정 4 A, https://claude.ai/artifact/A3oCdxNvDwkNBPFPE36bmF). 판정 — 동작의 보이는 상자 폭(글 + 좌우 14 · 14)에서 끝 블리드 14(머리 여백으로 내어 걸리는 몫)를 빼고 사이 8 를 더한 값이 머리 안쪽 폭의 절반 이하면 한 줄, 넘으면 내린다. 레시피의 flex 줄바꿈(제목 최소 50%)이 그대로 이 셈이다 — 예: 머리 안쪽 300 이면 "모두 펼치기" 보이는 상자 156 까지 한 줄 · 157 부터 내려간다(카드 머리 · 아코디언 목록 머리 156 / 157 · List Header 는 사이가 10 이라 154 / 155). 결정 페이지(https://claude.ai/artifact/A3oCdxNvDwkNBPFPE36bmF) · 보류 둘 결정 페이지(https://claude.ai/artifact/7ENKeRYQMzFijZHnf5kaP7)의 그림은 상자 폭 ≤ 절반으로 그렸다 — 이 셈과 6 이하로 갈려 그림의 어느 경우도 달라지지 않는다(200% 에서 360 화면 "모두 펼치기" 154 는 한 줄, 320 화면 "전체 보기" 130 은 한 줄 · "모두 펼치기" 는 내려감). 웹 · 앱 모두 이 셈으로 판정한다.

목록 머리

목록 머리 제목

모두 펼치기

State제목 링크 복사

상태 — 바탕 · 콘텐츠 · 포커스 링

상태 — 글 · 꺾쇠

separated 의 포커스 링

펼침

모션

꺾쇠는 180° 돌고 내용은 높이로 펼쳐지고 접힌다 — 둘 다 300ms motion-ease-easing(SEED d6, 사용자 결정 3A). 모션 줄이기면 높이를 움직이지 않고 내용이 150ms 서서히 나타나고 사라지며, 꺾쇠는 바로 뒤집힌다(v104). 200ms(3B)와 움직임 없음(3C)은 고르지 않았다.

Guidelines제목 링크 복사

언제 쓰나제목 링크 복사

항목은 2개 이상이다 — 하나를 접고 펴는 것은 Collapsible 이다(SEED Don't — 단일 Item). 처음에는 모두 접혀 있다.

여럿을 함께 연다제목 링크 복사

두 혜택을 나란히 견주며 읽을 수 있게 다른 항목을 닫지 않는다. 열 개를 한 번에 펼쳐 비교할 때는 "모두 펼치기" 를 누른다 — 열 번 누르지 않는다. 다른 항목을 열면 앞 항목이 닫히는 하나만 열기는 두지 않는다 — 닫히는 항목 때문에 누른 자리가 위로 밀려 올라간다.

펼쳐도 그 자리에제목 링크 복사

펼쳐도 화면을 저절로 스크롤하지 않고 초점도 트리거에 그대로 둔다 — 내용이 길면 페이지 · 시트 본문이 스크롤한다(SEED — "자동 스크롤 및 포커스 이동은 기본값으로 지원하지 않습니다"). 패널 안에 높이를 정해 스크롤 상자를 만들지 않는다 — 스크롤이 겹쳐 손가락이 어느 쪽을 움직이는지 모른다(SEED "Content Panel 내 스크롤 지양").

카드 상세의 혜택 · 유의사항제목 링크 복사

카드 상세 화면의 혜택 · 유의사항은 웹 · 앱 모두 카드 안의 inline 아코디언이다(사용자 결정 6A — 지금 앱은 혜택 상세 본문까지 다 펼쳐 보인다). 카드 머리(제목 "혜택 · 12건" · 오른쪽 모두 펼치기) 아래 트리거가 카드 가장자리까지 가고, 카드 아래 여백은 8 이다 — 마지막 트리거의 아래 16 과 합쳐 보이는 24(Card body="accordion"). 혜택 상세 시트 · 대화상자는 separated 다(1B). 유의사항은 설명 없이 제목만 있는 트리거다(펼치면 상세). 앱 유의사항의 주황 상자를 둘지는 이번 결정 밖이다 — 비교 페이지는 웹과 같은 카드 면으로 그렸다. 둘 다 펼친 목록(6B)은 고르지 않았다.

제목은 자르지 않는다제목 링크 복사

제목 · 설명은 늘 줄을 바꿔 다 보인다(단어 단위 — v114). 84자 유의사항 제목도 한 줄 말줄임으로 자르지 않는다 — 펼쳐도 상세(다른 글)만 나와 잘린 제목은 어디에서도 다 읽을 수 없다. 잘린 글을 펼치는 "더 보기" 도 두지 않는다(사용자 결정 10A).

글제목 링크 복사

제목은 무엇의 상세인지 명사로("커피" · "연회비 · 카드 발급 후 첫 달 실적 기준"), 설명은 그 항목의 한 줄 요약이다("골목커피 · 숲속다방 · 달빛로스터리 50% 할인"). 펼친 내용의 줄바꿈 문자는 그대로 줄을 바꾼다 — 상세가 "■ …" 줄들로 오는 자리. 모두 펼치기의 글은 "모두 펼치기" · "모두 접기" 다.

코드제목 링크 복사

레시피 recipes/shadcn/components/ui/accordion.tsx 를 쓴다(Radix Accordion type="multiple" 위에 짜도 된다). 아래 미리보기는 스펙 값으로 그린 모습이다.

• Accordion — 아코디언. variant("inline" 기본 · "separated") · values · defaultValues · onValuesChange(values)(펼친 항목의 value 목록 — 늘 여럿을 함께 연다, 하나만 여는 모드는 없다) · disabled(전체) · id(모두 펼치기가 가리킨다), 나머지는 div 속성. 처음에는 모두 접힘(defaultValues 없음).
• AccordionItem — 항목. value(필수) · disabled.
• AccordionTrigger — title(필수) · description · prefixIcon · headingLevel(2 ~ 6, 기본 3). 머리말 안의 단추(aria-expanded · aria-controls)를 그리고, 꺾쇠 20 은 트리거가 그린다. 트리거 사이 ↓ ↑(돌아가며) · Home · End 를 받는다.
• AccordionContent — 펼친 내용. 0 / 24 / 16 · 14 / 22 · fg-neutral-muted · 줄바꿈 문자를 지킨다. 접혀 있으면 그리지 않는다. 높이 300ms · 모션 줄이기면 150ms 서서히.
• AccordionPlainItem — 상세가 없는 항목. title(필수) · description · prefixIcon. 단추 · 머리말 · 꺾쇠가 없고 높이 · 글 시작은 트리거와 같다.
• AccordionHeader — 시트 · 대화상자의 목록 머리. title(필수 — 건수를 붙인다) · 자식(오른쪽 — 모두 펼치기). 카드 안이면 쓰지 않고 CardHeader 가 그 자리다.
• AccordionExpandAll — 모두 펼치기. controls(아코디언의 id) · values · expandable(상세가 있는 항목의 value 목록) · onValuesChange(values). 모두 펼쳐져 있으면 "모두 접기" — 글은 단추가 정한다. 아코디언과 같은 values 를 쥔다.

혜택 상세 — 시트 · 대화상자(separated)제목 링크 복사

import { useState } from "react"
import {
  Accordion,
  AccordionContent,
  AccordionExpandAll,
  AccordionHeader,
  AccordionItem,
  AccordionPlainItem,
  AccordionTrigger,
} from "@/components/ui/accordion"

const [open, setOpen] = useState<string[]>([]) // 처음에는 모두 접힘
const expandable = benefits.filter((b) => b.detail).map((b) => b.id)

<AccordionHeader title={`혜택 상세 · ${benefits.length}건`}>
  <AccordionExpandAll controls="benefit-detail" values={open} expandable={expandable} onValuesChange={setOpen} />
</AccordionHeader>
<Accordion id="benefit-detail" variant="separated" values={open} onValuesChange={setOpen}>
  {benefits.map((b) =>
    b.detail ? (
      <AccordionItem key={b.id} value={b.id}>
        <AccordionTrigger title={b.category} description={b.summary} />
        <AccordionContent>{b.detail}</AccordionContent>
      </AccordionItem>
    ) : (
      // 상세가 없으면 그냥 줄 — 막힌 트리거로 그리지 않는다
      <AccordionPlainItem key={b.id} title={b.category} description={b.summary} />
    ),
  )}
</Accordion>

카드 상세 — 혜택(inline)제목 링크 복사

import { useState } from "react"
import {
  Accordion,
  AccordionContent,
  AccordionExpandAll,
  AccordionItem,
  AccordionPlainItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Card, CardHeader, CardTitle } from "@/components/ui/card"

const [open, setOpen] = useState<string[]>([])
const expandable = benefits.filter((b) => b.detail).map((b) => b.id)

{/* 카드 제목이 h2 라 트리거는 h3(기본) — 트리거가 카드 가장자리까지, 카드 아래 8 */}
<Card body="accordion">
  <CardHeader>
    <CardTitle>혜택 · {benefits.length}건</CardTitle>
    <AccordionExpandAll controls="card-benefits" values={open} expandable={expandable} onValuesChange={setOpen} />
  </CardHeader>
  <Accordion id="card-benefits" values={open} onValuesChange={setOpen}>
    {benefits.map((b) =>
      b.detail ? (
        <AccordionItem key={b.id} value={b.id}>
          <AccordionTrigger title={b.category} description={b.summary} />
          <AccordionContent>{b.detail}</AccordionContent>
        </AccordionItem>
      ) : (
        <AccordionPlainItem key={b.id} title={b.category} description={b.summary} />
      ),
    )}
  </Accordion>
</Card>

Behavior제목 링크 복사

Accessibility제목 링크 복사

Do / Don't제목 링크 복사

✅ Do제목 링크 복사

• 상세가 긴 항목 여럿을 묶어 화면을 짧게 — 항목은 둘 이상.
• 트리거 줄 전체를 누르게 하고, 제목은 줄을 바꿔 다 보인다.
• 여럿을 함께 열고, 목록 머리 오른쪽에 모두 펼치기.
• 상세가 없는 항목은 그냥 줄로 — 높이 · 글 시작은 같게.
• 펼쳐도 초점 · 스크롤을 그대로 두고, 길면 페이지가 스크롤하게.

❌ Don't제목 링크 복사

• 꺾쇠만 누르게 하기 · 글 단추로 트리거 만들기.
• 다른 항목을 열면 앞 항목을 닫기.
• 상세가 없는 항목을 막힌 트리거로 · 꺾쇠만 뒤집히게.
• 패널 안에 스크롤 상자 · 펼칠 때 저절로 스크롤 · 초점 옮기기.
• 제목 · 설명을 말줄임 · 줄 수로 자르기.
• 늘 보여도 되는 짧은 내용을 접기 · 항목 하나짜리 아코디언.
• 불투명도로 흐린 막힘 · 펼침 상태 없는 트리거(앱은 의미 노드에 펼침 상태).

Specification제목 링크 복사

accordion.yaml 의 규칙을 하나도 빼지 않고 조건마다 그린다 — 웹 · 앱이 Accordion 을 만들 때 이 값을 그대로 쓴다. 조건이 없는 Base 가 모든 조합에 걸리고, 뒤의 규칙이 앞의 같은 값을 덮는다. 상태는 enabled 에서 바뀌는 값만 적었다.