레이아웃 추가기능

frontend/lib/registry/layouts/split/SplitLayout.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React from "react";
+import { LayoutRendererProps } from "../BaseLayoutRenderer";
+
+/**
+ * split 컴포넌트
+ */
+export interface SplitLayoutProps extends LayoutRendererProps {
+  renderer: any; // SplitLayoutRenderer 타입
+}
+
+export const SplitLayout: React.FC<SplitLayoutProps> = ({
+  layout,
+  isDesignMode = false,
+  isSelected = false,
+  onClick,
+  className = "",
+  renderer,
+  ...props
+}) => {
+  if (!layout.layoutConfig.split) {
+    return (
+      <div className="error-layout flex items-center justify-center p-4 border-2 border-red-300 bg-red-50 rounded">
+        <div className="text-center text-red-600">
+          <div className="font-medium">split 설정이 없습니다.</div>
+          <div className="text-sm mt-1">layoutConfig.split가 필요합니다.</div>
+        </div>
+      </div>
+    );
+  }
+
+  const splitConfig = layout.layoutConfig.split;
+  const containerStyle = renderer.getLayoutContainerStyle();
+
+  // split 컨테이너 스타일
+  const splitStyle: React.CSSProperties = {
+    ...containerStyle,
+    // TODO: 레이아웃 전용 스타일 정의
+    height: "100%",
+    width: "100%",
+  };
+
+  // 디자인 모드 스타일
+  if (isDesignMode) {
+    splitStyle.border = isSelected ? "2px solid #3b82f6" : "1px solid #e2e8f0";
+    splitStyle.borderRadius = "8px";
+  }
+
+  return (
+    <div
+      className={`split-layout ${isDesignMode ? "design-mode" : ""} ${className}`}
+      style={splitStyle}
+      onClick={onClick}
+      draggable={isDesignMode}
+      onDragStart={props.onDragStart}
+      onDragEnd={props.onDragEnd}
+      {...props}
+    >
+      {layout.zones.map((zone: any) => {
+        const zoneChildren = renderer.getZoneChildren(zone.id);
+
+        // TODO: 존별 스타일 정의
+        const zoneStyle: React.CSSProperties = {
+          // 레이아웃별 존 스타일 구현
+        };
+
+        return renderer.renderZone(zone, zoneChildren, {
+          style: zoneStyle,
+          className: "split-zone",
+        });
+      })}
+
+      {/* 디자인 모드에서 빈 영역 표시 */}
+      {isDesignMode && layout.zones.length === 0 && (
+        <div
+          className="empty-split-container"
+          style={{
+            flex: 1,
+            border: "2px dashed #cbd5e1",
+            borderRadius: "8px",
+            backgroundColor: "rgba(148, 163, 184, 0.05)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "14px",
+            color: "#64748b",
+            minHeight: "100px",
+            padding: "20px",
+            textAlign: "center",
+          }}
+        >
+          split에 존을 추가하세요
+        </div>
+      )}
+    </div>
+  );
+};