ae4fe7a66e
- Added new entries to .gitignore for multi-agent MCP task queue and related rules. - Removed "즉시 저장" (quick insert) options from the ScreenSettingModal and BasicTab components to streamline button configurations. - Cleaned up unused event options in the V2ButtonConfigPanel to enhance clarity and maintainability. These changes aim to improve project organization and simplify the user interface by eliminating redundant options.
266 lines
10 KiB
TypeScript
266 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Calendar } from "lucide-react";
|
|
import { WebTypeConfigPanelProps } from "@/lib/registry/types";
|
|
import { WidgetComponent, DateTypeConfig } from "@/types/screen";
|
|
|
|
export const DateConfigPanel: React.FC<WebTypeConfigPanelProps> = ({
|
|
component,
|
|
onUpdateComponent,
|
|
onUpdateProperty,
|
|
}) => {
|
|
const widget = component as WidgetComponent;
|
|
const config = (widget.webTypeConfig as DateTypeConfig) || {};
|
|
|
|
// 로컬 상태
|
|
const [localConfig, setLocalConfig] = useState<DateTypeConfig>({
|
|
format: config.format || "YYYY-MM-DD",
|
|
showTime: config.showTime || false,
|
|
minDate: config.minDate || "",
|
|
maxDate: config.maxDate || "",
|
|
defaultValue: config.defaultValue || "",
|
|
placeholder: config.placeholder || "",
|
|
required: config.required || false,
|
|
readonly: config.readonly || false,
|
|
});
|
|
|
|
// 컴포넌트 변경 시 로컬 상태 동기화
|
|
useEffect(() => {
|
|
const currentConfig = (widget.webTypeConfig as DateTypeConfig) || {};
|
|
setLocalConfig({
|
|
format: currentConfig.format || "YYYY-MM-DD",
|
|
showTime: currentConfig.showTime || false,
|
|
minDate: currentConfig.minDate || "",
|
|
maxDate: currentConfig.maxDate || "",
|
|
defaultValue: currentConfig.defaultValue || "",
|
|
placeholder: currentConfig.placeholder || "",
|
|
required: currentConfig.required || false,
|
|
readonly: currentConfig.readonly || false,
|
|
});
|
|
}, [widget.webTypeConfig]);
|
|
|
|
// 설정 업데이트 핸들러
|
|
const updateConfig = (field: keyof DateTypeConfig, value: any) => {
|
|
const newConfig = { ...localConfig, [field]: value };
|
|
setLocalConfig(newConfig);
|
|
onUpdateProperty("webTypeConfig", newConfig);
|
|
};
|
|
|
|
// 현재 날짜 설정
|
|
const setCurrentDate = (field: "minDate" | "maxDate" | "defaultValue") => {
|
|
const now = new Date();
|
|
const pad = (n: number) => String(n).padStart(2, "0");
|
|
const d = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
|
|
const dateString = localConfig.showTime
|
|
? `${d}T${pad(now.getHours())}:${pad(now.getMinutes())}`
|
|
: d;
|
|
updateConfig(field, dateString);
|
|
};
|
|
|
|
// 날짜 형식 옵션
|
|
const formatOptions = [
|
|
{ value: "YYYY-MM-DD", label: "2024-12-25", description: "ISO 표준 형식" },
|
|
{ value: "YYYY-MM-DD HH:mm", label: "2024-12-25 14:30", description: "날짜 + 시간" },
|
|
{ value: "YYYY-MM-DD HH:mm:ss", label: "2024-12-25 14:30:45", description: "날짜 + 시간 + 초" },
|
|
{ value: "DD/MM/YYYY", label: "25/12/2024", description: "유럽 형식" },
|
|
{ value: "MM/DD/YYYY", label: "12/25/2024", description: "미국 형식" },
|
|
{ value: "YYYY년 MM월 DD일", label: "2024년 12월 25일", description: "한국 형식" },
|
|
];
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-xs">
|
|
<Calendar className="h-4 w-4" />
|
|
날짜 설정
|
|
</CardTitle>
|
|
<CardDescription className="text-xs">날짜/시간 입력 필드의 세부 설정을 관리합니다.</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* 기본 설정 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">기본 설정</h4>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="placeholder" className="text-xs">
|
|
플레이스홀더
|
|
</Label>
|
|
<Input
|
|
id="placeholder"
|
|
value={localConfig.placeholder || ""}
|
|
onChange={(e) => updateConfig("placeholder", e.target.value)}
|
|
placeholder="날짜를 선택하세요"
|
|
className="text-xs"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="format" className="text-xs">
|
|
날짜 형식
|
|
</Label>
|
|
<Select value={localConfig.format || "YYYY-MM-DD"} onValueChange={(value) => updateConfig("format", value)}>
|
|
<SelectTrigger className="text-xs">
|
|
<SelectValue placeholder="형식 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{formatOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
<div className="flex flex-col">
|
|
<span>{option.label}</span>
|
|
<span className="text-muted-foreground text-xs">{option.description}</span>
|
|
</div>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="showTime" className="text-xs">
|
|
시간 포함
|
|
</Label>
|
|
<p className="text-muted-foreground text-xs">날짜와 함께 시간도 입력받습니다.</p>
|
|
</div>
|
|
<Switch
|
|
id="showTime"
|
|
checked={localConfig.showTime || false}
|
|
onCheckedChange={(checked) => updateConfig("showTime", checked)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 날짜 범위 설정 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">날짜 범위</h4>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="minDate" className="text-xs">
|
|
최소 날짜
|
|
</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="minDate"
|
|
type={localConfig.showTime ? "datetime-local" : "date"}
|
|
value={localConfig.minDate || ""}
|
|
onChange={(e) => updateConfig("minDate", e.target.value)}
|
|
className="flex-1 text-xs"
|
|
/>
|
|
<Button size="sm" variant="outline" onClick={() => setCurrentDate("minDate")} className="text-xs">
|
|
오늘
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="maxDate" className="text-xs">
|
|
최대 날짜
|
|
</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="maxDate"
|
|
type={localConfig.showTime ? "datetime-local" : "date"}
|
|
value={localConfig.maxDate || ""}
|
|
onChange={(e) => updateConfig("maxDate", e.target.value)}
|
|
className="flex-1 text-xs"
|
|
/>
|
|
<Button size="sm" variant="outline" onClick={() => setCurrentDate("maxDate")} className="text-xs">
|
|
오늘
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 기본값 설정 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">기본값</h4>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="defaultValue" className="text-xs">
|
|
기본 날짜
|
|
</Label>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
id="defaultValue"
|
|
type={localConfig.showTime ? "datetime-local" : "date"}
|
|
value={localConfig.defaultValue || ""}
|
|
onChange={(e) => updateConfig("defaultValue", e.target.value)}
|
|
className="flex-1 text-xs"
|
|
/>
|
|
<Button size="sm" variant="outline" onClick={() => setCurrentDate("defaultValue")} className="text-xs">
|
|
현재
|
|
</Button>
|
|
</div>
|
|
<p className="text-muted-foreground text-xs">입력 필드의 초기값으로 사용됩니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 상태 설정 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">상태 설정</h4>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="required" className="text-xs">
|
|
필수 입력
|
|
</Label>
|
|
<p className="text-muted-foreground text-xs">날짜가 선택되어야 합니다.</p>
|
|
</div>
|
|
<Switch
|
|
id="required"
|
|
checked={localConfig.required || false}
|
|
onCheckedChange={(checked) => updateConfig("required", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="readonly" className="text-xs">
|
|
읽기 전용
|
|
</Label>
|
|
<p className="text-muted-foreground text-xs">날짜를 수정할 수 없습니다.</p>
|
|
</div>
|
|
<Switch
|
|
id="readonly"
|
|
checked={localConfig.readonly || false}
|
|
onCheckedChange={(checked) => updateConfig("readonly", checked)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 미리보기 */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">미리보기</h4>
|
|
<div className="bg-muted/50 rounded-md border p-3">
|
|
<Input
|
|
type={localConfig.showTime ? "datetime-local" : "date"}
|
|
placeholder={localConfig.placeholder || "날짜 선택 미리보기"}
|
|
disabled={localConfig.readonly}
|
|
required={localConfig.required}
|
|
min={localConfig.minDate}
|
|
max={localConfig.maxDate}
|
|
defaultValue={localConfig.defaultValue}
|
|
className="text-xs"
|
|
/>
|
|
<div className="text-muted-foreground mt-2 text-xs">
|
|
형식: {localConfig.format}
|
|
{localConfig.showTime && " (시간 포함)"}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
DateConfigPanel.displayName = "DateConfigPanel";
|
|
|
|
|