109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
|
|
import { V2SelectDefinition } from "./index";
|
|
import { V2Select } from "@/components/v2/V2Select";
|
|
|
|
/**
|
|
* V2Select 렌더러
|
|
* 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
|
|
*/
|
|
export class V2SelectRenderer extends AutoRegisteringComponentRenderer {
|
|
static componentDefinition = V2SelectDefinition;
|
|
|
|
render(): React.ReactElement {
|
|
const { component, formData, onFormDataChange, isDesignMode, isSelected, isInteractive, ...restProps } = this.props;
|
|
|
|
// 컴포넌트 설정 추출
|
|
const config = component.componentConfig || component.config || {};
|
|
const columnName = component.columnName;
|
|
const tableName = component.tableName || this.props.tableName;
|
|
|
|
// formData에서 현재 값 가져오기 (기본값 지원)
|
|
const defaultValue = config.defaultValue || "";
|
|
let currentValue = formData?.[columnName] ?? component.value ?? "";
|
|
|
|
// 🆕 formData에 값이 없고 기본값이 설정된 경우, 기본값 적용
|
|
if (
|
|
(currentValue === "" || currentValue === undefined || currentValue === null) &&
|
|
defaultValue &&
|
|
isInteractive &&
|
|
onFormDataChange &&
|
|
columnName
|
|
) {
|
|
// 초기 렌더링 시 기본값을 formData에 설정
|
|
setTimeout(() => {
|
|
if (!formData?.[columnName]) {
|
|
onFormDataChange(columnName, defaultValue);
|
|
}
|
|
}, 0);
|
|
currentValue = defaultValue;
|
|
}
|
|
|
|
// 값 변경 핸들러
|
|
const handleChange = (value: any) => {
|
|
if (isInteractive && onFormDataChange && columnName) {
|
|
onFormDataChange(columnName, value);
|
|
}
|
|
};
|
|
|
|
// 🔧 DynamicComponentRenderer에서 전달한 style/size를 우선 사용 (height 포함)
|
|
// restProps.style에 mergedStyle(height 변환됨)이 있고, restProps.size에도 size가 있음
|
|
const effectiveStyle = restProps.style || component.style;
|
|
const effectiveSize = restProps.size || component.size;
|
|
|
|
// 🔍 디버깅: props 확인 (warn으로 변경하여 캡처되도록)
|
|
console.warn("🔍 [V2SelectRenderer] props 디버깅:", {
|
|
componentId: component.id,
|
|
"component.style": component.style,
|
|
"component.size": component.size,
|
|
"restProps.style": restProps.style,
|
|
"restProps.size": restProps.size,
|
|
effectiveStyle,
|
|
effectiveSize,
|
|
});
|
|
|
|
// 🔧 restProps에서 style, size 제외 (effectiveStyle/effectiveSize가 우선되어야 함)
|
|
const { style: _style, size: _size, ...restPropsClean } = restProps as any;
|
|
|
|
return (
|
|
<V2Select
|
|
id={component.id}
|
|
label={component.label}
|
|
required={component.required}
|
|
readonly={config.readonly || component.readonly}
|
|
disabled={config.disabled || component.disabled}
|
|
value={currentValue}
|
|
onChange={handleChange}
|
|
config={{
|
|
mode: config.mode || "dropdown",
|
|
source: config.source || "distinct",
|
|
multiple: config.multiple || false,
|
|
searchable: config.searchable ?? true,
|
|
placeholder: config.placeholder || "선택하세요",
|
|
options: config.options || [],
|
|
codeGroup: config.codeGroup,
|
|
entityTable: config.entityTable,
|
|
entityLabelColumn: config.entityLabelColumn,
|
|
entityValueColumn: config.entityValueColumn,
|
|
}}
|
|
tableName={tableName}
|
|
columnName={columnName}
|
|
formData={formData}
|
|
{...restPropsClean}
|
|
style={effectiveStyle}
|
|
size={effectiveSize}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
// 자동 등록 실행
|
|
V2SelectRenderer.registerSelf();
|
|
|
|
// Hot Reload 지원 (개발 모드)
|
|
if (process.env.NODE_ENV === "development") {
|
|
V2SelectRenderer.enableHotReload();
|
|
}
|