IROUL
회원가입로그인
뒤로가기
섹션

FAQ 단일 열림 아코디언 데모

버튼 한 줄로 항목을 열고 닫는 단일 열림 아코디언입니다. grid-template-rows로 높이를 애니메이션하고, 닫힌 패널에는 inert로 보조 기술 포커스를 줄입니다.

Next.jsReactTypeScriptTailwind CSS
라이브 데모
새 탭에서 열기
데모 불러오는 중…

제작 과정

landing-sparkplus의 FaqSection과 동일한 질문답변 카피와 SimpleAccordion 패턴을 app/demos/section-faq-accordion으로 옮겨, 쇼케이스블로그에서 데모 URL만으로 재현 가능하게 했습니다.

동작

한 번에 하나의 항목만 열리도록 useStatenumber null로 인덱스를 관리합니다. 같은 행을 다시 누르면 닫힙니다. 초기값은 첫 항목이 열린 상태입니다.

높이 애니메이션

콘텐츠 영역을 display: grid와 grid-template-rows: 0fr / 1fr로 전환해, 고정 픽셀 없이 접었다 펼 수 있습니다. 내부 래퍼는 min-h-0 overflow-hidden으로 그리드 자식이 올바르게 줄어듭니다.

접근성

행 트리거는 button에 aria-expanded를 연결했고, 닫힌 패널 래퍼에 inert를 두어 탭 순서에서 빠지게 했습니다. 화살표 아이콘은 aria-hidden입니다. motion-reduce에서는 전환을 끕니다.

스타일

타이포는 globals.css의 text-heading*, text-body*를 사용하고, 좁은 뷰포트는 프로젝트 규칙대로 lg: 접두로 덮어씁니다.

소스 코드

import { FaqAccordionDemo } from "./-components/FaqAccordionDemo";

export default function SectionFaqAccordionPage() {
  return (
    <main className="min-h-[100dvh] bg-white">
      <FaqAccordionDemo />
    </main>
  );
}
43조회수

댓글