258 lines
8.0 KiB
TypeScript
258 lines
8.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { ComponentData, WebType } from "@/types/screen";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
// import { Checkbox } from "@/components/ui/checkbox";
|
|
// import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Database, Type, Hash, List, AlignLeft, CheckSquare, Radio, Calendar, Code, Building, File } from "lucide-react";
|
|
|
|
interface RealtimePreviewProps {
|
|
component: ComponentData;
|
|
isSelected?: boolean;
|
|
onClick?: () => void;
|
|
onDragStart?: (e: React.DragEvent) => void;
|
|
onDragEnd?: () => void;
|
|
}
|
|
|
|
// 웹 타입에 따른 위젯 렌더링
|
|
const renderWidget = (component: ComponentData) => {
|
|
const { widgetType, label, placeholder, required, readonly, columnName } = component;
|
|
|
|
// 디버깅: 실제 widgetType 값 확인
|
|
console.log('RealtimePreview - widgetType:', widgetType, 'columnName:', columnName);
|
|
|
|
const commonProps = {
|
|
placeholder: placeholder || `입력하세요...`,
|
|
disabled: readonly,
|
|
required: required,
|
|
className: "w-full",
|
|
};
|
|
|
|
switch (widgetType) {
|
|
case "text":
|
|
case "email":
|
|
case "tel":
|
|
return <Input type={widgetType === "email" ? "email" : widgetType === "tel" ? "tel" : "text"} {...commonProps} />;
|
|
|
|
case "number":
|
|
case "decimal":
|
|
return <Input type="number" step={widgetType === "decimal" ? "0.01" : "1"} {...commonProps} />;
|
|
|
|
case "date":
|
|
case "datetime":
|
|
return (
|
|
<Input
|
|
type={widgetType === "datetime" ? "datetime-local" : "date"}
|
|
{...commonProps}
|
|
/>
|
|
);
|
|
|
|
case "select":
|
|
case "dropdown":
|
|
return (
|
|
<select
|
|
disabled={readonly}
|
|
required={required}
|
|
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
|
|
>
|
|
<option value="">{placeholder || "선택하세요..."}</option>
|
|
<option value="option1">옵션 1</option>
|
|
<option value="option2">옵션 2</option>
|
|
<option value="option3">옵션 3</option>
|
|
</select>
|
|
);
|
|
|
|
case "textarea":
|
|
case "text_area":
|
|
return <Textarea {...commonProps} rows={3} />;
|
|
|
|
case "boolean":
|
|
case "checkbox":
|
|
return (
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="checkbox"
|
|
id={`checkbox-${component.id}`}
|
|
disabled={readonly}
|
|
required={required}
|
|
className="h-4 w-4"
|
|
/>
|
|
<Label htmlFor={`checkbox-${component.id}`} className="text-sm">
|
|
{label || columnName}
|
|
</Label>
|
|
</div>
|
|
);
|
|
|
|
case "radio":
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="radio"
|
|
id={`radio1-${component.id}`}
|
|
name={`radio-${component.id}`}
|
|
disabled={readonly}
|
|
className="h-4 w-4"
|
|
/>
|
|
<Label htmlFor={`radio1-${component.id}`} className="text-sm">
|
|
옵션 1
|
|
</Label>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<input
|
|
type="radio"
|
|
id={`radio2-${component.id}`}
|
|
name={`radio-${component.id}`}
|
|
disabled={readonly}
|
|
className="h-4 w-4"
|
|
/>
|
|
<Label htmlFor={`radio2-${component.id}`} className="text-sm">
|
|
옵션 2
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
case "code":
|
|
return (
|
|
<Textarea
|
|
{...commonProps}
|
|
rows={4}
|
|
className="w-full font-mono text-sm"
|
|
placeholder="코드를 입력하세요..."
|
|
/>
|
|
);
|
|
|
|
case "entity":
|
|
return (
|
|
<select
|
|
disabled={readonly}
|
|
required={required}
|
|
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
|
|
>
|
|
<option value="">엔티티를 선택하세요...</option>
|
|
<option value="user">사용자</option>
|
|
<option value="product">제품</option>
|
|
<option value="order">주문</option>
|
|
</select>
|
|
);
|
|
|
|
case "file":
|
|
return (
|
|
<input
|
|
type="file"
|
|
disabled={readonly}
|
|
required={required}
|
|
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:cursor-not-allowed"
|
|
/>
|
|
);
|
|
|
|
default:
|
|
return <Input type="text" {...commonProps} />;
|
|
}
|
|
};
|
|
|
|
// 위젯 타입 아이콘
|
|
const getWidgetIcon = (widgetType: WebType | undefined) => {
|
|
switch (widgetType) {
|
|
case "text":
|
|
case "email":
|
|
case "tel":
|
|
return <Type className="h-4 w-4 text-blue-600" />;
|
|
case "number":
|
|
case "decimal":
|
|
return <Hash className="h-4 w-4 text-green-600" />;
|
|
case "date":
|
|
case "datetime":
|
|
return <Calendar className="h-4 w-4 text-purple-600" />;
|
|
case "select":
|
|
case "dropdown":
|
|
return <List className="h-4 w-4 text-orange-600" />;
|
|
case "textarea":
|
|
case "text_area":
|
|
return <AlignLeft className="h-4 w-4 text-indigo-600" />;
|
|
case "boolean":
|
|
case "checkbox":
|
|
return <CheckSquare className="h-4 w-4 text-blue-600" />;
|
|
case "radio":
|
|
return <Radio className="h-4 w-4 text-blue-600" />;
|
|
case "code":
|
|
return <Code className="h-4 w-4 text-gray-600" />;
|
|
case "entity":
|
|
return <Building className="h-4 w-4 text-cyan-600" />;
|
|
case "file":
|
|
return <File className="h-4 w-4 text-yellow-600" />;
|
|
default:
|
|
return <Type className="h-4 w-4 text-gray-500" />;
|
|
}
|
|
};
|
|
|
|
export const RealtimePreview: React.FC<RealtimePreviewProps> = ({
|
|
component,
|
|
isSelected = false,
|
|
onClick,
|
|
onDragStart,
|
|
onDragEnd,
|
|
}) => {
|
|
const { type, label, tableName, columnName, widgetType, size, style } = component;
|
|
|
|
return (
|
|
<div
|
|
className={`absolute rounded border-2 transition-all ${
|
|
isSelected ? "border-blue-500 bg-blue-50 shadow-lg" : "border-gray-300 bg-white hover:border-gray-400"
|
|
}`}
|
|
style={{
|
|
left: `${component.position.x}px`,
|
|
top: `${component.position.y}px`,
|
|
width: `${size.width * 80 - 16}px`,
|
|
height: `${size.height}px`,
|
|
...style,
|
|
}}
|
|
onClick={onClick}
|
|
draggable
|
|
onDragStart={onDragStart}
|
|
onDragEnd={onDragEnd}
|
|
>
|
|
{type === "container" && (
|
|
<div className="flex h-full flex-col items-center justify-center p-4">
|
|
<div className="flex flex-col items-center space-y-2">
|
|
<Database className="h-8 w-8 text-blue-600" />
|
|
<div className="text-center">
|
|
<div className="text-sm font-medium">{label}</div>
|
|
<div className="text-xs text-gray-500">{tableName}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{type === "widget" && (
|
|
<div className="flex h-full flex-col p-3">
|
|
{/* 위젯 헤더 */}
|
|
<div className="mb-2 flex items-center space-x-2">
|
|
{getWidgetIcon(widgetType)}
|
|
<div className="flex-1">
|
|
<Label className="text-sm font-medium">
|
|
{label || columnName}
|
|
{component.required && <span className="ml-1 text-red-500">*</span>}
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 위젯 본체 */}
|
|
<div className="flex-1">{renderWidget(component)}</div>
|
|
|
|
{/* 위젯 정보 */}
|
|
<div className="mt-2 text-xs text-gray-500">
|
|
{columnName} ({widgetType})
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RealtimePreview;
|