# SliderBasic 컴포넌트

slider-basic 컴포넌트입니다

## 개요

- **ID**: `slider-basic`
- **카테고리**: input
- **웹타입**: number
- **작성자**: Developer
- **버전**: 1.0.0

## 특징

- ✅ 자동 등록 시스템
- ✅ 타입 안전성
- ✅ Hot Reload 지원
- ✅ 설정 패널 제공
- ✅ 반응형 디자인

## 사용법

### 기본 사용법

```tsx
import { SliderBasicComponent } from "@/lib/registry/components/slider-basic";

<SliderBasicComponent
  component={{
    id: "my-slider-basic",
    type: "widget",
    webType: "number",
    position: { x: 100, y: 100, z: 1 },
    size: { width: 200, height: 36 },
    config: {
      // 설정값들
    }
  }}
  isDesignMode={false}
/>
```

### 설정 옵션

| 속성 | 타입 | 기본값 | 설명 |
|------|------|--------|------|
| min | number | - | 최소값 |
| max | number | - | 최대값 |
| step | number | 1 | 증감 단위 |
| disabled | boolean | false | 비활성화 여부 |
| required | boolean | false | 필수 입력 여부 |
| readonly | boolean | false | 읽기 전용 여부 |

## 이벤트

- `onChange`: 값 변경 시
- `onFocus`: 포커스 시
- `onBlur`: 포커스 해제 시
- `onClick`: 클릭 시

## 스타일링

컴포넌트는 다음과 같은 스타일 옵션을 제공합니다:

- `variant`: "default" | "outlined" | "filled"
- `size`: "sm" | "md" | "lg"

## 예시

```tsx
// 기본 예시
<SliderBasicComponent
  component={{
    id: "sample-slider-basic",
    config: {
      placeholder: "입력하세요",
      required: true,
      variant: "outlined"
    }
  }}
/>
```

## 개발자 정보

- **생성일**: 2025-09-11
- **CLI 명령어**: `node scripts/create-component.js slider-basic --category=input --webType=number`
- **경로**: `lib/registry/components/slider-basic/`

## 관련 문서

- [컴포넌트 시스템 가이드](../../docs/컴포넌트_시스템_가이드.md)
- [개발자 문서](https://docs.example.com/components/slider-basic)