- 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> |
||
|---|---|---|
| .. | ||
| README.md | ||
| RadioBasicComponent.tsx | ||
| RadioBasicConfigPanel.tsx | ||
| RadioBasicRenderer.tsx | ||
| config.ts | ||
| index.ts | ||
| types.ts | ||
README.md
RadioBasic 컴포넌트
radio-basic 컴포넌트입니다
개요
- ID:
radio-basic - 카테고리: input
- 웹타입: radio
- 작성자: 개발팀
- 버전: 1.0.0
특징
- ✅ 자동 등록 시스템
- ✅ 타입 안전성
- ✅ Hot Reload 지원
- ✅ 설정 패널 제공
- ✅ 반응형 디자인
사용법
기본 사용법
import { RadioBasicComponent } from "@/lib/registry/components/radio-basic";
<RadioBasicComponent
component={{
id: "my-radio-basic",
type: "widget",
webType: "radio",
position: { x: 100, y: 100, z: 1 },
size: { width: 120, height: 24 },
config: {
// 설정값들
},
}}
isDesignMode={false}
/>;
설정 옵션
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| placeholder | string | "" | 플레이스홀더 텍스트 |
| disabled | boolean | false | 비활성화 여부 |
| required | boolean | false | 필수 입력 여부 |
| readonly | boolean | false | 읽기 전용 여부 |
이벤트
onChange: 값 변경 시onFocus: 포커스 시onBlur: 포커스 해제 시onClick: 클릭 시
스타일링
컴포넌트는 다음과 같은 스타일 옵션을 제공합니다:
variant: "default" | "outlined" | "filled"size: "sm" | "md" | "lg"
예시
// 기본 예시
<RadioBasicComponent
component={{
id: "sample-radio-basic",
config: {
placeholder: "입력하세요",
required: true,
variant: "outlined",
},
}}
/>
개발자 정보
- 생성일: 2025-09-11
- CLI 명령어:
node scripts/create-component.js radio-basic --category=input --webType=radio - 경로:
lib/registry/components/radio-basic/