131 lines
3.1 KiB
Markdown
131 lines
3.1 KiB
Markdown
# TextDisplay 컴포넌트
|
|
|
|
텍스트 표시 전용 컴포넌트입니다
|
|
|
|
## 개요
|
|
|
|
- **ID**: `text-display`
|
|
- **카테고리**: display
|
|
- **웹타입**: text
|
|
- **작성자**: 개발팀
|
|
- **버전**: 1.0.0
|
|
|
|
## 특징
|
|
|
|
- ✅ 자동 등록 시스템
|
|
- ✅ 타입 안전성
|
|
- ✅ Hot Reload 지원
|
|
- ✅ 설정 패널 제공
|
|
- ✅ 반응형 디자인
|
|
- ✅ 다양한 텍스트 스타일 옵션
|
|
|
|
## 사용법
|
|
|
|
### 기본 사용법
|
|
|
|
```tsx
|
|
import { TextDisplayComponent } from "@/lib/registry/components/text-display";
|
|
|
|
<TextDisplayComponent
|
|
component={{
|
|
id: "my-text-display",
|
|
type: "widget",
|
|
webType: "text",
|
|
position: { x: 100, y: 100, z: 1 },
|
|
size: { width: 150, height: 24 },
|
|
componentConfig: {
|
|
text: "표시할 텍스트",
|
|
fontSize: "16px",
|
|
color: "#333333"
|
|
}
|
|
}}
|
|
isDesignMode={false}
|
|
/>
|
|
```
|
|
|
|
### 설정 옵션
|
|
|
|
| 속성 | 타입 | 기본값 | 설명 |
|
|
|------|------|--------|------|
|
|
| text | string | "텍스트를 입력하세요" | 표시할 텍스트 |
|
|
| fontSize | string | "14px" | 폰트 크기 |
|
|
| fontWeight | string | "normal" | 폰트 굵기 |
|
|
| color | string | "#374151" | 텍스트 색상 |
|
|
| textAlign | "left" \| "center" \| "right" | "left" | 텍스트 정렬 |
|
|
| backgroundColor | string | "transparent" | 배경색 |
|
|
| padding | string | "0" | 패딩 |
|
|
| borderRadius | string | "0" | 모서리 둥글기 |
|
|
| border | string | "none" | 테두리 |
|
|
| disabled | boolean | false | 비활성화 여부 |
|
|
|
|
## 이벤트
|
|
|
|
- `onClick`: 클릭 시 (실제 모드에서만)
|
|
|
|
## 스타일링
|
|
|
|
컴포넌트는 다음과 같은 스타일 옵션을 제공합니다:
|
|
|
|
- **폰트 크기**: px, em, rem 단위 지원
|
|
- **폰트 굵기**: normal, bold, 100-900 숫자값
|
|
- **텍스트 정렬**: 왼쪽, 가운데, 오른쪽
|
|
- **색상**: HEX, RGB, 색상명 지원
|
|
- **배경 및 테두리**: CSS 표준 속성 지원
|
|
|
|
## 예시
|
|
|
|
```tsx
|
|
// 제목 텍스트
|
|
<TextDisplayComponent
|
|
component={{
|
|
id: "title-text",
|
|
componentConfig: {
|
|
text: "제품 관리 시스템",
|
|
fontSize: "24px",
|
|
fontWeight: "bold",
|
|
color: "#1f2937",
|
|
textAlign: "center"
|
|
}
|
|
}}
|
|
/>
|
|
|
|
// 설명 텍스트
|
|
<TextDisplayComponent
|
|
component={{
|
|
id: "description-text",
|
|
componentConfig: {
|
|
text: "제품 정보를 관리할 수 있습니다.",
|
|
fontSize: "14px",
|
|
color: "#6b7280",
|
|
backgroundColor: "#f9fafb",
|
|
padding: "8px",
|
|
borderRadius: "4px"
|
|
}
|
|
}}
|
|
/>
|
|
```
|
|
|
|
## 라벨 텍스트 컴포넌트와의 차이점
|
|
|
|
기존 `label-basic` 컴포넌트를 대체하는 새로운 컴포넌트입니다:
|
|
|
|
### 개선사항
|
|
- ✅ 더 직관적인 설정 패널
|
|
- ✅ 다양한 텍스트 스타일 옵션
|
|
- ✅ 실시간 텍스트 편집
|
|
- ✅ 더 나은 사용자 경험
|
|
|
|
### 마이그레이션
|
|
기존 `label-basic` 컴포넌트는 자동으로 `text-display`로 교체됩니다.
|
|
|
|
## 개발자 정보
|
|
|
|
- **생성일**: 2025-09-12
|
|
- **교체 대상**: label-basic 컴포넌트
|
|
- **경로**: `lib/registry/components/text-display/`
|
|
|
|
## 관련 문서
|
|
|
|
- [컴포넌트 시스템 가이드](../../docs/컴포넌트_시스템_가이드.md)
|
|
- [개발자 문서](https://docs.example.com/components/text-display)
|