453 lines
16 KiB
TypeScript
453 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { ComponentRendererProps } from "@/types/component";
|
|
import { DateInputConfig } from "./types";
|
|
import { filterDOMProps } from "@/lib/utils/domPropsFilter";
|
|
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
|
|
import { AutoGenerationConfig } from "@/types/screen";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface DateInputComponentProps extends ComponentRendererProps {
|
|
config?: DateInputConfig;
|
|
value?: any; // 외부에서 전달받는 값
|
|
autoGeneration?: AutoGenerationConfig;
|
|
hidden?: boolean;
|
|
}
|
|
|
|
/**
|
|
* DateInput 컴포넌트
|
|
* date-input 컴포넌트입니다
|
|
*/
|
|
export const DateInputComponent: React.FC<DateInputComponentProps> = ({
|
|
component,
|
|
isDesignMode = false,
|
|
isSelected = false,
|
|
isInteractive = false,
|
|
onClick,
|
|
onDragStart,
|
|
onDragEnd,
|
|
config,
|
|
className,
|
|
style,
|
|
formData,
|
|
onFormDataChange,
|
|
value: externalValue, // 외부에서 전달받은 값
|
|
autoGeneration,
|
|
hidden,
|
|
...props
|
|
}) => {
|
|
// 컴포넌트 설정
|
|
const componentConfig = {
|
|
...config,
|
|
...component.config,
|
|
} as DateInputConfig;
|
|
|
|
// 🎯 자동생성 상태 관리
|
|
const [autoGeneratedValue, setAutoGeneratedValue] = useState<string>("");
|
|
|
|
// 자동생성 설정 (props 우선, 컴포넌트 설정 폴백)
|
|
const finalAutoGeneration = autoGeneration || component.autoGeneration;
|
|
const finalHidden = hidden !== undefined ? hidden : component.hidden;
|
|
|
|
// 자동생성 로직
|
|
useEffect(() => {
|
|
if (finalAutoGeneration?.enabled) {
|
|
const today = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
|
|
setAutoGeneratedValue(today);
|
|
|
|
// 인터랙티브 모드에서 폼 데이터에도 설정
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, today);
|
|
}
|
|
}
|
|
|
|
// 원래 자동생성 로직 (주석 처리)
|
|
/*
|
|
if (finalAutoGeneration?.enabled && finalAutoGeneration.type !== "none") {
|
|
const fieldName = component.columnName || component.id;
|
|
const generatedValue = AutoGenerationUtils.generateValue(finalAutoGeneration, fieldName);
|
|
|
|
console.log("🎯 DateInputComponent 자동생성 시도:", {
|
|
componentId: component.id,
|
|
fieldName,
|
|
type: finalAutoGeneration.type,
|
|
options: finalAutoGeneration.options,
|
|
generatedValue,
|
|
isInteractive,
|
|
isDesignMode,
|
|
});
|
|
|
|
if (generatedValue) {
|
|
console.log("✅ DateInputComponent 자동생성 성공:", generatedValue);
|
|
setAutoGeneratedValue(generatedValue);
|
|
|
|
// 인터랙티브 모드에서 폼 데이터 업데이트
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
const currentValue = formData?.[component.columnName];
|
|
if (!currentValue) {
|
|
console.log("📤 DateInputComponent -> onFormDataChange 호출:", component.columnName, generatedValue);
|
|
onFormDataChange(component.columnName, generatedValue);
|
|
} else {
|
|
console.log("⚠️ DateInputComponent 기존 값이 있어서 자동생성 스킵:", currentValue);
|
|
}
|
|
} else {
|
|
console.log("⚠️ DateInputComponent 자동생성 조건 불만족:", {
|
|
isInteractive,
|
|
hasOnFormDataChange: !!onFormDataChange,
|
|
hasColumnName: !!component.columnName,
|
|
});
|
|
}
|
|
} else {
|
|
console.log("❌ DateInputComponent 자동생성 실패: generatedValue가 null");
|
|
}
|
|
} else {
|
|
console.log("⚠️ DateInputComponent 자동생성 비활성화:", {
|
|
enabled: finalAutoGeneration?.enabled,
|
|
type: finalAutoGeneration?.type,
|
|
});
|
|
}
|
|
*/
|
|
}, [
|
|
finalAutoGeneration?.enabled,
|
|
finalAutoGeneration?.type,
|
|
finalAutoGeneration?.options,
|
|
component.id,
|
|
component.columnName,
|
|
isInteractive,
|
|
]);
|
|
|
|
// 날짜 값 계산 및 디버깅
|
|
const fieldName = component.columnName || component.id;
|
|
|
|
// 값 우선순위: externalValue > formData > autoGeneratedValue > component.value
|
|
let rawValue: any;
|
|
if (externalValue !== undefined) {
|
|
rawValue = externalValue;
|
|
} else if (isInteractive && formData && component.columnName && formData[component.columnName]) {
|
|
rawValue = formData[component.columnName];
|
|
} else if (autoGeneratedValue) {
|
|
rawValue = autoGeneratedValue;
|
|
} else {
|
|
rawValue = component.value;
|
|
}
|
|
|
|
// 날짜 형식 변환 함수 (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%",
|
|
height: "100%",
|
|
...component.style,
|
|
...style,
|
|
// width는 항상 100%로 고정 (부모 컨테이너가 gridColumns로 크기 제어)
|
|
width: "100%",
|
|
};
|
|
|
|
// 디자인 모드 스타일
|
|
if (isDesignMode) {
|
|
componentStyle.border = "1px dashed hsl(var(--border))";
|
|
componentStyle.borderColor = isSelected ? "hsl(var(--ring))" : "hsl(var(--border))";
|
|
}
|
|
|
|
// 이벤트 핸들러
|
|
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);
|
|
|
|
// webType에 따른 실제 input type 결정
|
|
const webType = component.componentConfig?.webType || "date";
|
|
const inputType = (() => {
|
|
switch (webType) {
|
|
case "datetime":
|
|
return "datetime-local";
|
|
case "time":
|
|
return "time";
|
|
case "month":
|
|
return "month";
|
|
case "year":
|
|
return "number";
|
|
case "date":
|
|
default:
|
|
return "date";
|
|
}
|
|
})();
|
|
|
|
// daterange 시작일/종료일 분리 (최상위에서 계산)
|
|
const [dateRangeStart, dateRangeEnd] = React.useMemo(() => {
|
|
if (webType === "daterange" && typeof rawValue === "string" && rawValue.includes("~")) {
|
|
return rawValue.split("~").map((d) => d.trim());
|
|
}
|
|
return ["", ""];
|
|
}, [webType, rawValue]);
|
|
|
|
// daterange 타입 전용 UI
|
|
if (webType === "daterange") {
|
|
return (
|
|
<div className={`relative w-full ${className || ""}`} {...safeDomProps}>
|
|
{/* 라벨 렌더링 */}
|
|
{component.label && component.style?.labelDisplay !== false && (
|
|
<label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
|
|
{component.label}
|
|
{component.required && <span className="text-destructive">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<div className="box-border flex h-full w-full items-center gap-2">
|
|
{/* 시작일 */}
|
|
<input
|
|
type="date"
|
|
value={dateRangeStart}
|
|
disabled={componentConfig.disabled || false}
|
|
readOnly={componentConfig.readonly || false}
|
|
onChange={(e) => {
|
|
const newStartDate = e.target.value;
|
|
const newValue = `${newStartDate} ~ ${dateRangeEnd}`;
|
|
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, newValue);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
"placeholder:text-muted-foreground",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
/>
|
|
|
|
{/* 구분자 */}
|
|
<span className="text-base font-medium text-muted-foreground">~</span>
|
|
|
|
{/* 종료일 */}
|
|
<input
|
|
type="date"
|
|
value={dateRangeEnd}
|
|
disabled={componentConfig.disabled || false}
|
|
readOnly={componentConfig.readonly || false}
|
|
onChange={(e) => {
|
|
const newEndDate = e.target.value;
|
|
const newValue = `${dateRangeStart} ~ ${newEndDate}`;
|
|
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, newValue);
|
|
}
|
|
}}
|
|
className={cn(
|
|
"h-full flex-1 rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
"placeholder:text-muted-foreground",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// year 타입 전용 UI (number input with YYYY format)
|
|
if (webType === "year") {
|
|
return (
|
|
<div className={`relative w-full ${className || ""}`} {...safeDomProps}>
|
|
{/* 라벨 렌더링 */}
|
|
{component.label && component.style?.labelDisplay !== false && (
|
|
<label className="absolute -top-6 left-0 text-sm font-medium text-muted-foreground">
|
|
{component.label}
|
|
{component.required && <span className="text-destructive">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<input
|
|
type="number"
|
|
value={rawValue}
|
|
placeholder="YYYY"
|
|
min="1900"
|
|
max="2100"
|
|
disabled={componentConfig.disabled || false}
|
|
readOnly={componentConfig.readonly || false}
|
|
onChange={(e) => {
|
|
const year = e.target.value;
|
|
if (year.length <= 4) {
|
|
if (isInteractive && onFormDataChange && component.columnName) {
|
|
onFormDataChange(component.columnName, year);
|
|
}
|
|
}
|
|
}}
|
|
className={cn(
|
|
"box-border h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
"placeholder:text-muted-foreground",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`relative w-full ${className || ""}`} {...safeDomProps}>
|
|
{/* 라벨 렌더링 */}
|
|
{component.label && component.style?.labelDisplay !== false && (
|
|
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
|
|
{component.label}
|
|
{component.required && <span className="text-red-500">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<input
|
|
type={inputType}
|
|
value={formattedValue}
|
|
placeholder={
|
|
finalAutoGeneration?.enabled
|
|
? `자동생성: ${AutoGenerationUtils.getTypeDescription(finalAutoGeneration.type)}`
|
|
: componentConfig.placeholder || ""
|
|
}
|
|
disabled={componentConfig.disabled || false}
|
|
required={componentConfig.required || false}
|
|
readOnly={componentConfig.readonly || finalAutoGeneration?.enabled || false}
|
|
className={cn(
|
|
"box-border h-full w-full rounded-md border px-3 py-2 text-sm transition-all duration-200 outline-none",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
"placeholder:text-muted-foreground",
|
|
isSelected ? "border-ring ring-2 ring-ring/50" : "border-input",
|
|
componentConfig.disabled ? "bg-muted text-muted-foreground cursor-not-allowed opacity-50" : "bg-background text-foreground",
|
|
"disabled:cursor-not-allowed"
|
|
)}
|
|
onClick={handleClick}
|
|
onDragStart={onDragStart}
|
|
onDragEnd={onDragEnd}
|
|
onChange={(e) => {
|
|
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);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* DateInput 래퍼 컴포넌트
|
|
* 추가적인 로직이나 상태 관리가 필요한 경우 사용
|
|
*/
|
|
export const DateInputWrapper: React.FC<DateInputComponentProps> = (props) => {
|
|
return <DateInputComponent {...props} />;
|
|
};
|