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 b6ed76f243 V2 컴포넌트로의 전환 및 기존 컴포넌트 숨김 처리: ComponentsPanel에서 기존 컴포넌트를 V2 버전으로 대체하고, 관련 컴포넌트들을 패널에서 숨김 처리하여 관리 효율성을 높였습니다. 각 컴포넌트의 정의에 'hidden' 속성을 추가하여 V2 컴포넌트 사용을 명시하였습니다. 2026-01-19 16:51:08 +09:00
..
README.md 버튼 기능구현 2025-09-12 14:24:25 +09:00
TextDisplayComponent.tsx 거래처관리-품목등록 화면 컴포넌트 제작 2025-11-14 16:30:38 +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 V2 컴포넌트로의 전환 및 기존 컴포넌트 숨김 처리: ComponentsPanel에서 기존 컴포넌트를 V2 버전으로 대체하고, 관련 컴포넌트들을 패널에서 숨김 처리하여 관리 효율성을 높였습니다. 각 컴포넌트의 정의에 'hidden' 속성을 추가하여 V2 컴포넌트 사용을 명시하였습니다. 2026-01-19 16:51:08 +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/

관련 문서