버튼 기능구현

2025-09-12 14:24:25 +09:00
parent 134976ff9e
commit b071d8090b
51 changed files with 3044 additions and 1306 deletions
--- a/frontend/lib/registry/components/text-display/README.md
+++ b/frontend/lib/registry/components/text-display/README.md
@@ -0,0 +1,130 @@
+# 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)