화면 분할패널 중간커밋

frontend/lib/registry/components/screen-split-panel/ScreenSplitPanelRenderer.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
+import { ComponentRendererProps } from "@/types/component";
+import { ComponentCategory } from "@/types/component";
+import { ScreenSplitPanel } from "@/components/screen-embedding/ScreenSplitPanel";
+import { ScreenSplitPanelConfigPanel } from "./ScreenSplitPanelConfigPanel";
+
+/**
+ * 화면 분할 패널 Renderer
+ * 좌우 화면 임베딩 및 데이터 전달 기능을 제공하는 컴포넌트
+ */
+class ScreenSplitPanelRenderer extends AutoRegisteringComponentRenderer {
+  static componentDefinition = {
+    id: "screen-split-panel",
+    name: "화면 분할 패널",
+    nameEng: "Screen Split Panel",
+    description: "좌우 화면 임베딩 및 데이터 전달 기능을 제공하는 분할 패널",
+    category: ComponentCategory.LAYOUT,
+    webType: "text", // 레이아웃 컴포넌트는 기본 webType 사용
+    component: ScreenSplitPanel, // React 컴포넌트
+    configPanel: ScreenSplitPanelConfigPanel, // 설정 패널
+    tags: ["split", "panel", "embed", "data-transfer", "layout"],
+    defaultSize: {
+      width: 1200,
+      height: 600,
+    },
+    defaultConfig: {
+      screenId: 0,
+      leftScreenId: 0,
+      rightScreenId: 0,
+      splitRatio: 50,
+      resizable: true,
+      buttonLabel: "데이터 전달",
+      buttonPosition: "center",
+    },
+    version: "1.0.0",
+    author: "ERP System",
+    documentation: `
+# 화면 분할 패널
+
+좌우로 화면을 나누고 각 영역에 다른 화면을 임베딩할 수 있는 레이아웃 컴포넌트입니다.
+
+## 주요 기능
+
+- **화면 임베딩**: 좌우 영역에 기존 화면을 임베딩
+- **데이터 전달**: 좌측 화면에서 선택한 데이터를 우측 화면으로 전달
+- **다중 컴포넌트 매핑**: 테이블, 입력 필드, 폼 등 다양한 컴포넌트로 데이터 전달 가능
+- **데이터 변환**: sum, average, concat 등 데이터 변환 함수 지원
+- **조건부 전달**: 특정 조건을 만족하는 데이터만 전달 가능
+
+## 사용 시나리오
+
+1. **입고 등록**: 발주 목록(좌) → 입고 품목 입력(우)
+2. **수주 등록**: 품목 목록(좌) → 수주 상세 입력(우)
+3. **출고 등록**: 재고 목록(좌) → 출고 품목 입력(우)
+
+## 설정 방법
+
+1. 화면 디자이너에서 "화면 분할 패널" 컴포넌트를 드래그하여 배치
+2. 속성 패널에서 좌측/우측 화면 선택
+3. 데이터 전달 규칙 설정 (소스 → 타겟 매핑)
+4. 전달 버튼 설정 (라벨, 위치, 검증 규칙)
+    `,
+  };
+
+  render() {
+    const { config = {}, style = {} } = this.props;
+
+    return (
+      <div style={{ width: "100%", height: "100%", ...style }}>
+        <ScreenSplitPanel screenId={config.screenId} config={config} />
+      </div>
+    );
+  }
+}
+
+// 자동 등록
+ScreenSplitPanelRenderer.registerSelf();
+
+export default ScreenSplitPanelRenderer;