137 lines
4.0 KiB
TypeScript
137 lines
4.0 KiB
TypeScript
"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();
|
|
}
|