ShadCN UI 학습기: accordion 컴포넌트

이번에는 ShadCN UI의 Accordion(아코디언) 컴포넌트를 학습하면서,
✅ 단일 열림 모드(single)
✅ 다중 열림 모드(multiple)
두 가지 방식을 모두 적용해보았습니다.

Accordion(아코디언) 컴포넌트 실습

ShadCN의 Accordion 컴포넌트를 활용하여 FAQ 스타일의 인터페이스를 만들었습니다.
type="single" 옵션을 주면 한 번에 하나의 항목만 열리고,
type="multiple" 옵션을 주면 여러 개의 항목을 동시에 열 수 있습니다.

ShadCN Accordion(아코디언) 설명

ShadCN UI에서 제공하는 Accordion 컴포넌트는 FAQ 스타일의 UI를 손쉽게 구현할 수 있도록 만들어졌습니다.

• 사용된 주요 컴포넌트
  Accordion 아코디언의 컨테이너 역할
  AccordionItem 각 아코디언 항목을 감싸는 컴포넌트
  AccordionTrigger 클릭 가능한 버튼 (아코디언을 열거나 닫음)
  AccordionContent 트리거 클릭 시 표시되는 본문 내용
  type="single": 한 번에 하나의 항목만 열 수 있음
  type="multiple": 여러 개의 항목을 동시에 열 수 있음

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion';

const SingleAccordion = () => {
  return (
    <div className="w-full rounded-lg border p-6 shadow-md">
      <h2 className="mb-4 text-xl font-semibold">Single Type Accordion</h2>
      <Accordion type="single" collapsible>
        <AccordionItem value="item-1">
          <AccordionTrigger>What is React?</AccordionTrigger>
          <AccordionContent>
            React is a JavaScript library for building user interfaces.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>Why use Next.js?</AccordionTrigger>
          <AccordionContent>
            Next.js enables server-side rendering and static site generation.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
};

const MultipleAccordion = () => {
  return (
    <div className="w-full rounded-lg border p-6 shadow-md">
      <h2 className="mb-4 text-xl font-semibold">Multiple Type Accordion</h2>
      <Accordion type="multiple">
        <AccordionItem value="item-1">
          <AccordionTrigger>What is Tailwind CSS?</AccordionTrigger>
          <AccordionContent>
            Tailwind CSS is a utility-first CSS framework.
          </AccordionContent>
        </AccordionItem>
        <AccordionItem value="item-2">
          <AccordionTrigger>What is Zustand?</AccordionTrigger>
          <AccordionContent>
            Zustand is a small, fast, and scalable state management library.
          </AccordionContent>
        </AccordionItem>
      </Accordion>
    </div>
  );
};

const AccordionPage = () => {
  return (
    <div className="min-h-screen bg-gray-100 p-10">
      <h1 className="mb-6 text-center text-3xl font-bold">Accordion Example</h1>
      <div className="grid grid-cols-2 gap-6">
        <SingleAccordion />
        <MultipleAccordion />
      </div>
    </div>
  );
};
export default AccordionPage;