Feat: Botton 컴포넌트 구현

[winchoose]

📌 Summary

• [Feature]: Button 컴포넌트 구현 #29

• yellow 색 추가
• typo 토큰으로 변경
• botton 컴포넌트 구현

📚 Tasks

yellow 색상을 추가한 뒤 버튼 스타일을 작성하는 과정에서 text-body1과 text-gray-300처럼 text-* 계열 클래스가 서로 중복되어 충돌하는 문제가 발생했습니다.
Tailwind의 특성상 동일한 text-* 그룹에서는 하나의 클래스만 적용되기 때문에 fontSize를 tailwind.config.ts에서 관리하는 대신 typography 토큰을 별도의 CSS로 분리했습니다.

이에 따라 text-body1 대신 typo-body1, typo-h3와 같은 typography 전용 클래스를 사용하도록 변경했으며 색상은 기존처럼 Tailwind 컬러 유틸(text-gray-300, text-white 등)로 관리합니다. 이 방식으로 typography와 color 간의 충돌을 방지할 수 있습니다.
아이콘이 포함된 컴포넌트의 경우 Textarea에서는 아이콘이 입력 영역 안에 위치해야 하므로 relative / absolute 패턴을 사용했지만 Button 컴포넌트는 아이콘과 텍스트를 나란히 배치하는 구조이기 때문에 flex를 사용해 정렬하는 방식으로 구현했습니다.

<Button
  color="yellow"
  icon={<KakaoTalk width="2.4rem" height="2.4rem" />}
>
  참가신청하기
</Button>

버튼 사용 시에는 size, color, icon 여부만 지정하면 되며 기본값은 color="primary", size="md"로 설정되어 있습니다.

📸 Screenshot

해당 작업에 대한 스크린샷 및 자료를 첨부해 주세요.