294 lines
10 KiB
TypeScript
294 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { ComponentRendererProps } from "@/types/component";
|
|
import { AutoGenerationConfig } from "@/types/screen";
|
|
import { TextInputConfig } from "./types";
|
|
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
|
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
|
|
|
|
export interface TextInputComponentProps extends ComponentRendererProps {
|
|
config?: TextInputConfig;
|
|
}
|
|
|
|
/**
|
|
* TextInput 컴포넌트
|
|
* text-input 컴포넌트입니다
|
|
*/
|
|
export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|
component,
|
|
isDesignMode = false,
|
|
isSelected = false,
|
|
isInteractive = false,
|
|
onClick,
|
|
onDragStart,
|
|
onDragEnd,
|
|
config,
|
|
className,
|
|
style,
|
|
formData,
|
|
onFormDataChange,
|
|
...props
|
|
}) => {
|
|
// 컴포넌트 설정
|
|
const componentConfig = {
|
|
...config,
|
|
...component.config,
|
|
} as TextInputConfig;
|
|
|
|
// 자동생성 설정 (props에서 전달받은 값 우선 사용)
|
|
const autoGeneration: AutoGenerationConfig = props.autoGeneration ||
|
|
component.autoGeneration ||
|
|
componentConfig.autoGeneration || {
|
|
type: "none",
|
|
enabled: false,
|
|
};
|
|
|
|
// 숨김 상태 (props에서 전달받은 값 우선 사용)
|
|
const isHidden = props.hidden !== undefined ? props.hidden : component.hidden || componentConfig.hidden || false;
|
|
|
|
// 자동생성된 값 상태
|
|
const [autoGeneratedValue, setAutoGeneratedValue] = useState<string>("");
|
|
|
|
// 테스트용: 컴포넌트 라벨에 "test"가 포함되면 강제로 UUID 자동생성 활성화
|
|
const testAutoGeneration = component.label?.toLowerCase().includes("test")
|
|
? {
|
|
type: "uuid" as AutoGenerationType,
|
|
enabled: true,
|
|
}
|
|
: autoGeneration;
|
|
|
|
console.log("🔧 텍스트 입력 컴포넌트 설정:", {
|
|
config,
|
|
componentConfig,
|
|
component: component,
|
|
autoGeneration,
|
|
testAutoGeneration,
|
|
isTestMode: component.label?.toLowerCase().includes("test"),
|
|
isHidden,
|
|
isInteractive,
|
|
formData,
|
|
columnName: component.columnName,
|
|
currentFormValue: formData?.[component.columnName],
|
|
componentValue: component.value,
|
|
autoGeneratedValue,
|
|
});
|
|
|
|
// 자동생성 값 생성 (컴포넌트 마운트 시 또는 폼 데이터 변경 시)
|
|
useEffect(() => {
|
|
console.log("🔄 자동생성 useEffect 실행:", {
|
|
enabled: testAutoGeneration.enabled,
|
|
type: testAutoGeneration.type,
|
|
isInteractive,
|
|
columnName: component.columnName,
|
|
hasFormData: !!formData,
|
|
hasOnFormDataChange: !!onFormDataChange,
|
|
});
|
|
|
|
if (testAutoGeneration.enabled && testAutoGeneration.type !== "none") {
|
|
// 폼 데이터에 이미 값이 있으면 자동생성하지 않음
|
|
const currentFormValue = formData?.[component.columnName];
|
|
const currentComponentValue = component.value;
|
|
|
|
console.log("🔍 자동생성 조건 확인:", {
|
|
currentFormValue,
|
|
currentComponentValue,
|
|
hasCurrentValue: !!(currentFormValue || currentComponentValue),
|
|
autoGeneratedValue,
|
|
});
|
|
|
|
// 자동생성된 값이 없고, 현재 값도 없을 때만 생성
|
|
if (!autoGeneratedValue && !currentFormValue && !currentComponentValue) {
|
|
const generatedValue = AutoGenerationUtils.generateValue(testAutoGeneration, component.columnName);
|
|
console.log("✨ 자동생성된 값:", generatedValue);
|
|
|
|
if (generatedValue) {
|
|
setAutoGeneratedValue(generatedValue);
|
|
|
|
// 폼 데이터에 자동생성된 값 설정 (인터랙티브 모드에서만)
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
console.log("📝 폼 데이터에 자동생성 값 설정:", {
|
|
columnName: component.columnName,
|
|
value: generatedValue,
|
|
});
|
|
onFormDataChange(component.columnName, generatedValue);
|
|
}
|
|
}
|
|
} else if (!autoGeneratedValue && testAutoGeneration.type !== "none") {
|
|
// 디자인 모드에서도 미리보기용 자동생성 값 표시
|
|
const previewValue = AutoGenerationUtils.generatePreviewValue(testAutoGeneration);
|
|
console.log("🎨 디자인 모드 미리보기 값:", previewValue);
|
|
setAutoGeneratedValue(previewValue);
|
|
} else {
|
|
console.log("⏭️ 이미 값이 있어서 자동생성 건너뜀:", {
|
|
hasAutoGenerated: !!autoGeneratedValue,
|
|
hasFormValue: !!currentFormValue,
|
|
hasComponentValue: !!currentComponentValue,
|
|
});
|
|
}
|
|
}
|
|
}, [testAutoGeneration, isInteractive, component.columnName, component.value, formData, onFormDataChange]);
|
|
|
|
// 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
|
|
const componentStyle: React.CSSProperties = {
|
|
width: "100%",
|
|
height: "100%",
|
|
...component.style,
|
|
...style,
|
|
// 숨김 기능: 디자인 모드에서는 연하게, 실제 화면에서는 완전히 숨김
|
|
...(isHidden && {
|
|
opacity: isDesignMode ? 0.4 : 0,
|
|
backgroundColor: isDesignMode ? "#f3f4f6" : "transparent",
|
|
pointerEvents: isDesignMode ? "auto" : "none",
|
|
display: isDesignMode ? "block" : "none",
|
|
}),
|
|
};
|
|
|
|
// 디자인 모드 스타일
|
|
if (isDesignMode) {
|
|
componentStyle.border = "1px dashed #cbd5e1";
|
|
componentStyle.borderColor = isSelected ? "#3b82f6" : "#cbd5e1";
|
|
}
|
|
|
|
// 이벤트 핸들러
|
|
const handleClick = (e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
onClick?.();
|
|
};
|
|
|
|
// DOM에 전달하면 안 되는 React-specific props 필터링
|
|
const {
|
|
selectedScreen,
|
|
onZoneComponentDrop,
|
|
onZoneClick,
|
|
componentConfig: _componentConfig,
|
|
component: _component,
|
|
isSelected: _isSelected,
|
|
onClick: _onClick,
|
|
onDragStart: _onDragStart,
|
|
onDragEnd: _onDragEnd,
|
|
size: _size,
|
|
position: _position,
|
|
style: _style,
|
|
screenId: _screenId,
|
|
tableName: _tableName,
|
|
onRefresh: _onRefresh,
|
|
onClose: _onClose,
|
|
...domProps
|
|
} = props;
|
|
|
|
// DOM 안전한 props만 필터링
|
|
const safeDomProps = filterDOMProps(domProps);
|
|
|
|
return (
|
|
<div style={componentStyle} className={className} {...safeDomProps}>
|
|
{/* 라벨 렌더링 */}
|
|
{component.label && component.style?.labelDisplay !== false && (
|
|
<label
|
|
style={{
|
|
position: "absolute",
|
|
top: "-25px",
|
|
left: "0px",
|
|
fontSize: component.style?.labelFontSize || "14px",
|
|
color: component.style?.labelColor || "#374151",
|
|
fontWeight: "500",
|
|
}}
|
|
>
|
|
{component.label}
|
|
{component.required && <span style={{ color: "#ef4444" }}>*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<input
|
|
type="text"
|
|
value={(() => {
|
|
let displayValue = "";
|
|
|
|
if (isInteractive && formData && component.columnName) {
|
|
// 인터랙티브 모드: formData 우선, 없으면 자동생성 값
|
|
displayValue = formData[component.columnName] || autoGeneratedValue || "";
|
|
} else {
|
|
// 디자인 모드: component.value 우선, 없으면 자동생성 값
|
|
displayValue = component.value || autoGeneratedValue || "";
|
|
}
|
|
|
|
console.log("📄 Input 값 계산:", {
|
|
isInteractive,
|
|
hasFormData: !!formData,
|
|
columnName: component.columnName,
|
|
formDataValue: formData?.[component.columnName],
|
|
componentValue: component.value,
|
|
autoGeneratedValue,
|
|
finalDisplayValue: displayValue,
|
|
});
|
|
|
|
return displayValue;
|
|
})()}
|
|
placeholder={
|
|
testAutoGeneration.enabled && testAutoGeneration.type !== "none"
|
|
? `자동생성: ${AutoGenerationUtils.getTypeDescription(testAutoGeneration.type)}`
|
|
: componentConfig.placeholder || ""
|
|
}
|
|
disabled={componentConfig.disabled || false}
|
|
required={componentConfig.required || false}
|
|
readOnly={componentConfig.readonly || (testAutoGeneration.enabled && testAutoGeneration.type !== "none")}
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
border: "1px solid #d1d5db",
|
|
borderRadius: "4px",
|
|
padding: "8px 12px",
|
|
fontSize: "14px",
|
|
outline: "none",
|
|
// isInteractive 모드에서는 사용자 스타일 우선 적용
|
|
...(isInteractive && component.style ? component.style : {}),
|
|
}}
|
|
onClick={handleClick}
|
|
onDragStart={onDragStart}
|
|
onDragEnd={onDragEnd}
|
|
onChange={(e) => {
|
|
const newValue = e.target.value;
|
|
console.log("🎯 TextInputComponent onChange 호출:", {
|
|
componentId: component.id,
|
|
columnName: component.columnName,
|
|
newValue,
|
|
isInteractive,
|
|
hasOnFormDataChange: !!onFormDataChange,
|
|
hasOnChange: !!props.onChange,
|
|
});
|
|
|
|
// isInteractive 모드에서는 formData 업데이트
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
console.log(`📤 TextInputComponent -> onFormDataChange 호출: ${component.columnName} = "${newValue}"`);
|
|
console.log("🔍 onFormDataChange 함수 정보:", {
|
|
functionName: onFormDataChange.name,
|
|
functionString: onFormDataChange.toString().substring(0, 200),
|
|
});
|
|
onFormDataChange(component.columnName, newValue);
|
|
} else {
|
|
console.log("❌ TextInputComponent onFormDataChange 조건 미충족:", {
|
|
isInteractive,
|
|
hasOnFormDataChange: !!onFormDataChange,
|
|
hasColumnName: !!component.columnName,
|
|
});
|
|
}
|
|
|
|
// 기존 onChange 핸들러도 호출
|
|
if (props.onChange) {
|
|
console.log(`📤 TextInputComponent -> props.onChange 호출: "${newValue}"`);
|
|
props.onChange(newValue);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* TextInput 래퍼 컴포넌트
|
|
* 추가적인 로직이나 상태 관리가 필요한 경우 사용
|
|
*/
|
|
export const TextInputWrapper: React.FC<TextInputComponentProps> = (props) => {
|
|
return <TextInputComponent {...props} />;
|
|
};
|