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

frontend/components/screen/SplitPanelAwareWrapper.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { useSplitPanel } from "@/lib/registry/components/split-panel-layout/SplitPanelContext";
+
+interface SplitPanelAwareWrapperProps {
+  children: React.ReactNode;
+  componentX: number;
+  componentY: number;
+  componentWidth: number;
+  componentHeight: number;
+  componentType?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+/**
+ * 분할 패널 드래그 리사이즈에 따라 컴포넌트 위치를 자동 조정하는 래퍼
+ *
+ * 동작 방식:
+ * 1. 컴포넌트가 분할 패널의 좌측 영역 위에 있는지 감지
+ * 2. 좌측 영역 위에 있으면, 드래그 핸들 이동량만큼 X 좌표를 조정
+ * 3. 우측 영역이나 분할 패널 외부에 있으면 원래 위치 유지
+ */
+export const SplitPanelAwareWrapper: React.FC<SplitPanelAwareWrapperProps> = ({
+  children,
+  componentX,
+  componentY,
+  componentWidth,
+  componentHeight,
+  componentType,
+  style,
+  className,
+}) => {
+  const { getAdjustedX, getOverlappingSplitPanel } = useSplitPanel();
+
+  // 분할 패널 위에 있는지 확인 및 조정된 X 좌표 계산
+  const { adjustedX, isInLeftPanel, isDragging } = useMemo(() => {
+    const overlap = getOverlappingSplitPanel(componentX, componentY, componentWidth, componentHeight);
+
+    if (!overlap) {
+      // 분할 패널 위에 없음
+      return { adjustedX: componentX, isInLeftPanel: false, isDragging: false };
+    }
+
+    if (!overlap.isInLeftPanel) {
+      // 우측 패널 위에 있음 - 원래 위치 유지
+      return { adjustedX: componentX, isInLeftPanel: false, isDragging: overlap.panel.isDragging };
+    }
+
+    // 좌측 패널 위에 있음 - 위치 조정
+    const adjusted = getAdjustedX(componentX, componentY, componentWidth, componentHeight);
+
+    return {
+      adjustedX: adjusted,
+      isInLeftPanel: true,
+      isDragging: overlap.panel.isDragging,
+    };
+  }, [componentX, componentY, componentWidth, componentHeight, getAdjustedX, getOverlappingSplitPanel]);
+
+  // 조정된 스타일
+  const adjustedStyle: React.CSSProperties = {
+    ...style,
+    position: "absolute",
+    left: `${adjustedX}px`,
+    top: `${componentY}px`,
+    width: componentWidth,
+    height: componentHeight,
+    // 드래그 중에는 트랜지션 없이 즉시 이동, 드래그 끝나면 부드럽게
+    transition: isDragging ? "none" : "left 0.1s ease-out",
+  };
+
+  // 디버그 로깅 (개발 중에만)
+  // if (isInLeftPanel) {
+  //   console.log(`📍 [SplitPanelAwareWrapper] 위치 조정:`, {
+  //     componentType,
+  //     originalX: componentX,
+  //     adjustedX,
+  //     delta: adjustedX - componentX,
+  //     isInLeftPanel,
+  //     isDragging,
+  //   });
+  // }
+
+  return (
+    <div style={adjustedStyle} className={className}>
+      {children}
+    </div>
+  );
+};
+
+export default SplitPanelAwareWrapper;