컬럼 세부 타입 설정
This commit is contained in:
kjs
@@ -288,27 +288,132 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
|
||||
// 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-slate-600">
|
||||
{component.label}
|
||||
{component.required && <span className="text-red-500">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div className="flex h-10 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={`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`}
|
||||
/>
|
||||
|
||||
{/* 구분자 */}
|
||||
<span className="text-base font-medium text-gray-500">~</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={`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`}
|
||||
/>
|
||||
</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-slate-600">
|
||||
{component.label}
|
||||
{component.required && <span className="text-red-500">*</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={`h-10 w-full 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`}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={componentStyle} className={className} {...safeDomProps}>
|
||||
<div className={`relative w-full ${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 || "#64748b",
|
||||
fontWeight: "500",
|
||||
}}
|
||||
>
|
||||
<label className="absolute -top-6 left-0 text-sm font-medium text-slate-600">
|
||||
{component.label}
|
||||
{component.required && <span style={{ color: "#ef4444" }}>*</span>}
|
||||
{component.required && <span className="text-red-500">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<input
|
||||
type="date"
|
||||
type={inputType}
|
||||
value={formattedValue}
|
||||
placeholder={
|
||||
finalAutoGeneration?.enabled
|
||||
@@ -318,27 +423,7 @@ export const DateInputComponent: React.FC<DateInputComponentProps> = ({
|
||||
disabled={componentConfig.disabled || false}
|
||||
required={componentConfig.required || false}
|
||||
readOnly={componentConfig.readonly || finalAutoGeneration?.enabled || false}
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
border: "1px solid #d1d5db",
|
||||
borderRadius: "8px",
|
||||
padding: "8px 12px",
|
||||
fontSize: "14px",
|
||||
outline: "none",
|
||||
transition: "all 0.2s ease-in-out",
|
||||
boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
||||
// isInteractive 모드에서는 사용자 스타일 우선 적용
|
||||
...(isInteractive && component.style ? component.style : {}),
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.target.style.borderColor = "#f97316";
|
||||
e.target.style.boxShadow = "0 0 0 3px rgba(249, 115, 22, 0.1)";
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.target.style.borderColor = "#d1d5db";
|
||||
e.target.style.boxShadow = "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
|
||||
}}
|
||||
className={`h-10 w-full rounded-md border px-3 py-2 text-sm shadow-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`}
|
||||
onClick={handleClick}
|
||||
onDragStart={onDragStart}
|
||||
onDragEnd={onDragEnd}
|
||||
|
||||
Reference in New Issue
Block a user