- 화면 설정 모달에 "제어 관리" 탭 추가하여 버튼 제어 설정을 간편하게 관리 - 버튼 액션 설정 기능 구현: 버튼 목록 표시 및 각 버튼의 액션 타입 수정 가능 - 화면 디자이너 모달 통합: 전체화면 Dialog 내부에 ScreenDesigner 임베드 - URL 쿼리 파라미터로 화면 디자이너 자동 열기 기능 추가 - 화면 캔버스 크기 자동 조절 기능 구현: 최소 크기 보장 및 여유 마진 추가 - 필드 추가/제거 기능 개선: 기존 그리드 컬럼 변경 로직과 통합하여 사용자 경험 향상 |
||
|---|---|---|
| .. | ||
| ButtonPrimaryComponent.tsx | ||
| ButtonPrimaryRenderer.tsx | ||
| README.md | ||
| config.ts | ||
| index.ts | ||
| types.ts | ||
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/