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: 1400,
|
|
height: 800,
|
|
},
|
|
|
|
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: "1400px",
|
|
height: "800px",
|
|
},
|
|
},
|
|
|
|
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;
|
|
|