kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity
ERP-node/frontend/lib/registry/components/divider-line
History
shin 82f788bbb5 feat: 리포트 디자이너 Phase 1~3 완료 및 리팩토링 
- Phase 1: 리포트 관리 페이지(Admin) 고도화 - CRUD, 목록/그리드 뷰
- Phase 2: 내부 리포트 목록 컨텍스트 뷰어
- Phase 3: 화면관리 컴포넌트화 (드래그&드롭)

리팩토링:
- ReportDesignerContext 분리: 2049줄 → 484줄 (contexts/report-designer/ 하위 훅 추출)
- MM_TO_PX 상수 중복 제거: useClipboardActions/useUIState → lib/report/constants 통일
- generateComponentId 헬퍼 중앙화: lib/report/constants로 단일 소스 관리
- ConditionalRule 타입 중복 제거: conditionalUtils → types/report 단일 정의
- 렌더러/속성/모달 컴포넌트 분리: designer/renderers, properties, modals 디렉토리

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 		2026-03-10 18:30:18 +09:00
..
DividerLineComponent.tsx 돔 에러 뜨던거 고침 2025-12-11 16:07:16 +09:00
DividerLineConfigPanel.tsx feat: 리포트 디자이너 Phase 1~3 완료 및 리팩토링 2026-03-10 18:30:18 +09:00
DividerLineRenderer.tsx feat: 리포트 디자이너 Phase 1~3 완료 및 리팩토링 2026-03-10 18:30:18 +09:00
README.md feat: 리포트 디자이너 Phase 1~3 완료 및 리팩토링 2026-03-10 18:30:18 +09:00
config.ts feat: 리포트 디자이너 Phase 1~3 완료 및 리팩토링 2026-03-10 18:30:18 +09:00
index.ts V2 컴포넌트로의 전환 및 기존 컴포넌트 숨김 처리: ComponentsPanel에서 기존 컴포넌트를 V2 버전으로 대체하고, 관련 컴포넌트들을 패널에서 숨김 처리하여 관리 효율성을 높였습니다. 각 컴포넌트의 정의에 'hidden' 속성을 추가하여 V2 컴포넌트 사용을 명시하였습니다. 2026-01-19 16:51:08 +09:00
types.ts feat: 리포트 디자이너 Phase 1~3 완료 및 리팩토링 2026-03-10 18:30:18 +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/

관련 문서