Accordion

여러 섹션을 접었다 펼 수 있는 Nuxt 아코디언 컴포넌트입니다. FAQ·설정·필터 패널 등에 사용하며, aria-expanded · aria-controls로 접근성을 보장합니다.

기본

FAQ처럼 항목 사이 간격이 있는 accordion_card 스킨입니다. 한 번에 하나의 패널만 열리며(단일 모드), 화살표 키로 트리거 간 포커스를 이동할 수 있습니다.

배송은 얼마나 걸리나요?

교환·반품은 어떻게 하나요?

수령 후 7일 이내 마이페이지에서 신청할 수 있습니다. 단순 변심 반품 시 왕복 배송비가 부과됩니다.

해외 배송이 가능한가요?

다중 열기

multiple prop을 지정하면 여러 패널을 동시에 펼칠 수 있습니다.

알림

이메일·푸시 알림 수신 여부를 설정합니다.

개인정보

프로필 공개 범위와 데이터 다운로드를 관리합니다.

보안

플러시

accordion_flush로 외곽 테두리 없이 구분선만 표시합니다. 사이드바·설정 목록에 적합합니다.

일반

언어, 시간대, 테마 등 기본 환경 설정입니다.

접근성

고급

보더

accordion_bordered로 항목을 한 덩어리로 붙입니다. 설정·목록형 UI에 적합합니다.

알림

이메일·푸시 알림 수신 여부를 설정합니다.

개인정보

보안

카드

accordion_card로 각 항목을 독립 카드로 분리합니다. 대시보드·위젯 그룹에 사용합니다.

프로젝트 개요

목표, 일정, 이해관계자 정보를 요약합니다.

최근 활동

보조 정보

extra 슬롯으로 배지·메타 텍스트를 트리거 오른쪽에 배치합니다.

미해결 문의3

답변이 필요한 고객 문의 3건이 있습니다.

처리 완료지난 7일

비활성

disabled prop을 지정하면 is-disabled 클래스와 함께 트리거가 비활성화됩니다.

공개 문서

누구나 열람할 수 있는 가이드 문서입니다.

팀 전용 (권한 없음)

크기

size prop으로 트리거와 본문 패딩을 조절합니다.

Small

작은 아코디언 — 좁은 패딩.

Large

큰 아코디언 — 넓은 패딩과 큰 글자.

슬라이드

effect="slide"로 펼침·접힘 시 높이 슬라이드 애니메이션을 적용합니다. 닫힌 패널은 hidden으로 숨기고, 토글 시에만 높이를 애니메이션합니다.

배송 안내

평일 기준 2~3일 이내 출고됩니다. 패널을 열고 닫을 때 높이가 부드럽게 전환됩니다.

교환·반품

수령 후 7일 이내 마이페이지에서 신청할 수 있습니다.

고객센터

1588-0000 (평일 09:00–18:00). 채팅 상담도 지원합니다.

API · Accordion Props

Prop	타입	기본값	설명
`variant`	'bordered' \| 'flush' \| 'card'	bordered	아코디언 스킨 — bordered(붙임) · flush · card(항목 간격, FAQ)
`size`	'sm' \| 'md' \| 'lg'	md	트리거·본문 패딩 크기
`multiple`	boolean	false	여러 패널 동시 열기 허용
`narrow`	boolean	false	데모용 최대 너비 제한 (accordion_demo-narrow)
`effect`	'slide'	—	펼침·접힘 높이 슬라이드 애니메이션 (data-effect="slide")

API · AccordionItem Props

Prop	타입	기본값	설명
`label`	string	—	트리거에 표시할 제목
`content`	string	—	패널 본문 (p 태그로 렌더). default 슬롯으로 대체 가능
`open`	boolean	—	열림 상태 (제어, v-model:open)
`default-open`	boolean	false	초기 열림 상태 (비제어)
`@open-change`	(open: boolean) => void	—	열림 상태 변경 이벤트
`disabled`	boolean	false	비활성 항목 (is-disabled + trigger disabled)
`extra-code`	string	—	코드 예시용 extra 슬롯 마크업 (데모 코드 생성)
`ripple`	boolean	true	클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성

API · Accordion Slots

슬롯	설명
`default`	AccordionItem 나열

API · AccordionItem Slots

슬롯	설명
`default`	패널 본문 (content prop 대체)
`extra`	트리거 오른쪽 보조 정보 (배지·메타 텍스트)

클래스 · 속성

Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.

클래스	설명
`accordion`	루트 구조 클래스
`accordion_bordered`	외곽 테두리로 항목을 한 덩어리로 붙인 스킨
`accordion_flush`	구분선만 있는 플러시 스킨
`accordion_card`	항목 사이 간격·독립 카드 스킨 (FAQ 기본 예시)
`accordion_sm · accordion_lg`	크기 변형
`accordion_item · accordion_trigger · accordion_panel`	내부 파트
`accordion_heading`	role="heading" aria-level="3" 헤딩 래퍼
`accordion_label · accordion_extra · accordion_icon`	트리거 파트
`accordion_content`	패널 본문 래퍼
`data-accordion`	HTML 마크업 JS 초기화 대상
`data-accordion-multiple`	HTML 마크업 다중 열기 허용
`data-effect="slide"`	펼침·접힘 높이 슬라이드 애니메이션
`is-open · is-disabled`	상태 클래스
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

디자인 토큰

토큰	기본값	설명
`--accordion-font-size`	var(--text-size-sm)	기본(md) 본문 크기
`--accordion-trigger-font-weight · --accordion-trigger-gap`	600 · var(--space-sm)	트리거 타이포·간격
`--accordion-trigger-padding-y · --accordion-trigger-padding-x`	0.875rem · var(--space-lg)	트리거 패딩(md)
`--accordion-content-font-size`	var(--text-size-sm)	콘텐츠 글자 크기
`--accordion-content-padding-y · --accordion-content-padding-x`	var(--space-lg) · var(--space-lg)	콘텐츠 상하·좌우 패딩(동일)
`--accordion-icon-size`	1rem	펼침 아이콘(md)
`--accordion-slide-duration · --accordion-slide-easing`	0.28s · ease	슬라이드 전환
`--accordion-card-gap`	0	카드형 아코디언 항목 간격
`--accordion-card-trigger-bg`	var(--color-surface-raised)	카드형 트리거 배경
`--accordion-font-size-sm · --accordion-trigger-padding-y-sm · --accordion-trigger-padding-x-sm`	var(--text-size-xs) · 0.625rem · var(--space-md)	sm 크기
`--accordion-icon-size-sm`	0.875rem	sm 아이콘
`--accordion-font-size-lg · --accordion-trigger-padding-y-lg · --accordion-trigger-padding-x-lg`	var(--text-size-base) · 1rem · var(--space-xl)	lg 크기
`--accordion-icon-size-lg`	1.125rem	lg 아이콘