인풋 오류 수정
This commit is contained in:
parent
74ebb565e6
commit
cc84e604b1
|
|
@ -200,12 +200,21 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
|
|||
|
||||
// onChange 핸들러 - 컴포넌트 타입에 따라 다르게 처리
|
||||
const handleChange = (value: any) => {
|
||||
// React 이벤트 객체인 경우 값 추출
|
||||
let actualValue = value;
|
||||
if (value && typeof value === "object" && value.nativeEvent && value.target) {
|
||||
// SyntheticEvent인 경우 target.value 추출
|
||||
actualValue = value.target.value;
|
||||
console.log("⚠️ DynamicComponentRenderer: 이벤트 객체 감지, value 추출:", actualValue);
|
||||
}
|
||||
|
||||
console.log("🔄 DynamicComponentRenderer handleChange 호출:", {
|
||||
componentType,
|
||||
fieldName,
|
||||
value,
|
||||
valueType: typeof value,
|
||||
isArray: Array.isArray(value),
|
||||
originalValue: value,
|
||||
actualValue,
|
||||
valueType: typeof actualValue,
|
||||
isArray: Array.isArray(actualValue),
|
||||
});
|
||||
|
||||
if (onFormDataChange) {
|
||||
|
|
@ -213,11 +222,11 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
|
|||
// 단순 input 컴포넌트는 (fieldName, value) 형태로 전달받음
|
||||
if (componentType === "repeater-field-group" || componentType === "repeater") {
|
||||
// fieldName과 함께 전달
|
||||
console.log("💾 RepeaterInput 데이터 저장:", fieldName, value);
|
||||
onFormDataChange(fieldName, value);
|
||||
console.log("💾 RepeaterInput 데이터 저장:", fieldName, actualValue);
|
||||
onFormDataChange(fieldName, actualValue);
|
||||
} else {
|
||||
// 이미 fieldName이 포함된 경우는 그대로 전달
|
||||
onFormDataChange(fieldName, value);
|
||||
onFormDataChange(fieldName, actualValue);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -325,11 +325,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
setEmailUsername(newUsername);
|
||||
const fullEmail = `${newUsername}@${emailDomain}`;
|
||||
|
||||
if (isInteractive && formData && onFormDataChange && component.columnName) {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
[component.columnName]: fullEmail,
|
||||
});
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, fullEmail);
|
||||
}
|
||||
}}
|
||||
className={`h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
|
||||
|
|
@ -367,11 +364,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
setEmailDomain(value);
|
||||
const fullEmail = `${emailUsername}@${value}`;
|
||||
|
||||
if (isInteractive && formData && onFormDataChange && component.columnName) {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
[component.columnName]: fullEmail,
|
||||
});
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, fullEmail);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
@ -388,11 +382,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
setEmailDomain(currentValue);
|
||||
const fullEmail = `${emailUsername}@${currentValue}`;
|
||||
|
||||
if (isInteractive && formData && onFormDataChange && component.columnName) {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
[component.columnName]: fullEmail,
|
||||
});
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, fullEmail);
|
||||
}
|
||||
setEmailDomainOpen(false);
|
||||
}}
|
||||
|
|
@ -437,11 +428,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
setTelPart1(value);
|
||||
const fullTel = `${value}-${telPart2}-${telPart3}`;
|
||||
|
||||
if (isInteractive && formData && onFormDataChange && component.columnName) {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
[component.columnName]: fullTel,
|
||||
});
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, fullTel);
|
||||
}
|
||||
}}
|
||||
className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
|
||||
|
|
@ -462,11 +450,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
setTelPart2(value);
|
||||
const fullTel = `${telPart1}-${value}-${telPart3}`;
|
||||
|
||||
if (isInteractive && formData && onFormDataChange && component.columnName) {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
[component.columnName]: fullTel,
|
||||
});
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, fullTel);
|
||||
}
|
||||
}}
|
||||
className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
|
||||
|
|
@ -487,11 +472,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
setTelPart3(value);
|
||||
const fullTel = `${telPart1}-${telPart2}-${value}`;
|
||||
|
||||
if (isInteractive && formData && onFormDataChange && component.columnName) {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
[component.columnName]: fullTel,
|
||||
});
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, fullTel);
|
||||
}
|
||||
}}
|
||||
className={`h-full flex-1 rounded-md border px-3 py-2 text-center text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
|
||||
|
|
@ -523,11 +505,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
setUrlProtocol(newProtocol);
|
||||
const fullUrl = `${newProtocol}${urlDomain}`;
|
||||
|
||||
if (isInteractive && formData && onFormDataChange && component.columnName) {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
[component.columnName]: fullUrl,
|
||||
});
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, fullUrl);
|
||||
}
|
||||
}}
|
||||
className={`h-full w-[100px] cursor-pointer rounded-md border px-2 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
|
||||
|
|
@ -548,11 +527,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
setUrlDomain(newDomain);
|
||||
const fullUrl = `${urlProtocol}${newDomain}`;
|
||||
|
||||
if (isInteractive && formData && onFormDataChange && component.columnName) {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
[component.columnName]: fullUrl,
|
||||
});
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, fullUrl);
|
||||
}
|
||||
}}
|
||||
className={`h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
|
||||
|
|
@ -595,11 +571,8 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
required={componentConfig.required || false}
|
||||
readOnly={componentConfig.readonly || false}
|
||||
onChange={(e) => {
|
||||
if (isInteractive && formData && onFormDataChange && component.columnName) {
|
||||
onFormDataChange({
|
||||
...formData,
|
||||
[component.columnName]: e.target.value,
|
||||
});
|
||||
if (isInteractive && onFormDataChange && component.columnName) {
|
||||
onFormDataChange(component.columnName, e.target.value);
|
||||
}
|
||||
}}
|
||||
className={`box-border h-full w-full max-w-full resize-none rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none ${isSelected ? "border-blue-500 ring-2 ring-blue-100" : "border-gray-300"} ${componentConfig.disabled ? "bg-gray-100 text-gray-400" : "bg-white text-gray-900"} placeholder:text-gray-400 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 disabled:cursor-not-allowed`}
|
||||
|
|
@ -625,10 +598,13 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
|
||||
if (isInteractive && formData && component.columnName) {
|
||||
// 인터랙티브 모드: formData 우선, 없으면 자동생성 값
|
||||
displayValue = formData[component.columnName] || autoGeneratedValue || "";
|
||||
const rawValue = formData[component.columnName] || autoGeneratedValue || "";
|
||||
// 객체인 경우 빈 문자열로 변환 (에러 방지)
|
||||
displayValue = typeof rawValue === "object" ? "" : String(rawValue);
|
||||
} else {
|
||||
// 디자인 모드: component.value 우선, 없으면 자동생성 값
|
||||
displayValue = component.value || autoGeneratedValue || "";
|
||||
const rawValue = component.value || autoGeneratedValue || "";
|
||||
displayValue = typeof rawValue === "object" ? "" : String(rawValue);
|
||||
}
|
||||
|
||||
console.log("📄 Input 값 계산:", {
|
||||
|
|
@ -636,9 +612,11 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
hasFormData: !!formData,
|
||||
columnName: component.columnName,
|
||||
formDataValue: formData?.[component.columnName],
|
||||
formDataValueType: typeof formData?.[component.columnName],
|
||||
componentValue: component.value,
|
||||
autoGeneratedValue,
|
||||
finalDisplayValue: displayValue,
|
||||
isObject: typeof displayValue === "object",
|
||||
});
|
||||
|
||||
return displayValue;
|
||||
|
|
@ -670,23 +648,28 @@ export const TextInputComponent: React.FC<TextInputComponentProps> = ({
|
|||
|
||||
// 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),
|
||||
console.log(`✅ TextInputComponent onChange 조건 충족:`, {
|
||||
columnName: component.columnName,
|
||||
newValue,
|
||||
valueType: typeof newValue,
|
||||
isInteractive,
|
||||
hasOnFormDataChange: !!onFormDataChange,
|
||||
onFormDataChangeType: typeof onFormDataChange,
|
||||
});
|
||||
onFormDataChange(component.columnName, newValue);
|
||||
console.log(`✅ onFormDataChange 호출 완료`);
|
||||
} else {
|
||||
console.log("❌ TextInputComponent onFormDataChange 조건 미충족:", {
|
||||
isInteractive,
|
||||
hasOnFormDataChange: !!onFormDataChange,
|
||||
hasColumnName: !!component.columnName,
|
||||
columnName: component.columnName,
|
||||
});
|
||||
}
|
||||
|
||||
// 기존 onChange 핸들러도 호출
|
||||
// props.onChange는 DynamicComponentRenderer의 handleChange
|
||||
// 이벤트 객체 감지 및 값 추출 로직이 있으므로 안전하게 호출 가능
|
||||
if (props.onChange) {
|
||||
// console.log(`📤 TextInputComponent -> props.onChange 호출: "${newValue}"`);
|
||||
props.onChange(newValue);
|
||||
}
|
||||
}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue