f5756e184f
- ConditionalSection 타입 변경 (components[] → screenId, screenName) * 각 조건마다 컴포넌트를 직접 배치하는 대신 기존 화면을 선택 * 복잡한 입력 폼도 화면 재사용으로 간단히 구성 - ConditionalSectionDropZone을 ConditionalSectionViewer로 교체 * 드롭존 대신 InteractiveScreenViewer 사용 * 선택된 화면을 조건별로 렌더링 * 디자인 모드에서 화면 미선택 시 안내 메시지 표시 - ConfigPanel에서 화면 선택 드롭다운 구현 * screenManagementApi.getScreenList()로 화면 목록 로드 * 각 섹션마다 화면 선택 Select 컴포넌트 * 선택된 화면의 ID와 이름 자동 저장 및 표시 * 로딩 상태 표시 - 기본 설정 업데이트 * defaultConfig에서 components 제거, screenId 추가 * 모든 섹션 기본값을 screenId: null로 설정 - README 문서 개선 * 화면 선택 방식으로 사용법 업데이트 * 사용 사례에 화면 ID 예시 추가 * 구조 다이어그램 수정 (드롭존 → 화면 표시) * 디자인/실행 모드 설명 업데이트 장점: - 기존 화면 재사용으로 생산성 향상 - 복잡한 입력 폼도 간단히 조건부 표시 - 화면 수정 시 자동 반영 - 유지보수 용이
97 lines
2.1 KiB
TypeScript
97 lines
2.1 KiB
TypeScript
/**
|
|
* 조건부 컨테이너 컴포넌트
|
|
* 제어 셀렉트박스 값에 따라 다른 UI를 표시하는 컨테이너
|
|
*/
|
|
|
|
import { ComponentDefinition, ComponentCategory } from "@/types/component";
|
|
|
|
export const ConditionalContainerDefinition: Omit<
|
|
ComponentDefinition,
|
|
"renderer" | "configPanel" | "component"
|
|
> = {
|
|
id: "conditional-container",
|
|
name: "조건부 컨테이너",
|
|
category: ComponentCategory.LAYOUT,
|
|
webType: "container" as const,
|
|
description: "셀렉트박스 값에 따라 다른 UI를 표시하는 조건부 컨테이너",
|
|
icon: "GitBranch",
|
|
version: "1.0.0",
|
|
author: "WACE",
|
|
tags: ["조건부", "분기", "동적", "레이아웃"],
|
|
|
|
defaultSize: {
|
|
width: 800,
|
|
height: 600,
|
|
},
|
|
|
|
defaultConfig: {
|
|
controlField: "condition",
|
|
controlLabel: "조건 선택",
|
|
sections: [
|
|
{
|
|
id: "section_1",
|
|
condition: "option1",
|
|
label: "옵션 1",
|
|
screenId: null,
|
|
},
|
|
{
|
|
id: "section_2",
|
|
condition: "option2",
|
|
label: "옵션 2",
|
|
screenId: null,
|
|
},
|
|
],
|
|
defaultValue: "option1",
|
|
showBorder: true,
|
|
spacing: "normal",
|
|
},
|
|
|
|
defaultProps: {
|
|
style: {
|
|
width: "800px",
|
|
height: "600px",
|
|
},
|
|
},
|
|
|
|
configSchema: {
|
|
controlField: {
|
|
type: "string",
|
|
label: "제어 필드명",
|
|
defaultValue: "condition",
|
|
},
|
|
controlLabel: {
|
|
type: "string",
|
|
label: "셀렉트박스 라벨",
|
|
defaultValue: "조건 선택",
|
|
},
|
|
sections: {
|
|
type: "array",
|
|
label: "조건별 섹션",
|
|
defaultValue: [],
|
|
},
|
|
defaultValue: {
|
|
type: "string",
|
|
label: "기본 선택 값",
|
|
defaultValue: "",
|
|
},
|
|
showBorder: {
|
|
type: "boolean",
|
|
label: "섹션 테두리 표시",
|
|
defaultValue: true,
|
|
},
|
|
spacing: {
|
|
type: "select",
|
|
label: "섹션 간격",
|
|
options: [
|
|
{ label: "좁게", value: "tight" },
|
|
{ label: "보통", value: "normal" },
|
|
{ label: "넓게", value: "loose" },
|
|
],
|
|
defaultValue: "normal",
|
|
},
|
|
},
|
|
};
|
|
|
|
export default ConditionalContainerDefinition;
|
|
|