CollapsibleTab

  • isAllow로 메뉴의 접근을 true로 설정
  • useState로 하위 메뉴의 여닫음 상태관리
  • toggle 메소드로 Collapsible메뉴 토글링
  • heading Props로 버튼 이름 설정
// index.tsx
export const CollapsibleTab = ({ isAllow = true, heading, children }: Props) => {
  const [isOpen, setBeOpen] = useState(false);
  const toggle = () => {
    if (isAllow) {
      setBeOpen(isOpen => !isOpen);
    }
  };
  return (
    <Layout aria-hidden={!isAllow}>
      <button type="button" onClick={toggle}>
        {heading}
      </button>
      <Collapsible className="collapsible" isOpen={isOpen}>
        {children}
      </Collapsible>
    </Layout>
  );
};