본문으로 건너뛰기

Collapsible

접을 수 있는 콘텐츠 영역을 제공하는 컴포넌트입니다. 공간을 절약하고 사용자가 필요에 따라 콘텐츠를 펼치거나 접을 수 있습니다.

기본 사용법​

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'react-common-components-library';
import { useState } from 'react';

function CollapsibleExample() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <Collapsible 
      open={isOpen} 
      onOpenChange={setIsOpen}
      className="w-full max-w-md"
    >
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-medium">자주 묻는 질문</h3>
        <CollapsibleTrigger asChild>
          <button className="rounded-full p-2 hover:bg-gray-100">
            {isOpen ? '접기' : '펼치기'}
          </button>
        </CollapsibleTrigger>
      </div>
      
      <CollapsibleContent className="mt-2">
        <div className="rounded-md bg-gray-50 p-4">
          <p>이 컴포넌트 라이브러리는 React 애플리케이션을 위한 재사용 가능한 UI 컴포넌트 모음입니다.</p>
          <p className="mt-2">모든 컴포넌트는 접근성과 사용자 경험을 고려하여 설계되었습니다.</p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

자주 묻는 질문

▼

이 컴포넌트 라이브러리는 React 애플리케이션을 위한 재사용 가능한 UI 컴포넌트 모음입니다.

모든 컴포넌트는 접근성과 사용자 경험을 고려하여 설계되었습니다.

아코디언 스타일​

여러 Collapsible 컴포넌트를 사용하여 아코디언 스타일의 UI를 만들 수 있습니다:

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'react-common-components-library';
import { useState } from 'react';

function AccordionStyleExample() {
  const [openItem, setOpenItem] = useState(null);
  
  const items = [
    { id: 1, title: '섹션 1', content: '첫 번째 섹션의 내용입니다.' },
    { id: 2, title: '섹션 2', content: '두 번째 섹션의 내용입니다.' },
    { id: 3, title: '섹션 3', content: '세 번째 섹션의 내용입니다.' },
  ];
  
  return (
    <div className="space-y-2">
      {items.map((item) => (
        <Collapsible 
          key={item.id}
          open={openItem === item.id} 
          onOpenChange={(open) => setOpenItem(open ? item.id : null)}
          className="border rounded-md p-2"
        >
          <div className="flex items-center justify-between">
            <h3 className="text-md font-medium">{item.title}</h3>
            <CollapsibleTrigger asChild>
              <button className="rounded-full p-1 hover:bg-gray-100">
                {openItem === item.id ? '▲' : '▼'}
              </button>
            </CollapsibleTrigger>
          </div>
          
          <CollapsibleContent className="mt-2 pt-2 border-t">
            <p>{item.content}</p>
          </CollapsibleContent>
        </Collapsible>
      ))}
    </div>
  );
}

섹션 1

▼

첫 번째 섹션의 내용입니다.

섹션 2

▼

두 번째 섹션의 내용입니다.

섹션 3

▼

세 번째 섹션의 내용입니다.

애니메이션 효과​

Collapsible 컴포넌트에 애니메이션 효과를 추가할 수 있습니다:

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from 'react-common-components-library';
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

function AnimatedCollapsibleExample() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <Collapsible 
      open={isOpen} 
      onOpenChange={setIsOpen}
      className="w-full max-w-md"
    >
      <div className="flex items-center justify-between">
        <h3 className="text-lg font-medium">애니메이션 효과</h3>
        <CollapsibleTrigger asChild>
          <button className="rounded-full p-2 hover:bg-gray-100">
            {isOpen ? '접기' : '펼치기'}
          </button>
        </CollapsibleTrigger>
      </div>
      
      <AnimatePresence>
        {isOpen && (
          <CollapsibleContent asChild forceMount>
            <motion.div
              initial={{ height: 0, opacity: 0 }}
              animate={{ height: 'auto', opacity: 1 }}
              exit={{ height: 0, opacity: 0 }}
              transition={{ duration: 0.3 }}
              className="overflow-hidden"
            >
              <div className="mt-2 rounded-md bg-gray-50 p-4">
                <p>이 콘텐츠는 부드럽게 나타나고 사라집니다.</p>
              </div>
            </motion.div>
          </CollapsibleContent>
        )}
      </AnimatePresence>
    </Collapsible>
  );
}

애니메이션 효과

▼

이 콘텐츠는 나타나고 사라집니다.

API 참조​

Collapsible Props​

속성타입기본값설명
childrenReactNode필수Collapsible 컴포넌트의 자식 요소
openboolean-콘텐츠의 펼침/접힘 상태 (제어 컴포넌트)
defaultOpenbooleanfalse초기 펼침/접힘 상태 (비제어 컴포넌트)
onOpenChange(open: boolean) => void-펼침/접힘 상태 변경 시 호출되는 함수
disabledbooleanfalse컴포넌트 비활성화 여부
collapsiblebooleantrue접을 수 있는지 여부
asChildbooleanfalse첫 번째 자식 요소로 렌더링할지 여부
classNamestring''컴포넌트에 적용할 추가 CSS 클래스
styleCSSProperties-컴포넌트에 적용할 인라인 스타일

CollapsibleTrigger Props​

속성타입기본값설명
childrenReactNode필수트리거 요소의 자식 요소
asChildbooleanfalse첫 번째 자식 요소로 렌더링할지 여부
classNamestring''컴포넌트에 적용할 추가 CSS 클래스
styleCSSProperties-컴포넌트에 적용할 인라인 스타일

CollapsibleContent Props​

속성타입기본값설명
childrenReactNode필수콘텐츠 요소의 자식 요소
forceMountbooleanfalse접혀 있을 때도 DOM에 마운트할지 여부
asChildbooleanfalse첫 번째 자식 요소로 렌더링할지 여부
classNamestring''컴포넌트에 적용할 추가 CSS 클래스
styleCSSProperties-컴포넌트에 적용할 인라인 스타일

접근성​

Collapsible 컴포넌트는 다음과 같은 접근성 기능을 제공합니다:

  • WAI-ARIA 디자인 패턴을 준수하여 스크린 리더 호환성을 보장합니다.
  • 트리거 요소에는 aria-expanded 속성이 자동으로 적용되어 현재 상태를 스크린 리더에 알립니다.
  • 트리거 요소와 콘텐츠 요소는 aria-controls와 id로 연결되어 있습니다.
  • 키보드 사용자는 Enter 또는 Space 키를 사용하여 콘텐츠를 펼치거나 접을 수 있습니다.
  • 비활성화된 경우 aria-disabled="true"가 적용됩니다.