ExpansionPanel

Data Display

콘텐츠를 접었다 펴며 상세를 드러내는 확장 패널.

Usage

제목을 눌러 상세 콘텐츠를 접고 펼침. 아코디언·FAQ·설정 그룹

import

import { ExpansionPanel } from '@mildang/design-system/ExpansionPanel';

ExpansionPanel 하나만 가져오면 ExpansionPanel.Root · ExpansionPanel.Item · ExpansionPanel.Header · ExpansionPanel.Trigger · ExpansionPanel.Content · ExpansionPanel.Icon · ExpansionPanel.Title 를 그 아래에서 쓸 수 있다.

예제를 복사해 쓸 때 필요한 준비

• @mildang/icons 를 따로 설치한다. DS 패키지에 아이콘 컴포넌트가 포함되지 않는다.

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

Anatomy

tsx

import { ExpansionPanel } from '@mildang/design-system/ExpansionPanel';

export default function Example() {
  return (
    <ExpansionPanel>
      <ExpansionPanel.Item>
        <ExpansionPanel.Header>
          <ExpansionPanel.Icon />
          <ExpansionPanel.Title />
          <ExpansionPanel.Trigger />
        </ExpansionPanel.Header>
        <ExpansionPanel.Content />
      </ExpansionPanel.Item>
    </ExpansionPanel>
  );
}

부품

필수 여부

반복

위치

ExpansionPanel.Root

필수

모든 Item을 직접 감싼다.

ExpansionPanel.Item

필수

여러 개 가능

Root 안에 하나 이상 배치한다.

ExpansionPanel.Header

필수

Item 안에서 Content 앞에 배치한다.

ExpansionPanel.Icon

선택

Header의 첫 번째 자식으로 배치한다.

ExpansionPanel.Title

선택

Header 안에서 제목 텍스트를 감싼다.

ExpansionPanel.Trigger

조건부

Header의 기본 동작을 사용하면 직접 배치하지 않는다.

Header 내부에서 사용하며 일반적으로 Header가 대신 제공한다.

ExpansionPanel.Content

필수

Item 안에서 Header 뒤에 배치한다.

Root 안에 Item을 배치하고 각 Item은 Header와 Content를 한 쌍으로 갖는다.
Header에 문자열을 전달하면 기본 Title로 감싸며, Icon이나 보조 콘텐츠가 필요하면 공개 슬롯을 조합한다.
type="single"에서는 한 항목만, type="multiple"에서는 여러 항목을 동시에 열 수 있다.

API Reference

ExpansionPanel Props

Prop

Type

Default

arrowPosition

"left" | "right"

right

collapsible

boolean

지정 안 함

padding

boolean

true

position

"top" | "bottom"

bottom

size

"sm" | "md" | "lg"

type

"multiple" | "single"

지정 안 함

ExpansionPanel.Item

하나의 제목·본문 패널을 묶는 항목이다.

공개 Props 없음

ExpansionPanel.Header

항목 제목과 열기 동작을 표시하는 헤더다.

Prop

Type

Default

arrowPosition

ArrowPosition

right

children

React.ReactNode

지정 안 함

disabled

boolean

지정 안 함

size

ExpansionPanelSize

textClassName

string

지정 안 함

ExpansionPanel.Icon

헤더 제목 앞에 표시할 보조 아이콘 슬롯이다.

공개 Props 없음

ExpansionPanel.Title

헤더 제목의 텍스트 스타일을 명시하는 슬롯이다.

공개 Props 없음

ExpansionPanel.Trigger

헤더를 눌러 항목을 열고 닫는 트리거다. Header가 기본으로 내부에 렌더링한다.

공개 Props 없음

ExpansionPanel.Content

항목이 열렸을 때 표시할 상세 콘텐츠다.

Prop

Type

Default

children

필수

React.ReactNode

지정 안 함

padding

string

지정 안 함

열림 방식과 크기

