위젯 기능 추가

frontend/src/components/layout/BuilderPageShell.tsx

@@ -53,6 +53,14 @@ export interface BuilderPageShellProps {
   collapsiblePanels?: boolean;
   leftCollapsedStorageKey?: string;
   rightCollapsedStorageKey?: string;
+  /** 패널 크기·접기 변경 시 (위젯 대시보드 레이아웃 영속화 등) */
+  onPanelLayoutChange?: (patch: {
+    leftWidth?: number;
+    rightWidth?: number;
+    footerHeight?: number;
+    leftOpen?: boolean;
+    rightOpen?: boolean;
+  }) => void;
   loading?: boolean;
   loadingText?: string;
 }
@@ -129,6 +137,7 @@ export default function BuilderPageShell({
   collapsiblePanels = false,
   leftCollapsedStorageKey,
   rightCollapsedStorageKey,
+  onPanelLayoutChange,
   loading = false,
   loadingText = '로딩 중…',
 }: BuilderPageShellProps) {
@@ -158,7 +167,10 @@ export default function BuilderPageShell({
     () => leftWidthRef.current,
     LEFT_MIN,
     LEFT_MAX,
-    v => storeSize(leftStorageKey, v),
+    v => {
+      storeSize(leftStorageKey, v);
+      onPanelLayoutChange?.({ leftWidth: v });
+    },
   );
 
   const handleRightSplitter = useCallback((e: React.PointerEvent<HTMLDivElement>) => {
@@ -186,11 +198,12 @@ export default function BuilderPageShell({
       window.removeEventListener('pointermove', onMove);
       window.removeEventListener('pointerup', onUp);
       storeSize(rightStorageKey, rightWidthRef.current);
+      onPanelLayoutChange?.({ rightWidth: rightWidthRef.current });
     };
 
     window.addEventListener('pointermove', onMove);
     window.addEventListener('pointerup', onUp);
-  }, [rightStorageKey]);
+  }, [rightStorageKey, onPanelLayoutChange]);
 
   const onFooterSplitter = usePanelResize(
     'horizontal',
@@ -198,24 +211,29 @@ export default function BuilderPageShell({
     () => footerHeightRef.current,
     FOOTER_MIN,
     FOOTER_MAX,
-    v => storeSize(footerStorageKey, v),
+    v => {
+      storeSize(footerStorageKey, v);
+      onPanelLayoutChange?.({ footerHeight: v });
+    },
   );
 
   const toggleLeft = useCallback(() => {
     setLeftOpen(prev => {
       const next = !prev;
       if (leftCollapsedStorageKey) storeBool(leftCollapsedStorageKey, next);
+      onPanelLayoutChange?.({ leftOpen: next });
       return next;
     });
-  }, [leftCollapsedStorageKey]);
+  }, [leftCollapsedStorageKey, onPanelLayoutChange]);
 
   const toggleRight = useCallback(() => {
     setRightOpen(prev => {
       const next = !prev;
       if (rightCollapsedStorageKey) storeBool(rightCollapsedStorageKey, next);
+      onPanelLayoutChange?.({ rightOpen: next });
       return next;
     });
-  }, [rightCollapsedStorageKey]);
+  }, [rightCollapsedStorageKey, onPanelLayoutChange]);
 
   const pageStyle = useMemo(() => ({
     '--bps-left-width': leftOpen ? `${leftWidth}px` : '0px',