kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ERP-node/frontend/lib/registry/components/text-display
History
kjs b104cd94f2 텍스트 설정 초기화 되는 오류 수정 2025-10-23 13:24:37 +09:00
..
README.md 버튼 기능구현 2025-09-12 14:24:25 +09:00
TextDisplayComponent.tsx 텍스트 설정 초기화 되는 오류 수정 2025-10-23 13:24:37 +09:00
TextDisplayConfigPanel.tsx ui 수정 및 시현할 기능 업데이트 2025-10-02 14:34:15 +09:00
TextDisplayRenderer.tsx 버튼 기능구현 2025-09-12 14:24:25 +09:00
index.ts ui 수정 및 시현할 기능 업데이트 2025-10-02 14:34:15 +09:00
types.ts 버튼 기능구현 2025-09-12 14:24:25 +09:00

README.md

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/

관련 문서