kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ERP-node/frontend/lib/registry/components/card-display
History
leeheejin 990d8123b8 프론트엔드 UI/UX 개선사항 복구 및 테이블 스타일링 통일 
- 테이블 헤더 스타일링 개선 (더 진한 배경색, 오렌지 호버 효과)
- 파일첨부 컴포넌트 개선 (뚝뚝 잘리는 문제 해결, 패딩/아이콘 크기 조정)
- 카드 디스플레이 스타일링 개선 (명확한 테두리, 오렌지 호버 효과)
- 라벨 표시 기능 수정 (드롭다운 라벨링 문제, 체크박스 풀리는 문제 해결)
- 패널 및 레이아웃 개선 (카드 간격 통일, 주황색 영역 추가)
- CSS 통일성 작업 (Select 컴포넌트 너비 w-48로 조정)
- 정렬 화살표 표시 조건 수정 (정렬된 컬럼에서만 화살표 표시)
- 테이블 스타일링 통일 (SingleTableWithSticky, TableListComponent, InteractiveDataTable)
 		2025-09-30 18:43:26 +09:00
..
CardDisplayComponent.tsx 프론트엔드 UI/UX 개선사항 복구 및 테이블 스타일링 통일 2025-09-30 18:43:26 +09:00
CardDisplayConfigPanel.tsx 카드 컴포넌트생성 2025-09-15 17:10:46 +09:00
CardDisplayRenderer.tsx 카드 컴포넌트생성 2025-09-15 17:10:46 +09:00
README.md 카드 컴포넌트생성 2025-09-15 17:10:46 +09:00
index.ts 카드 컴포넌트생성 2025-09-15 17:10:46 +09:00
types.ts 카드 컴포넌트생성 2025-09-15 17:10:46 +09:00

README.md

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/

관련 문서