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

"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: ScreenSplitPanelRenderer, // 🆕 Renderer 클래스 자체를 등록 (ScreenSplitPanel 아님)
    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() {
    console.log("🚀 [ScreenSplitPanelRenderer] render() 호출됨!", this.props);
    
    const { component, style = {}, componentConfig, config, screenId, formData } = this.props as any;
    
    // componentConfig 또는 config 또는 component.componentConfig 사용
    const finalConfig = componentConfig || config || component?.componentConfig || {};
    
    console.log("🔍 [ScreenSplitPanelRenderer] 설정 분석:", {
      hasComponentConfig: !!componentConfig,
      hasConfig: !!config,
      hasComponentComponentConfig: !!component?.componentConfig,
      finalConfig,
      splitRatio: finalConfig.splitRatio,
      leftScreenId: finalConfig.leftScreenId,
      rightScreenId: finalConfig.rightScreenId,
      componentType: component?.componentType,
      componentId: component?.id,
    });
    
    // 🆕 formData 별도 로그 (명확한 확인)
    console.log("📝 [ScreenSplitPanelRenderer] formData 확인:", {
      hasFormData: !!formData,
      formDataKeys: formData ? Object.keys(formData) : [],
      formData: formData,
    });

    return (
      <div style={{ width: "100%", height: "100%", ...style }}>
        <ScreenSplitPanel 
          screenId={screenId || finalConfig.screenId} 
          config={finalConfig} 
          initialFormData={formData} // 🆕 수정 데이터 전달
        />
      </div>
    );
  }
}

// 자동 등록
ScreenSplitPanelRenderer.registerSelf();

export default ScreenSplitPanelRenderer;