259 lines
10 KiB
TypeScript
259 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { DateInputConfig } from "./types";
|
|
import { AutoGenerationType, AutoGenerationConfig } from "@/types/screen";
|
|
import { AutoGenerationUtils } from "@/lib/utils/autoGeneration";
|
|
|
|
export interface DateInputConfigPanelProps {
|
|
config: DateInputConfig;
|
|
onChange: (config: Partial<DateInputConfig>) => void;
|
|
}
|
|
|
|
/**
|
|
* DateInput 설정 패널
|
|
* 컴포넌트의 설정값들을 편집할 수 있는 UI 제공
|
|
*/
|
|
export const DateInputConfigPanel: React.FC<DateInputConfigPanelProps> = ({ config, onChange }) => {
|
|
const handleChange = (key: keyof DateInputConfig, value: any) => {
|
|
console.log("🔧 DateInputConfigPanel.handleChange:", { key, value });
|
|
onChange({ [key]: value });
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="text-sm font-medium">date-input 설정</div>
|
|
|
|
{/* date 관련 설정 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="placeholder">플레이스홀더</Label>
|
|
<Input
|
|
id="placeholder"
|
|
value={config.placeholder || ""}
|
|
onChange={(e) => handleChange("placeholder", e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 공통 설정 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="disabled">비활성화</Label>
|
|
<Checkbox
|
|
id="disabled"
|
|
checked={config.disabled || false}
|
|
onCheckedChange={(checked) => handleChange("disabled", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="required">필수 입력</Label>
|
|
<Checkbox
|
|
id="required"
|
|
checked={config.required || false}
|
|
onCheckedChange={(checked) => handleChange("required", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="readonly">읽기 전용</Label>
|
|
<Checkbox
|
|
id="readonly"
|
|
checked={config.readonly || false}
|
|
onCheckedChange={(checked) => handleChange("readonly", checked)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 숨김 기능 */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="hidden">숨김</Label>
|
|
<Checkbox
|
|
id="hidden"
|
|
checked={config.hidden || false}
|
|
onCheckedChange={(checked) => handleChange("hidden", checked)}
|
|
/>
|
|
<p className="text-xs text-gray-500">편집기에서는 연하게 보이지만 실제 화면에서는 숨겨집니다</p>
|
|
</div>
|
|
|
|
{/* 자동생성 기능 */}
|
|
<div className="space-y-3 border-t pt-3">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="autoGeneration">자동생성</Label>
|
|
<Checkbox
|
|
id="autoGeneration"
|
|
checked={config.autoGeneration?.enabled || false}
|
|
onCheckedChange={(checked) => {
|
|
const newAutoGeneration: AutoGenerationConfig = {
|
|
...config.autoGeneration,
|
|
enabled: checked as boolean,
|
|
type: config.autoGeneration?.type || "current_time",
|
|
};
|
|
handleChange("autoGeneration", newAutoGeneration);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{config.autoGeneration?.enabled && (
|
|
<>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="autoGenerationType">자동생성 타입</Label>
|
|
<Select
|
|
value={config.autoGeneration?.type || "current_time"}
|
|
onValueChange={(value: AutoGenerationType) => {
|
|
const newAutoGeneration: AutoGenerationConfig = {
|
|
...config.autoGeneration,
|
|
type: value,
|
|
options: value === "current_time" ? { format: "date" } : {},
|
|
};
|
|
handleChange("autoGeneration", newAutoGeneration);
|
|
}}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="current_time">현재 날짜/시간</SelectItem>
|
|
<SelectItem value="uuid">UUID</SelectItem>
|
|
<SelectItem value="current_user">현재 사용자</SelectItem>
|
|
<SelectItem value="sequence">순차 번호</SelectItem>
|
|
<SelectItem value="random_string">랜덤 문자열</SelectItem>
|
|
<SelectItem value="random_number">랜덤 숫자</SelectItem>
|
|
<SelectItem value="company_code">회사 코드</SelectItem>
|
|
<SelectItem value="department">부서 코드</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-xs text-gray-500">
|
|
{AutoGenerationUtils.getTypeDescription(config.autoGeneration?.type || "current_time")}
|
|
</p>
|
|
</div>
|
|
|
|
{config.autoGeneration?.type === "current_time" && (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="dateFormat">날짜 형식</Label>
|
|
<Select
|
|
value={config.autoGeneration?.options?.format || "date"}
|
|
onValueChange={(value) => {
|
|
const newAutoGeneration: AutoGenerationConfig = {
|
|
...config.autoGeneration!,
|
|
options: {
|
|
...config.autoGeneration?.options,
|
|
format: value,
|
|
},
|
|
};
|
|
handleChange("autoGeneration", newAutoGeneration);
|
|
}}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="date">날짜만 (YYYY-MM-DD)</SelectItem>
|
|
<SelectItem value="datetime">날짜+시간 (YYYY-MM-DD HH:mm:ss)</SelectItem>
|
|
<SelectItem value="time">시간만 (HH:mm:ss)</SelectItem>
|
|
<SelectItem value="timestamp">타임스탬프</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
{(config.autoGeneration?.type === "sequence" ||
|
|
config.autoGeneration?.type === "random_string" ||
|
|
config.autoGeneration?.type === "random_number") && (
|
|
<>
|
|
{config.autoGeneration?.type === "sequence" && (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="startValue">시작값</Label>
|
|
<Input
|
|
id="startValue"
|
|
type="number"
|
|
value={config.autoGeneration?.options?.startValue || 1}
|
|
onChange={(e) => {
|
|
const newAutoGeneration: AutoGenerationConfig = {
|
|
...config.autoGeneration!,
|
|
options: {
|
|
...config.autoGeneration?.options,
|
|
startValue: parseInt(e.target.value) || 1,
|
|
},
|
|
};
|
|
handleChange("autoGeneration", newAutoGeneration);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{(config.autoGeneration?.type === "random_string" ||
|
|
config.autoGeneration?.type === "random_number") && (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="length">길이</Label>
|
|
<Input
|
|
id="length"
|
|
type="number"
|
|
value={
|
|
config.autoGeneration?.options?.length ||
|
|
(config.autoGeneration?.type === "random_string" ? 8 : 6)
|
|
}
|
|
onChange={(e) => {
|
|
const newAutoGeneration: AutoGenerationConfig = {
|
|
...config.autoGeneration!,
|
|
options: {
|
|
...config.autoGeneration?.options,
|
|
length: parseInt(e.target.value) || 8,
|
|
},
|
|
};
|
|
handleChange("autoGeneration", newAutoGeneration);
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="prefix">접두사</Label>
|
|
<Input
|
|
id="prefix"
|
|
value={config.autoGeneration?.options?.prefix || ""}
|
|
onChange={(e) => {
|
|
const newAutoGeneration: AutoGenerationConfig = {
|
|
...config.autoGeneration!,
|
|
options: {
|
|
...config.autoGeneration?.options,
|
|
prefix: e.target.value,
|
|
},
|
|
};
|
|
handleChange("autoGeneration", newAutoGeneration);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="suffix">접미사</Label>
|
|
<Input
|
|
id="suffix"
|
|
value={config.autoGeneration?.options?.suffix || ""}
|
|
onChange={(e) => {
|
|
const newAutoGeneration: AutoGenerationConfig = {
|
|
...config.autoGeneration!,
|
|
options: {
|
|
...config.autoGeneration?.options,
|
|
suffix: e.target.value,
|
|
},
|
|
};
|
|
handleChange("autoGeneration", newAutoGeneration);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
<div className="rounded bg-gray-50 p-2 text-xs">
|
|
<strong>미리보기:</strong> {AutoGenerationUtils.generatePreviewValue(config.autoGeneration)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|