간단한 FAQ 접기

FAQ 페이지를 만들 때 NextJS로 접을 수 있는 div를 만드는 과정에 있었기 때문에 여기에서도 여러분과 공유해야겠다고 생각했습니다!

사용한 라이브러리:

반응 아이콘

TailwindCSS

반응

그래서 우선/components 안에 넣은 FAQ 구성 요소를 만들었습니다. 결과 코드는 다음과 같습니다.

import { RiQuestionLine } from "react-icons/ri";
import { useState } from "react";

export function FaqList(props) {
  return <div className="faq-list">{props.children}</div>;
}

export function FaqItem(props) {
  const [open, setOpen] = useState(false);
  return (
    <div className="faq-item">
      <div onClick={() => setOpen(!open)} className="faq-header">
        <div className="faq-icon-wrap">
          <RiQuestionLine className="faq-icon" />
        </div>
        <h3 className="faq-title">{props.title}</h3>
      </div>
      {open && (
        <div className="faq-body">
          <p className="faq-text">{props.children}</p>
        </div>
      )}
    </div>
  );
}

그런 다음 각 구성 요소를 내 FAQ 페이지로 가져와서 FAQ를 작성할 수 있으며 이 코드는 다음과 같이 구성됩니다.

<FaqList>
    <FaqItem title="Why is the apprentice role prioritised in developer list?">
      Because we believe in giving apprentice developers a chance to get a
          foot into the industry.
    </FaqItem>
    <FaqItem title="What is this?">
      This is a demo of the ReactJS framework.
    </FaqItem>
</FaqList>

CSS는 다음과 같습니다.

/* FAQ COMPONENT */
  .faq-list {
    @apply flex flex-col space-y-2;
  }
  .faq-item {
    @apply flex flex-col gap-2;
  }
  .faq-header {
    @apply flex items-center gap-2 cursor-pointer bg-indigo-100 rounded-md p-2 select-none;
  }
  .faq-icon-wrap {
    @apply flex items-center justify-center p-1.5 rounded-md bg-indigo-500 text-white;
  }
  .faq-icon {
    @apply w-4 h-4;
  }
  .faq-title {
    @apply font-medium text-indigo-500;
  }
  .faq-body {
    @apply flex flex-col gap-2 py-3 px-5;
  }
  .faq-text {
    @apply text-xs italic text-gray-700 max-w-3xl;
  }

postcss 등을 사용하여 컴파일러에 내장된 Tailwinds를 사용해야 css 내에서 @apply 기능을 사용할 수 있습니다. 이것은 모듈 기반 css 파일이 아닌 globals.css에서만 작동합니다.

결과는 다음과 같아야 합니다.


내가 잘못 말했거나 이에 대한 피드백을 제공하려면 아래에서 저를 수정하십시오.

안부, etcroot.