264 lines
10 KiB
TypeScript
264 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 dateString = localConfig.showTime
|
||
|
|
? now.toISOString().slice(0, 16) // YYYY-MM-DDTHH:mm
|
||
|
|
: now.toISOString().slice(0, 10); // YYYY-MM-DD
|
||
|
|
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-sm">
|
||
|
|
<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";
|
||
|
|
|
||
|
|
|