DropdownFAQ

import React, { useState } from "react";

import { ReactComponent as ArrowIcon } from "@Static/Icons/south_east_FILL0_wght300_GRAD0_opsz24.svg";

type DropdownFAQProp = {
  question: string;
  answer: string;
};

const DropdownFAQ = ({ question, answer }: DropdownFAQProp) => {
  const [isOpened, setIsOpened] = useState(false);

  return (
    <div
      className="w-full  space-y-m16 border-b pb-m12 tablet:space-y-t16 tablet:pb-t12 desktop:space-y-d16 desktop:pb-d12"
      onClick={() => setIsOpened(!isOpened)}
    >
      <div className="flex items-center justify-between gap-m16 tablet:gap-t16 desktop:gap-d16">
        <p className="heading4 [text-wrap:balance]">{question}</p>
        <ArrowIcon
          className={
            "icon-24 transition-transform " +
            (isOpened ? "-rotate-90" : "-rotate-0")
          }
        />
      </div>

      {isOpened && (
        <div>
          <p className="body [text-wrap:balance]">{answer}</p>
        </div>
      )}
    </div>
  );
};

export default DropdownFAQ;

Usage

  return (
    <>
      <div className="mx-auto mt-6 flex h-screen w-[90%] flex-col place-items-center">
        <DropdownFAQ
          question="How often will i get a new bouqeut?"
          answer="Our subscriptions allow you to select a delivery frequency that best suits your needs - either weekly, bi-weekly, or monthly. You can also choose the number of deliveries for your subscription. What's more, you can also pay for your subscription as you go or pay entirely upfront. Choose any combination that works for you!"
        />
      </div>
    </>
  );

구현

간단한 UI Component라서 설명을 덧붙일 건 없는 것 같다. 조금 그래도 포인트를 잡을 수 있는 건 ~

icon-24

아이콘을 넣을 때마다 항상 같은 클래스를 지정해주고 있어서 tailwind component로 생성해주었다.

@tailwind components;

@layer components {
  .icon-24 {
    @apply h-m24 w-m24 tablet:h-t24 tablet:w-t24 desktop:h-d24 desktop:w-d24;
  }
}

Usage

<Icon className="icon-24" />

Text Wrap Balance

텍스트 콘텐츠의 내용이 폭 보다 많은 내용을 가지게 되면 텍스트가 아래로 내려가게 되는데, 이때 내려가는 기준을 적절히 설정해줄 수 있는 속성이 text-wrap이다. 다만 이 속성은 실험 속성이라 유의해야 한다. 관련 링크

지금 호환성을 생각한다면 break-word 속성을 쓰는 것이 낫다. 여기에서도 word-break 값은 deprecated이다.

그냥,, 어쩌다가 이 속성을 알게 되어서 쓰고 싶었다(ㅋㅋ) tailwind에서 지원도 안 해서 arbitrary value로 넣어주었다. [text-wrap:balance]