type="single"은 한 번에 하나의 패널만 열고, type="multiple"은 여러 패널을 동시에 엽니다. single에서는 collapsible로 열린 패널을 다시 닫을 수 있는지 정하며, defaultValue로 처음 열 항목을 지정합니다. size는 제목 행의 여백과 제목·화살표 크기만 바꾸며 sm·md·lg를 제공합니다.

크기

sm·md·lg 의 제목 높이와 여백 차이를 비교합니다. 본문에 끼우면 sm, 단독 섹션이면 lg 가 기준입니다.

코드

Open in Playground

import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';
import Book from '@mildang/icons/react/book';
import { Chip } from '@mildang/design-system/Chip';
import { Text } from '@mildang/design-system/Text';
import { ExpansionPanelSize } from '@mildang/design-system/ExpansionPanel';

const expansionPanelVariantValues = {
  size: ['sm', 'md', 'lg'] as ExpansionPanelSize[],
};

const ExpansionPanelSizesExample = () => (
    <div style={{ width: '500px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
      {expansionPanelVariantValues.size.map((size) => (
        <ExpansionPanel key={size} size={size} defaultValue="item-1">
          <ExpansionPanel.Item value="item-1">
            <ExpansionPanel.Header size={size}>
              <ExpansionPanel.Icon>
                <Book />
              </ExpansionPanel.Icon>
              <ExpansionPanel.Title>Expansion Panel ({size})</ExpansionPanel.Title>
              <Chip label="Error" color="red" size="sm" type="fill" />
              <Text variant="caption-md-medium" color="neutral.text.base">
                [1/1]
              </Text>
              <Text variant="caption-md" color="neutral.text.lowest">
                description
              </Text>
            </ExpansionPanel.Header>
            <ExpansionPanel.Content>
              <p>This is a {size} size expansion panel.</p>
            </ExpansionPanel.Content>
          </ExpansionPanel.Item>
        </ExpansionPanel>
      ))}
    </div>
  );

export default ExpansionPanelSizesExample;

레이아웃과 보조 콘텐츠

padding=로 제목 행과 본문의 기본 여백을 제거하고, ExpansionPanel.Content의 padding으로 본문 여백만 조정할 수 있습니다. arrowPosition은 화살표 위치를, position은 본문이 제목 위 또는 아래에 놓이는 위치를 정합니다. Header에는 Icon이나 Chip을 함께 배치할 수 있고, Header에 직접 넣는 부가 텍스트는 size의 영향을 받지 않습니다.

기본 사용

제목을 눌러 본문을 접고 펴는 최소 형태 — defaultValue 로 처음부터 펼쳐 둘 항목을 지정합니다.

코드

Open in Playground

import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';

const ExpansionPanelDefaultExample = () => (
    <div style={{ width: '500px' }}>
      <ExpansionPanel>
        <ExpansionPanel.Item value="item-1">
          <ExpansionPanel.Header>Is it accessible?</ExpansionPanel.Header>
          <ExpansionPanel.Content>Yes. It adheres to the WAI-ARIA design pattern.</ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
    </div>
  );

export default ExpansionPanelDefaultExample;

사용 가이드

권장

한 화면에 모두 보여주기 부담스러운 정보, FAQ, 설정, 필터 그룹을 요약해 둔다.
Dialog 안에서 항목이 많을 때 상세 내용을 접어 본문을 간결하게 유지한다.
Header의 부가 텍스트나 Content 본문은 size에 기대지 말고 Text 또는 style props로 직접 스타일링한다.

예제

Playground

코드

Open in Playground

import type { ComponentProps } from 'react';
import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    type: 'single',
    collapsible: true,
    defaultValue: 'item-1',
  }) } as ComponentProps<typeof ExpansionPanel>;

