Accordion

컴포넌트

수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원.

단일 (collapsible)

Core·Shells·Surfaces로 구성된 공유 UI 컴포넌트 라이브러리입니다. 차트는 opt-charts가 담당합니다.

다중 (multiple)

여러 패널을 동시에 열 수 있습니다.

이 패널도 함께 열려 있습니다.

AccordionRoot

Prop	타입	기본값	설명
type	"single" \| "multiple"	—	한 개만 열림(single) 또는 여러 개 열림(multiple). 기본 single
value	string \| string[] \| null	—	열린 항목 값. single은 string\|null, multiple은 string[]
defaultValue	string \| string[] \| null	—	비제어 초기 열림 값
onValueChange	(value: string \| string[] \| null) => void	—	열림 변경 콜백
collapsible	boolean	—	single 모드에서 열린 패널을 다시 닫을 수 있게 허용
disabled	boolean	—	전체 비활성화
animated	boolean	—	콘텐츠 enter/leave 애니메이션 (기본 true)
children	ReactNode	—	AccordionItem 목록

AccordionItem

Prop	타입	기본값	설명
value*	string	—	항목 식별 값
disabled	boolean	—	이 항목만 비활성화
children	ReactNode	—	Trigger + Content

AccordionTrigger

Prop	타입	기본값	설명
children*	ReactNode	—	헤더 라벨 (쉐브론 아이콘 자동 추가)

AccordionContent

Prop	타입	기본값	설명
children*	ReactNode	—	펼쳐지는 패널 본문

테스트 결과 자세히 보기

테스트 커버리지

2026년 7월 9일5/5 통과

5성공

0실패

5전체

트리거 클릭으로 패널을 연다
single 모드: 다른 패널을 열면 기존 패널이 닫힌다
multiple 모드: 여러 패널을 동시에 연다
collapsible single: 열린 패널을 다시 눌러 닫는다
content가 trigger와 aria로 연결된다

FieldToken

Facet

Expression

TextTruncate

Highlight

LiveRegion

Accordion

컴포넌트

수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원.

단일 (collapsible)

Core·Shells·Surfaces로 구성된 공유 UI 컴포넌트 라이브러리입니다. 차트는 opt-charts가 담당합니다.

다중 (multiple)

여러 패널을 동시에 열 수 있습니다.

이 패널도 함께 열려 있습니다.

AccordionRoot

Prop	타입	기본값	설명
type	"single" \| "multiple"	—	한 개만 열림(single) 또는 여러 개 열림(multiple). 기본 single
value	string \| string[] \| null	—	열린 항목 값. single은 string\|null, multiple은 string[]
defaultValue	string \| string[] \| null	—	비제어 초기 열림 값
onValueChange	(value: string \| string[] \| null) => void	—	열림 변경 콜백
collapsible	boolean	—	single 모드에서 열린 패널을 다시 닫을 수 있게 허용
disabled	boolean	—	전체 비활성화
animated	boolean	—	콘텐츠 enter/leave 애니메이션 (기본 true)
children	ReactNode	—	AccordionItem 목록

AccordionItem

Prop	타입	기본값	설명
value*	string	—	항목 식별 값
disabled	boolean	—	이 항목만 비활성화
children	ReactNode	—	Trigger + Content

AccordionTrigger

Prop	타입	기본값	설명
children*	ReactNode	—	헤더 라벨 (쉐브론 아이콘 자동 추가)

AccordionContent

Prop	타입	기본값	설명
children*	ReactNode	—	펼쳐지는 패널 본문

테스트 결과 자세히 보기

테스트 커버리지

2026년 7월 9일5/5 통과

5성공

0실패

5전체

트리거 클릭으로 패널을 연다
single 모드: 다른 패널을 열면 기존 패널이 닫힌다
multiple 모드: 여러 패널을 동시에 연다
collapsible single: 열린 패널을 다시 눌러 닫는다
content가 trigger와 aria로 연결된다

FieldToken

Facet

Expression

생략 위치

endhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

starthttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

middlehttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

startEndhttps://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

테이블 셀

트레이스	경로
trace-9f2c1ad0-77be-4b21-a0d9-4c2f1e88b310-segment-014	https://app.example.com/dashboard/org_8f21/project_44c1/events?filter=checkout&from=now-7d&to=now&breakdown=country

Accordion

단일 (collapsible)

다중 (multiple)

AccordionRoot

AccordionItem

AccordionTrigger

AccordionContent

테스트 커버리지

관련 컴포넌트

FieldToken

Facet

Expression

TextTruncate

Highlight

LiveRegion

Accordion

단일 (collapsible)

다중 (multiple)

AccordionRoot

AccordionItem

AccordionTrigger

AccordionContent

테스트 커버리지

관련 컴포넌트

FieldToken

Facet

Expression

TextTruncate

Highlight

LiveRegion

스키마 컬럼 목록

전체 타입

크기와 채우기

값 분포로 필터하기

표본이 전체보다 작을 때

로딩과 빈 상태

알림 규칙

상태

컬럼 배치

생략 위치

테이블 셀

검색어 강조

검색어 여러 개

스트리밍 카운터