ScColorPicker

ScColorPicker 컴포넌트는 사용자 지정 색상 선택 UI를 제공하며, 클릭 시 브라우저 기본 컬러 피커를 열고 선택된 색상을 표시합니다. size 옵션으로 small, medium, large 크기를 지원합니다.

---

✅ 기본 사용법

<template>
  <sc-color-picker v-model="color" />
</template>

<script setup>
import { ref } from 'vue';

const color = ref('#409eff');
</script>

---

✨ 사용 예시 모음

▸ 기본 컬러 피커

<sc-color-picker v-model="color" />

---

▸ 크기 옵션

<sc-color-picker v-model="color" size="small" />
<sc-color-picker v-model="color" size="medium" />
<sc-color-picker v-model="color" size="large" />

---

▸ change 이벤트 사용

<template>
  <sc-color-picker v-model="color" @change="onColorChange" />
</template>

<script setup>
import { ref } from 'vue';

const color = ref('#ff0000');

function onColorChange(newColor) {
  console.log('Selected color:', newColor);
}
</script>

---

🛠️ 속성 (Props)

이름	타입	기본값	설명
modelValue	String	''	선택된 색상 값 (#rrggbb 형식)
size	String	'medium'	컴포넌트 크기. small, medium, large 중 하나
disabled	Boolean	false	컴포넌트 비활성화 여부

---

📤 이벤트 (Emits)

이벤트 이름	설명
update:modelValue	v-model 업데이트를 위한 이벤트. 선택된 색상 전달
change	색상 변경 완료 후 발생. 선택된 색상 전달

---

🔳 슬롯 (Slots)

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

---

🎨 스타일 클래스

클래스 이름	설명
.sc-color-picker	컴포넌트 최상위 래퍼
.color-container	컬러 박스 및 클릭 영역. small/medium/large 크기 적용
.color-zone	선택된 색상을 표시하는 영역. 배경색이 동적으로 변경됨
.color-input	숨겨진 <input type="color"> 요소
.trans	투명 패턴 배경 (modelValue 초기값이 없을 때 사용)

---