캔버스에 컴포넌트가 배치 안되는 문제 해결

frontend/contexts/ReportDesignerContext.tsx

@@ -1016,49 +1016,54 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
           const layoutData = layoutResponse.data;
           setLayout(layoutData);
 
-          // 자동 마이그레이션: 기존 단일 페이지 구조 → 다중 페이지 구조
+          // layoutData가 이미 pages를 가지고 있는지 확인
-          const oldComponents = layoutData.components || [];
+          if (layoutData.pages && Array.isArray(layoutData.pages) && layoutData.pages.length > 0) {
-
+            // 이미 새 구조 (pages 배열)
-          // 기존 구조 감지
+            setLayoutConfig({ pages: layoutData.pages });
-          if (oldComponents.length > 0) {
+            setCurrentPageId(layoutData.pages[0].page_id);
-            const migratedPageId = uuidv4();
-            const migratedPage: ReportPage = {
-              page_id: migratedPageId,
-              page_name: "페이지 1",
-              page_order: 0,
-              width: layoutData.canvas_width || 210,
-              height: layoutData.canvas_height || 297,
-              orientation: (layoutData.page_orientation as "portrait" | "landscape") || "portrait",
-              margins: {
-                top: layoutData.margin_top || 20,
-                bottom: layoutData.margin_bottom || 20,
-                left: layoutData.margin_left || 20,
-                right: layoutData.margin_right || 20,
-              },
-              background_color: "#ffffff",
-              components: oldComponents,
-            };
-
-            setLayoutConfig({ pages: [migratedPage] });
-            setCurrentPageId(migratedPageId);
-
-            console.log("✅ 기존 레이아웃을 페이지 구조로 자동 마이그레이션", migratedPage);
           } else {
-            // 빈 레이아웃 - 기본 페이지 생성
+            // 자동 마이그레이션: 기존 단일 페이지 구조 → 다중 페이지 구조
-            const defaultPageId = uuidv4();
+            const oldComponents = layoutData.components || [];
-            const defaultPage: ReportPage = {
+
-              page_id: defaultPageId,
+            // 기존 구조 감지
-              page_name: "페이지 1",
+            if (oldComponents.length > 0) {
-              page_order: 0,
+              const migratedPageId = uuidv4();
-              width: 210,
+              const migratedPage: ReportPage = {
-              height: 297,
+                page_id: migratedPageId,
-              orientation: "portrait",
+                page_name: "페이지 1",
-              margins: { top: 20, bottom: 20, left: 20, right: 20 },
+                page_order: 0,
-              background_color: "#ffffff",
+                width: layoutData.canvas_width || 210,
-              components: [],
+                height: layoutData.canvas_height || 297,
-            };
+                orientation: (layoutData.page_orientation as "portrait" | "landscape") || "portrait",
-            setLayoutConfig({ pages: [defaultPage] });
+                margins: {
-            setCurrentPageId(defaultPageId);
+                  top: layoutData.margin_top || 20,
+                  bottom: layoutData.margin_bottom || 20,
+                  left: layoutData.margin_left || 20,
+                  right: layoutData.margin_right || 20,
+                },
+                background_color: "#ffffff",
+                components: oldComponents,
+              };
+
+              setLayoutConfig({ pages: [migratedPage] });
+              setCurrentPageId(migratedPageId);
+            } else {
+              // 빈 레이아웃 - 기본 페이지 생성
+              const defaultPageId = uuidv4();
+              const defaultPage: ReportPage = {
+                page_id: defaultPageId,
+                page_name: "페이지 1",
+                page_order: 0,
+                width: 210,
+                height: 297,
+                orientation: "portrait",
+                margins: { top: 20, bottom: 20, left: 20, right: 20 },
+                background_color: "#ffffff",
+                components: [],
+              };
+              setLayoutConfig({ pages: [defaultPage] });
+              setCurrentPageId(defaultPageId);
+            }
           }
         }
       } catch {
@@ -1077,7 +1082,6 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
         };
         setLayoutConfig({ pages: [defaultPage] });
         setCurrentPageId(defaultPageId);
-        console.log("레이아웃 없음, 기본 페이지 생성");
       }
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : "리포트를 불러오는데 실패했습니다.";
@@ -1146,19 +1150,12 @@ export function ReportDesignerProvider({ reportId, children }: { reportId: strin
     [queryResults],
   );
 
-  // 컴포넌트 추가
   // 컴포넌트 추가 (현재 페이지에)
   const addComponent = useCallback(
     (component: ComponentConfig) => {
-      if (!currentPageId) return;
+      setComponents((prev) => [...prev, component]);
-
-      setLayoutConfig((prev) => ({
-        pages: prev.pages.map((page) =>
-          page.page_id === currentPageId ? { ...page, components: [...page.components, component] } : page,
-        ),
-      }));
     },
-    [currentPageId],
+    [setComponents],
   );
 
   // 컴포넌트 업데이트 (현재 페이지에서)

frontend/types/report.ts

@@ -49,6 +49,7 @@ export interface ReportLayout {
   margin_left: number;
   margin_right: number;
   components: ComponentConfig[];
+  pages?: ReportPage[]; // 새 페이지 구조 (옵셔널, 하위 호환성)
   created_at: string;
   created_by: string | null;
   updated_at: string | null;