94 lines
2.0 KiB
Markdown
94 lines
2.0 KiB
Markdown
|
# TextInput 컴포넌트
|
||
|
|
|
||
|
|
text-input 컴포넌트입니다
|
||
|
|
|
||
|
|
## 개요
|
||
|
|
|
||
|
|
- **ID**: `text-input`
|
||
|
|
- **카테고리**: input
|
||
|
|
- **웹타입**: text
|
||
|
|
- **작성자**: 개발팀
|
||
|
|
- **버전**: 1.0.0
|
||
|
|
|
||
|
|
## 특징
|
||
|
|
|
||
|
|
- ✅ 자동 등록 시스템
|
||
|
|
- ✅ 타입 안전성
|
||
|
|
- ✅ Hot Reload 지원
|
||
|
|
- ✅ 설정 패널 제공
|
||
|
|
- ✅ 반응형 디자인
|
||
|
|
|
||
|
|
## 사용법
|
||
|
|
|
||
|
|
### 기본 사용법
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import { TextInputComponent } from "@/lib/registry/components/text-input";
|
||
|
|
|
||
|
|
<TextInputComponent
|
||
|
|
component={{
|
||
|
|
id: "my-text-input",
|
||
|
|
type: "widget",
|
||
|
|
webType: "text",
|
||
|
|
position: { x: 100, y: 100, z: 1 },
|
||
|
|
size: { width: 200, height: 36 },
|
||
|
|
config: {
|
||
|
|
// 설정값들
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
isDesignMode={false}
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 설정 옵션
|
||
|
|
|
||
|
|
| 속성 | 타입 | 기본값 | 설명 |
|
||
|
|
|------|------|--------|------|
|
||
|
|
| placeholder | string | "" | 플레이스홀더 텍스트 |
|
||
|
|
| maxLength | number | 255 | 최대 입력 길이 |
|
||
|
|
| minLength | number | 0 | 최소 입력 길이 |
|
||
|
|
| disabled | boolean | false | 비활성화 여부 |
|
||
|
|
| required | boolean | false | 필수 입력 여부 |
|
||
|
|
| readonly | boolean | false | 읽기 전용 여부 |
|
||
|
|
|
||
|
|
## 이벤트
|
||
|
|
|
||
|
|
- `onChange`: 값 변경 시
|
||
|
|
- `onFocus`: 포커스 시
|
||
|
|
- `onBlur`: 포커스 해제 시
|
||
|
|
- `onClick`: 클릭 시
|
||
|
|
|
||
|
|
## 스타일링
|
||
|
|
|
||
|
|
컴포넌트는 다음과 같은 스타일 옵션을 제공합니다:
|
||
|
|
|
||
|
|
- `variant`: "default" | "outlined" | "filled"
|
||
|
|
- `size`: "sm" | "md" | "lg"
|
||
|
|
|
||
|
|
## 예시
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
// 기본 예시
|
||
|
|
<TextInputComponent
|
||
|
|
component={{
|
||
|
|
id: "sample-text-input",
|
||
|
|
config: {
|
||
|
|
placeholder: "입력하세요",
|
||
|
|
required: true,
|
||
|
|
variant: "outlined"
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
```
|
||
|
|
|
||
|
|
## 개발자 정보
|
||
|
|
|
||
|
|
- **생성일**: 2025-09-11
|
||
|
|
- **CLI 명령어**: `node scripts/create-component.js text-input --category=input --webType=text`
|
||
|
|
- **경로**: `lib/registry/components/text-input/`
|
||
|
|
|
||
|
|
## 관련 문서
|
||
|
|
|
||
|
|
- [컴포넌트 시스템 가이드](../../docs/컴포넌트_시스템_가이드.md)
|
||
|
|
- [개발자 문서](https://docs.example.com/components/text-input)
|