화면 저장기능 구현
This commit is contained in:
kjs
329
frontend/components/screen/InteractiveScreenViewer.tsx
Normal file
329
frontend/components/screen/InteractiveScreenViewer.tsx
Normal file
@@ -0,0 +1,329 @@
|
||||
"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 } 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":
|
||||
return applyStyles(
|
||||
<Input
|
||||
type={widgetType === "email" ? "email" : widgetType === "tel" ? "tel" : "text"}
|
||||
placeholder={placeholder || "입력하세요..."}
|
||||
value={currentValue}
|
||||
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
||||
disabled={readonly}
|
||||
required={required}
|
||||
className="h-full w-full"
|
||||
/>,
|
||||
);
|
||||
|
||||
case "number":
|
||||
case "decimal":
|
||||
return applyStyles(
|
||||
<Input
|
||||
type="number"
|
||||
placeholder={placeholder || "숫자를 입력하세요..."}
|
||||
value={currentValue}
|
||||
onChange={(e) => updateFormData(fieldName, e.target.valueAsNumber || 0)}
|
||||
disabled={readonly}
|
||||
required={required}
|
||||
className="h-full w-full"
|
||||
step={widgetType === "decimal" ? "0.01" : "1"}
|
||||
/>,
|
||||
);
|
||||
|
||||
case "textarea":
|
||||
case "text_area":
|
||||
return applyStyles(
|
||||
<Textarea
|
||||
placeholder={placeholder || "내용을 입력하세요..."}
|
||||
value={currentValue}
|
||||
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
||||
disabled={readonly}
|
||||
required={required}
|
||||
className="h-full w-full resize-none"
|
||||
rows={3}
|
||||
/>,
|
||||
);
|
||||
|
||||
case "select":
|
||||
case "dropdown":
|
||||
return applyStyles(
|
||||
<Select
|
||||
value={currentValue}
|
||||
onValueChange={(value) => updateFormData(fieldName, value)}
|
||||
disabled={readonly}
|
||||
required={required}
|
||||
>
|
||||
<SelectTrigger className="h-full w-full">
|
||||
<SelectValue placeholder={placeholder || "선택하세요..."} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="option1">옵션 1</SelectItem>
|
||||
<SelectItem value="option2">옵션 2</SelectItem>
|
||||
<SelectItem value="option3">옵션 3</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>,
|
||||
);
|
||||
|
||||
case "checkbox":
|
||||
case "boolean":
|
||||
return applyStyles(
|
||||
<div className="flex h-full w-full items-center space-x-2">
|
||||
<Checkbox
|
||||
id={fieldName}
|
||||
checked={currentValue === true || currentValue === "true"}
|
||||
onCheckedChange={(checked) => updateFormData(fieldName, checked)}
|
||||
disabled={readonly}
|
||||
required={required}
|
||||
/>
|
||||
<label htmlFor={fieldName} className="text-sm">
|
||||
{label || "확인"}
|
||||
</label>
|
||||
</div>,
|
||||
);
|
||||
|
||||
case "radio":
|
||||
return applyStyles(
|
||||
<div className="h-full w-full space-y-2">
|
||||
{["옵션 1", "옵션 2", "옵션 3"].map((option, index) => (
|
||||
<div key={index} className="flex items-center space-x-2">
|
||||
<input
|
||||
type="radio"
|
||||
id={`${fieldName}_${index}`}
|
||||
name={fieldName}
|
||||
value={option}
|
||||
checked={currentValue === option}
|
||||
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
||||
disabled={readonly}
|
||||
required={required}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<label htmlFor={`${fieldName}_${index}`} className="text-sm">
|
||||
{option}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>,
|
||||
);
|
||||
|
||||
case "date":
|
||||
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 }) : placeholder || "날짜를 선택하세요"}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0">
|
||||
<Calendar
|
||||
mode="single"
|
||||
selected={dateValue}
|
||||
onSelect={(date) => updateDateValue(fieldName, date)}
|
||||
initialFocus
|
||||
/>
|
||||
</PopoverContent>
|
||||
</Popover>,
|
||||
);
|
||||
|
||||
case "datetime":
|
||||
return applyStyles(
|
||||
<Input
|
||||
type="datetime-local"
|
||||
placeholder={placeholder || "날짜와 시간을 입력하세요..."}
|
||||
value={currentValue}
|
||||
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
||||
disabled={readonly}
|
||||
required={required}
|
||||
className="h-full w-full"
|
||||
/>,
|
||||
);
|
||||
|
||||
case "file":
|
||||
return applyStyles(
|
||||
<Input
|
||||
type="file"
|
||||
onChange={(e) => {
|
||||
const file = e.target.files?.[0];
|
||||
updateFormData(fieldName, file);
|
||||
}}
|
||||
disabled={readonly}
|
||||
required={required}
|
||||
className="h-full w-full"
|
||||
/>,
|
||||
);
|
||||
|
||||
case "code":
|
||||
return applyStyles(
|
||||
<Textarea
|
||||
placeholder="코드를 입력하세요..."
|
||||
value={currentValue}
|
||||
onChange={(e) => updateFormData(fieldName, e.target.value)}
|
||||
disabled={readonly}
|
||||
required={required}
|
||||
className="h-full w-full resize-none font-mono text-sm"
|
||||
rows={4}
|
||||
/>,
|
||||
);
|
||||
|
||||
case "entity":
|
||||
return applyStyles(
|
||||
<Select
|
||||
value={currentValue}
|
||||
onValueChange={(value) => updateFormData(fieldName, value)}
|
||||
disabled={readonly}
|
||||
required={required}
|
||||
>
|
||||
<SelectTrigger className="h-full w-full">
|
||||
<SelectValue placeholder="엔티티를 선택하세요..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="user">사용자</SelectItem>
|
||||
<SelectItem value="product">제품</SelectItem>
|
||||
<SelectItem value="order">주문</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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user