ERP-node/frontend/lib/registry/components/v2-media/V2MediaRenderer.tsx

"use client";

import React from "react";
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
import { V2MediaDefinition } from "./index";
import FileUploadComponent from "../file-upload/FileUploadComponent";

/**
 * V2Media 렌더러
 * 레거시 FileUploadComponent를 사용하여 안정적인 파일 업로드 기능 제공
 * 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
 */
export class V2MediaRenderer extends AutoRegisteringComponentRenderer {
  static componentDefinition = V2MediaDefinition;

  render(): React.ReactElement {
    const { 
      component, 
      formData, 
      onFormDataChange, 
      isDesignMode, 
      isSelected, 
      isInteractive,
      onUpdate,
      ...restProps 
    } = this.props;

    // 컴포넌트 설정 추출
    const config = component.componentConfig || component.config || {};
    const columnName = component.columnName;
    const tableName = component.tableName || this.props.tableName;

    // 🔍 디버깅: 컴포넌트 정보 로깅
    console.log("📸 [V2MediaRenderer] 컴포넌트 정보:", {
      componentId: component.id,
      columnName: columnName,
      tableName: tableName,
      formDataId: formData?.id,
      formDataTableName: formData?.tableName,
    });

    // V1 file-upload에서 사용하는 형태로 설정 매핑
    const mediaType = config.mediaType || config.type || this.getMediaTypeFromWebType(component.webType);
    
    // maxSize: MB → bytes 변환
    const maxSizeBytes = config.maxSize 
      ? (config.maxSize > 1000 ? config.maxSize : config.maxSize * 1024 * 1024)
      : 10 * 1024 * 1024; // 기본 10MB

    // 레거시 컴포넌트 설정 형태로 변환
    const legacyComponentConfig = {
      maxFileCount: config.multiple ? 10 : 1,
      maxFileSize: maxSizeBytes,
      accept: config.accept || this.getDefaultAccept(mediaType),
      docType: config.docType || "DOCUMENT",
      docTypeName: config.docTypeName || "일반 문서",
      showFileList: config.showFileList ?? true,
      dragDrop: config.dragDrop ?? true,
    };

    // 레거시 컴포넌트 형태로 변환
    const legacyComponent = {
      ...component,
      id: component.id,
      columnName: columnName,
      tableName: tableName,
      componentConfig: legacyComponentConfig,
    };

    // onFormDataChange 래퍼: FileUploadComponent는 (fieldName, value) 형태로 호출함
    const handleFormDataChange = (fieldName: string, value: any) => {
      if (onFormDataChange) {
        // 메타 데이터(__로 시작하는 키)는 건너뛰기
        if (!fieldName.startsWith("__")) {
          console.log("📸 [V2MediaRenderer] formData 업데이트:", { fieldName, value });
          onFormDataChange(fieldName, value);
        }
      }
    };

    return (
      <FileUploadComponent
        component={legacyComponent}
        componentConfig={legacyComponentConfig}
        componentStyle={component.style || {}}
        className=""
        isInteractive={isInteractive ?? true}
        isDesignMode={isDesignMode ?? false}
        formData={formData || {}}
        onFormDataChange={handleFormDataChange}
        onUpdate={onUpdate}
      />
    );
  }

  /**
   * webType에서 미디어 타입 추출
   */
  private getMediaTypeFromWebType(webType?: string): "file" | "image" | "video" | "audio" {
    switch (webType) {
      case "image":
        return "image";
      case "video":
        return "video";
      case "audio":
        return "audio";
      case "file":
      default:
        return "file";
    }
  }

  /**
   * 미디어 타입에 따른 기본 accept 값
   */
  private getDefaultAccept(mediaType: string): string {
    switch (mediaType) {
      case "image":
        return "image/*";
      case "video":
        return "video/*";
      case "audio":
        return "audio/*";
      default:
        return "*/*";
    }
  }
}

// 자동 등록 실행
V2MediaRenderer.registerSelf();

// Hot Reload 지원 (개발 모드)
if (process.env.NODE_ENV === "development") {
  V2MediaRenderer.enableHotReload();
}