ScRadioButtonGroup

ScRadioButtonGroup은 배열 형태의 옵션 목록을 기반으로 구성된 라디오 버튼 그룹 컴포넌트입니다.
v-model로 바인딩된 선택 값을 관리하며, 옵션 목록, 크기, 스타일 타입, 색상, 비활성화 상태를 prop으로 설정할 수 있습니다.

✅ 기본 사용법

결과 : korean

<div>
  <sc-radio-button-group :items="items" v-model="value" width="400" @click="onClick" />
</div>

<div class="mt-5">결과 : {{ value }}</div>

<script setup>
const items = ref([
  { value: 'korean', text: '한글' },
  { value: 'english', text: '영문' },
  { value: 'chinese', text: '중문' },
]);
</script>

---

✨ 사용 예시 모음

▸ 비활성화 disabled

<sc-radio-button-group :items="items" v-model="value" width="400" disabled />

---

▸ 넓이 width

<div class="mt-5 flex flex-col gap-4">
  <sc-radio-button-group :items="items" v-model="value" width="200" />
  <sc-radio-button-group :items="items" v-model="value" width="300" />
  <sc-radio-button-group :items="items" v-model="value" width="400" />
</div>

---

🛠️ 속성 (Props)

이름	타입	기본값	설명
items	Array	[]	라디오 버튼 항목 배열 (문자/숫자/객체 모두 지원)
modelValue	String | Number | Boolean	''	선택된 값 (v-model)
color	String	'black'	버튼 색상 (현재 'black'만 지원)
disabled	Boolean	false	전체 그룹 비활성화 여부
size	String	'medium'	버튼 크기: 'small', 'medium', 'large'
width	String | Number	''	그룹의 너비 (200, '300px', 등)
itemText	String	'text'	객체 데이터 사용 시, 표시 텍스트 key
itemValue	String	'value'	객체 데이터 사용 시, 실제 값 key

---

📤 이벤트 (Emits)

이벤트 이름	설명
update:modelValue	선택 변경 시 발생
click	버튼 클릭 시 발생
change	선택 변경 시 발생

---

🔳 슬롯 (Slots)

이 컴포넌트는 슬롯을 지원하지 않습니다.

---

🎨 스타일 클래스

클래스 이름	설명
sc-radio-button-group	버튼 그룹 wrapper
.sc-radio-button-group.disabled	버튼 그룹 비활성화
button	각 라디오 버튼
button.active	선택된 버튼
button:hover	마우스 오버

---