UI 가이드

다크 모드

ScButton ​

ScButton은 다양한 스타일과 상태를 표현할 수 있는 공통 버튼 컴포넌트입니다.
type, color, size 등의 props를 통해 다양한 형태의 버튼을 손쉽게 구현할 수 있습니다.

✅ 기본 사용법 ​

vue
<sc-button color="primary" size="medium" @click="handleClick">
  기본 버튼
</sc-button>

※ ScButton은 전역으로 등록되어 있으므로 import 없이 바로 사용할 수 있습니다.

✨ 사용 예시 모음 ​

▸ 기본 버튼 ​

vue
<sc-button color="primary" @click="onClick">기본 버튼</sc-button>

▸ 비활성화 버튼 ​

vue
<sc-button disabled>비활성화</sc-button>

▸ 라운드 버튼 ​

vue
<sc-button type="round">둥근 버튼</sc-button>

▸ 다양한 색상 ​

vue
<sc-button color="primary">Primary</sc-button>
<sc-button color="indigo">Indigo</sc-button>
<sc-button color="black">Black</sc-button>
<sc-button color="gray">Gray</sc-button>

▸ 다양한 크기 ​

vue
<sc-button size="small">작은 버튼</sc-button>
<sc-button size="large">큰 버튼</sc-button>

▸ 너비 지정 ​

vue
<sc-button class="w-[200px]">200px</sc-button>
<sc-button class="w-[400px]">400px</sc-button>

🛠️ 속성 (Props) ​

이름타입기본값설명
typestring'default''default' 또는 'round' 형태 선택
colorstring'''primary', 'indigo', 'black', 'gray' 등
disabledbooleanfalse버튼 비활성화 여부
sizestring'medium''small', 'medium', 'large', 'xlarge'
rolestringundefined접근 권한 관련 역할 설정용

📤 이벤트 (Emits) ​

이벤트 이름설명
click버튼 클릭 시 발생

예시 코드에서 이미 click 이벤트 사용법을 확인할 수 있습니다.

🔳 슬롯 (Slots) ​

▸ 기본 슬롯 (default) ​

버튼 안에 들어갈 텍스트나 콘텐츠를 정의합니다.

vue
<sc-button>저장</sc-button>

🎨 스타일 클래스 ​

클래스 이름설명
sc-button공통 버튼 기본 클래스
default-button기본 스타일 버튼
round-button라운드 형태 버튼 스타일
primary, gray 등색상 지정 클래스 (Tailwind 기반)
small, medium, large크기 조절 클래스

📝 기타 참고사항 ​

  • size prop과 small, medium, large boolean prop은 중복 사용 가능합니다. 하지만 하나만 사용하는 것을 권장합니다.
  • disabled 상태에서도 스타일은 유지되며, 클릭 이벤트는 차단됩니다.
  • type="round"는 둥근 버튼을 생성합니다.