반응형 및 테이블 리스트 컴포넌트 오류 수정

frontend/components/screen/ResponsiveLayoutEngine.tsx

@@ -10,12 +10,15 @@ import { Breakpoint, BREAKPOINTS } from "@/types/responsive";
 import { generateSmartDefaults, ensureResponsiveConfig } from "@/lib/utils/responsiveDefaults";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
 
-interface ResponsiveLayoutEngineProps {
+export interface ResponsiveLayoutEngineProps {
   components: ComponentData[];
   breakpoint: Breakpoint;
   containerWidth: number;
   screenWidth?: number;
   preserveYPosition?: boolean; // true: Y좌표 유지 (하이브리드), false: 16px 간격 (반응형)
+  formData?: Record<string, unknown>;
+  onFormDataChange?: (fieldName: string, value: unknown) => void;
+  screenInfo?: { id: number; tableName?: string };
 }
 
 /**
@@ -33,6 +36,9 @@ export const ResponsiveLayoutEngine: React.FC<ResponsiveLayoutEngineProps> = ({
   containerWidth,
   screenWidth = 1920,
   preserveYPosition = false, // 기본값: 반응형 모드 (16px 간격)
+  formData,
+  onFormDataChange,
+  screenInfo,
 }) => {
   // 1단계: 컴포넌트들을 Y 위치 기준으로 행(row)으로 그룹화
   const rows = useMemo(() => {
@@ -72,6 +78,18 @@ export const ResponsiveLayoutEngine: React.FC<ResponsiveLayoutEngineProps> = ({
   const responsiveComponents = useMemo(() => {
     const result = sortedRows.flatMap((row, rowIndex) =>
       row.map((comp, compIndex) => {
+        // 컴포넌트에 gridColumns가 이미 설정되어 있으면 그 값 사용
+        if ((comp as any).gridColumns !== undefined) {
+          return {
+            ...comp,
+            responsiveDisplay: {
+              gridColumns: (comp as any).gridColumns,
+              order: compIndex + 1,
+              hide: false,
+            },
+          };
+        }
+
         // 반응형 설정이 없으면 자동 생성
         const compWithConfig = ensureResponsiveConfig(comp, screenWidth);
 
@@ -140,6 +158,7 @@ export const ResponsiveLayoutEngine: React.FC<ResponsiveLayoutEngineProps> = ({
               gap: "16px",
               padding: "0 16px",
               marginTop,
+              alignItems: "start", // 각 아이템이 원래 높이 유지
             }}
           >
             {rowComponents.map((comp) => (
@@ -148,9 +167,19 @@ export const ResponsiveLayoutEngine: React.FC<ResponsiveLayoutEngineProps> = ({
                 className="responsive-grid-item"
                 style={{
                   gridColumn: `span ${comp.responsiveDisplay?.gridColumns || gridColumns}`,
+                  height: "auto", // 자동 높이
                 }}
               >
-                <DynamicComponentRenderer component={comp} isPreview={true} />
+                <DynamicComponentRenderer
+                  component={comp}
+                  isPreview={true}
+                  isDesignMode={false}
+                  isInteractive={true}
+                  formData={formData}
+                  onFormDataChange={onFormDataChange}
+                  screenId={screenInfo?.id}
+                  tableName={screenInfo?.tableName}
+                />
               </div>
             ))}
           </div>