실제 화면과 동일하게 보여지도록 화면 컴포넌트 수정

frontend/components/screen/RealtimePreview.tsx

@@ -45,7 +45,7 @@ const renderWidget = (component: ComponentData) => {
     placeholder: placeholder || `입력하세요...`,
     disabled: readonly,
     required: required,
-    className: "w-full",
+    className: "w-full h-full",
   };
 
   switch (widgetType) {
@@ -210,13 +210,13 @@ export const RealtimePreview: React.FC<RealtimePreviewProps> = ({
 
   return (
     <div
-      className={`absolute rounded border-2 transition-all ${
+      className={`absolute cursor-move transition-all ${
-        isSelected ? "border-blue-500 bg-blue-50 shadow-lg" : "border-gray-300 bg-white hover:border-gray-400"
+        isSelected ? "ring-opacity-50 ring-2 ring-blue-500" : "hover:ring-opacity-50 hover:ring-1 hover:ring-gray-300"
       }`}
       style={{
         left: `${component.position.x}px`,
         top: `${component.position.y}px`,
-        width: `${size.width * 80 - 16}px`,
+        width: `${size.width * 80}px`,
         height: `${size.height}px`,
         ...style,
       }}
@@ -224,13 +224,17 @@ export const RealtimePreview: React.FC<RealtimePreviewProps> = ({
       draggable
       onDragStart={onDragStart}
       onDragEnd={onDragEnd}
+      onMouseDown={(e) => {
+        // 드래그 시작을 위한 마우스 다운 이벤트
+        e.stopPropagation();
+      }}
     >
       {type === "container" && (
-        <div className="flex h-full flex-col items-center justify-center p-4">
+        <div className="pointer-events-none flex h-full flex-col items-center justify-center p-2">
-          <div className="flex flex-col items-center space-y-2">
+          <div className="flex flex-col items-center space-y-1">
-            <Database className="h-8 w-8 text-blue-600" />
+            <Database className="h-6 w-6 text-blue-600" />
             <div className="text-center">
-              <div className="text-sm font-medium">{label}</div>
+              <div className="text-xs font-medium">{label}</div>
               <div className="text-xs text-gray-500">{tableName}</div>
             </div>
           </div>
@@ -238,54 +242,41 @@ export const RealtimePreview: React.FC<RealtimePreviewProps> = ({
       )}
 
       {type === "group" && (
-        <div className="flex h-full flex-col">
+        <div className="flex h-full flex-col rounded-lg border border-gray-200 bg-gray-50">
           {/* 그룹 헤더 */}
           <div
-            className="flex cursor-pointer items-center justify-between border-b bg-gray-50 px-3 py-2"
+            className="pointer-events-auto flex cursor-pointer items-center justify-between rounded-t-lg border-b bg-white px-2 py-1"
-            onClick={() => onGroupToggle?.(component.id)}
+            onClick={(e) => {
+              e.stopPropagation();
+              onGroupToggle?.(component.id);
+            }}
           >
-            <div className="flex items-center space-x-2">
+            <div className="flex items-center space-x-1">
-              <Group className="h-4 w-4 text-blue-600" />
+              <Group className="h-3 w-3 text-blue-600" />
-              <span className="text-sm font-medium">{label || "그룹"}</span>
+              <span className="text-xs font-medium">{label || "그룹"}</span>
               <span className="text-xs text-gray-500">({children.length}개)</span>
             </div>
             {component.collapsible &&
               (component.collapsed ? (
-                <ChevronRight className="h-4 w-4 text-gray-500" />
+                <ChevronRight className="h-3 w-3 text-gray-500" />
               ) : (
-                <ChevronDown className="h-4 w-4 text-gray-500" />
+                <ChevronDown className="h-3 w-3 text-gray-500" />
               ))}
           </div>
 
           {/* 그룹 내용 */}
           {!component.collapsed && (
-            <div className="flex-1 space-y-2 overflow-auto p-2">
+            <div className="pointer-events-none flex-1 space-y-1 overflow-auto p-1">
-              {children ? children : <div className="py-4 text-center text-xs text-gray-400">그룹이 비어있습니다</div>}
+              {children ? children : <div className="py-2 text-center text-xs text-gray-400">그룹이 비어있습니다</div>}
             </div>
           )}
         </div>
       )}
 
       {type === "widget" && (
-        <div className="flex h-full flex-col p-3">
+        <div className="flex h-full flex-col">
-          {/* 위젯 헤더 */}
+          {/* 위젯 본체 - 실제 웹 위젯처럼 보이도록 */}
-          <div className="mb-2 flex items-center space-x-2">
+          <div className="pointer-events-none flex-1">{renderWidget(component)}</div>
-            {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>

frontend/components/screen/ScreenDesigner.tsx

@@ -622,6 +622,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
 
   // 기존 컴포넌트 드래그 시작 (재배치)
   const startComponentDrag = useCallback((component: ComponentData, e: React.DragEvent) => {
+    e.stopPropagation();
     setDragState({
       isDragging: true,
       draggedComponent: component,
@@ -844,7 +845,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                         type: "container",
                         tableName: table.tableName,
                         label: table.tableLabel,
-                        size: { width: 12, height: 120 },
+                        size: { width: 12, height: 80 },
                       },
                       e,
                     )
@@ -890,7 +891,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                               columnName: column.columnName,
                               widgetType: widgetType as WebType,
                               label: column.columnLabel || column.columnName,
-                              size: { width: 6, height: 60 },
+                              size: { width: 6, height: 40 },
                             },
                             e,
                           );
@@ -1010,7 +1011,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
                       >
                         {children.map((child) => (
                           <div key={child.id} className="rounded border bg-white p-2 text-xs text-gray-600">
-                            <div className="font-medium">{child.label || child.columnName || child.id}</div>
+                            <div className="font-medium">{child.label || (child as any).columnName || child.id}</div>
                             <div className="text-gray-500">{child.type}</div>
                           </div>
                         ))}