button 컴포넌트 개선 (v)

[un0211]

Tailwind CSS 살펴보다가 아래 방식으로 버튼 스타일 적용할 수 있는 것을 확인했는데,
제가 추후에 다른 버튼 모양까지 해서 버튼 컴포넌트 변경해도 괜찮을까요??
(global.css or button.css에 버튼 관련 클래스를 만들고, 컴포넌트에서 해당 클래스 사용해서 스타일 지정)

// styles/global.css

@layer components {
  .btn {
    @apply flex h-full w-full items-center justify-center rounded-[8px];
  }

  .btn-violet {
    @apply btn bg-violet hover:bg-violet_hover disabled:bg-gray_9f text-white;
  }

  .btn-white {
    @apply btn text-violet border-gray_d9 hover:bg-violet_f1 border bg-white;
  }
}

// 다양해질 경우 btn-{color} (기본/호버/클릭/비활성화, 글자 색상 지정), btn-{size} (크기 지정) btn-align (정렬 지정)

// components/Button/index.tsx

const buttonTypes = {
  primary: 'btn-violet transition-all',
  secondary: 'btn-white transition-all',
  ...
}

• CSS를 간단하게 지정할 수 있으면 기본 버튼은 따로 컴포넌트화 하지 않고 CSS 클래스로 스타일을 지정해도 될 것 같습니다.
• 단점: 버튼 컴포넌트 코드에서 바로 스타일을 확인할 수 없습니다.

이런 방식에 대해 어떻게 생각하시는지 의견 나눠주시면 감사하겠습니다~