diff --git a/frontend/components/screen/RealtimePreview.tsx b/frontend/components/screen/RealtimePreview.tsx new file mode 100644 index 00000000..2ab07d1b --- /dev/null +++ b/frontend/components/screen/RealtimePreview.tsx @@ -0,0 +1,257 @@ +"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 ; + + case "number": + case "decimal": + return ; + + case "date": + case "datetime": + return ( + + ); + + case "select": + case "dropdown": + return ( + + ); + + case "textarea": + case "text_area": + return