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

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

frontend/lib/registry/DynamicComponentRenderer.tsx

@@ -287,18 +287,16 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
         };
 
         // 렌더러 props 구성
-        // component.style에서 height 제거 (RealtimePreviewDynamic에서 size.height로 처리)
-        // 단, layout 타입 컴포넌트(split-panel-layout 등)는 height 유지
-        const isLayoutComponent = 
-          component.type === "layout" || 
-          componentType === "split-panel-layout" ||
-          componentType?.includes("layout");
-        
-        const { height: _height, ...styleWithoutHeight } = component.style || {};
-
         // 숨김 값 추출
         const hiddenValue = component.hidden || component.componentConfig?.hidden;
 
+        // size.width와 size.height를 style.width와 style.height로 변환
+        const finalStyle: React.CSSProperties = {
+          ...component.style,
+          width: component.size?.width ? `${component.size.width}px` : component.style?.width,
+          height: component.size?.height ? `${component.size.height}px` : component.style?.height,
+        };
+
         const rendererProps = {
           component,
           isSelected,
@@ -307,7 +305,7 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
           onDragEnd,
           size: component.size || newComponent.defaultSize,
           position: component.position,
-          style: isLayoutComponent ? component.style : styleWithoutHeight, // 레이아웃은 height 유지
+          style: finalStyle, // size를 포함한 최종 style
           config: component.componentConfig,
           componentConfig: component.componentConfig,
           value: currentValue, // formData에서 추출한 현재 값 전달

frontend/lib/registry/components/customer-item-mapping/CustomerItemMappingComponent.tsx

@@ -75,13 +75,15 @@ export const CustomerItemMappingComponent: React.FC<CustomerItemMappingComponent
   // 스타일 계산
   const componentStyle: React.CSSProperties = {
     position: "relative",
-    width: "100%",
-    height: "100%",
     display: "flex",
     flexDirection: "column",
     backgroundColor: "hsl(var(--background))",
     overflow: "hidden",
     boxSizing: "border-box",
+    width: "100%",
+    height: "100%",
+    minHeight: isDesignMode ? "300px" : "100%",
+    ...style, // style prop이 위의 기본값들을 덮어씀
   };
 
   // 이벤트 핸들러

frontend/lib/registry/components/table-list/SingleTableWithSticky.tsx

@@ -61,16 +61,15 @@ export const SingleTableWithSticky: React.FC<SingleTableWithStickyProps> = ({
       className="relative flex h-full flex-col overflow-hidden bg-background shadow-sm"
       style={{
         width: "100%",
-        maxWidth: "100%",
+        height: "100%",
         boxSizing: "border-box",
       }}
     >
-      <div className="relative flex-1 overflow-x-auto overflow-y-auto">
+      <div className="relative flex-1 overflow-auto">
       <Table
         className="w-full"
         style={{
           width: "100%",
-          minWidth: "100%",
           tableLayout: "auto", // 테이블 크기 자동 조정
           boxSizing: "border-box",
         }}

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -230,16 +230,16 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   }
 
   const componentStyle: React.CSSProperties = {
-    width: calculatedWidth,
-    height: isDesignMode ? "auto" : "100%",
-    minHeight: isDesignMode ? "300px" : "100%",
+    position: "relative",
     display: "flex",
     flexDirection: "column",
     backgroundColor: "hsl(var(--background))",
     overflow: "hidden",
-    ...style,
-    // width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
+    boxSizing: "border-box",
     width: "100%",
+    height: "100%",
+    minHeight: isDesignMode ? "300px" : "100%",
+    ...style, // style prop이 위의 기본값들을 덮어씀
   };
 
   // ========================================
@@ -1875,7 +1875,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     onDragStart: isDesignMode ? onDragStart : undefined,
     onDragEnd: isDesignMode ? onDragEnd : undefined,
     draggable: isDesignMode,
-    className: cn(className, isDesignMode && "cursor-move"),
+    className: cn("w-full h-full", className, isDesignMode && "cursor-move"), // customer-item-mapping과 동일
     style: componentStyle,
   };
 
@@ -1992,17 +1992,27 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         {/* 테이블 컨테이너 */}
         <div
-          className="flex w-full max-w-full flex-1 flex-col overflow-hidden"
-          style={{ marginTop: `${tableConfig.filter?.bottomSpacing ?? 8}px` }}
+          className="flex flex-1 flex-col"
+          style={{ 
+            marginTop: `${tableConfig.filter?.bottomSpacing ?? 8}px`,
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+          }}
         >
           {/* 스크롤 영역 */}
           <div
-            className="bg-background flex-1 w-full max-w-full overflow-x-auto overflow-y-auto"
-            style={{ position: "relative" }}
+            className="bg-background flex-1"
+            style={{ 
+              position: "relative",
+              width: "100%",
+              height: "100%",
+              overflow: "auto",
+            }}
           >
             {/* 테이블 */}
             <table
-              className={cn("table-mobile-fixed w-full max-w-full", !showGridLines && "hide-grid")}
+              className={cn("table-mobile-fixed", !showGridLines && "hide-grid")}
               style={{
                 borderCollapse: "collapse",
                 width: "100%",

frontend/lib/registry/components/table-list/index.ts

@@ -96,7 +96,7 @@ export const TableListDefinition = createComponentDefinition({
     // 데이터 로딩
     autoLoad: true,
   },
-  defaultSize: { width: 120, height: 600 }, // 테이블 리스트 기본 높이
+  defaultSize: { width: 1000, height: 600 }, // 테이블 리스트 기본 크기 (너비 1000px, 높이 600px)
   configPanel: TableListConfigPanel,
   icon: "Table",
   tags: ["테이블", "데이터", "목록", "그리드"],