[#67] - 버튼 공통 컴포넌트 디자인 시스템 적용

[minh0518]

📌 연관된 이슈 번호

close #67

🌱 주요 변경 사항

버튼 컴포넌트에 디자인 시스템을 추가합니다.

• s, m, l 사이즈

• 테마 variants

• 텍스트, 아이콘, 멀티(텍스트+아이콘)

사용법

1. 텍스트 버튼
   • usage: 'text'
   • variant: 'purple' | 'sora'
   • size: 'small' |' medium' | 'large'
   • children: string

2. 아이콘 버튼
   • usage: 'icon'
   • variant: 'purple' | 'sora'
   • size: 'small' |' medium' | 'large'
   • icon: 컴포넌트

3. 멀티(텍스트+아이콘)버튼
   • usage: 'multi'
   • variant: 'purple' | 'sora'
   • size: 'small' |' medium' | 'large'
   • icon: 컴포넌트
   • iconPosition: 'left' | 'right'
   • children: string
   

usage에 따라 형식에 맞는 props만 들어갈 수 있도록 타입을 강제했습니다
ex) usage:'text' 인데 icon props가 사용된다면 에러 발생

❗ <Button /> 태그는 디자인 시스템에 따르는 버튼만 사용됩니다

❗ 그 외의 1회성 디자인 버튼들은 이전 PR의 <KaKaoAuthButton /> 처럼 언급했듯이 <BaseButton />을 활용해서 직접 고정 스타일을 생성하면 됩니다.

📸 스크린샷 (선택)

🗣 리뷰어에게 할 말 (선택)

기존 테마와 별도로, 사이즈 관련(padding, font-size 등) 토큰을 상수로 따로 분리 + 테마에 등록해 두었습니다.

키값을 위와 같이 한 이유는

• xs, m , l 단위로 분리하게 될 경우 그 범위가 너무 커집니다(ex: xxxs, xxxxl)

• 만약 1, 2, 3 단위로 오름차순으로 키값을 지정하게 될 경우, 중간에 값이 추가되면 그 아래 모든 값들의 키값이 전부 1칸씩 밀리게 돼서 관련 참조값들의 수정이 너무 번거로워집니다.

그래서 이 둘을 혼합하는식으로 사용했습니다. s_1이후에 추가가 되어도 같은 카테고리의 값인 s_2 만 수정하면 됩니다.

@qq8721443
수정된 버튼 디자인 시스템으로 인해 , 기존에 작성했던 부분을 제거해야 했습니다. 관련 커밋
아마 업로드 버튼은 디자인 시스템에 따르는 버튼이 아닐것 같아서(1회성) 나중에 디자인 확정나면 별도의 버튼 컴포넌트를 만들어서 사용해주시면 됩니다!

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
onepiece-fe	⬜️ Ignored (Inspect)			Feb 26, 2025 11:54am

[Limgabi]

🚀 Storybook Deploy : https://67a21b40b49ad2ad0c08c418-dkdzkftwpa.chromatic.com/