# 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)