eac2fa63b1
- Added support for custom border, background, and text styles in V2Input and V2Select components, allowing for greater flexibility in styling based on user-defined configurations. - Updated the input and select components to conditionally apply styles based on the presence of custom properties, improving the overall user experience and visual consistency. - Refactored the FileUploadComponent to handle chunked file uploads, enhancing the file upload process by allowing multiple files to be uploaded in batches, improving performance and user feedback during uploads.
TextDisplay 컴포넌트
텍스트 표시 전용 컴포넌트입니다
개요
- ID:
text-display - 카테고리: display
- 웹타입: text
- 작성자: 개발팀
- 버전: 1.0.0
특징
- ✅ 자동 등록 시스템
- ✅ 타입 안전성
- ✅ Hot Reload 지원
- ✅ 설정 패널 제공
- ✅ 반응형 디자인
- ✅ 다양한 텍스트 스타일 옵션
사용법
기본 사용법
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 표준 속성 지원
예시
// 제목 텍스트
<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/