# Accordion
URL: /lynx/components/accordion
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/lynx/components/accordion.mdx

관련된 정보 섹션을 접고 펼쳐 화면을 간결하게 구성하는 컴포넌트입니다.

Lynx Engine 최소 버전: 3.6

사용 가능 버전: @seed-design/lynx-react@0.5.0, @seed-design/lynx-css@0.9.0

## Preview

```tsx
import "./styles";

import { Box, Text } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion className="accordion-preview" style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger title="아코디언 항목 1" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">첫 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger title="아코디언 항목 2" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">두 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger title="아코디언 항목 3" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">세 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

## Installation

- npm: npx @seed-design/cli@latest add ui:accordion
- pnpm: pnpm dlx @seed-design/cli@latest add ui:accordion
- yarn: yarn dlx @seed-design/cli@latest add ui:accordion
- bun: bun x @seed-design/cli@latest add ui:accordion

## Props

### `Accordion`

### `AccordionItem`

### `AccordionTrigger`

### `AccordionContent`

고유 prop이 없습니다. `className`, `style`, `children`을 받습니다.

## Examples

### Inline Variant

기본 `inline` variant는 항목 사이에 구분선을 표시합니다.

```tsx
import "./styles";

import { Box, Text } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion variant="inline" style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger title="아코디언 항목 1" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">첫 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger title="아코디언 항목 2" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">두 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger title="아코디언 항목 3" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">세 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Separated

`variant="separated"`를 사용하면 각 항목이 분리된 카드로 표시됩니다.

```tsx
import "./styles";

import { Box, Text } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion variant="separated" style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger title="아코디언 항목 1" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">첫 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger title="아코디언 항목 2" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">두 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger title="아코디언 항목 3" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">세 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Multiple

기본적으로 한 항목만 펼칠 수 있습니다. `multiple`을 사용하면 여러 항목을 함께 펼칠 수 있습니다.

```tsx
import "./styles";

import { Box, Text } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion multiple defaultValues={["item-1", "item-2"]} style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger title="아코디언 항목 1" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">여러 항목을 동시에 펼칠 수 있습니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger title="아코디언 항목 2" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">각 항목은 다른 항목과 독립적으로 열고 닫힙니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger title="아코디언 항목 3" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">세 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Always one open

빈 배열은 무시하도록 `onValuesChange`를 처리하면 항상 한 항목을 열어 둘 수 있습니다.

```tsx
import "./styles";

import { useState } from "@lynx-js/react";
import { Box, Text } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  const [values, setValues] = useState<string[]>(["item-1"]);

  function handleValuesChange(nextValues: string[]) {
    "background only";

    if (nextValues.length === 0) return;
    setValues(nextValues);
  }

  return (
    <Accordion values={values} onValuesChange={handleValuesChange} style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger title="주문 전 확인 사항" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">
              현재 항목은 다시 눌러도 닫히지 않고, 다른 항목을 선택할 때만 전환됩니다.
            </Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger title="배송 일정" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">
              평일 오후 2시 이전 주문은 당일 출고되며, 주말 주문은 다음 영업일에 출고됩니다.
            </Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger title="교환 및 반품" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">
              수령 후 7일 이내에 교환 또는 반품을 요청할 수 있습니다.
            </Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Size

Lynx에서는 `medium`과 `large`를 지원하며 기본값은 `medium`입니다.

```tsx
import "./styles";

import { Box, Text, VStack } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  return (
    <VStack width="full" gap="spacingY.componentDefault">
      <Accordion size="medium" style={{ width: "100%" }}>
        <AccordionItem value="item-1">
          <AccordionTrigger title="아코디언 항목" description="size=medium (default)" />
          <AccordionContent>
            <Box p="x4">
              <Text textStyle="t4Regular">항목의 내용입니다.</Text>
            </Box>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
      <Accordion size="large" style={{ width: "100%" }}>
        <AccordionItem value="item-1">
          <AccordionTrigger title="아코디언 항목" description="size=large" />
          <AccordionContent>
            <Box p="x4">
              <Text textStyle="t4Regular">항목의 내용입니다.</Text>
            </Box>
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </VStack>
  );
}
```

### Prefix

`prefix`에 아이콘 같은 앞쪽 요소를 전달할 수 있습니다.

```tsx
import "./styles";

