1649 lines
62 KiB
TypeScript
1649 lines
62 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useCallback } 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 { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||
import { CalendarIcon, File, Upload, X } from "lucide-react";
|
||
import { format } from "date-fns";
|
||
import { ko } from "date-fns/locale";
|
||
import { useAuth } from "@/hooks/useAuth";
|
||
import { uploadFilesAndCreateData } from "@/lib/api/file";
|
||
import { toast } from "sonner";
|
||
import {
|
||
ComponentData,
|
||
WidgetComponent,
|
||
DataTableComponent,
|
||
TextTypeConfig,
|
||
NumberTypeConfig,
|
||
DateTypeConfig,
|
||
SelectTypeConfig,
|
||
RadioTypeConfig,
|
||
CheckboxTypeConfig,
|
||
TextareaTypeConfig,
|
||
FileTypeConfig,
|
||
CodeTypeConfig,
|
||
EntityTypeConfig,
|
||
ButtonTypeConfig,
|
||
} from "@/types/screen";
|
||
import { InteractiveDataTable } from "./InteractiveDataTable";
|
||
import { dynamicFormApi, DynamicFormData } from "@/lib/api/dynamicForm";
|
||
import { useParams } from "next/navigation";
|
||
import { screenApi } from "@/lib/api/screen";
|
||
|
||
interface InteractiveScreenViewerProps {
|
||
component: ComponentData;
|
||
allComponents: ComponentData[];
|
||
formData?: Record<string, any>;
|
||
onFormDataChange?: (fieldName: string, value: any) => void;
|
||
hideLabel?: boolean;
|
||
screenInfo?: {
|
||
id: number;
|
||
tableName?: string;
|
||
};
|
||
}
|
||
|
||
export const InteractiveScreenViewer: React.FC<InteractiveScreenViewerProps> = ({
|
||
component,
|
||
allComponents,
|
||
formData: externalFormData,
|
||
onFormDataChange,
|
||
hideLabel = false,
|
||
screenInfo,
|
||
}) => {
|
||
const { userName } = useAuth(); // 현재 로그인한 사용자명 가져오기
|
||
const [localFormData, setLocalFormData] = useState<Record<string, any>>({});
|
||
const [dateValues, setDateValues] = useState<Record<string, Date | undefined>>({});
|
||
|
||
// 팝업 화면 상태
|
||
const [popupScreen, setPopupScreen] = useState<{
|
||
screenId: number;
|
||
title: string;
|
||
size: string;
|
||
} | null>(null);
|
||
|
||
// 팝업 화면 레이아웃 상태
|
||
const [popupLayout, setPopupLayout] = useState<ComponentData[]>([]);
|
||
const [popupLoading, setPopupLoading] = useState(false);
|
||
const [popupScreenResolution, setPopupScreenResolution] = useState<{ width: number; height: number } | null>(null);
|
||
const [popupScreenInfo, setPopupScreenInfo] = useState<{ id: number; tableName?: string } | null>(null);
|
||
|
||
// 팝업 전용 formData 상태
|
||
const [popupFormData, setPopupFormData] = useState<Record<string, any>>({});
|
||
|
||
// 자동값 생성 함수
|
||
const generateAutoValue = useCallback((autoValueType: string): string => {
|
||
const now = new Date();
|
||
switch (autoValueType) {
|
||
case "current_datetime":
|
||
return now.toISOString().slice(0, 19).replace("T", " "); // YYYY-MM-DD HH:mm:ss
|
||
case "current_date":
|
||
return now.toISOString().slice(0, 10); // YYYY-MM-DD
|
||
case "current_time":
|
||
return now.toTimeString().slice(0, 8); // HH:mm:ss
|
||
case "current_user":
|
||
// 실제 접속중인 사용자명 사용
|
||
return userName || "사용자"; // 사용자명이 없으면 기본값
|
||
case "uuid":
|
||
return crypto.randomUUID();
|
||
case "sequence":
|
||
return `SEQ_${Date.now()}`;
|
||
default:
|
||
return "";
|
||
}
|
||
}, [userName]); // userName 의존성 추가
|
||
|
||
// 팝업 화면 레이아웃 로드
|
||
React.useEffect(() => {
|
||
if (popupScreen) {
|
||
const loadPopupLayout = async () => {
|
||
try {
|
||
setPopupLoading(true);
|
||
console.log("🔍 팝업 화면 로드 시작:", popupScreen);
|
||
|
||
// 화면 레이아웃과 화면 정보를 병렬로 가져오기
|
||
const [layout, screen] = await Promise.all([
|
||
screenApi.getLayout(popupScreen.screenId),
|
||
screenApi.getScreen(popupScreen.screenId)
|
||
]);
|
||
|
||
console.log("📊 팝업 화면 로드 완료:", {
|
||
componentsCount: layout.components?.length || 0,
|
||
screenInfo: {
|
||
screenId: screen.screenId,
|
||
tableName: screen.tableName
|
||
},
|
||
popupFormData: {}
|
||
});
|
||
|
||
setPopupLayout(layout.components || []);
|
||
setPopupScreenResolution(layout.screenResolution || null);
|
||
setPopupScreenInfo({
|
||
id: popupScreen.screenId,
|
||
tableName: screen.tableName
|
||
});
|
||
|
||
// 팝업 formData 초기화
|
||
setPopupFormData({});
|
||
} catch (error) {
|
||
console.error("❌ 팝업 화면 로드 실패:", error);
|
||
setPopupLayout([]);
|
||
setPopupScreenInfo(null);
|
||
} finally {
|
||
setPopupLoading(false);
|
||
}
|
||
};
|
||
|
||
loadPopupLayout();
|
||
}
|
||
}, [popupScreen]);
|
||
|
||
// 실제 사용할 폼 데이터 (외부와 로컬 데이터 병합)
|
||
const formData = { ...localFormData, ...externalFormData };
|
||
console.log("🔄 formData 구성:", {
|
||
external: externalFormData,
|
||
local: localFormData,
|
||
merged: formData,
|
||
hasExternalCallback: !!onFormDataChange
|
||
});
|
||
|
||
// 폼 데이터 업데이트
|
||
const updateFormData = (fieldName: string, value: any) => {
|
||
console.log(`🔄 updateFormData: ${fieldName} = "${value}" (외부콜백: ${!!onFormDataChange})`);
|
||
|
||
// 항상 로컬 상태도 업데이트
|
||
setLocalFormData((prev) => ({
|
||
...prev,
|
||
[fieldName]: value,
|
||
}));
|
||
console.log(`💾 로컬 상태 업데이트: ${fieldName} = "${value}"`);
|
||
|
||
// 외부 콜백이 있는 경우에도 전달
|
||
if (onFormDataChange) {
|
||
// 개별 필드를 객체로 변환해서 전달
|
||
const dataToSend = { [fieldName]: value };
|
||
onFormDataChange(dataToSend);
|
||
console.log(`📤 외부 콜백으로 전달: ${fieldName} = "${value}" (객체: ${JSON.stringify(dataToSend)})`);
|
||
}
|
||
};
|
||
|
||
// 자동입력 필드들의 값을 formData에 초기 설정
|
||
React.useEffect(() => {
|
||
console.log("🚀 자동입력 초기화 useEffect 실행 - allComponents 개수:", allComponents.length);
|
||
const initAutoInputFields = () => {
|
||
console.log("🔧 initAutoInputFields 실행 시작");
|
||
allComponents.forEach(comp => {
|
||
if (comp.type === 'widget') {
|
||
const widget = comp as WidgetComponent;
|
||
const fieldName = widget.columnName || widget.id;
|
||
|
||
// 텍스트 타입 위젯의 자동입력 처리
|
||
if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') &&
|
||
widget.webTypeConfig) {
|
||
const config = widget.webTypeConfig as TextTypeConfig;
|
||
const isAutoInput = config?.autoInput || false;
|
||
|
||
if (isAutoInput && config?.autoValueType) {
|
||
// 이미 값이 있으면 덮어쓰지 않음
|
||
const currentValue = formData[fieldName];
|
||
console.log(`🔍 자동입력 필드 체크: ${fieldName}`, {
|
||
currentValue,
|
||
isEmpty: currentValue === undefined || currentValue === '',
|
||
isAutoInput,
|
||
autoValueType: config.autoValueType
|
||
});
|
||
|
||
if (currentValue === undefined || currentValue === '') {
|
||
const autoValue = config.autoValueType === "custom"
|
||
? config.customValue || ""
|
||
: generateAutoValue(config.autoValueType);
|
||
|
||
console.log("🔄 자동입력 필드 초기화:", {
|
||
fieldName,
|
||
autoValueType: config.autoValueType,
|
||
autoValue
|
||
});
|
||
|
||
updateFormData(fieldName, autoValue);
|
||
} else {
|
||
console.log(`⏭️ 자동입력 건너뜀 (값 있음): ${fieldName} = "${currentValue}"`);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// 초기 로드 시 자동입력 필드들 설정
|
||
initAutoInputFields();
|
||
}, [allComponents, generateAutoValue]); // formData는 의존성에서 제외 (무한 루프 방지)
|
||
|
||
// 날짜 값 업데이트
|
||
const updateDateValue = (fieldName: string, date: Date | undefined) => {
|
||
setDateValues((prev) => ({
|
||
...prev,
|
||
[fieldName]: date,
|
||
}));
|
||
updateFormData(fieldName, date ? format(date, "yyyy-MM-dd") : "");
|
||
};
|
||
|
||
// 실제 사용 가능한 위젯 렌더링
|
||
const renderInteractiveWidget = (comp: ComponentData) => {
|
||
// 데이터 테이블 컴포넌트 처리
|
||
if (comp.type === "datatable") {
|
||
return (
|
||
<InteractiveDataTable
|
||
component={comp as DataTableComponent}
|
||
className="h-full w-full"
|
||
style={{
|
||
width: "100%",
|
||
height: "100%",
|
||
}}
|
||
/>
|
||
);
|
||
}
|
||
|
||
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: {
|
||
...element.props.style, // 기존 스타일 유지
|
||
...comp.style,
|
||
// 크기는 부모 컨테이너에서 처리하므로 제거 (하지만 다른 스타일은 유지)
|
||
width: "100%",
|
||
height: "100%",
|
||
minHeight: "100%",
|
||
maxHeight: "100%",
|
||
boxSizing: "border-box",
|
||
},
|
||
});
|
||
};
|
||
|
||
switch (widgetType) {
|
||
case "text":
|
||
case "email":
|
||
case "tel": {
|
||
const widget = comp as WidgetComponent;
|
||
const config = widget.webTypeConfig as TextTypeConfig | undefined;
|
||
|
||
// 자동입력 관련 처리
|
||
const isAutoInput = config?.autoInput || false;
|
||
const autoValue = isAutoInput && config?.autoValueType
|
||
? config.autoValueType === "custom"
|
||
? config.customValue || ""
|
||
: generateAutoValue(config.autoValueType)
|
||
: "";
|
||
|
||
// 기본값 또는 자동값 설정
|
||
const displayValue = isAutoInput ? autoValue : currentValue || config?.defaultValue || "";
|
||
|
||
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,
|
||
defaultValue: config?.defaultValue,
|
||
autoInput: isAutoInput,
|
||
autoValueType: config?.autoValueType,
|
||
autoValue,
|
||
displayValue,
|
||
},
|
||
});
|
||
|
||
// 형식별 패턴 생성
|
||
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;
|
||
console.log(`📝 입력 변경: ${fieldName} = "${value}"`);
|
||
|
||
// 형식별 실시간 검증
|
||
if (config?.format && config.format !== "none") {
|
||
const pattern = getPatternByFormat(config.format);
|
||
if (pattern) {
|
||
const regex = new RegExp(`^${pattern}$`);
|
||
if (value && !regex.test(value)) {
|
||
console.log(`❌ 형식 검증 실패: ${fieldName} = "${value}"`);
|
||
return; // 유효하지 않은 입력 차단
|
||
}
|
||
}
|
||
}
|
||
|
||
// 길이 제한 검증
|
||
if (config?.maxLength && value.length > config.maxLength) {
|
||
console.log(`❌ 길이 제한 초과: ${fieldName} = "${value}" (최대: ${config.maxLength})`);
|
||
return; // 최대 길이 초과 차단
|
||
}
|
||
|
||
console.log(`✅ updateFormData 호출: ${fieldName} = "${value}"`);
|
||
updateFormData(fieldName, value);
|
||
};
|
||
|
||
const finalPlaceholder = config?.placeholder || placeholder || "입력하세요...";
|
||
const inputType = widgetType === "email" ? "email" : widgetType === "tel" ? "tel" : "text";
|
||
|
||
return applyStyles(
|
||
<Input
|
||
type={inputType}
|
||
placeholder={isAutoInput ? `자동입력: ${config?.autoValueType}` : finalPlaceholder}
|
||
value={displayValue}
|
||
onChange={isAutoInput ? undefined : handleInputChange}
|
||
disabled={readonly || isAutoInput}
|
||
readOnly={isAutoInput}
|
||
required={required}
|
||
minLength={config?.minLength}
|
||
maxLength={config?.maxLength}
|
||
pattern={getPatternByFormat(config?.format || "none")}
|
||
className={`w-full ${isAutoInput ? "bg-gray-50 text-gray-700" : ""}`}
|
||
style={{
|
||
height: "100%",
|
||
minHeight: "100%",
|
||
maxHeight: "100%"
|
||
}}
|
||
/>,
|
||
);
|
||
}
|
||
|
||
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="w-full"
|
||
style={{ height: "100%" }}
|
||
/>,
|
||
);
|
||
}
|
||
|
||
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="w-full"
|
||
style={{ height: "100%" }}
|
||
/>,
|
||
);
|
||
} 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="w-full"
|
||
style={{ height: "100%" }}
|
||
/>,
|
||
);
|
||
}
|
||
|
||
case "file": {
|
||
const widget = comp as WidgetComponent;
|
||
const config = widget.webTypeConfig as FileTypeConfig | undefined;
|
||
|
||
// 현재 파일 값 가져오기
|
||
const getCurrentValue = () => {
|
||
const fieldName = widget.columnName || widget.id;
|
||
return (externalFormData?.[fieldName] || localFormData[fieldName]) as any;
|
||
};
|
||
|
||
const currentValue = getCurrentValue();
|
||
|
||
console.log("📁 InteractiveScreenViewer - File 위젯:", {
|
||
componentId: widget.id,
|
||
widgetType: widget.widgetType,
|
||
config,
|
||
currentValue,
|
||
appliedSettings: {
|
||
accept: config?.accept,
|
||
multiple: config?.multiple,
|
||
maxSize: config?.maxSize,
|
||
preview: config?.preview,
|
||
},
|
||
});
|
||
|
||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const files = e.target.files;
|
||
const fieldName = widget.columnName || widget.id;
|
||
|
||
// 파일 선택을 취소한 경우 (files가 null이거나 길이가 0)
|
||
if (!files || files.length === 0) {
|
||
console.log("📁 파일 선택 취소됨 - 기존 파일 유지");
|
||
|
||
// 현재 저장된 파일이 있는지 확인
|
||
const currentStoredValue = externalFormData?.[fieldName] || localFormData[fieldName];
|
||
if (currentStoredValue) {
|
||
console.log("📁 기존 파일 있음 - 유지:", currentStoredValue);
|
||
// 기존 파일이 있으면 그대로 유지 (아무것도 하지 않음)
|
||
return;
|
||
} else {
|
||
console.log("📁 기존 파일 없음 - 빈 상태 유지");
|
||
// 기존 파일이 없으면 빈 상태 유지
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 실제 서버로 파일 업로드
|
||
try {
|
||
toast.loading(`${files.length}개 파일 업로드 중...`);
|
||
|
||
const uploadResult = await uploadFilesAndCreateData(files);
|
||
|
||
if (uploadResult.success) {
|
||
console.log("📁 업로드 완료된 파일 데이터:", uploadResult.data);
|
||
|
||
setLocalFormData(prev => ({ ...prev, [fieldName]: uploadResult.data }));
|
||
|
||
// 외부 폼 데이터 변경 콜백 호출
|
||
if (onFormDataChange) {
|
||
onFormDataChange(fieldName, uploadResult.data);
|
||
}
|
||
|
||
toast.success(uploadResult.message);
|
||
} else {
|
||
throw new Error("파일 업로드에 실패했습니다.");
|
||
}
|
||
} catch (error) {
|
||
console.error("파일 업로드 오류:", error);
|
||
toast.error("파일 업로드에 실패했습니다.");
|
||
|
||
// 파일 입력 초기화
|
||
e.target.value = "";
|
||
return;
|
||
}
|
||
};
|
||
|
||
const clearFile = () => {
|
||
const fieldName = widget.columnName || widget.id;
|
||
setLocalFormData(prev => ({ ...prev, [fieldName]: null }));
|
||
|
||
// 외부 폼 데이터 변경 콜백 호출
|
||
if (onFormDataChange) {
|
||
onFormDataChange(fieldName, null);
|
||
}
|
||
|
||
// 파일 input 초기화
|
||
const fileInput = document.querySelector(`input[type="file"][data-field="${fieldName}"]`) as HTMLInputElement;
|
||
if (fileInput) {
|
||
fileInput.value = "";
|
||
}
|
||
};
|
||
|
||
const renderFilePreview = () => {
|
||
if (!currentValue || !config?.preview) return null;
|
||
|
||
// 새로운 JSON 구조에서 파일 정보 추출
|
||
const fileData = currentValue.files || [];
|
||
if (fileData.length === 0) return null;
|
||
|
||
return (
|
||
<div className="mt-2 space-y-2">
|
||
<div className="text-sm font-medium text-gray-700">
|
||
업로드된 파일 ({fileData.length}개)
|
||
</div>
|
||
{fileData.map((fileInfo: any, index: number) => {
|
||
const isImage = fileInfo.type?.startsWith('image/');
|
||
|
||
return (
|
||
<div key={index} className="flex items-center gap-2 rounded border bg-gray-50 p-2">
|
||
<div className="flex h-16 w-16 items-center justify-center rounded bg-gray-200">
|
||
{isImage ? (
|
||
<div className="text-green-600 text-xs font-medium">IMG</div>
|
||
) : (
|
||
<File className="h-8 w-8 text-gray-500" />
|
||
)}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<p className="text-sm font-medium text-gray-900 truncate">{fileInfo.name}</p>
|
||
<p className="text-xs text-gray-500">
|
||
{(fileInfo.size / 1024 / 1024).toFixed(2)} MB
|
||
</p>
|
||
<p className="text-xs text-gray-500">{fileInfo.type || '알 수 없는 형식'}</p>
|
||
<p className="text-xs text-gray-400">업로드: {new Date(fileInfo.uploadedAt).toLocaleString('ko-KR')}</p>
|
||
</div>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={clearFile}
|
||
className="h-8 w-8 p-0"
|
||
>
|
||
<X className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const fieldName = widget.columnName || widget.id;
|
||
|
||
return applyStyles(
|
||
<div className="w-full space-y-2">
|
||
{/* 파일 선택 영역 */}
|
||
<div className="relative">
|
||
<input
|
||
type="file"
|
||
data-field={fieldName}
|
||
onChange={handleFileChange}
|
||
disabled={readonly}
|
||
required={required}
|
||
multiple={config?.multiple}
|
||
accept={config?.accept}
|
||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
||
style={{ zIndex: 1 }}
|
||
/>
|
||
<div className={`
|
||
flex items-center justify-center rounded-lg border-2 border-dashed p-4 text-center transition-colors
|
||
${currentValue && currentValue.files && currentValue.files.length > 0 ? 'border-green-300 bg-green-50' : 'border-gray-300 bg-gray-50 hover:border-gray-400 hover:bg-gray-100'}
|
||
${readonly ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}
|
||
`}>
|
||
<div className="space-y-2">
|
||
{currentValue && currentValue.files && currentValue.files.length > 0 ? (
|
||
<>
|
||
<div className="flex items-center justify-center">
|
||
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100">
|
||
<svg className="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<p className="text-sm font-medium text-green-900">
|
||
{currentValue.totalCount === 1
|
||
? '파일 선택됨'
|
||
: `${currentValue.totalCount}개 파일 선택됨`}
|
||
</p>
|
||
<p className="text-xs text-green-700">
|
||
총 {(currentValue.totalSize / 1024 / 1024).toFixed(2)}MB
|
||
</p>
|
||
<p className="text-xs text-green-700">클릭하여 다른 파일 선택</p>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Upload className="mx-auto h-8 w-8 text-gray-400" />
|
||
<p className="text-sm text-gray-600">
|
||
{config?.dragDrop ? '파일을 드래그하여 놓거나 클릭하여 선택' : '클릭하여 파일 선택'}
|
||
</p>
|
||
{(config?.accept || config?.maxSize) && (
|
||
<div className="text-xs text-gray-500 space-y-1">
|
||
{config.accept && <div>허용 형식: {config.accept}</div>}
|
||
{config.maxSize && <div>최대 크기: {config.maxSize}MB</div>}
|
||
{config.multiple && <div>다중 선택 가능</div>}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 파일 미리보기 */}
|
||
{renderFilePreview()}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
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 (
|
||
<Select
|
||
value={currentValue || config?.defaultValue || ""}
|
||
onValueChange={(value) => updateFormData(fieldName, value)}
|
||
disabled={readonly}
|
||
required={required}
|
||
>
|
||
<SelectTrigger
|
||
className="w-full"
|
||
style={{ height: "100%" }}
|
||
style={{
|
||
...comp.style,
|
||
width: "100%",
|
||
height: "100%",
|
||
}}
|
||
>
|
||
<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>,
|
||
);
|
||
}
|
||
|
||
case "button": {
|
||
const widget = comp as WidgetComponent;
|
||
const config = widget.webTypeConfig as ButtonTypeConfig | undefined;
|
||
|
||
const handleButtonClick = async () => {
|
||
const actionType = config?.actionType || "save";
|
||
|
||
try {
|
||
switch (actionType) {
|
||
case "save":
|
||
await handleSaveAction();
|
||
break;
|
||
case "delete":
|
||
await handleDeleteAction();
|
||
break;
|
||
case "edit":
|
||
handleEditAction();
|
||
break;
|
||
case "add":
|
||
handleAddAction();
|
||
break;
|
||
case "search":
|
||
handleSearchAction();
|
||
break;
|
||
case "reset":
|
||
handleResetAction();
|
||
break;
|
||
case "submit":
|
||
await handleSubmitAction();
|
||
break;
|
||
case "close":
|
||
handleCloseAction();
|
||
break;
|
||
case "popup":
|
||
handlePopupAction();
|
||
break;
|
||
case "navigate":
|
||
handleNavigateAction();
|
||
break;
|
||
case "custom":
|
||
await handleCustomAction();
|
||
break;
|
||
default:
|
||
console.log(`알 수 없는 액션 타입: ${actionType}`);
|
||
}
|
||
} catch (error) {
|
||
console.error(`버튼 액션 실행 오류 (${actionType}):`, error);
|
||
alert(`작업 중 오류가 발생했습니다: ${error.message}`);
|
||
}
|
||
};
|
||
|
||
// 저장 액션
|
||
const handleSaveAction = async () => {
|
||
// 저장 시점에서 최신 formData 구성
|
||
const currentFormData = { ...localFormData, ...externalFormData };
|
||
console.log("💾 저장 시작 - currentFormData:", currentFormData);
|
||
console.log("💾 저장 시점 formData 상세:", {
|
||
local: localFormData,
|
||
external: externalFormData,
|
||
merged: currentFormData
|
||
});
|
||
console.log("💾 currentFormData 키-값 상세:");
|
||
Object.entries(currentFormData).forEach(([key, value]) => {
|
||
console.log(` ${key}: "${value}" (타입: ${typeof value})`);
|
||
});
|
||
|
||
// formData 유효성 체크를 완화 (빈 객체라도 위젯이 있으면 저장 진행)
|
||
const hasWidgets = allComponents.some(comp => comp.type === 'widget');
|
||
if (!hasWidgets) {
|
||
alert("저장할 입력 컴포넌트가 없습니다.");
|
||
return;
|
||
}
|
||
|
||
// 필수 항목 검증
|
||
const requiredFields = allComponents.filter(c => c.required && (c.columnName || c.id));
|
||
const missingFields = requiredFields.filter(field => {
|
||
const fieldName = field.columnName || field.id;
|
||
const value = currentFormData[fieldName];
|
||
return !value || value.toString().trim() === "";
|
||
});
|
||
|
||
if (missingFields.length > 0) {
|
||
const fieldNames = missingFields.map(f => f.label || f.columnName || f.id).join(", ");
|
||
alert(`다음 필수 항목을 입력해주세요: ${fieldNames}`);
|
||
return;
|
||
}
|
||
|
||
if (!screenInfo?.id) {
|
||
alert("화면 정보가 없어 저장할 수 없습니다.");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 컬럼명 기반으로 데이터 매핑
|
||
const mappedData: Record<string, any> = {};
|
||
|
||
// 입력 가능한 컴포넌트에서 데이터 수집
|
||
allComponents.forEach(comp => {
|
||
// 위젯 컴포넌트이고 입력 가능한 타입인 경우
|
||
if (comp.type === 'widget') {
|
||
const widget = comp as WidgetComponent;
|
||
const fieldName = widget.columnName || widget.id;
|
||
let value = currentFormData[fieldName];
|
||
|
||
console.log(`🔍 컴포넌트 처리: ${fieldName}`, {
|
||
widgetType: widget.widgetType,
|
||
formDataValue: value,
|
||
hasWebTypeConfig: !!widget.webTypeConfig,
|
||
config: widget.webTypeConfig
|
||
});
|
||
|
||
// 자동입력 필드인 경우에만 값이 없을 때 생성
|
||
if ((widget.widgetType === 'text' || widget.widgetType === 'email' || widget.widgetType === 'tel') &&
|
||
widget.webTypeConfig) {
|
||
const config = widget.webTypeConfig as TextTypeConfig;
|
||
const isAutoInput = config?.autoInput || false;
|
||
|
||
console.log(`📋 ${fieldName} 자동입력 체크:`, {
|
||
isAutoInput,
|
||
autoValueType: config?.autoValueType,
|
||
hasValue: !!value,
|
||
value
|
||
});
|
||
|
||
if (isAutoInput && config?.autoValueType && (!value || value === '')) {
|
||
// 자동입력이고 값이 없을 때만 생성
|
||
value = config.autoValueType === "custom"
|
||
? config.customValue || ""
|
||
: generateAutoValue(config.autoValueType);
|
||
|
||
console.log("💾 자동입력 값 저장 (값이 없어서 생성):", {
|
||
fieldName,
|
||
autoValueType: config.autoValueType,
|
||
generatedValue: value
|
||
});
|
||
} else if (isAutoInput && value) {
|
||
console.log("💾 자동입력 필드지만 기존 값 유지:", {
|
||
fieldName,
|
||
existingValue: value
|
||
});
|
||
} else if (!isAutoInput) {
|
||
console.log(`📝 일반 입력 필드: ${fieldName} = "${value}"`);
|
||
}
|
||
}
|
||
|
||
// 값이 있는 경우만 매핑 (빈 문자열도 포함하되, undefined는 제외)
|
||
if (value !== undefined && value !== null && value !== "undefined") {
|
||
// columnName이 있으면 columnName을 키로, 없으면 컴포넌트 ID를 키로 사용
|
||
const saveKey = widget.columnName || `comp_${widget.id}`;
|
||
mappedData[saveKey] = value;
|
||
} else if (widget.columnName) {
|
||
// 값이 없지만 columnName이 있는 경우, 빈 문자열로 저장
|
||
console.log(`⚠️ ${widget.columnName} 필드에 값이 없어 빈 문자열로 저장`);
|
||
mappedData[widget.columnName] = "";
|
||
}
|
||
}
|
||
});
|
||
|
||
console.log("💾 저장할 데이터 매핑:", {
|
||
원본데이터: currentFormData,
|
||
매핑된데이터: mappedData,
|
||
화면정보: screenInfo,
|
||
전체컴포넌트수: allComponents.length,
|
||
위젯컴포넌트수: allComponents.filter(c => c.type === 'widget').length,
|
||
});
|
||
|
||
// 각 컴포넌트의 상세 정보 로그
|
||
console.log("🔍 컴포넌트별 데이터 수집 상세:");
|
||
allComponents.forEach(comp => {
|
||
if (comp.type === 'widget') {
|
||
const widget = comp as WidgetComponent;
|
||
const fieldName = widget.columnName || widget.id;
|
||
const value = currentFormData[fieldName];
|
||
const hasValue = value !== undefined && value !== null && value !== '';
|
||
console.log(` - ${fieldName} (${widget.widgetType}): "${value}" (값있음: ${hasValue}, 컬럼명: ${widget.columnName})`);
|
||
}
|
||
});
|
||
|
||
// 매핑된 데이터가 비어있으면 경고
|
||
if (Object.keys(mappedData).length === 0) {
|
||
console.warn("⚠️ 매핑된 데이터가 없습니다. 빈 데이터로 저장됩니다.");
|
||
}
|
||
|
||
// 테이블명 결정 (화면 정보에서 가져오거나 첫 번째 컴포넌트의 테이블명 사용)
|
||
const tableName = screenInfo.tableName ||
|
||
allComponents.find(c => c.columnName)?.tableName ||
|
||
"dynamic_form_data"; // 기본값
|
||
|
||
const saveData: DynamicFormData = {
|
||
screenId: screenInfo.id,
|
||
tableName: tableName,
|
||
data: mappedData,
|
||
};
|
||
|
||
console.log("🚀 API 저장 요청:", saveData);
|
||
|
||
const result = await dynamicFormApi.saveFormData(saveData);
|
||
|
||
if (result.success) {
|
||
alert("저장되었습니다.");
|
||
console.log("✅ 저장 성공:", result.data);
|
||
|
||
// 저장 후 데이터 초기화 (선택사항)
|
||
if (onFormDataChange) {
|
||
const resetData: Record<string, any> = {};
|
||
Object.keys(formData).forEach(key => {
|
||
resetData[key] = "";
|
||
});
|
||
onFormDataChange(resetData);
|
||
}
|
||
} else {
|
||
throw new Error(result.message || "저장에 실패했습니다.");
|
||
}
|
||
} catch (error: any) {
|
||
console.error("❌ 저장 실패:", error);
|
||
alert(`저장 중 오류가 발생했습니다: ${error.message}`);
|
||
}
|
||
};
|
||
|
||
|
||
// 삭제 액션
|
||
const handleDeleteAction = async () => {
|
||
const confirmMessage = config?.confirmMessage || "정말로 삭제하시겠습니까?";
|
||
|
||
if (!confirm(confirmMessage)) {
|
||
return;
|
||
}
|
||
|
||
// 삭제할 레코드 ID가 필요 (폼 데이터에서 id 필드 찾기)
|
||
const recordId = formData["id"] || formData["ID"] || formData["objid"];
|
||
|
||
if (!recordId) {
|
||
alert("삭제할 데이터를 찾을 수 없습니다. (ID가 없음)");
|
||
return;
|
||
}
|
||
|
||
// 테이블명 결정
|
||
const tableName = screenInfo?.tableName ||
|
||
allComponents.find(c => c.columnName)?.tableName ||
|
||
"unknown_table";
|
||
|
||
if (!tableName || tableName === "unknown_table") {
|
||
alert("테이블 정보가 없어 삭제할 수 없습니다.");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
console.log("🗑️ 삭제 실행:", { recordId, tableName, formData });
|
||
|
||
const result = await dynamicFormApi.deleteFormDataFromTable(recordId, tableName);
|
||
|
||
if (result.success) {
|
||
alert("삭제되었습니다.");
|
||
console.log("✅ 삭제 성공");
|
||
|
||
// 삭제 후 폼 초기화
|
||
if (onFormDataChange) {
|
||
const resetData: Record<string, any> = {};
|
||
Object.keys(formData).forEach(key => {
|
||
resetData[key] = "";
|
||
});
|
||
onFormDataChange(resetData);
|
||
}
|
||
} else {
|
||
throw new Error(result.message || "삭제에 실패했습니다.");
|
||
}
|
||
} catch (error: any) {
|
||
console.error("❌ 삭제 실패:", error);
|
||
alert(`삭제 중 오류가 발생했습니다: ${error.message}`);
|
||
}
|
||
};
|
||
|
||
// 편집 액션
|
||
const handleEditAction = () => {
|
||
console.log("✏️ 편집 모드 활성화");
|
||
// 읽기 전용 모드를 편집 모드로 전환
|
||
alert("편집 모드로 전환되었습니다.");
|
||
};
|
||
|
||
// 추가 액션
|
||
const handleAddAction = () => {
|
||
console.log("➕ 새 항목 추가");
|
||
// 새 항목 추가 로직
|
||
alert("새 항목을 추가할 수 있습니다.");
|
||
};
|
||
|
||
// 검색 액션
|
||
const handleSearchAction = () => {
|
||
console.log("🔍 검색 실행:", formData);
|
||
// 검색 로직
|
||
const searchTerms = Object.values(formData).filter(v => v && v.toString().trim());
|
||
if (searchTerms.length === 0) {
|
||
alert("검색할 내용을 입력해주세요.");
|
||
} else {
|
||
alert(`검색 실행: ${searchTerms.join(", ")}`);
|
||
}
|
||
};
|
||
|
||
// 초기화 액션
|
||
const handleResetAction = () => {
|
||
if (confirm("모든 입력을 초기화하시겠습니까?")) {
|
||
if (onFormDataChange) {
|
||
const resetData: Record<string, any> = {};
|
||
Object.keys(formData).forEach(key => {
|
||
resetData[key] = "";
|
||
});
|
||
onFormDataChange(resetData);
|
||
}
|
||
console.log("🔄 폼 초기화 완료");
|
||
alert("입력이 초기화되었습니다.");
|
||
}
|
||
};
|
||
|
||
// 제출 액션
|
||
const handleSubmitAction = async () => {
|
||
console.log("📤 폼 제출:", formData);
|
||
// 제출 로직
|
||
alert("제출되었습니다.");
|
||
};
|
||
|
||
// 닫기 액션
|
||
const handleCloseAction = () => {
|
||
console.log("❌ 닫기 액션 실행");
|
||
|
||
// 모달 내부에서 실행되는지 확인
|
||
const isInModal = document.querySelector('[role="dialog"]') !== null;
|
||
const isInPopup = window.opener !== null;
|
||
|
||
if (isInModal) {
|
||
// 모달 내부인 경우: 모달의 닫기 버튼 클릭하거나 모달 닫기 이벤트 발생
|
||
console.log("🔄 모달 내부에서 닫기 - 모달 닫기 시도");
|
||
|
||
// 모달의 닫기 버튼을 찾아서 클릭
|
||
const modalCloseButton = document.querySelector('[role="dialog"] button[aria-label*="Close"], [role="dialog"] button[data-dismiss="modal"], [role="dialog"] .dialog-close');
|
||
if (modalCloseButton) {
|
||
(modalCloseButton as HTMLElement).click();
|
||
} else {
|
||
// ESC 키 이벤트 발생시키기
|
||
const escEvent = new KeyboardEvent('keydown', { key: 'Escape', keyCode: 27, which: 27 });
|
||
document.dispatchEvent(escEvent);
|
||
}
|
||
} else if (isInPopup) {
|
||
// 팝업 창인 경우
|
||
console.log("🔄 팝업 창 닫기");
|
||
window.close();
|
||
} else {
|
||
// 일반 페이지인 경우 - 이전 페이지로 이동하지 않고 아무것도 하지 않음
|
||
console.log("🔄 일반 페이지에서 닫기 - 아무 동작 하지 않음");
|
||
alert("닫기 버튼이 클릭되었습니다.");
|
||
}
|
||
};
|
||
|
||
// 팝업 액션
|
||
const handlePopupAction = () => {
|
||
console.log("🎯 팝업 액션 실행:", { popupScreenId: config?.popupScreenId });
|
||
|
||
if (config?.popupScreenId) {
|
||
// 화면 모달 열기
|
||
setPopupScreen({
|
||
screenId: config.popupScreenId,
|
||
title: config.popupTitle || "상세 정보",
|
||
size: "lg",
|
||
});
|
||
} else if (config?.popupTitle && config?.popupContent) {
|
||
// 텍스트 모달 표시
|
||
alert(`${config.popupTitle}\n\n${config.popupContent}`);
|
||
} else {
|
||
alert("모달을 표시합니다.");
|
||
}
|
||
};
|
||
|
||
// 네비게이션 액션
|
||
const handleNavigateAction = () => {
|
||
const navigateType = config?.navigateType || "url";
|
||
|
||
if (navigateType === "screen" && config?.navigateScreenId) {
|
||
// 화면으로 이동
|
||
const screenPath = `/screens/${config.navigateScreenId}`;
|
||
|
||
console.log("🎯 화면으로 이동:", {
|
||
screenId: config.navigateScreenId,
|
||
target: config.navigateTarget || "_self",
|
||
path: screenPath
|
||
});
|
||
|
||
if (config.navigateTarget === "_blank") {
|
||
window.open(screenPath, "_blank");
|
||
} else {
|
||
window.location.href = screenPath;
|
||
}
|
||
} else if (navigateType === "url" && config?.navigateUrl) {
|
||
// URL로 이동
|
||
console.log("🔗 URL로 이동:", {
|
||
url: config.navigateUrl,
|
||
target: config.navigateTarget || "_self"
|
||
});
|
||
|
||
if (config.navigateTarget === "_blank") {
|
||
window.open(config.navigateUrl, "_blank");
|
||
} else {
|
||
window.location.href = config.navigateUrl;
|
||
}
|
||
} else {
|
||
console.log("🔗 네비게이션 정보가 설정되지 않았습니다:", {
|
||
navigateType,
|
||
hasUrl: !!config?.navigateUrl,
|
||
hasScreenId: !!config?.navigateScreenId
|
||
});
|
||
}
|
||
};
|
||
|
||
// 커스텀 액션
|
||
const handleCustomAction = async () => {
|
||
if (config?.customAction) {
|
||
try {
|
||
// 보안상 제한적인 eval 사용
|
||
const result = eval(config.customAction);
|
||
if (result instanceof Promise) {
|
||
await result;
|
||
}
|
||
console.log("⚡ 커스텀 액션 실행 완료");
|
||
} catch (error) {
|
||
throw new Error(`커스텀 액션 실행 실패: ${error.message}`);
|
||
}
|
||
} else {
|
||
console.log("⚡ 커스텀 액션이 설정되지 않았습니다.");
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Button
|
||
onClick={handleButtonClick}
|
||
disabled={readonly}
|
||
size="sm"
|
||
variant={config?.variant || "default"}
|
||
className="w-full"
|
||
style={{ height: "100%" }}
|
||
style={{
|
||
// 컴포넌트 스타일과 설정 스타일 모두 적용
|
||
...comp.style,
|
||
// 크기는 className으로 처리하므로 CSS 크기 속성 제거
|
||
width: "100%",
|
||
height: "100%",
|
||
// 설정값이 있으면 우선 적용, 없으면 컴포넌트 스타일 사용
|
||
backgroundColor: config?.backgroundColor || comp.style?.backgroundColor,
|
||
color: config?.textColor || comp.style?.color,
|
||
borderColor: config?.borderColor || comp.style?.borderColor,
|
||
}}
|
||
>
|
||
{label || "버튼"}
|
||
</Button>
|
||
);
|
||
}
|
||
|
||
default:
|
||
return applyStyles(
|
||
<Input
|
||
type="text"
|
||
placeholder={placeholder || "입력하세요..."}
|
||
value={currentValue}
|
||
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
||
disabled={readonly}
|
||
required={required}
|
||
className="w-full"
|
||
style={{ height: "100%" }}
|
||
/>,
|
||
);
|
||
}
|
||
};
|
||
|
||
// 그룹 컴포넌트 처리
|
||
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>
|
||
);
|
||
}
|
||
|
||
// 일반 위젯 컴포넌트
|
||
// 템플릿 컴포넌트 목록 (자체적으로 제목을 가지므로 라벨 불필요)
|
||
const templateTypes = ["datatable"];
|
||
|
||
// 라벨 표시 여부 계산
|
||
const shouldShowLabel =
|
||
!hideLabel && // hideLabel이 true면 라벨 숨김
|
||
component.style?.labelDisplay !== false &&
|
||
(component.label || component.style?.labelText) &&
|
||
!templateTypes.includes(component.type); // 템플릿 컴포넌트는 라벨 표시 안함
|
||
|
||
const labelText = component.style?.labelText || component.label || "";
|
||
|
||
// 라벨 스타일 적용
|
||
const labelStyle = {
|
||
fontSize: component.style?.labelFontSize || "14px",
|
||
color: component.style?.labelColor || "#374151",
|
||
fontWeight: component.style?.labelFontWeight || "500",
|
||
backgroundColor: component.style?.labelBackgroundColor || "transparent",
|
||
padding: component.style?.labelPadding || "0",
|
||
borderRadius: component.style?.labelBorderRadius || "0",
|
||
marginBottom: component.style?.labelMarginBottom || "4px",
|
||
};
|
||
|
||
|
||
return (
|
||
<>
|
||
<div className="h-full w-full">
|
||
{/* 라벨이 있는 경우 표시 (데이터 테이블 제외) */}
|
||
{shouldShowLabel && (
|
||
<div className="block" style={labelStyle}>
|
||
{labelText}
|
||
{component.required && <span style={{ color: "#f97316", marginLeft: "2px" }}>*</span>}
|
||
</div>
|
||
)}
|
||
|
||
{/* 실제 위젯 */}
|
||
<div className="h-full w-full">{renderInteractiveWidget(component)}</div>
|
||
</div>
|
||
|
||
{/* 모달 화면 */}
|
||
<Dialog open={!!popupScreen} onOpenChange={() => {
|
||
setPopupScreen(null);
|
||
setPopupFormData({}); // 팝업 닫을 때 formData도 초기화
|
||
}}>
|
||
<DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden">
|
||
<DialogHeader>
|
||
<DialogTitle>{popupScreen?.title || "상세 정보"}</DialogTitle>
|
||
</DialogHeader>
|
||
|
||
<div className="overflow-y-auto max-h-[60vh] p-2">
|
||
{popupLoading ? (
|
||
<div className="flex items-center justify-center py-8">
|
||
<div className="text-gray-500">화면을 불러오는 중...</div>
|
||
</div>
|
||
) : popupLayout.length > 0 ? (
|
||
<div className="relative bg-white border rounded" style={{
|
||
width: popupScreenResolution ? `${popupScreenResolution.width}px` : "100%",
|
||
height: popupScreenResolution ? `${popupScreenResolution.height}px` : "400px",
|
||
minHeight: "400px",
|
||
position: "relative",
|
||
overflow: "hidden"
|
||
}}>
|
||
{/* 팝업에서도 실제 위치와 크기로 렌더링 */}
|
||
{popupLayout.map((popupComponent) => (
|
||
<div
|
||
key={popupComponent.id}
|
||
className="absolute"
|
||
style={{
|
||
left: `${popupComponent.position.x}px`,
|
||
top: `${popupComponent.position.y}px`,
|
||
width: `${popupComponent.size.width}px`,
|
||
height: `${popupComponent.size.height}px`,
|
||
zIndex: popupComponent.position.z || 1,
|
||
}}
|
||
>
|
||
{/* 🎯 핵심 수정: 팝업 전용 formData 사용 */}
|
||
<InteractiveScreenViewer
|
||
component={popupComponent}
|
||
allComponents={popupLayout}
|
||
hideLabel={false}
|
||
screenInfo={popupScreenInfo || undefined}
|
||
formData={popupFormData}
|
||
onFormDataChange={(newData) => {
|
||
console.log("💾 팝업 formData 업데이트:", {
|
||
newData,
|
||
newDataType: typeof newData,
|
||
newDataKeys: Object.keys(newData || {}),
|
||
prevFormData: popupFormData
|
||
});
|
||
|
||
// 잘못된 데이터 타입 체크
|
||
if (typeof newData === 'string') {
|
||
console.error("❌ 문자열이 formData로 전달됨:", newData);
|
||
return;
|
||
}
|
||
|
||
if (newData && typeof newData === 'object') {
|
||
setPopupFormData(prev => ({ ...prev, ...newData }));
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : (
|
||
<div className="flex items-center justify-center py-8">
|
||
<div className="text-gray-500">화면 데이터가 없습니다.</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</>
|
||
);
|
||
};
|