const ExpansionPanelPlaygroundExampleRender = (args: ComponentProps<typeof ExpansionPanel>) => (
    <div style={{ width: '500px' }}>
      <ExpansionPanel {...args}>
        <ExpansionPanel.Item value="item-1">
          <ExpansionPanel.Header>Panel 1</ExpansionPanel.Header>
          <ExpansionPanel.Content>첫 번째 패널 내용입니다.</ExpansionPanel.Content>
        </ExpansionPanel.Item>
        <ExpansionPanel.Item value="item-2">
          <ExpansionPanel.Header>Panel 2</ExpansionPanel.Header>
          <ExpansionPanel.Content>두 번째 패널 내용입니다.</ExpansionPanel.Content>
        </ExpansionPanel.Item>
        <ExpansionPanel.Item value="item-3">
          <ExpansionPanel.Header>Panel 3</ExpansionPanel.Header>
          <ExpansionPanel.Content>세 번째 패널 내용입니다.</ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
    </div>
  );

export default function ExpansionPanelPlaygroundExample(props: Partial<ComponentProps<typeof ExpansionPanel>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ExpansionPanel>;
  return ExpansionPanelPlaygroundExampleRender(mergedProps);
}

MultipleDefault

코드

Open in Playground

import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';

const ExpansionPanelMultipleDefaultExample = () => (
    <div style={{ width: '500px' }}>
      <ExpansionPanel type="multiple" defaultValue={['item-1', 'item-2']}>
        {[...Array(4)].map((_, index) => (
          <ExpansionPanel.Item key={index} value={`item-${index + 1}`}>
            <ExpansionPanel.Header>Is it accessible?</ExpansionPanel.Header>
            <ExpansionPanel.Content>Yes. It adheres to the WAI-ARIA design pattern.</ExpansionPanel.Content>
          </ExpansionPanel.Item>
        ))}
      </ExpansionPanel>
    </div>
  );

export default ExpansionPanelMultipleDefaultExample;

MultipleWithIconAndChip

코드

Open in Playground

import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';
import Book from '@mildang/icons/react/book';
import { Chip } from '@mildang/design-system/Chip';
import { Text } from '@mildang/design-system/Text';

const ExpansionPanelMultipleWithIconAndChipExample = () => (
    <div style={{ width: '500px' }}>
      <ExpansionPanel type="multiple" defaultValue={['item-1']}>
        <ExpansionPanel.Item value="item-1">
          <ExpansionPanel.Header>
            <ExpansionPanel.Icon>
              <Book />
            </ExpansionPanel.Icon>
            <ExpansionPanel.Title>First Panel</ExpansionPanel.Title>
            <Chip label="Error" color="red" size="sm" type="fill" />
            <Text variant="caption-md-medium" color="neutral.text.base">
              [1/2]
            </Text>
            <Text variant="caption-md" color="neutral.text.lowest">
              description
            </Text>
          </ExpansionPanel.Header>
          <ExpansionPanel.Content>
            콘텐츠를 요약해서 보여주고 상세적으로 보여줘야할 때 사용합니다.
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
        <ExpansionPanel.Item value="item-2">
          <ExpansionPanel.Header>
            <ExpansionPanel.Icon>
              <Book />
            </ExpansionPanel.Icon>
            <ExpansionPanel.Title>Second Panel</ExpansionPanel.Title>
            <Chip label="New" color="brand" size="sm" type="fill" />
            <Text variant="caption-md-medium" color="neutral.text.base">
              [2/2]
            </Text>
            <Text variant="caption-md" color="neutral.text.lowest">
              description
            </Text>
          </ExpansionPanel.Header>
          <ExpansionPanel.Content>여러 패널을 동시에 열 수 있습니다.</ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
    </div>
  );

export default ExpansionPanelMultipleWithIconAndChipExample;

[코드] Inside Dialog

코드

Open in Playground

import { Dialog } from '@mildang/design-system/Dialog';
import { Button } from '@mildang/design-system/Button';
import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';
import { Text } from '@mildang/design-system/Text';

