ERP-node/frontend/lib/registry/components/card-display

CardDisplay 컴포넌트

테이블 데이터를 카드 형태로 표시하는 컴포넌트

개요

• ID: card-display
• 카테고리: display
• 웹타입: text
• 작성자: 개발팀
• 버전: 1.0.0

특징

• ✅ 자동 등록 시스템
• ✅ 타입 안전성
• ✅ Hot Reload 지원
• ✅ 설정 패널 제공
• ✅ 반응형 디자인

사용법

기본 사용법

import { CardDisplayComponent } from "@/lib/registry/components/card-display";

<CardDisplayComponent
  component={{
    id: "my-card-display",
    type: "widget",
    webType: "text",
    position: { x: 100, y: 100, z: 1 },
    size: { width: 200, height: 36 },
    config: {
      // 설정값들
    }
  }}
  isDesignMode={false}
/>

설정 옵션

속성	타입	기본값	설명
placeholder	string	""	플레이스홀더 텍스트
maxLength	number	255	최대 입력 길이
minLength	number	0	최소 입력 길이
disabled	boolean	false	비활성화 여부
required	boolean	false	필수 입력 여부
readonly	boolean	false	읽기 전용 여부

이벤트

• onChange: 값 변경 시
• onFocus: 포커스 시
• onBlur: 포커스 해제 시
• onClick: 클릭 시

스타일링

컴포넌트는 다음과 같은 스타일 옵션을 제공합니다:

• variant: "default" | "outlined" | "filled"
• size: "sm" | "md" | "lg"

예시

// 기본 예시
<CardDisplayComponent
  component={{
    id: "sample-card-display",
    config: {
      placeholder: "입력하세요",
      required: true,
      variant: "outlined"
    }
  }}
/>

개발자 정보

• 생성일: 2025-09-15
• CLI 명령어: node scripts/create-component.js card-display "카드 디스플레이" "테이블 데이터를 카드 형태로 표시하는 컴포넌트" display text
• 경로: lib/registry/components/card-display/

관련 문서

• 컴포넌트 시스템 가이드
• 개발자 문서