앱 위젯에서 구분선 리사이즈 안되는 문제 수정

frontend/src/components/floatingWidgets/FloatingWidgetWindow.tsx

@@ -37,9 +37,27 @@ const FloatingWidgetWindow: React.FC<Props> = ({
   nativeShell = false,
 }) => {
   const [pickSlotId, setPickSlotId] = useState<string | null>(null);
+  const bodyWrapRef = useRef<HTMLDivElement>(null);
   const bodyRef = useRef<HTMLDivElement>(null);
   const [bodySize, setBodySize] = useState({ width: 0, height: 0 });
 
+  const resolveBodySize = useCallback(() => {
+    const wrap = bodyWrapRef.current;
+    const body = bodyRef.current;
+    const width = wrap?.clientWidth ?? body?.clientWidth ?? bodySize.width;
+    const height = wrap?.clientHeight ?? body?.clientHeight ?? bodySize.height;
+    if (width > 0 && height > 0) {
+      return { width, height };
+    }
+    if (nativeShell) {
+      return {
+        width: width > 0 ? width : instance.width,
+        height: height > 0 ? height : instance.height,
+      };
+    }
+    return { width, height };
+  }, [bodySize.height, bodySize.width, instance.height, instance.width, nativeShell]);
+
   const rowFr = instance.rowFr?.length === instance.rows
     ? instance.rowFr
     : defaultGridFr(instance.rows);
@@ -92,15 +110,17 @@ const FloatingWidgetWindow: React.FC<Props> = ({
     onUpdateGridFr(next, colFrRef.current);
   }, [onUpdateGridFr]);
 
+  const notifyLayoutSync = useCallback(() => {
+    window.dispatchEvent(new CustomEvent('gc-widget-layout-sync'));
+  }, []);
+
   const { onColSplitPointerDown, onRowSplitPointerDown } = useFloatingWidgetGridSplit({
     onColFrChange: handleColFrChange,
     onRowFrChange: handleRowFrChange,
     getColFr: () => colFrRef.current,
     getRowFr: () => rowFrRef.current,
-    getBodySize: () => ({
-      width: bodyRef.current?.clientWidth ?? bodySize.width,
-      height: bodyRef.current?.clientHeight ?? bodySize.height,
-    }),
+    getBodySize: resolveBodySize,
+    onSplitEnd: notifyLayoutSync,
   });
 
   const updateSlot = useCallback((slotId: string, updater: (s: WidgetSlot) => WidgetSlot) => {
@@ -119,24 +139,30 @@ const FloatingWidgetWindow: React.FC<Props> = ({
 
   /* 창·그리드 크기 변경 시 내부 차트·위젯 레이아웃 재동기화 */
   useEffect(() => {
-    const el = bodyRef.current;
+    const el = bodyWrapRef.current ?? bodyRef.current;
     if (!el) return undefined;
     let timer: ReturnType<typeof setTimeout> | null = null;
     const scheduleLayoutSync = () => {
-      setBodySize({ width: el.clientWidth, height: el.clientHeight });
+      const wrap = bodyWrapRef.current;
+      const body = bodyRef.current;
+      setBodySize({
+        width: wrap?.clientWidth ?? body?.clientWidth ?? 0,
+        height: wrap?.clientHeight ?? body?.clientHeight ?? 0,
+      });
       if (timer) clearTimeout(timer);
-      timer = setTimeout(() => {
-        window.dispatchEvent(new CustomEvent('gc-widget-layout-sync'));
-      }, 80);
+      timer = setTimeout(notifyLayoutSync, 80);
     };
     scheduleLayoutSync();
     const ro = new ResizeObserver(() => scheduleLayoutSync());
     ro.observe(el);
+    if (bodyRef.current && bodyRef.current !== el) {
+      ro.observe(bodyRef.current);
+    }
     return () => {
       if (timer) clearTimeout(timer);
       ro.disconnect();
     };
-  }, [instance.rows, instance.cols]);
+  }, [instance.rows, instance.cols, notifyLayoutSync]);
 
   const colSplitPositions = useMemo(
     () => gridSplitPositions(colFr, bodySize.width, 1),
@@ -193,7 +219,7 @@ const FloatingWidgetWindow: React.FC<Props> = ({
           </div>
         )}
 
-        <div className="fw-window-body-wrap">
+        <div ref={bodyWrapRef} className="fw-window-body-wrap">
           <div
             ref={bodyRef}
             className="fw-window-body"
@@ -221,6 +247,7 @@ const FloatingWidgetWindow: React.FC<Props> = ({
                   key={`col-${index}`}
                   className="fw-grid-splitter fw-grid-splitter--v"
                   style={{ left }}
+                  data-no-chart-pan="true"
                   role="separator"
                   aria-orientation="vertical"
                   aria-label={`열 ${index + 1}·${index + 2} 경계 조절`}
@@ -232,6 +259,7 @@ const FloatingWidgetWindow: React.FC<Props> = ({
                   key={`row-${index}`}
                   className="fw-grid-splitter fw-grid-splitter--h"
                   style={{ top }}
+                  data-no-chart-pan="true"
                   role="separator"
                   aria-orientation="horizontal"
                   aria-label={`행 ${index + 1}·${index + 2} 경계 조절`}