import IconCardLine from "@karrotmarket/lynx-monochrome-icon/IconCardLine";
import IconQuestionmarkCircleLine from "@karrotmarket/lynx-monochrome-icon/IconQuestionmarkCircleLine";
import IconTruckLine from "@karrotmarket/lynx-monochrome-icon/IconTruckLine";

import { Box, Icon, Text } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion style={{ width: "100%" }}>
      <AccordionItem value="shipping">
        <AccordionTrigger
          prefix={<Icon icon={<IconTruckLine />} size="full" />}
          title="배송 방법"
        />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">
              일반 배송, 빠른 배송, 방문 수령 중 주문 상황에 맞는 방법을 선택할 수 있습니다.
            </Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="payment">
        <AccordionTrigger
          prefix={<Icon icon={<IconCardLine />} size="full" />}
          title="결제 및 쿠폰"
        />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">
              카드, 간편결제, 보유 쿠폰을 한 번에 확인하고 결제에 적용할 수 있습니다.
            </Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="support">
        <AccordionTrigger
          prefix={<Icon icon={<IconQuestionmarkCircleLine />} size="full" />}
          title="문의와 환불"
        />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">
              주문 취소 가능 시간, 환불 소요 기간, 고객센터 문의 방법을 확인할 수 있습니다.
            </Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Description

`description`으로 트리거에 설명을 추가할 수 있습니다.

```tsx
import "./styles";

import { Box, Text } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger title="아코디언 항목 1" description="항목에 대한 간략한 설명입니다." />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">첫 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger title="아코디언 항목 2" description="항목에 대한 간략한 설명입니다." />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">두 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger title="아코디언 항목 3" description="항목에 대한 간략한 설명입니다." />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">세 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Disabled

전체를 비활성화하려면 `Accordion`, 한 항목만 비활성화하려면 `AccordionItem`에 `disabled`를 설정합니다.

```tsx
import "./styles";

import { Box, Text } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger title="활성화된 항목" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">이 항목은 활성화 상태입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2" disabled>
        <AccordionTrigger title="비활성화된 항목" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">이 항목은 비활성화 상태입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger title="활성화된 항목" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">이 항목은 활성화 상태입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Controlled

`values`와 `onValuesChange`로 열림 상태를 제어할 수 있습니다.

```tsx
import "./styles";

import { useState } from "@lynx-js/react";
import { Box, Text } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  const [values, setValues] = useState<string[]>(["item-1"]);

  function handleValuesChange(nextValues: string[]) {
    "background only";

    setValues(nextValues);
  }

  return (
    <Accordion values={values} onValuesChange={handleValuesChange} style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger title="아코디언 항목 1" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">첫 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger title="아코디언 항목 2" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">두 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger title="아코디언 항목 3" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">세 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Value Array Changes

트리거를 누르면 현재 `values`와 최근 `onValuesChange` 값을 표시합니다.

```tsx
import "./styles";

import { useState } from "@lynx-js/react";
import { Box, Text, VStack } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const DEFAULT_VALUES = ["shipping"];

export default function Example() {
  const [values, setValues] = useState<string[]>(DEFAULT_VALUES);
  const [history, setHistory] = useState<string[][]>([DEFAULT_VALUES]);

  function handleValuesChange(nextValues: string[]) {
    "background only";

    setValues(nextValues);
    setHistory((previous) => [nextValues, ...previous].slice(0, 5));
  }

  return (
    <VStack className="accordion-preview__value-changes" gap="x6" align="stretch">
      <Accordion
        multiple
        values={values}
        onValuesChange={handleValuesChange}
        style={{ width: "100%" }}
      >
        <AccordionItem value="shipping">
          <AccordionTrigger title="배송 옵션" />
          <AccordionContent>
            <Box p="x4">
              <Text textStyle="t4Regular">
                빠른 배송, 새벽 배송, 방문 수령 옵션을 비교할 수 있습니다.
              </Text>
            </Box>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="payment">
          <AccordionTrigger title="결제 수단" />
          <AccordionContent>
            <Box p="x4">
              <Text textStyle="t4Regular">
                카드, 계좌이체, 간편결제 중에서 원하는 결제 수단을 선택할 수 있습니다.
              </Text>
            </Box>
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="refund">
          <AccordionTrigger title="환불 정책" />
          <AccordionContent>
            <Box p="x4">
              <Text textStyle="t4Regular">
                주문 취소 가능 시간과 환불 소요 기간을 확인할 수 있습니다.
              </Text>
            </Box>
          </AccordionContent>
        </AccordionItem>
      </Accordion>

      <Box
        className="accordion-preview__history"
        p="x4"
        bg="bg.layerBasement"
        borderRadius="r2"
        borderWidth={1}
        borderColor="stroke.neutralWeak"
      >
        <VStack gap="x2" align="stretch">
          <Text textStyle="t3Medium">values: {JSON.stringify(values)}</Text>
          <Text textStyle="t3Medium">onValuesChange history:</Text>
          {history.map((snapshot, index) => (
            <Text key={`${snapshot.join(",") || "empty"}-${index}`} textStyle="t4Regular">
              {index + 1}. {JSON.stringify(snapshot)}
            </Text>
          ))}
        </VStack>
      </Box>
    </VStack>
  );
}
```

### Default Expanded

`defaultValues`로 처음 펼칠 항목을 지정할 수 있습니다.

```tsx
import "./styles";

