jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

테스트테이블 생성 및 오류 수정

Browse Source
This commit is contained in:
kjs
2025-09-19 02:15:21 +09:00
parent ddcecfd5e2
commit f7d884568b
20 changed files with 1024 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
frontend/lib/registry/components/date-input/DateInputComponent.tsx
View File

@@ -3,9 +3,11 @@
import React from "react";
import { ComponentRendererProps } from "@/types/component";
import { DateInputConfig } from "./types";
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
export interface DateInputComponentProps extends ComponentRendererProps {
config?: DateInputConfig;
value?: any; // 외부에서 전달받는 값
}
/**
@@ -25,6 +27,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
style,
formData,
onFormDataChange,
value: externalValue, // 외부에서 전달받은 값
...props
}) => {
// 컴포넌트 설정
@@ -33,6 +36,92 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
...component.config,
} as DateInputConfig;
// 날짜 값 계산 및 디버깅
const fieldName = component.columnName || component.id;
const rawValue =
externalValue !== undefined
? externalValue
: isInteractive && formData && component.columnName
? formData[component.columnName]
: component.value;
console.log("🔍 DateInputComponent 값 디버깅:", {
componentId: component.id,
fieldName,
externalValue,
formDataValue: formData?.[component.columnName || ""],
componentValue: component.value,
rawValue,
isInteractive,
hasFormData: !!formData,
});
// 날짜 형식 변환 함수 (HTML input[type="date"]는 YYYY-MM-DD 형식만 허용)
const formatDateForInput = (dateValue: any): string => {
if (!dateValue) return "";
const dateStr = String(dateValue);
// 이미 YYYY-MM-DD 형식인 경우
if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
return dateStr;
}
// YYYY-MM-DD HH:mm:ss 형식에서 날짜 부분만 추출
if (/^\d{4}-\d{2}-\d{2}\s/.test(dateStr)) {
return dateStr.split(" ")[0];
}
// YYYY/MM/DD 형식
if (/^\d{4}\/\d{2}\/\d{2}$/.test(dateStr)) {
return dateStr.replace(/\//g, "-");
}
// MM/DD/YYYY 형식
if (/^\d{2}\/\d{2}\/\d{4}$/.test(dateStr)) {
const [month, day, year] = dateStr.split("/");
return `${year}-${month}-${day}`;
}
// DD-MM-YYYY 형식
if (/^\d{2}-\d{2}-\d{4}$/.test(dateStr)) {
const [day, month, year] = dateStr.split("-");
return `${year}-${month}-${day}`;
}
// ISO 8601 날짜 (2023-12-31T00:00:00.000Z 등)
if (/^\d{4}-\d{2}-\d{2}T/.test(dateStr)) {
return dateStr.split("T")[0];
}
// 다른 형식의 날짜 문자열이나 Date 객체 처리
try {
const date = new Date(dateValue);
if (isNaN(date.getTime())) {
console.warn("🚨 DateInputComponent - 유효하지 않은 날짜:", dateValue);
return "";
}
// YYYY-MM-DD 형식으로 변환 (로컬 시간대 사용)
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
const formattedDate = `${year}-${month}-${day}`;
console.log("📅 날짜 형식 변환:", {
원본: dateValue,
변환후: formattedDate,
});
return formattedDate;
} catch (error) {
console.error("🚨 DateInputComponent - 날짜 변환 오류:", error, "원본:", dateValue);
return "";
}
};
const formattedValue = formatDateForInput(rawValue);
// 스타일 계산 (위치는 RealtimePreviewDynamic에서 처리하므로 제외)
const componentStyle: React.CSSProperties = {
width: "100%",
@@ -74,10 +163,13 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
...domProps
} = props;
// DOM 안전한 props만 필터링
const safeDomProps = filterDOMProps(domProps);
return (
<div style={componentStyle} className={className} {...domProps}>
<div style={componentStyle} className={className} {...safeDomProps}>
{/* 라벨 렌더링 */}
{component.label && (
{component.label && component.style?.labelDisplay !== false && (
<label
style={{
position: "absolute",
@@ -86,17 +178,15 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
fontSize: component.style?.labelFontSize || "14px",
color: component.style?.labelColor || "#374151",
fontWeight: "500",
// isInteractive 모드에서는 사용자 스타일 우선 적용
...(isInteractive && component.style ? component.style : {}),
}}
>
{component.label}
{component.required && (
<span style={{
color: "#ef4444",
// isInteractive 모드에서는 사용자 스타일 우선 적용
...(isInteractive && component.style ? component.style : {}),
}}>
<span
style={{
color: "#ef4444",
}}
>
*
</span>
)}
@@ -105,12 +195,13 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
<input
type="date"
value={component.value || ""}
value={formattedValue}
placeholder={componentConfig.placeholder || ""}
disabled={componentConfig.disabled || false}
required={componentConfig.required || false}
readOnly={componentConfig.readonly || false}
style={{width: "100%",
style={{
width: "100%",
height: "100%",
border: "1px solid #d1d5db",
borderRadius: "4px",
@@ -118,13 +209,36 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
fontSize: "14px",
outline: "none",
// isInteractive 모드에서는 사용자 스타일 우선 적용
...(isInteractive && component.style ? component.style : {}),}}
...(isInteractive && component.style ? component.style : {}),
}}
onClick={handleClick}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
onChange={(e) => {
if (component.onChange) {
component.onChange(e.target.value);
const newValue = e.target.value;
console.log("🎯 DateInputComponent onChange 호출:", {
componentId: component.id,
columnName: component.columnName,
newValue,
isInteractive,
hasOnFormDataChange: !!onFormDataChange,
hasOnChange: !!props.onChange,
});
// isInteractive 모드에서는 formData 업데이트
if (isInteractive && onFormDataChange && component.columnName) {
console.log(`📤 DateInputComponent -> onFormDataChange 호출: ${component.columnName} = "${newValue}"`);
onFormDataChange(component.columnName, newValue);
}
// 디자인 모드에서는 component.onChange 호출
else if (component.onChange) {
console.log(`📤 DateInputComponent -> component.onChange 호출: ${newValue}`);
component.onChange(newValue);
}
// props.onChange가 있으면 호출 (호환성)
else if (props.onChange) {
console.log(`📤 DateInputComponent -> props.onChange 호출: ${newValue}`);
props.onChange(newValue);
}
}}
/>