Tailwind css로 초간단 Dropdown 메뉴 구성하기

 

const DropDown: FC<ChildrenProps> = ({ children, title }) => {
  const [open, setOpen] = useState(false);
  return (
    <div className="dropdown relative w-24 ">
      <button
        className="text-center w-full py-1 focus:outline-none"
        onClick={() => setOpen(!open)}
      >
        {title}
      </button>
      // children으로 받은 것들에 적용할때
      {cloneElement(children, {
        className: `transform ${
          open ? `scale-y-100` : `scale-y-0`
        } transition duration-500 
        ease-in-out origin-top 
        w-full bg-white absolute text-black text-center border-2`,
        onClick: () => setOpen(!open),
      })}
      
      // 바로 style 적용
      <ul className={
      `transform ${
          open ? `scale-y-100` : `scale-y-0`
        } transition duration-500 
        ease-in-out origin-top 
        w-full bg-white absolute text-black text-center border-2`
      }
      onClick={() => setOpen(!open)}
      >
        <li className="py-1">
          <button
            onClick={() => {
              alert("signOut");
            }}
          >
            Sign out
          </button>
        </li>
        <li>
          <button
            className="py-1"
            onClick={() => {
              alert("signOut");
              // auth.signout(() => history.push("/"));
            }}
          >
            Sign out
          </button>
        </li>
      </ul>
      
    </div>
  );
};

 

tailwindCSS에서 제공하는 요런 클래스들로 해결이 가능하다. 기본적인 원리는 open이 되어있지 않았을때는 scale을 0으로 잡은다음에, scale100으로 원래대로 키우는 것이다. 이때 transform origin을 위쪽으로 잡아서 드랍다운처럼 떨어지도록 구성가능하다. 

 

 

 

TailwindCSS가 편하긴한데, 확실히 좀 익숙하기 전까진 좀 성가신 면이 있는데 DropDown 구성하는거치고는 정말 빨리 끝난대다가 꽤나 부드러워서 만족한다.