Collapse

콘텐츠 영역을 접었다 펼 수 있는 Next.js Client Component입니다. 외부 버튼으로 단일 영역을 제어하거나, 패널 그룹으로 여러 섹션을 구성할 수 있습니다. aria-expanded · aria-controls로 접근성을 보장합니다.

외부 트리거

CollapseExternal로 버튼과 접힘 영역을 연결합니다. 상세 설명·추가 옵션 등에 적합합니다.

주문이 접수되었습니다. 배송 전까지 아래에서 상세 내역을 확인할 수 있습니다.

패널 내 링크

패널 본문에 Link를 배치해 관련 문서로 이동할 수 있습니다.

시작하기 · Button · Dropdown

패널 그룹

collapse_bordered가 기본 스킨입니다. 각 패널은 독립적으로 열고 닫을 수 있습니다.

평일 기준 2~3일 이내 출고됩니다. 제주·도서 산간 지역은 1~2일 추가 소요될 수 있습니다.

아코디언 모드

accordion prop을 지정하면 한 번에 하나의 패널만 열립니다.

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

스킨

collapse_ghost · collapse_card로 외형을 조절합니다.

배경만 강조하는 고스트 스킨입니다. 필터·사이드 패널에 적합합니다.

패널마다 카드 형태로 분리됩니다.

보조 텍스트

extra prop으로 트리거 오른쪽에 메타 정보를 표시합니다.

현재 처리 중인 요청 3건입니다.

비활성

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

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

슬라이드

effect="slide"로 펼침·접힘 시 높이 슬라이드 애니메이션을 적용합니다. 패널 그룹·외부 트리거 모두 동일합니다.

평일 기준 2~3일 이내 출고됩니다. 열고 닫을 때 높이가 슬라이드됩니다.

신용카드, 계좌이체, 간편결제를 지원합니다.

외부 트리거로 연결된 영역도 슬라이드로 펼쳐집니다.

크기

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

작은 콜랩스 — 좁은 패딩.

큰 콜랩스 — 넓은 패딩과 큰 글자.

API · CollapseExternal Props

Prop	타입	기본값	설명
`triggerLabel`	string	—	외부 트리거 버튼 텍스트
`narrow`	boolean	false	데모용 최대 너비 제한
`boxed`	boolean	true	접힘 영역에 테두리·배경 스타일 적용
`effect`	'slide'	—	펼침·접힘 높이 슬라이드 애니메이션 (data-effect="slide")
`open`	boolean	—	열림 상태 (제어)
`defaultOpen`	boolean	false	초기 열림 상태 (비제어)
`onOpenChange`	(open: boolean) => void	—	열림 상태 변경 콜백
`lead`	ReactNode	—	트리거 위 안내 텍스트
`children`	ReactNode	—	접히는 본문 영역
`className`	string	—	루트 요소 추가 클래스
`ripple`	boolean	true	클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성

API · CollapseExternal Children

Prop / Children	설명
`lead`	트리거 위 안내 텍스트
`children`	접히는 본문 영역

API · Collapse Props

Prop	타입	기본값	설명
`variant`	'bordered' \| 'ghost' \| 'card'	bordered	패널 그룹 스킨
`size`	'sm' \| 'md' \| 'lg'	md	트리거·본문 패딩 크기
`accordion`	boolean	false	한 번에 하나의 패널만 열기 (아코디언 모드)
`effect`	'slide'	—	펼침·접힘 높이 슬라이드 애니메이션 (data-effect="slide")
`narrow`	boolean	false	데모용 최대 너비 제한 (collapse_demo-narrow)
`children`	ReactNode	—	CollapsePanel 나열
`className`	string	—	루트 요소 추가 클래스

API · CollapsePanel Props

