[clsx] - className을 깔끔하게 작성해보자 (feat. tailwindcss)

   <div className="flex flex-col md:flex-row gap-2 md:gap-4 h-[70vh] md:h-[50vh] md:p-2"/>

tailwindcss를 사용하면 특정 태그의 스타일 속성이 길어져서 후에 유지보수 할 때 가독성이 떨어진다. 이를 해결할 수 있는 방법은
clsx를 사용하면 된다.

<div
  className={clsx(
    "flex flex-col md:flex-row",
    "gap-2 md:gap-4",
    "h-[70vh] md:h-[50vh]",
    "md:p-2"
  )}
>
  ...
</div>

이렇게 레이아웃/간격/높이/패딩 일관되게 적용할 수 있다