프론트엔드에서 백엔드가 기대하는 형식으로 변환해서 보내도록 수정

frontend/contexts/ReportDesignerContext.tsx

@@ -1426,14 +1426,36 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
         window.history.replaceState({}, "", `/admin/report/designer/${actualReportId}`);
       }
 
-      // 레이아웃 저장 (페이지 구조로)
-      await reportApi.saveLayout(actualReportId, {
-        layoutConfig, // 페이지 기반 구조
-        queries: queries.map((q) => ({
-          ...q,
-          externalConnectionId: q.externalConnectionId || undefined,
-        })),
-      });
+      // 백엔드 호환성을 위해 첫 번째 페이지 정보를 레거시 필드로 변환
+      const firstPage = layoutConfig.pages[0];
+      const legacyFormat = firstPage
+        ? {
+            canvasWidth: firstPage.width,
+            canvasHeight: firstPage.height,
+            pageOrientation: firstPage.orientation,
+            components: firstPage.components,
+            margins: firstPage.margins,
+            // 새로운 페이지 기반 구조도 함께 전송
+            layoutConfig,
+            queries: queries.map((q) => ({
+              ...q,
+              externalConnectionId: q.externalConnectionId || undefined,
+            })),
+          }
+        : {
+            canvasWidth: 210,
+            canvasHeight: 297,
+            pageOrientation: "portrait" as const,
+            components: [],
+            layoutConfig,
+            queries: queries.map((q) => ({
+              ...q,
+              externalConnectionId: q.externalConnectionId || undefined,
+            })),
+          };
+
+      // 레이아웃 저장
+      await reportApi.saveLayout(actualReportId, legacyFormat);
 
       toast({
         title: "성공",