const ExpansionPanelInsideDialogExample = () => (
    <Dialog>
      <Dialog.Trigger asChild>
        <Button variant="tertiary">Open Dialog</Button>
      </Dialog.Trigger>
      <Dialog.Content>
        <Dialog.Header>
          <Dialog.Title>Dialog with ExpansionPanel</Dialog.Title>
        </Dialog.Header>
        <Dialog.Body>
          <ExpansionPanel type="multiple">
            <ExpansionPanel.Item value="item-1">
              <ExpansionPanel.Header>
                <ExpansionPanel.Title>첫 번째 항목</ExpansionPanel.Title>
              </ExpansionPanel.Header>
              <ExpansionPanel.Content>
                <Text>다이얼로그 열자마자 arrow 가 닫힌 상태여야 정상.</Text>
              </ExpansionPanel.Content>
            </ExpansionPanel.Item>
            <ExpansionPanel.Item value="item-2">
              <ExpansionPanel.Header>
                <ExpansionPanel.Title>두 번째 항목</ExpansionPanel.Title>
              </ExpansionPanel.Header>
              <ExpansionPanel.Content>
                <Text>클릭했을 때만 arrow 가 회전해야 함.</Text>
              </ExpansionPanel.Content>
            </ExpansionPanel.Item>
          </ExpansionPanel>
        </Dialog.Body>
      </Dialog.Content>
    </Dialog>
  );

export default ExpansionPanelInsideDialogExample;

MultipleDifferentSizes

코드

Open in Playground

import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';
import { Chip } from '@mildang/design-system/Chip';