Prop	타입	기본값	설명
`label`	string	—	트리거에 표시할 제목
`content`	string	—	패널 본문 (p 태그로 렌더). children으로 대체 가능
`open`	boolean	—	열림 상태 (제어)
`defaultOpen`	boolean	false	초기 열림 상태 (비제어)
`onOpenChange`	(open: boolean) => void	—	열림 상태 변경 콜백
`disabled`	boolean	false	비활성 패널 (is-disabled + trigger disabled)
`extra`	ReactNode	—	트리거 오른쪽 보조 정보
`extraCode`	string	—	코드 예시용 extra 슬롯 마크업 (데모 코드 생성)
`children`	ReactNode	—	패널 본문 (content prop 대체)
`className`	string	—	루트 요소 추가 클래스
`ripple`	boolean	true	클릭 파장(ripple). true 시 data-ripple 활성 · false 비활성. 기본 활성

API · CollapsePanel Children

Prop / Children	설명
`children`	패널 본문 (content prop 대체)
`extra`	트리거 오른쪽 보조 정보

API · Collapse Children

Prop / Children	설명
`children`	CollapsePanel 나열

클래스 · 속성

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

클래스	설명
`collapse`	독립 접힘 영역 (외부 트리거 대상)
`collapse_group`	패널 그룹 컨테이너
`collapse_panel · collapse_trigger · collapse_body`	패널 그룹 내부 파트
`collapse_label · collapse_extra · collapse_icon`	트리거 파트
`collapse_content`	패널 본문 래퍼
`collapse_bordered`	외곽 테두리 스킨 (기본)
`collapse_ghost`	배경 강조 고스트 스킨
`collapse_card`	패널별 카드 분리 스킨
`collapse_sm · collapse_lg`	크기 변형
`data-collapse`	HTML 패널 그룹 JS 초기화
`data-collapse-trigger`	HTML 외부 트리거 JS 초기화
`data-collapse-accordion`	HTML 단일 패널만 열기
`data-effect="slide"`	펼침·접힘 높이 슬라이드 애니메이션
`is-open · is-disabled`	상태 클래스
`data-ripple`	클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용
`data-ripple="false"`	해당 요소 ripple 비활성
`data-no-ripple`	하위 전체 ripple 비활성

디자인 토큰

토큰	기본값	설명
`--collapse-font-size · --collapse-content-font-size`	var(--text-size-sm)	트리거 그룹·본문 기본 글자 크기
`--collapse-trigger-font-weight · --collapse-trigger-gap`	600 · var(--space-sm)	트리거 글자 두께·내부 간격
`--collapse-trigger-padding-y · --collapse-trigger-padding-x`	0.875rem · var(--space-lg)	기본 트리거 패딩
`--collapse-content-padding-top · --collapse-content-padding-y · --collapse-content-padding-x`	var(--space-md) · var(--space-lg) · var(--space-lg)	기본 본문 패딩
`--collapse-icon-size · --collapse-card-gap`	1rem · var(--space-sm)	펼침 아이콘 크기·카드 사이 간격
`--collapse-font-size-sm · --collapse-trigger-padding-y-sm · --collapse-trigger-padding-x-sm · --collapse-content-padding-y-sm · --collapse-content-padding-x-sm · --collapse-content-padding-top-sm · --collapse-icon-size-sm`	var(--text-size-xs) · 0.625rem · var(--space-md) · var(--space-md) · var(--space-md) · var(--space-sm) · 0.875rem	sm 크기의 글자·트리거·본문·아이콘 값
`--collapse-font-size-lg · --collapse-trigger-padding-y-lg · --collapse-trigger-padding-x-lg · --collapse-content-padding-y-lg · --collapse-content-padding-x-lg · --collapse-content-padding-top-lg · --collapse-icon-size-lg`	var(--text-size-base) · 1rem · var(--space-xl) · var(--space-xl) · var(--space-xl) · var(--space-lg) · 1.125rem	lg 크기의 글자·트리거·본문·아이콘 값
`--collapse-slide-duration · --collapse-slide-easing`	0.28s · ease	펼침·접힘 슬라이드 시간과 가속 곡선