fix: table-list 컴포넌트 크기 조절 및 동기화 문제 해결

- 기본 너비 120px → 1000px 변경
- 선택 영역과 컴포넌트 영역 크기 동기화
- 편집 패널에서 너비/높이 조절 시 즉시 반영되도록 개선

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -212,14 +212,7 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
   // 컴포넌트 기본 스타일 - 레이아웃은 항상 맨 아래
   // 🔥 모든 컴포넌트를 픽셀 기준으로 통일 (스케일로만 조정)
   const getWidth = () => {
-    // table-list는 화면 너비 전체 사용
-    if (component.componentConfig?.type === "table-list") {
-      // 디자인 해상도 기준으로 픽셀 반환
-      const screenWidth = 1920; // 기본 디자인 해상도
-      return `${screenWidth}px`;
-    }
-
-    // 모든 컴포넌트는 size.width 픽셀 사용
+    // 모든 컴포넌트는 size.width 픽셀 사용 (table-list 포함)
     const width = `${size?.width || 100}px`;
     return width;
   };
@@ -259,19 +252,30 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
       }
     : component;
 
-  // componentStyle에서 width, height 제거 (size.width, size.height만 사용)
-  const { width: _styleWidth, height: _styleHeight, ...restComponentStyle } = componentStyle || {};
-  
   const baseStyle = {
     left: `${position.x}px`,
     top: `${position.y}px`,
-    ...restComponentStyle, // width/height 제외한 스타일 먼저 적용
-    width: getWidth(), // size.width로 덮어쓰기
-    height: getHeight(), // size.height로 덮어쓰기
+    ...componentStyle, // componentStyle 전체 적용 (DynamicComponentRenderer에서 이미 size가 변환됨)
+    width: getWidth(), // getWidth() 우선 (table-list 등 특수 케이스)
+    height: getHeight(), // getHeight() 우선 (flow-widget 등 특수 케이스)
     zIndex: component.type === "layout" ? 1 : position.z || 2,
     right: undefined,
   };
 
+  // 디버깅: 크기 정보 로그
+  if (component.id && isSelected) {
+    console.log("📐 RealtimePreview baseStyle:", {
+      componentId: component.id,
+      componentType: (component as any).componentType || component.type,
+      sizeWidth: size?.width,
+      sizeHeight: size?.height,
+      styleWidth: componentStyle?.width,
+      styleHeight: componentStyle?.height,
+      baseStyleWidth: baseStyle.width,
+      baseStyleHeight: baseStyle.height,
+    });
+  }
+
   // 🔍 DOM 렌더링 후 실제 크기 측정
   const innerDivRef = React.useRef<HTMLDivElement>(null);
   const outerDivRef = React.useRef<HTMLDivElement>(null);

frontend/components/screen/ScreenDesigner.tsx

@@ -525,6 +525,34 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           const finalKey = pathParts[pathParts.length - 1];
           current[finalKey] = value;
 
+          // 🆕 size 변경 시 style도 함께 업데이트 (파란 테두리와 실제 크기 동기화)
+          if (path === "size.width" || path === "size.height" || path === "size") {
+            if (!newComp.style) {
+              newComp.style = {};
+            }
+            
+            if (path === "size.width") {
+              newComp.style.width = `${value}px`;
+            } else if (path === "size.height") {
+              newComp.style.height = `${value}px`;
+            } else if (path === "size") {
+              // size 객체 전체가 변경된 경우
+              if (value.width !== undefined) {
+                newComp.style.width = `${value.width}px`;
+              }
+              if (value.height !== undefined) {
+                newComp.style.height = `${value.height}px`;
+              }
+            }
+            
+            console.log("🔄 size 변경 → style 동기화:", {
+              componentId: newComp.id,
+              path,
+              value,
+              updatedStyle: newComp.style,
+            });
+          }
+
           // gridColumns 변경 시 크기 자동 업데이트 제거 (격자 시스템 제거됨)
           // if (path === "gridColumns" && prevLayout.gridSettings) {
           //   const updatedSize = updateSizeFromGridColumns(newComp, prevLayout.gridSettings as GridUtilSettings);
@@ -2217,7 +2245,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           labelColor: "#212121",
           labelFontWeight: "500",
           labelMarginBottom: "4px",
-          width: `${widthPercent}%`, // gridColumns에 맞춘 퍼센트 너비
+          width: `${componentSize.width}px`, // size와 동기화 (픽셀 단위)
+          height: `${componentSize.height}px`, // size와 동기화 (픽셀 단위)
         },
       };