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

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

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

## Preview

```tsx
import "./styles";

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

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <Accordion className="accordion-preview">
        <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>
    </page>
  );
}

root.render(<Root />);
```

## 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`

## Examples

### Multiple

`multiple`을 설정하면 여러 항목을 동시에 펼칠 수 있습니다.

```tsx
import "./styles";

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

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <Accordion multiple defaultValues={["item-1", "item-2"]} variant="separated">
        <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>
    </page>
  );
}

root.render(<Root />);
```

### Disabled

`Accordion`의 `disabled`는 전체 항목을 비활성화합니다. `AccordionItem`에 설정하면 해당 항목만 비활성화합니다.

```tsx
import "./styles";

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

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });

  return (
    <page className={seedClassName}>
      <Accordion>
        <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>
    </page>
  );
}

root.render(<Root />);
```

### Listening to Value Changes

`values`와 `onValuesChange`를 함께 사용해 펼쳐진 항목을 제어할 수 있습니다. 비제어 방식에서는 `defaultValues`를 사용합니다.

```tsx
import "./styles";

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

const DEFAULT_VALUES = ["shipping"];

function Root() {
  const seedClassName = useSeedClassName({ colorMode: "system" });
  const [values, setValues] = useState<string[]>(DEFAULT_VALUES);

  return (
    <page className={seedClassName}>
      <Accordion multiple values={values} onValuesChange={setValues} variant="separated">
        <AccordionItem value="shipping">
          <AccordionTrigger title="배송 옵션" description="배송 방식과 예상 소요 시간" />
          <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>
      </Accordion>
      <text className="accordion-preview__status">values: {JSON.stringify(values)}</text>
    </page>
  );
}

root.render(<Root />);
```

## Web Version Differences

<Callout type="warning">
  Lynx `Accordion`은 React 버전과 다음 차이가 있습니다.

  - **Native elements**: HTML heading, button, region 대신 Lynx `<view>`와 `<text>`를 렌더링합니다.
  - **Interaction**: 키보드 탐색 대신 Trigger의 native tap 이벤트로 항목을 열고 닫습니다.
  - **Accessibility**: DOM ARIA 대신 `accessibility-heading`, `accessibility-role-description`, `accessibility-value`를 사용합니다.
  - **Responsive size**: Lynx preset은 viewport media query를 지원하지 않아 `size="responsive"`를 제공하지 않습니다.
  - **Content transition**: React 버전은 CSS custom property로 높이를 전달하고, Lynx 버전은 `layoutchange`로 콘텐츠 높이를 측정해 같은 duration과 easing의 transition을 적용합니다.
</Callout>

## Unsupported Lynx Features

| 기능                      | 설명                                                                                |
| ----------------------- | --------------------------------------------------------------------------------- |
| `asChild`               | Lynx에는 Slot 기반 polymorphic 렌더링이 없습니다.                                             |
| `headingLevel`          | Lynx의 heading 접근성 속성은 HTML heading level을 받지 않습니다.                                |
| DOM ARIA 연결             | `aria-controls`, `aria-labelledby`, `role="region"` 대신 Lynx native 접근성 속성을 사용합니다. |
| Arrow / Home / End 키 탐색 | Lynx native 화면에는 웹과 같은 키보드 포커스 모델이 없습니다.                                          |
| `size="responsive"`     | Lynx preset은 viewport media query를 지원하지 않습니다.                                     |