const ExpansionPanelMultipleDifferentSizesExample = () => (
    <div style={{ width: '500px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <ExpansionPanel type="multiple" size="lg" defaultValue={['item-1']}>
        <ExpansionPanel.Item value="item-1">
          <ExpansionPanel.Header size="lg">
            <ExpansionPanel.Title>Large Panel</ExpansionPanel.Title>
            <Chip label="Large" color="brand" size="sm" type="fill" />
          </ExpansionPanel.Header>
          <ExpansionPanel.Content>
            <div>
              <p>Large 크기의 패널입니다.</p>
            </div>
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
      <ExpansionPanel type="multiple" size="md" defaultValue={['item-2']}>
        <ExpansionPanel.Item value="item-2">
          <ExpansionPanel.Header size="md">
            <ExpansionPanel.Title>Medium Panel</ExpansionPanel.Title>
            <Chip label="Medium" color="red" size="sm" type="fill" />
          </ExpansionPanel.Header>
          <ExpansionPanel.Content>
            <div>
              <p>Medium 크기의 패널입니다.</p>
            </div>
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
      <ExpansionPanel type="multiple" size="sm" defaultValue={['item-3']}>
        <ExpansionPanel.Item value="item-3">
          <ExpansionPanel.Header size="sm">
            <ExpansionPanel.Title>Small Panel</ExpansionPanel.Title>
            <Chip label="Small" color="brand" size="sm" type="fill" />
          </ExpansionPanel.Header>
          <ExpansionPanel.Content>
            <div>
              <p>Small 크기의 패널입니다.</p>
            </div>
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
    </div>
  );

export default ExpansionPanelMultipleDifferentSizesExample;

WithoutPadding

코드

Open in Playground

import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';
import { Text } from '@mildang/design-system/Text';
import { css } from '@mildang/styled-system/css';
import { splitCssProps } from '@mildang/styled-system/jsx';

function BlankBox(props: any) {
  const { sx, ...other } = props;
  const [cssProps] = splitCssProps(other);
  const { css: _cssStyleProps, ...styleProps } = cssProps;
  return (
    <div className={css({ padding: '10', borderRadius: '4', backgroundColor: 'info.ghostBg.base', whiteSpace: 'pre-wrap', border: '1px dashed token(colors.info.border.highest)', color: 'info.text.base', w: '100%' }, styleProps, sx)}>
      <Text className={css({ fontWeight: 'bold', fontSize: '10', lineHeight: '1' })}>Blank</Text>
      <Text className={css({ fontSize: '10', lineHeight: '1.2', mt: '2', whiteSpace: 'pre-wrap' })}>{'Blank에는 어떤 아이템,' + '\n컴포넌트도 들어올 수 있습니다.'}</Text>
    </div>
  );
}

const ExpansionPanelWithoutPaddingExample = () => (
    <div style={{ width: '500px' }}>
      <ExpansionPanel padding={false}>
        <ExpansionPanel.Item value="item-1">
          <ExpansionPanel.Header>
            <ExpansionPanel.Title>Expansion Panel</ExpansionPanel.Title>
          </ExpansionPanel.Header>
          <ExpansionPanel.Content>
            <BlankBox />
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
    </div>
  );

export default ExpansionPanelWithoutPaddingExample;

ArrowLeft

코드

Open in Playground

import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';
import Book from '@mildang/icons/react/book';
import { Chip } from '@mildang/design-system/Chip';
import { Text } from '@mildang/design-system/Text';
import { css } from '@mildang/styled-system/css';
import { splitCssProps } from '@mildang/styled-system/jsx';

function BlankBox(props: any) {
  const { sx, ...other } = props;
  const [cssProps] = splitCssProps(other);
  const { css: _cssStyleProps, ...styleProps } = cssProps;
  return (
    <div className={css({ padding: '10', borderRadius: '4', backgroundColor: 'info.ghostBg.base', whiteSpace: 'pre-wrap', border: '1px dashed token(colors.info.border.highest)', color: 'info.text.base', w: '100%' }, styleProps, sx)}>
      <Text className={css({ fontWeight: 'bold', fontSize: '10', lineHeight: '1' })}>Blank</Text>
      <Text className={css({ fontSize: '10', lineHeight: '1.2', mt: '2', whiteSpace: 'pre-wrap' })}>{'Blank에는 어떤 아이템,' + '\n컴포넌트도 들어올 수 있습니다.'}</Text>
    </div>
  );
}

const ExpansionPanelArrowLeftExample = () => (
    <div style={{ width: '500px' }}>
      <ExpansionPanel arrowPosition="left">
        <ExpansionPanel.Item value="item-1">
          <ExpansionPanel.Header arrowPosition="left">
            <ExpansionPanel.Icon>
              <Book />
            </ExpansionPanel.Icon>
            <ExpansionPanel.Title>Expansion Panel</ExpansionPanel.Title>
            <Chip label="Error" color="red" size="sm" type="fill" />
            <Text variant="caption-md-medium" color="neutral.text.base">
              [1/1]
            </Text>
            <Text variant="caption-md" color="neutral.text.lowest">
              description
            </Text>
          </ExpansionPanel.Header>
          <ExpansionPanel.Content>
            <BlankBox />
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
    </div>
  );

export default ExpansionPanelArrowLeftExample;

ContentPosition

코드

Open in Playground

import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';
import { Text } from '@mildang/design-system/Text';
import { css } from '@mildang/styled-system/css';
import { splitCssProps } from '@mildang/styled-system/jsx';

function BlankBox(props: any) {
  const { sx, ...other } = props;
  const [cssProps] = splitCssProps(other);
  const { css: _cssStyleProps, ...styleProps } = cssProps;
  return (
    <div className={css({ padding: '10', borderRadius: '4', backgroundColor: 'info.ghostBg.base', whiteSpace: 'pre-wrap', border: '1px dashed token(colors.info.border.highest)', color: 'info.text.base', w: '100%' }, styleProps, sx)}>
      <Text className={css({ fontWeight: 'bold', fontSize: '10', lineHeight: '1' })}>Blank</Text>
      <Text className={css({ fontSize: '10', lineHeight: '1.2', mt: '2', whiteSpace: 'pre-wrap' })}>{'Blank에는 어떤 아이템,' + '\n컴포넌트도 들어올 수 있습니다.'}</Text>
    </div>
  );
}

const ExpansionPanelContentPositionExample = () => (
    <div style={{ width: '500px' }}>
      <ExpansionPanel defaultValue="item-1" position="top">
        <ExpansionPanel.Item value="item-1">
          <ExpansionPanel.Header>
            <ExpansionPanel.Title>Expansion Panel</ExpansionPanel.Title>
          </ExpansionPanel.Header>
          <ExpansionPanel.Content>
            <BlankBox />
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
    </div>
  );

export default ExpansionPanelContentPositionExample;

Disabled

코드

Open in Playground

import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';
import { Text } from '@mildang/design-system/Text';
import { css } from '@mildang/styled-system/css';
import { splitCssProps } from '@mildang/styled-system/jsx';

function BlankBox(props: any) {
  const { sx, ...other } = props;
  const [cssProps] = splitCssProps(other);
  const { css: _cssStyleProps, ...styleProps } = cssProps;
  return (
    <div className={css({ padding: '10', borderRadius: '4', backgroundColor: 'info.ghostBg.base', whiteSpace: 'pre-wrap', border: '1px dashed token(colors.info.border.highest)', color: 'info.text.base', w: '100%' }, styleProps, sx)}>
      <Text className={css({ fontWeight: 'bold', fontSize: '10', lineHeight: '1' })}>Blank</Text>
      <Text className={css({ fontSize: '10', lineHeight: '1.2', mt: '2', whiteSpace: 'pre-wrap' })}>{'Blank에는 어떤 아이템,' + '\n컴포넌트도 들어올 수 있습니다.'}</Text>
    </div>
  );
}

const ExpansionPanelDisabledExample = () => (
    <div style={{ width: '500px' }}>
      <ExpansionPanel defaultValue="item-1">
        <ExpansionPanel.Item value="item-1">
          <ExpansionPanel.Header disabled>
            <ExpansionPanel.Title>Expansion Panel</ExpansionPanel.Title>
          </ExpansionPanel.Header>
          <ExpansionPanel.Content>
            <BlankBox />
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
    </div>
  );

export default ExpansionPanelDisabledExample;

ContentPadding

코드

Open in Playground

import { ExpansionPanel as ExpansionPanel } from '@mildang/design-system/ExpansionPanel';
import { Text } from '@mildang/design-system/Text';
import { css } from '@mildang/styled-system/css';
import { splitCssProps } from '@mildang/styled-system/jsx';

function BlankBox(props: any) {
  const { sx, ...other } = props;
  const [cssProps] = splitCssProps(other);
  const { css: _cssStyleProps, ...styleProps } = cssProps;
  return (
    <div className={css({ padding: '10', borderRadius: '4', backgroundColor: 'info.ghostBg.base', whiteSpace: 'pre-wrap', border: '1px dashed token(colors.info.border.highest)', color: 'info.text.base', w: '100%' }, styleProps, sx)}>
      <Text className={css({ fontWeight: 'bold', fontSize: '10', lineHeight: '1' })}>Blank</Text>
      <Text className={css({ fontSize: '10', lineHeight: '1.2', mt: '2', whiteSpace: 'pre-wrap' })}>{'Blank에는 어떤 아이템,' + '\n컴포넌트도 들어올 수 있습니다.'}</Text>
    </div>
  );
}

const ExpansionPanelContentPaddingExample = () => (
    <div style={{ width: '500px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <ExpansionPanel size="sm" defaultValue="default">
        <ExpansionPanel.Item value="default">
          <ExpansionPanel.Header size="sm">
            <ExpansionPanel.Title>기본값 (size 기준 · sm=16)</ExpansionPanel.Title>
          </ExpansionPanel.Header>
          <ExpansionPanel.Content>
            <BlankBox />
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>

      <ExpansionPanel size="sm" defaultValue="override">
        <ExpansionPanel.Item value="override">
          <ExpansionPanel.Header size="sm">
            <ExpansionPanel.Title>padding=&quot;32&quot; 로 override</ExpansionPanel.Title>
          </ExpansionPanel.Header>
          <ExpansionPanel.Content padding="32">
            <BlankBox />
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>

      <ExpansionPanel size="sm" defaultValue="zero">
        <ExpansionPanel.Item value="zero">
          <ExpansionPanel.Header size="sm">
            <ExpansionPanel.Title>padding=&quot;0&quot; 로 패딩 제거</ExpansionPanel.Title>
          </ExpansionPanel.Header>
          <ExpansionPanel.Content padding="0">
            <BlankBox />
          </ExpansionPanel.Content>
        </ExpansionPanel.Item>
      </ExpansionPanel>
    </div>
  );

export default ExpansionPanelContentPaddingExample;