ERP-node/frontend/lib/registry/components/button-primary
kjs cdf9c0e562 fix: 화면 편집기에서 버튼 컴포넌트 선택 가능하도록 수정
- 문제: 버튼 컴포넌트 클릭 시 버튼 동작이 실행되어 선택되지 않음
- 해결:
  1. ButtonPrimaryComponent에서 디자인 모드일 때 <button> 대신 <div>로 렌더링
  2. ScreenDesigner의 ScreenPreviewProvider에서 isPreviewMode를 false로 설정
  3. 디자인 모드에서는 버튼 액션이 실행되지 않고 onClick만 전달되도록 수정
- 영향: button-primary 타입 버튼이 화면 편집기에서 정상적으로 선택 가능
2025-11-10 15:36:18 +09:00
..
ButtonPrimaryComponent.tsx fix: 화면 편집기에서 버튼 컴포넌트 선택 가능하도록 수정 2025-11-10 15:36:18 +09:00
ButtonPrimaryConfigPanel.tsx 버튼 버그 수정 2025-09-12 14:24:42 +09:00
ButtonPrimaryRenderer.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-12 14:24:25 +09:00

README.md

ButtonPrimary 컴포넌트

button-primary 컴포넌트입니다

개요

  • ID: button-primary
  • 카테고리: action
  • 웹타입: button
  • 작성자: 개발팀
  • 버전: 1.0.0

특징

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

사용법

기본 사용법

import { ButtonPrimaryComponent } from "@/lib/registry/components/button-primary";

<ButtonPrimaryComponent
  component={{
    id: "my-button-primary",
    type: "widget",
    webType: "button",
    position: { x: 100, y: 100, z: 1 },
    size: { width: 120, height: 36 },
    config: {
      // 설정값들
    }
  }}
  isDesignMode={false}
/>

설정 옵션

속성 타입 기본값 설명
text string "버튼" 버튼 텍스트
actionType string "button" 버튼 타입
variant string "primary" 버튼 스타일
disabled boolean false 비활성화 여부
required boolean false 필수 입력 여부
readonly boolean false 읽기 전용 여부

이벤트

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

스타일링

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

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

예시

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

개발자 정보

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

관련 문서