import { Box, Text } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion multiple defaultValues={["item-1"]} style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger title="아코디언 항목 1" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">첫 번째 항목은 기본으로 펼쳐진 상태입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger title="아코디언 항목 2" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">두 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-3">
        <AccordionTrigger title="아코디언 항목 3" />
        <AccordionContent>
          <Box p="x4">
            <Text textStyle="t4Regular">세 번째 항목의 내용입니다.</Text>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

### Custom Content

`AccordionContent`는 콘텐츠 스타일을 제공하지 않습니다. 내부 콘텐츠에 패딩, 배경, 타이포그래피를 지정합니다.

```tsx
import "./styles";

import { Box, Text, VStack } from "@seed-design/lynx-react";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export default function Example() {
  return (
    <Accordion style={{ width: "100%" }}>
      <AccordionItem value="item-1">
        <AccordionTrigger title="배송 안내" description="배송 정책 및 예상 소요 시간" />
        <AccordionContent>
          <Box p="x4">
            <Box p="x4" borderRadius="r3" bg="bg.layerBasement">
              <VStack gap="x3" align="stretch">
                <VStack gap="x1" align="stretch">
                  <Text textStyle="t5Bold">일반 배송</Text>
                  <Text textStyle="t5Regular">주문 후 영업일 기준 2-3일 내에 배송됩니다.</Text>
                </VStack>
                <Box p="x3" borderRadius="r2" bg="bg.layerDefault">
                  <Text textStyle="t4Regular" color="fg.neutralSubtle">
                    제주 및 도서산간 지역은 1-2일이 추가 소요될 수 있습니다.
                  </Text>
                </Box>
              </VStack>
            </Box>
          </Box>
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger title="반품 및 교환" description="반품/교환 절차 안내" />
        <AccordionContent>
          <Box p="x4">
            <Box p="x4" borderRadius="r3" bg="bg.layerBasement">
              <VStack gap="x2" align="stretch">
                <Text textStyle="t5Regular">1. 고객센터로 반품/교환 요청</Text>
                <Text textStyle="t5Regular">2. 상품 수거 (택배 방문 수거)</Text>
                <Text textStyle="t5Regular">3. 검수 후 환불 또는 교환 처리</Text>
              </VStack>
            </Box>
          </Box>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}
```

## Web Version Differences

<Callout type="warning">
  Lynx `Accordion`은 네이티브 탭 이벤트와 접근성 속성을 사용합니다.

  `AccordionTrigger`의 `title`이 문자열이 아니면 `accessibility-label`을 직접 지정합니다.
</Callout>

## Unsupported Lynx Features

| 기능                      | 설명                                                              |
| ----------------------- | --------------------------------------------------------------- |
| `asChild`               | `asChild` 기반 요소 교체를 지원하지 않습니다.                                  |
| `headingLevel`          | heading level을 지정할 수 없습니다.                                      |
| DOM ARIA 연결             | `aria-controls`, `aria-labelledby`, `role="region"`을 지원하지 않습니다. |
| Arrow / Home / End 키 탐색 | 웹과 같은 키보드 포커스 이동을 지원하지 않습니다.                                    |
| `size="responsive"`     | `medium` 또는 `large`를 사용합니다.                                     |