Accordion

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

사용 가능 버전@seed-design/[email protected], @seed-design/[email protected]

Lynx 예제를 불러오는 중입니다.

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

npx @seed-design/cli@latest add ui:accordion

pnpm dlx @seed-design/cli@latest add ui:accordion

yarn dlx @seed-design/cli@latest add ui:accordion

bun x @seed-design/cli@latest add ui:accordion

의존성 설치

npm install @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

yarn add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

pnpm add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

bun add @karrotmarket/lynx-monochrome-icon @seed-design/lynx-react

아래 코드를 복사 후 붙여넣고 사용하세요

/**
 * @file ui:accordion
 * @requires @seed-design/lynx-react@^1.0.0
 * @requires @seed-design/lynx-css@^1.0.0
 * @requires @karrotmarket/lynx-monochrome-icon@>=1.20.0 <2.0.0
 **/

import IconChevronDownSmallLine from "@karrotmarket/lynx-monochrome-icon/IconChevronDownSmallLine";
import * as React from "@lynx-js/react";
import { Accordion as SeedAccordion } from "@seed-design/lynx-react";
import type { LynxIconElementProps } from "@seed-design/lynx-react";

export interface AccordionProps extends SeedAccordion.RootProps {}

/**
 * @see https://seed-design.io/lynx/components/accordion
 */
export const Accordion = React.forwardRef<unknown, AccordionProps>((props, ref) => {
  const { children, ...otherProps } = props;
  return (
    <SeedAccordion.Root ref={ref} {...otherProps}>
      {children}
    </SeedAccordion.Root>
  );
});
Accordion.displayName = "Accordion";

export interface AccordionItemProps extends SeedAccordion.ItemProps {}

/**
 * @see https://seed-design.io/lynx/components/accordion
 */
export const AccordionItem = React.forwardRef<unknown, AccordionItemProps>((props, ref) => {
  const { children, ...otherProps } = props;
  return (
    <SeedAccordion.Item ref={ref} {...otherProps}>
      {children}
    </SeedAccordion.Item>
  );
});
AccordionItem.displayName = "AccordionItem";

export interface AccordionTriggerProps extends Omit<SeedAccordion.TriggerProps, "children"> {
  title: React.ReactNode;
  description?: React.ReactNode;
  prefix?: React.ReactNode;
  suffixIcon?: React.ReactElement<LynxIconElementProps>;
}

/**
 * @see https://seed-design.io/lynx/components/accordion
 */
export const AccordionTrigger = React.forwardRef<unknown, AccordionTriggerProps>((props, ref) => {
  const {
    title,
    description,
    prefix,
    suffixIcon = <IconChevronDownSmallLine />,
    "accessibility-label": accessibilityLabel,
    ...otherProps
  } = props;

  return (
    <SeedAccordion.Header>
      <SeedAccordion.Trigger
        ref={ref}
        accessibility-label={accessibilityLabel ?? (typeof title === "string" ? title : undefined)}
        {...otherProps}
      >
        {prefix != null ? <SeedAccordion.Prefix>{prefix}</SeedAccordion.Prefix> : null}
        <SeedAccordion.Body>
          <SeedAccordion.Title>{title}</SeedAccordion.Title>
          {description != null ? (
            <SeedAccordion.Description>{description}</SeedAccordion.Description>
          ) : null}
        </SeedAccordion.Body>
        <SeedAccordion.SuffixIcon icon={suffixIcon} />
      </SeedAccordion.Trigger>
    </SeedAccordion.Header>
  );
});
AccordionTrigger.displayName = "AccordionTrigger";

export interface AccordionContentProps extends SeedAccordion.ContentProps {}

/**
 * @see https://seed-design.io/lynx/components/accordion
 */
export const AccordionContent = React.forwardRef<unknown, AccordionContentProps>((props, ref) => {
  const { children, ...otherProps } = props;
  return (
    <SeedAccordion.Content ref={ref} {...otherProps}>
      {children}
    </SeedAccordion.Content>
  );
});
AccordionContent.displayName = "AccordionContent";

/**
 * This file is a snippet from SEED Design, helping you get started quickly with @seed-design/* packages.
 * You can extend this snippet however you want.
 */

Props

`Accordion`

Prop

Type

values?string[] | undefined

defaultValues?string[] | undefined

onValuesChange?((values: string[]) => void) | undefined

disabled?boolean | undefined

multiple?boolean | undefined

`AccordionItem`

Prop

Type

valuestring

disabled?boolean | undefined

`AccordionTrigger`

Prop

Type

titleReact.ReactNode

description?React.ReactNode

prefix?React.ReactNode

suffixIcon?React.ReactElement<LynxIconElementProps, string | React.JSXElementConstructor<any>> | undefined

expandedAccessibilityValue?string | undefined

collapsedAccessibilityValue?string | undefined

`AccordionContent`

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

Examples

Inline Variant

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

Lynx 예제를 불러오는 중입니다.

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"를 사용하면 각 항목이 분리된 카드로 표시됩니다.

Lynx 예제를 불러오는 중입니다.

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을 사용하면 여러 항목을 함께 펼칠 수 있습니다.

Lynx 예제를 불러오는 중입니다.

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를 처리하면 항상 한 항목을 열어 둘 수 있습니다.

Lynx 예제를 불러오는 중입니다.

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입니다.

Lynx 예제를 불러오는 중입니다.

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에 아이콘 같은 앞쪽 요소를 전달할 수 있습니다.

Lynx 예제를 불러오는 중입니다.

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으로 트리거에 설명을 추가할 수 있습니다.

Lynx 예제를 불러오는 중입니다.

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를 설정합니다.

Lynx 예제를 불러오는 중입니다.

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로 열림 상태를 제어할 수 있습니다.

Lynx 예제를 불러오는 중입니다.

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 값을 표시합니다.

Lynx 예제를 불러오는 중입니다.

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로 처음 펼칠 항목을 지정할 수 있습니다.

Lynx 예제를 불러오는 중입니다.

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는 콘텐츠 스타일을 제공하지 않습니다. 내부 콘텐츠에 패딩, 배경, 타이포그래피를 지정합니다.

Lynx 예제를 불러오는 중입니다.

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

Lynx Accordion은 네이티브 탭 이벤트와 접근성 속성을 사용합니다.

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

Unsupported Lynx Features

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

Accordion

Manual Installation

의존성 설치

아래 코드를 복사 후 붙여넣고 사용하세요

목차