반응형 레이아웃 기능 구현

frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx

@@ -23,6 +23,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   component,
   isDesignMode = false,
   isSelected = false,
+  isPreview = false,
   onClick,
   ...props
 }) => {
@@ -52,16 +53,25 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   // 컴포넌트 스타일
-  const componentStyle: React.CSSProperties = {
-    position: "absolute",
-    left: `${component.style?.positionX || 0}px`,
-    top: `${component.style?.positionY || 0}px`,
-    width: `${component.style?.width || 1000}px`,
-    height: `${component.style?.height || 600}px`,
-    zIndex: component.style?.positionZ || 1,
-    cursor: isDesignMode ? "pointer" : "default",
-    border: isSelected ? "2px solid #3b82f6" : "1px solid #e5e7eb",
-  };
+  const componentStyle: React.CSSProperties = isPreview
+    ? {
+        // 반응형 모드: position relative, width/height 100%
+        position: "relative",
+        width: "100%",
+        height: `${component.style?.height || 600}px`,
+        border: "1px solid #e5e7eb",
+      }
+    : {
+        // 디자이너 모드: position absolute
+        position: "absolute",
+        left: `${component.style?.positionX || 0}px`,
+        top: `${component.style?.positionY || 0}px`,
+        width: `${component.style?.width || 1000}px`,
+        height: `${component.style?.height || 600}px`,
+        zIndex: component.style?.positionZ || 1,
+        cursor: isDesignMode ? "pointer" : "default",
+        border: isSelected ? "2px solid #3b82f6" : "1px solid #e5e7eb",
+      };
 
   // 좌측 데이터 로드
   const loadLeftData = useCallback(async () => {