분할패널 버튼 이동 가능하게 수정

frontend/components/screen/RealtimePreviewDynamic.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useMemo } from "react";
 import { ComponentData, WebType, WidgetComponent } from "@/types/screen";
 import { DynamicComponentRenderer } from "@/lib/registry/DynamicComponentRenderer";
 import {
@@ -16,6 +16,7 @@ import {
   Building,
   File,
 } from "lucide-react";
+import { useSplitPanel } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
 
 // 컴포넌트 렌더러들 자동 등록
 import "@/lib/registry/components";
@@ -60,7 +61,7 @@ interface RealtimePreviewProps {
   sortBy?: string;
   sortOrder?: "asc" | "desc";
   columnOrder?: string[];
-  
+
   // 🆕 조건부 컨테이너 높이 변화 콜백
   onHeightChange?: (componentId: string, newHeight: number) => void;
 }
@@ -262,14 +263,145 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
       }
     : component;
 
+  // 🆕 분할 패널 리사이즈 Context
+  const splitPanelContext = useSplitPanel();
+
+  // 버튼 컴포넌트인지 확인 (분할 패널 위치 조정 대상)
+  const componentType = (component as any).componentType || "";
+  const componentId = (component as any).componentId || "";
+  const widgetType = (component as any).widgetType || "";
+
+  const isButtonComponent =
+    (type === "widget" && widgetType === "button") ||
+    (type === "component" &&
+      (["button-primary", "button-secondary"].includes(componentType) ||
+        ["button-primary", "button-secondary"].includes(componentId)));
+
+  // 🆕 버튼이 처음 렌더링될 때의 분할 패널 정보를 기억 (기준점)
+  const initialPanelRatioRef = React.useRef<number | null>(null);
+  const initialPanelIdRef = React.useRef<string | null>(null);
+  // 버튼이 좌측 패널에 속하는지 여부 (한번 설정되면 유지)
+  const isInLeftPanelRef = React.useRef<boolean | null>(null);
+
+  // 🆕 분할 패널 위 버튼 위치 자동 조정
+  const calculateButtonPosition = () => {
+    // 버튼이 아니거나 분할 패널 컴포넌트 자체인 경우 조정하지 않음
+    const isSplitPanelComponent =
+      type === "component" && ["split-panel-layout", "split-panel-layout2"].includes(componentType);
+
+    if (!isButtonComponent || isSplitPanelComponent) {
+      return { adjustedPositionX: position.x, isOnSplitPanel: false, isDraggingSplitPanel: false };
+    }
+
+    const componentWidth = size?.width || 100;
+    const componentHeight = size?.height || 40;
+
+    // 분할 패널 위에 있는지 확인 (원래 위치 기준)
+    const overlap = splitPanelContext.getOverlappingSplitPanel(position.x, position.y, componentWidth, componentHeight);
+
+    // 분할 패널 위에 없으면 기준점 초기화
+    if (!overlap) {
+      if (initialPanelIdRef.current !== null) {
+        initialPanelRatioRef.current = null;
+        initialPanelIdRef.current = null;
+        isInLeftPanelRef.current = null;
+      }
+      return {
+        adjustedPositionX: position.x,
+        isOnSplitPanel: false,
+        isDraggingSplitPanel: false,
+      };
+    }
+
+    const { panel } = overlap;
+
+    // 🆕 초기 기준 비율 및 좌측 패널 소속 여부 설정 (처음 한 번만)
+    if (initialPanelIdRef.current !== overlap.panelId) {
+      initialPanelRatioRef.current = panel.leftWidthPercent;
+      initialPanelIdRef.current = overlap.panelId;
+
+      // 초기 배치 시 좌측 패널에 있는지 확인 (초기 비율 기준으로 계산)
+      // 현재 비율이 아닌, 버튼 원래 위치가 초기 좌측 패널 영역 안에 있었는지 판단
+      const initialLeftPanelWidth = (panel.width * panel.leftWidthPercent) / 100;
+      const componentCenterX = position.x + componentWidth / 2;
+      const relativeX = componentCenterX - panel.x;
+      const wasInLeftPanel = relativeX < initialLeftPanelWidth;
+
+      isInLeftPanelRef.current = wasInLeftPanel;
+      console.log("📌 [버튼 기준점 설정]:", {
+        componentId: component.id,
+        panelId: overlap.panelId,
+        initialRatio: panel.leftWidthPercent,
+        isInLeftPanel: wasInLeftPanel,
+        buttonCenterX: componentCenterX,
+        leftPanelWidth: initialLeftPanelWidth,
+      });
+    }
+
+    // 좌측 패널 소속이 아니면 조정하지 않음 (초기 배치 기준)
+    if (!isInLeftPanelRef.current) {
+      return {
+        adjustedPositionX: position.x,
+        isOnSplitPanel: true,
+        isDraggingSplitPanel: panel.isDragging,
+      };
+    }
+
+    // 초기 기준 비율 (버튼이 처음 배치될 때의 비율)
+    const baseRatio = initialPanelRatioRef.current ?? panel.leftWidthPercent;
+
+    // 기준 비율 대비 현재 비율로 분할선 위치 계산
+    const baseDividerX = panel.x + (panel.width * baseRatio) / 100; // 초기 분할선 위치
+    const currentDividerX = panel.x + (panel.width * panel.leftWidthPercent) / 100; // 현재 분할선 위치
+
+    // 분할선 이동량 (px)
+    const dividerDelta = currentDividerX - baseDividerX;
+
+    // 변화가 없으면 원래 위치 반환
+    if (Math.abs(dividerDelta) < 1) {
+      return {
+        adjustedPositionX: position.x,
+        isOnSplitPanel: true,
+        isDraggingSplitPanel: panel.isDragging,
+      };
+    }
+
+    // 🆕 버튼도 분할선과 같은 양만큼 이동
+    // 분할선이 왼쪽으로 100px 이동하면, 버튼도 왼쪽으로 100px 이동
+    const adjustedX = position.x + dividerDelta;
+
+    console.log("📍 [버튼 위치 조정]:", {
+      componentId: component.id,
+      originalX: position.x,
+      adjustedX,
+      dividerDelta,
+      baseRatio,
+      currentRatio: panel.leftWidthPercent,
+      baseDividerX,
+      currentDividerX,
+      isDragging: panel.isDragging,
+    });
+
+    return {
+      adjustedPositionX: adjustedX,
+      isOnSplitPanel: true,
+      isDraggingSplitPanel: panel.isDragging,
+    };
+  };
+
+  const { adjustedPositionX, isOnSplitPanel, isDraggingSplitPanel } = calculateButtonPosition();
+
   const baseStyle = {
-    left: `${position.x}px`,
+    left: `${adjustedPositionX}px`, // 🆕 조정된 X 좌표 사용
     top: `${position.y}px`,
     ...componentStyle, // componentStyle 전체 적용 (DynamicComponentRenderer에서 이미 size가 변환됨)
     width: getWidth(), // getWidth() 우선 (table-list 등 특수 케이스)
     height: getHeight(), // getHeight() 우선 (flow-widget 등 특수 케이스)
     zIndex: component.type === "layout" ? 1 : position.z || 2,
     right: undefined,
+    // 🆕 분할 패널 드래그 중에는 트랜지션 없이 즉시 이동
+    transition:
+      isOnSplitPanel && isButtonComponent ? (isDraggingSplitPanel ? "none" : "left 0.1s ease-out") : undefined,
   };
 
   // 크기 정보는 필요시에만 디버깅 (개발 중 문제 발생 시 주석 해제)