Button Component

[DaleSeo]

개발 시 고려사항

1. 기본적인 역할과 접근성 -> 이 부분은 전체 컴포넌트 공통 사항이므로 따로 문서화 작업 필요!

• 적절한 ARIA 속성 제공
• 키보드 내비게이션: Enter, Space 키로 작동 가능하도록
• Focusable: Tab키로 포커스 이동이 가능하도록 tabIndex도 고려
• Disabled 상태에 대한 시각적 피드백 제공

2. 스타일링

• default, active, disabled, focus, hover
• 라이트 모드, 다크 모드 테마 지원
• 버튼 크기: small, medium, large
• padding, text-size

3. 재사용성

• Props
  • variant: solid, outline, outline-gradient, default, accent, danger, warning
  • size: small, medium, large
  • disabled
  • icon 추가 여부
• children 지원
• 추가적인 스타일링 허용: custom class

4. 이벤트 처리

• onClick
• onFocus, onBlur
• 로딩 상태 표시: spinner

Variant 1 : button-solid

Variant 2 : button-outline

Variant 3 : button-outline-gradient

[DaleSeo]

@DaleSeo 요구사항 리뷰하고 피드백 드리기

[DaleSeo]

@nhistory 님, 버튼 컴포넌트의 요구사항에 대해서 아래 피드백을 드립니다.

• 버튼 컴포넌트에만 국한되는 요구사항과 디자인 시스템에 전체에 해당하는 요구사항(ex. 웹 접근성, 다크모드)은 분리하면 어떨까요? 모든 컴포넌트에서 고려되야 하는 공통 요구사항은 우선 위키에 따로 문서화해놓았다가 나중에 CONTRIBUTING.md 파일에 링크 걸어두면 좋을 것 같아요.
• 용도에 에 따른 버튼 variant도 고려가 되야할 것 같습니다. default, accent, danger, warning 정도로 구분하면 좋을 것 같아요.
• 기존에 구현한 버튼 컴포넌트의 코드도 참고하면 좋을 것 같습니다.
  • https://github.com/DaleStudy/leaderboard/blob/main/src/components/Button/Button.tsx
  • https://github.com/DaleStudy/leetcode-website/blob/main/components/button-link.js

첫 컴포넌트이니 우선 구현을 시작하시면서 PR을 통해서 계속 긴밀히 소통을 해나가시죠 ㅋㅋ

[nhistory]

넵 말씀하신 대로 위 요구사항에 업데이트 해 놓았습니다. 피드백 감사드립니다!