From 089249fb6579c7a8978a2d4809b48c5e08e2ec7c Mon Sep 17 00:00:00 2001 From: kjs Date: Mon, 1 Sep 2025 14:52:25 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EC=9B=B9=20=ED=83=80=EC=9E=85=EC=97=90=20?= =?UTF-8?q?=EB=A7=9E=EB=8A=94=20=ED=98=95=ED=83=9C=EB=A1=9C=20=EB=B3=B4?= =?UTF-8?q?=EC=97=AC=EC=A7=80=EA=B2=8C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/screen/RealtimePreview.tsx | 257 +++++ frontend/components/screen/ScreenDesigner.tsx | 133 +-- frontend/components/ui/calendar.tsx | 56 ++ frontend/components/ui/popover.tsx | 31 + frontend/components/ui/radio-group.tsx | 38 + frontend/package-lock.json | 924 +++++++++--------- frontend/package.json | 6 +- 7 files changed, 935 insertions(+), 510 deletions(-) create mode 100644 frontend/components/screen/RealtimePreview.tsx create mode 100644 frontend/components/ui/calendar.tsx create mode 100644 frontend/components/ui/popover.tsx create mode 100644 frontend/components/ui/radio-group.tsx 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