Feat(hds-ui): HASHI-50 Button 컴포넌트 구현

[gyeongbibin]

📌 Summary

Hds에 들어갈 공통 버튼 컴포넌트를 구현했습니다.

Jira: HASHI-50

📚 Tasks

HDS 공통 Button 컴포넌트

• native button을 기반으로 구현하고, 기본 type은 button으로 설정했습니다.
• variant는 v1 기준으로 primary, neutral만 지원하도록 정리했습니다.
• size는 sm, md, lg, xl 네 가지로 정의하고, height만 담당하도록 설계했습니다.
• Button height는 16px root 기준 rem 값으로 맞췄습니다.
  • sm: 36px
  • md: 42px
  • lg: 46px
  • xl: 52px
• width="fit" | "full"을 지원하도록 추가했습니다.
• leftIcon, rightIcon slot을 추가해 텍스트 버튼과 아이콘 포함 버튼을 모두 사용할 수 있도록 했습니다.
• icon-only 버튼은 Button에서 다루지 않고, 추후 IconButton으로 분리하는 방향으로 정리했습니다.
• disabled, loading 상태를 추가하고, loading 중에는 중복 클릭이 발생하지 않도록 처리했습니다.
• loading 상태를 추가해야 할 것같아 추가한 뒤에 aria-busy를 연결했습니다.
• 긴 label이 들어와도 버튼 layout이 깨지지 않도록 overflow 처리를 추가했습니다.
• cva와 cn을 사용해 variant, size, width class를 관리하도록 구성했습니다.
• Button, ButtonProps, ButtonVariant, ButtonSize, ButtonWidth를 public export에 추가했습니다.
• Button 사용 기준과 제외한 항목들을 Button.spec.md에 정리해두었습니다.
• Storybook에 Button 상태별 예시를 추가했습니다.
• Button 단위 테스트를 추가했습니다.
• 추가적으로 button 구현 이외 HDS styling 규칙에 border 계열 고정 수치는 rem 대신 px 또는 token을 우선 사용하도록 기준을 보강했습니다.

👀 To Reviewer

지금 정리한 HDS Button 기준에서는 TextButton으로 네이밍하면 역할이 텍스트 전용 버튼처럼 좁게 해석될 수 있어 어색하다고 판단
이기에 Textbutton으로 네이밍을 하기에는 button / iconbutton으로 분리하겠습니다.

초기 설계 할 때에 확장성을 고려해서 variant + emphasis 로 두개의 축을 조합하는 compoundVariants 패턴도 고민했지만, 현재로서는 아직 조합을 늘릴 만큼 반복 패턴이 충분하지 않다고 봤습니다. 그래서 우선은 primary, neutral 중심의 단순한 variant 구조로 시작하는게 맞다고 봤습니다. variant 자체도 많지않다고 생각하실 수 있는데, 아래 근거를 토대로 danger, cta, ghost는 바로 추가하지 않았습니다.

근거

danger : Figma에 삭제하기 버튼 패턴은 있지만, 현재 확인된 형태는 secondary-200 배경에 red text가 올라간 low-emphasis destructive action에 가까웠습니다. 이걸 바로 danger variant로 올리면 danger가 의미인지, 특정 시각 스타일인지 애매해질 수 있다고 판단했습니다.
또한 삭제/탈퇴 같은 액션은 실제 위험도, 확인 플로우, 복구 가능 여부, 권한 처리 등이 함께 따라오는 경우가 많아서 HDS가 잡아주는 것보다는 App에서 표현하는 것이 더 적절하다고 봤습니다.

cta : 카카오톡 로그인하기 같은 단일 전환 버튼만으로 CTA를 적용하는 것이 아니라, 로그인/온보딩/예약 전환 등에서 CTA 스타일이 추가될 시 검토하는 방향으로 남겼습니다.

ghost : review tone(프로필삭제) 도 아직 반복 근거가 부족해서 포함하지 않았습니다. 대신 추후 어떤 조건에서 추가할지 Button.spec.md에 정리해두었습니다.

그 외

size는 height만 담당하도록 했는데 이부분은 같은 height 안에서도 typography, padding, layout이 다르게 쓰이는 케이스가 있어서, size에 묶을 수 없었습니다..

추가적으로 height 값이 많이 분산되어 있어서 모든 케이스를 묶지는 못했습니다. cn으로 처리해야할 것같습니다. 디자인과 협의하여 45px/51px -> 46px/52px로 수정 부탁드릴 예정입니다.

잘못 구현된 부분있으면 바로 말씀주세요..

p.s.
한가지 건의 드리고 싶은 사항은 글로벌에 html { font-size: 62.5%; } 적용하는 것 어떻게 생각하시나요 ?

📸 Screenshot

[github-actions]

🚀 Preview deployed: https://hashi-client-bykwxbjad-gyeongbinmins-projects.vercel.app