[겨울방학-회사] react로 FAQ 리스트 만들기 : Accordion 구현

• 아코디언 디자인은 shadcn/ui의 Accordion을 사용하여 구현하였습니다

single 타입 ( Accordion Type = "single" )

<Accordion
	type="single"
    className="item-center m-6 flex flex-col gap-4"
>
</Accordion>

• 한 번에 하나의 아코디언 아이템만 펼쳐진 상태로 유지됩니다
• 새로운 아이템을 펼치면 이전에 펼쳐져 있던 아이템은 자동으로 접힙니다
• 사용자가 한 번에 하나의 정보에만 집중하도록 유도합니다

사용 시나리오

• FAQ 페이지
  • 사용자가 궁금한 질문을 클릭하면 답변이 펼쳐지고, 다른 질문을 클릭하면 이전 답변은 접히도록 하여 깔끔한 정보 제공이 가능합니다
• 설정 매뉴
  • 여러 설정 옵션 중 현재 활성화된 옵션만 보여주고, 다른 옵션을 선택하면 이전 옵션은 숨깁니다
• 단계별 폼
  • 복잡한 폼을 단계별로 나누어 한 번에 하나의 단계만 보여줌으로써 사용자의 집중도를 높이고 폼 작성 과정을 간소화합니다

장점

• 정보의 집중도를 높여 사용자 경험을 향상시킵니다
• 복잡한 정보를 깔끔하게 정리하여 시각적인 부분을 줄입니다
• 모바일 환경과 같이 제한된 공간에서 정보를 효율적으로 표시할 수 있습니다

단점

• 여러 정보를 동시에 비교하거나 참조해야 하는 경우 불편함을 느낄 수 있습니다
• 사용자가 원하는 정보를 빠르게 찾기 어려울 수 있습니다

multiple 타입 ( Accordion Type="multiple" )

<Accordion
	type="multiple"
    className="item-center m-6 flex flex-col gap-4"
>
</Accordion>

• 여러 개의 아코디언 아이템을 동시에 펼칠 수 있습니다
• 각 아이템은 독립적으로 펼쳐지거나 접힐 수 있으며, 다른 아이템에 영향을 주지 않습니다
• 사용자가 여러 정보를 동시에 비교하거나 참조해야 하는 경우 유용합니다

사용 예시

• 필터 목록
  • 사용자가 여러 필터를 동시에 선택하여 검색 결과를 좁힐 수 있습니다
• 약관 동의 페이지
  • 여러 약관을 동시에 펼쳐서 내용을 확인하고 동의할 수 있도록 합니다
• 고급 설정 메뉴
  • 여러 설정 옵션을 동시에 변경하여 사용자 맞춤 설정을 가능하게 합니다

장점

• 사용자에게 더 많은 유연성을 제공하여 다양한 정보를 동시에 확인할 수 있습니다
• 정보 비교 및 참조가 필요한 경우 효율적인 사용자 경험을 제공합니다
• 고급 사용자나 전문가를 위한 복잡한 설정을 제공하는 데 적합합니다

단점

• 너무 많은 아이템을 동시에 펼치면 화면이 복잡해져 사용자 경험을 저해할 수 있습니다
• 정보 과부하를 유발하여 사용자가 필요한 정보를 찾기 어려울 수 있습니다

 

전체코드

import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/app/_components/ui/accordion";
import { FAQList } from "../../_consts/faqList";

export function FAQSection() {
  return (
    <div className="w-full">
      <h1 className="font-black text-center text-4xl m-5 font-sans">
        자주 묻는 질문
      </h1>
      <Accordion
        type="multiple"
        className="item-center m-6 flex flex-col gap-4"
      >
        {FAQList.map((FAQList) => (
          <AccordionItem key={FAQList.id} value={FAQList.id}>
            <AccordionTrigger className="bg-white font-bold p-3 text-base rounded-t-lg shadow-sm font-sans">
              {FAQList.title}
            </AccordionTrigger>
            <AccordionContent className="bg-white/40 font-bold p-3 text-sm rounded-b-lg shadow-md font-sans">
              {FAQList.content}
            </AccordionContent>
          </AccordionItem>
        ))}
      </Accordion>
    </div>
  );
}