704 lines
24 KiB
TypeScript
704 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Calendar } from "@/components/ui/calendar";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { CalendarIcon } from "lucide-react";
|
|
import { format } from "date-fns";
|
|
import { ko } from "date-fns/locale";
|
|
import {
|
|
ComponentData,
|
|
WidgetComponent,
|
|
TextTypeConfig,
|
|
NumberTypeConfig,
|
|
DateTypeConfig,
|
|
SelectTypeConfig,
|
|
RadioTypeConfig,
|
|
CheckboxTypeConfig,
|
|
TextareaTypeConfig,
|
|
FileTypeConfig,
|
|
CodeTypeConfig,
|
|
EntityTypeConfig,
|
|
} from "@/types/screen";
|
|
|
|
interface InteractiveScreenViewerProps {
|
|
component: ComponentData;
|
|
allComponents: ComponentData[];
|
|
formData?: Record<string, any>;
|
|
onFormDataChange?: (fieldName: string, value: any) => void;
|
|
}
|
|
|
|
export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = ({
|
|
component,
|
|
allComponents,
|
|
formData: externalFormData,
|
|
onFormDataChange,
|
|
}) => {
|
|
const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
|
|
const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
|
|
|
|
// 실제 사용할 폼 데이터 (외부에서 제공된 경우 우선 사용)
|
|
const formData = externalFormData || localFormData;
|
|
|
|
// 폼 데이터 업데이트
|
|
const updateFormData = (fieldName: string, value: any) => {
|
|
if (onFormDataChange) {
|
|
// 외부 콜백이 있는 경우 사용
|
|
onFormDataChange(fieldName, value);
|
|
} else {
|
|
// 로컬 상태 업데이트
|
|
setLocalFormData((prev) => ({
|
|
...prev,
|
|
[fieldName]: value,
|
|
}));
|
|
}
|
|
};
|
|
|
|
// 날짜 값 업데이트
|
|
const updateDateValue = (fieldName: string, date: Date | undefined) => {
|
|
setDateValues((prev) => ({
|
|
...prev,
|
|
[fieldName]: date,
|
|
}));
|
|
updateFormData(fieldName, date ? format(date, "yyyy-MM-dd") : "");
|
|
};
|
|
|
|
// 실제 사용 가능한 위젯 렌더링
|
|
const renderInteractiveWidget = (comp: ComponentData) => {
|
|
const { widgetType, label, placeholder, required, readonly, columnName } = comp;
|
|
const fieldName = columnName || comp.id;
|
|
const currentValue = formData[fieldName] || "";
|
|
|
|
// 스타일 적용
|
|
const applyStyles = (element: React.ReactElement) => {
|
|
if (!comp.style) return element;
|
|
|
|
return React.cloneElement(element, {
|
|
style: {
|
|
...comp.style,
|
|
// 크기는 부모 컨테이너에서 처리하므로 제거
|
|
width: undefined,
|
|
height: undefined,
|
|
},
|
|
});
|
|
};
|
|
|
|
switch (widgetType) {
|
|
case "text":
|
|
case "email":
|
|
case "tel": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as TextTypeConfig | undefined;
|
|
|
|
console.log("📝 InteractiveScreenViewer - Text 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
format: config?.format,
|
|
minLength: config?.minLength,
|
|
maxLength: config?.maxLength,
|
|
pattern: config?.pattern,
|
|
placeholder: config?.placeholder,
|
|
},
|
|
});
|
|
|
|
// 형식별 패턴 생성
|
|
const getPatternByFormat = (format: string) => {
|
|
switch (format) {
|
|
case "korean":
|
|
return "[가-힣\\s]*";
|
|
case "english":
|
|
return "[a-zA-Z\\s]*";
|
|
case "alphanumeric":
|
|
return "[a-zA-Z0-9]*";
|
|
case "numeric":
|
|
return "[0-9]*";
|
|
case "email":
|
|
return "[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}";
|
|
case "phone":
|
|
return "\\d{3}-\\d{4}-\\d{4}";
|
|
case "url":
|
|
return "https?://[\\w\\-]+(\\.[\\w\\-]+)+([\\w\\-\\.,@?^=%&:/~\\+#]*[\\w\\-\\@?^=%&/~\\+#])?";
|
|
default:
|
|
return config?.pattern || undefined;
|
|
}
|
|
};
|
|
|
|
// 입력 검증 함수
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value;
|
|
|
|
// 형식별 실시간 검증
|
|
if (config?.format && config.format !== "none") {
|
|
const pattern = getPatternByFormat(config.format);
|
|
if (pattern) {
|
|
const regex = new RegExp(`^${pattern}$`);
|
|
if (value && !regex.test(value)) {
|
|
return; // 유효하지 않은 입력 차단
|
|
}
|
|
}
|
|
}
|
|
|
|
// 길이 제한 검증
|
|
if (config?.maxLength && value.length > config.maxLength) {
|
|
return; // 최대 길이 초과 차단
|
|
}
|
|
|
|
updateFormData(fieldName, value);
|
|
};
|
|
|
|
const finalPlaceholder = config?.placeholder || placeholder || "입력하세요...";
|
|
const inputType = widgetType === "email" ? "email" : widgetType === "tel" ? "tel" : "text";
|
|
|
|
return applyStyles(
|
|
<Input
|
|
type={inputType}
|
|
placeholder={finalPlaceholder}
|
|
value={currentValue}
|
|
onChange={handleInputChange}
|
|
disabled={readonly}
|
|
required={required}
|
|
minLength={config?.minLength}
|
|
maxLength={config?.maxLength}
|
|
pattern={getPatternByFormat(config?.format || "none")}
|
|
className="h-full w-full"
|
|
/>,
|
|
);
|
|
}
|
|
|
|
case "number":
|
|
case "decimal": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as NumberTypeConfig | undefined;
|
|
|
|
console.log("🔢 InteractiveScreenViewer - Number 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
format: config?.format,
|
|
min: config?.min,
|
|
max: config?.max,
|
|
step: config?.step,
|
|
decimalPlaces: config?.decimalPlaces,
|
|
thousandSeparator: config?.thousandSeparator,
|
|
prefix: config?.prefix,
|
|
suffix: config?.suffix,
|
|
},
|
|
});
|
|
|
|
const step = config?.step || (widgetType === "decimal" ? 0.01 : 1);
|
|
const finalPlaceholder = config?.placeholder || placeholder || "숫자를 입력하세요...";
|
|
|
|
return applyStyles(
|
|
<Input
|
|
type="number"
|
|
placeholder={finalPlaceholder}
|
|
value={currentValue}
|
|
onChange={(e) => updateFormData(fieldName, e.target.valueAsNumber || 0)}
|
|
disabled={readonly}
|
|
required={required}
|
|
min={config?.min}
|
|
max={config?.max}
|
|
step={step}
|
|
className="h-full w-full"
|
|
/>,
|
|
);
|
|
}
|
|
|
|
case "textarea":
|
|
case "text_area": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as TextareaTypeConfig | undefined;
|
|
|
|
console.log("📄 InteractiveScreenViewer - Textarea 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
rows: config?.rows,
|
|
maxLength: config?.maxLength,
|
|
minLength: config?.minLength,
|
|
placeholder: config?.placeholder,
|
|
defaultValue: config?.defaultValue,
|
|
resizable: config?.resizable,
|
|
wordWrap: config?.wordWrap,
|
|
},
|
|
});
|
|
|
|
const finalPlaceholder = config?.placeholder || placeholder || "내용을 입력하세요...";
|
|
const rows = config?.rows || 3;
|
|
|
|
return applyStyles(
|
|
<Textarea
|
|
placeholder={finalPlaceholder}
|
|
value={currentValue || config?.defaultValue || ""}
|
|
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
|
disabled={readonly}
|
|
required={required}
|
|
minLength={config?.minLength}
|
|
maxLength={config?.maxLength}
|
|
rows={rows}
|
|
className={`h-full w-full ${config?.resizable === false ? "resize-none" : ""}`}
|
|
style={{
|
|
whiteSpace: config?.wordWrap === false ? "nowrap" : "normal",
|
|
}}
|
|
/>,
|
|
);
|
|
}
|
|
|
|
case "select":
|
|
case "dropdown": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as SelectTypeConfig | undefined;
|
|
|
|
console.log("📋 InteractiveScreenViewer - Select 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
options: config?.options,
|
|
multiple: config?.multiple,
|
|
searchable: config?.searchable,
|
|
placeholder: config?.placeholder,
|
|
defaultValue: config?.defaultValue,
|
|
},
|
|
});
|
|
|
|
const finalPlaceholder = config?.placeholder || placeholder || "선택하세요...";
|
|
const options = config?.options || [
|
|
{ label: "옵션 1", value: "option1" },
|
|
{ label: "옵션 2", value: "option2" },
|
|
{ label: "옵션 3", value: "option3" },
|
|
];
|
|
|
|
return applyStyles(
|
|
<Select
|
|
value={currentValue || config?.defaultValue || ""}
|
|
onValueChange={(value) => updateFormData(fieldName, value)}
|
|
disabled={readonly}
|
|
required={required}
|
|
>
|
|
<SelectTrigger className="h-full w-full">
|
|
<SelectValue placeholder={finalPlaceholder} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{options.map((option, index) => (
|
|
<SelectItem key={index} value={option.value} disabled={option.disabled}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>,
|
|
);
|
|
}
|
|
|
|
case "checkbox":
|
|
case "boolean": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as CheckboxTypeConfig | undefined;
|
|
|
|
console.log("☑️ InteractiveScreenViewer - Checkbox 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
defaultChecked: config?.defaultChecked,
|
|
labelPosition: config?.labelPosition,
|
|
checkboxText: config?.checkboxText,
|
|
trueValue: config?.trueValue,
|
|
falseValue: config?.falseValue,
|
|
},
|
|
});
|
|
|
|
const isChecked = currentValue === true || currentValue === "true" || config?.defaultChecked;
|
|
const checkboxText = config?.checkboxText || label || "확인";
|
|
const labelPosition = config?.labelPosition || "right";
|
|
|
|
return applyStyles(
|
|
<div
|
|
className={`flex h-full w-full items-center space-x-2 ${labelPosition === "left" ? "flex-row-reverse" : ""}`}
|
|
>
|
|
<Checkbox
|
|
id={fieldName}
|
|
checked={isChecked}
|
|
onCheckedChange={(checked) => updateFormData(fieldName, checked)}
|
|
disabled={readonly}
|
|
required={required}
|
|
/>
|
|
<label htmlFor={fieldName} className="text-sm">
|
|
{checkboxText}
|
|
</label>
|
|
</div>,
|
|
);
|
|
}
|
|
|
|
case "radio": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as RadioTypeConfig | undefined;
|
|
|
|
console.log("🔘 InteractiveScreenViewer - Radio 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
options: config?.options,
|
|
defaultValue: config?.defaultValue,
|
|
layout: config?.layout,
|
|
allowNone: config?.allowNone,
|
|
},
|
|
});
|
|
|
|
const options = config?.options || [
|
|
{ label: "옵션 1", value: "option1" },
|
|
{ label: "옵션 2", value: "option2" },
|
|
{ label: "옵션 3", value: "option3" },
|
|
];
|
|
|
|
const layout = config?.layout || "vertical";
|
|
const selectedValue = currentValue || config?.defaultValue || "";
|
|
|
|
return applyStyles(
|
|
<div className={`h-full w-full ${layout === "horizontal" ? "flex flex-wrap gap-4" : "space-y-2"}`}>
|
|
{config?.allowNone && (
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="radio"
|
|
id={`${fieldName}_none`}
|
|
name={fieldName}
|
|
value=""
|
|
checked={selectedValue === ""}
|
|
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
|
disabled={readonly}
|
|
required={required}
|
|
className="h-4 w-4"
|
|
/>
|
|
<label htmlFor={`${fieldName}_none`} className="text-sm">
|
|
선택 안함
|
|
</label>
|
|
</div>
|
|
)}
|
|
{options.map((option, index) => (
|
|
<div key={index} className="flex items-center space-x-2">
|
|
<input
|
|
type="radio"
|
|
id={`${fieldName}_${index}`}
|
|
name={fieldName}
|
|
value={option.value}
|
|
checked={selectedValue === option.value}
|
|
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
|
disabled={readonly || option.disabled}
|
|
required={required}
|
|
className="h-4 w-4"
|
|
/>
|
|
<label htmlFor={`${fieldName}_${index}`} className="text-sm">
|
|
{option.label}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>,
|
|
);
|
|
}
|
|
|
|
case "date": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as DateTypeConfig | undefined;
|
|
|
|
console.log("📅 InteractiveScreenViewer - Date 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
format: config?.format,
|
|
showTime: config?.showTime,
|
|
defaultValue: config?.defaultValue,
|
|
minDate: config?.minDate,
|
|
maxDate: config?.maxDate,
|
|
},
|
|
});
|
|
|
|
const shouldShowTime = config?.showTime || config?.format?.includes("HH:mm");
|
|
const finalPlaceholder = config?.placeholder || placeholder || "날짜를 선택하세요";
|
|
|
|
if (shouldShowTime) {
|
|
// 시간 포함 날짜 입력
|
|
return applyStyles(
|
|
<Input
|
|
type="datetime-local"
|
|
placeholder={finalPlaceholder}
|
|
value={currentValue || config?.defaultValue || ""}
|
|
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
|
disabled={readonly}
|
|
required={required}
|
|
min={config?.minDate}
|
|
max={config?.maxDate}
|
|
className="h-full w-full"
|
|
/>,
|
|
);
|
|
} else {
|
|
// 날짜만 입력
|
|
const dateValue = dateValues[fieldName];
|
|
return applyStyles(
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
className="h-full w-full justify-start text-left font-normal"
|
|
disabled={readonly}
|
|
>
|
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
|
{dateValue ? format(dateValue, "PPP", { locale: ko }) : config?.defaultValue || finalPlaceholder}
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-auto p-0">
|
|
<Calendar
|
|
mode="single"
|
|
selected={dateValue}
|
|
onSelect={(date) => updateDateValue(fieldName, date)}
|
|
initialFocus
|
|
/>
|
|
</PopoverContent>
|
|
</Popover>,
|
|
);
|
|
}
|
|
}
|
|
|
|
case "datetime": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as DateTypeConfig | undefined;
|
|
|
|
console.log("🕐 InteractiveScreenViewer - DateTime 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
format: config?.format,
|
|
defaultValue: config?.defaultValue,
|
|
minDate: config?.minDate,
|
|
maxDate: config?.maxDate,
|
|
},
|
|
});
|
|
|
|
const finalPlaceholder = config?.placeholder || placeholder || "날짜와 시간을 입력하세요...";
|
|
|
|
return applyStyles(
|
|
<Input
|
|
type="datetime-local"
|
|
placeholder={finalPlaceholder}
|
|
value={currentValue || config?.defaultValue || ""}
|
|
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
|
disabled={readonly}
|
|
required={required}
|
|
min={config?.minDate}
|
|
max={config?.maxDate}
|
|
className="h-full w-full"
|
|
/>,
|
|
);
|
|
}
|
|
|
|
case "file": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as FileTypeConfig | undefined;
|
|
|
|
console.log("📁 InteractiveScreenViewer - File 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
accept: config?.accept,
|
|
multiple: config?.multiple,
|
|
maxSize: config?.maxSize,
|
|
},
|
|
});
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = e.target.files;
|
|
if (!files) return;
|
|
|
|
// 파일 크기 검증
|
|
if (config?.maxSize) {
|
|
for (let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
if (file.size > config.maxSize * 1024 * 1024) {
|
|
alert(`파일 크기가 ${config.maxSize}MB를 초과합니다: ${file.name}`);
|
|
e.target.value = "";
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
const file = config?.multiple ? files : files[0];
|
|
updateFormData(fieldName, file);
|
|
};
|
|
|
|
return applyStyles(
|
|
<Input
|
|
type="file"
|
|
onChange={handleFileChange}
|
|
disabled={readonly}
|
|
required={required}
|
|
multiple={config?.multiple}
|
|
accept={config?.accept}
|
|
className="h-full w-full"
|
|
/>,
|
|
);
|
|
}
|
|
|
|
case "code": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as CodeTypeConfig | undefined;
|
|
|
|
console.log("💻 InteractiveScreenViewer - Code 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
language: config?.language,
|
|
theme: config?.theme,
|
|
fontSize: config?.fontSize,
|
|
defaultValue: config?.defaultValue,
|
|
wordWrap: config?.wordWrap,
|
|
tabSize: config?.tabSize,
|
|
},
|
|
});
|
|
|
|
const finalPlaceholder = config?.placeholder || "코드를 입력하세요...";
|
|
const rows = config?.rows || 4;
|
|
|
|
return applyStyles(
|
|
<Textarea
|
|
placeholder={finalPlaceholder}
|
|
value={currentValue || config?.defaultValue || ""}
|
|
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
|
disabled={readonly}
|
|
required={required}
|
|
rows={rows}
|
|
className="h-full w-full resize-none font-mono text-sm"
|
|
style={{
|
|
fontSize: `${config?.fontSize || 14}px`,
|
|
backgroundColor: config?.theme === "dark" ? "#1e1e1e" : "#ffffff",
|
|
color: config?.theme === "dark" ? "#ffffff" : "#000000",
|
|
whiteSpace: config?.wordWrap === false ? "nowrap" : "normal",
|
|
tabSize: config?.tabSize || 2,
|
|
}}
|
|
/>,
|
|
);
|
|
}
|
|
|
|
case "entity": {
|
|
const widget = comp as WidgetComponent;
|
|
const config = widget.webTypeConfig as EntityTypeConfig | undefined;
|
|
|
|
console.log("🏢 InteractiveScreenViewer - Entity 위젯:", {
|
|
componentId: widget.id,
|
|
widgetType: widget.widgetType,
|
|
config,
|
|
appliedSettings: {
|
|
entityName: config?.entityName,
|
|
displayField: config?.displayField,
|
|
valueField: config?.valueField,
|
|
multiple: config?.multiple,
|
|
defaultValue: config?.defaultValue,
|
|
},
|
|
});
|
|
|
|
const finalPlaceholder = config?.placeholder || "엔티티를 선택하세요...";
|
|
const defaultOptions = [
|
|
{ label: "사용자", value: "user" },
|
|
{ label: "제품", value: "product" },
|
|
{ label: "주문", value: "order" },
|
|
{ label: "카테고리", value: "category" },
|
|
];
|
|
|
|
return applyStyles(
|
|
<Select
|
|
value={currentValue || config?.defaultValue || ""}
|
|
onValueChange={(value) => updateFormData(fieldName, value)}
|
|
disabled={readonly}
|
|
required={required}
|
|
>
|
|
<SelectTrigger className="h-full w-full">
|
|
<SelectValue placeholder={finalPlaceholder} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{defaultOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{config?.displayFormat
|
|
? config.displayFormat.replace("{label}", option.label).replace("{value}", option.value)
|
|
: option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>,
|
|
);
|
|
}
|
|
|
|
default:
|
|
return applyStyles(
|
|
<Input
|
|
type="text"
|
|
placeholder={placeholder || "입력하세요..."}
|
|
value={currentValue}
|
|
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
|
disabled={readonly}
|
|
required={required}
|
|
className="h-full w-full"
|
|
/>,
|
|
);
|
|
}
|
|
};
|
|
|
|
// 그룹 컴포넌트 처리
|
|
if (component.type === "group") {
|
|
const children = allComponents.filter((comp) => comp.parentId === component.id);
|
|
|
|
return (
|
|
<div className="relative h-full w-full">
|
|
{/* 그룹 내의 자식 컴포넌트들 렌더링 */}
|
|
{children.map((child) => (
|
|
<div
|
|
key={child.id}
|
|
style={{
|
|
position: "absolute",
|
|
left: `${child.position.x - component.position.x}px`,
|
|
top: `${child.position.y - component.position.y}px`,
|
|
width: `${child.size.width}px`,
|
|
height: `${child.size.height}px`,
|
|
zIndex: child.position.z || 1,
|
|
}}
|
|
>
|
|
<InteractiveScreenViewer
|
|
component={child}
|
|
allComponents={allComponents}
|
|
formData={externalFormData}
|
|
onFormDataChange={onFormDataChange}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// 일반 위젯 컴포넌트
|
|
return (
|
|
<div className="h-full w-full">
|
|
{/* 라벨이 있는 경우 표시 */}
|
|
{component.label && (
|
|
<label className="mb-1 block text-sm font-medium text-gray-700">
|
|
{component.label}
|
|
{component.required && <span className="ml-1 text-red-500">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
{/* 실제 위젯 */}
|
|
<div className={component.label ? "flex-1" : "h-full w-full"}>{renderInteractiveWidget(component)}</div>
|
|
</div>
|
|
);
|
|
};
|