본 컴포넌트는 단일 파일 구조 내에서 **"서버 컴포넌트의 안정성"**과 **"클라이언트의 상호작용"**이라는 두 가지 역할을 유연하게 수행하도록 설계되다. 하나의 인터페이스로 프로젝트 전반에서 일관된 버튼 사용자 경험을 제공을 목표로한다.
| 파일명 | 유형 | 주요 역할 |
|---|---|---|
button.tsx |
Client | 실제 <button />을 렌더링하며 스타일, 로딩 상태, 인터랙션을 통합 관리하는 공통 컴포넌트 |
leftIcon과 rightIcon 속성을 통해 텍스트 좌우에 아이콘을 간편하게 배치할 수 있으며, 로딩 시에는 아이콘 대신 스피너가 표시된다.isLoading 활성화 시 aria-busy와 aria-live 속성이 자동으로 조절되어 스크린 리더 사용자에게 실시간 상태를 전달한다.tertiary 변체를 제공하여 텍스트 버튼이나 언더라인 링크 스타일을 일관되게 구현한다.모든 표준 HTML button 속성을 지원하며, 아래의 커스텀 속성을 추가로 가진다.
| Props | 타입 | 설명 |
|---|---|---|
variant |
primary |
secondary |
size |
lg |
md |
isLoading |
boolean |
로딩 상태를 표시하며, 활성화 시 클릭이 차단된다. |
leftIcon |
React.ReactNode |
텍스트 왼쪽에 배치될 아이콘 요소. |
rightIcon |
React.ReactNode |
텍스트 오른쪽에 배치될 아이콘 요소. |
⚠️ 주의: 폼(Form) 제출용으로 사용 시 반드시 type="submit"으로 명시해야 한다.
primary: 브랜드 컬러 배경과 흰색 텍스트. 주요 액션에 사용한다.secondary: 연한 회색 배경과 어두운 텍스트. 보조 액션에 사용한다.tertiary_*: 배경색 없이 언더라인이 포함된 링크 형태의 버튼.lg: 높이 52px, 큰 타이틀급 텍스트 (text-h3).