kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ERP-node/frontend/lib/registry/components/divider-line
History
kjs 6901baab8e feat(screen-designer): 그리드 컬럼 시스템 개선 및 컴포넌트 너비 렌더링 수정 
주요 변경사항:
- 격자 설정을 편집 탭에서 항상 표시 (해상도 설정 하단)
- 그리드 컬럼 수 동적 조정 가능 (1-24)
- 컴포넌트 생성 시 현재 그리드 컬럼 수 기반 자동 계산
- 컴포넌트 너비가 설정한 컬럼 수대로 정확히 표시되도록 수정

수정된 파일:
- ScreenDesigner: 컴포넌트 드롭 시 gridColumns와 style.width 동적 계산
- UnifiedPropertiesPanel: 격자 설정 UI 통합, 차지 컬럼 수 설정 시 width 자동 계산
- RealtimePreviewDynamic: getWidth 우선순위 수정, DOM 크기 디버깅 로그 추가
- 8개 컴포넌트: componentStyle.width를 항상 100%로 고정
  * ButtonPrimaryComponent
  * TextInputComponent
  * NumberInputComponent
  * TextareaBasicComponent
  * DateInputComponent
  * TableListComponent
  * CardDisplayComponent

문제 해결:
- 컴포넌트 내부에서 component.style.width를 재사용하여 이중 축소 발생
- 해결: 부모 컨테이너(RealtimePreviewDynamic)가 width 제어, 컴포넌트는 항상 100%
- 결과: 파란 테두리와 내부 콘텐츠가 동일한 크기로 정확히 표시
 		2025-11-04 16:17:19 +09:00
..
DividerLineComponent.tsx feat(screen-designer): 그리드 컬럼 시스템 개선 및 컴포넌트 너비 렌더링 수정 2025-11-04 16:17:19 +09:00
DividerLineConfigPanel.tsx 컴포넌트 추가방식 변경 2025-09-11 18:38:28 +09:00
DividerLineRenderer.tsx 컴포넌트 추가방식 변경 2025-09-11 18:38:28 +09:00
README.md 컴포넌트 추가방식 변경 2025-09-11 18:38:28 +09:00
config.ts 컴포넌트 추가방식 변경 2025-09-11 18:38:28 +09:00
index.ts 세부타입설정 2025-10-14 16:45:30 +09:00
types.ts 컴포넌트 추가방식 변경 2025-09-11 18:38:28 +09:00

README.md

DividerLine 컴포넌트

divider-line 컴포넌트입니다

개요

  • ID: divider-line
  • 카테고리: layout
  • 웹타입: text
  • 작성자: Developer
  • 버전: 1.0.0

특징

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

사용법

기본 사용법

import { DividerLineComponent } from "@/lib/registry/components/divider-line";

<DividerLineComponent
  component={{
    id: "my-divider-line",
    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"

예시

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

개발자 정보

  • 생성일: 2025-09-11
  • CLI 명령어: node scripts/create-component.js divider-line --category=layout --webType=text
  • 경로: lib/registry/components/divider-line/

관련 문서