138 lines
4.0 KiB
TypeScript
138 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
ResizableDialog,
|
|
ResizableDialogContent,
|
|
ResizableDialogHeader,
|
|
ResizableDialogTitle,
|
|
ResizableDialogFooter,
|
|
} from "@/components/ui/resizable-dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
|
|
interface LangKeyModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSave: (keyData: any) => void;
|
|
keyData?: any;
|
|
companies: Array<{ code: string; name: string }>;
|
|
}
|
|
|
|
export default function LangKeyModal({ isOpen, onClose, onSave, keyData, companies }: LangKeyModalProps) {
|
|
const [formData, setFormData] = useState({
|
|
companyCode: "",
|
|
menuName: "",
|
|
langKey: "",
|
|
description: "",
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (keyData) {
|
|
// 수정 모드
|
|
setFormData({
|
|
companyCode: keyData.companyCode || "",
|
|
menuName: keyData.menuName || "",
|
|
langKey: keyData.langKey || "",
|
|
description: keyData.description || "",
|
|
});
|
|
} else {
|
|
// 새 키 추가 모드 - 기본값 설정
|
|
setFormData({
|
|
companyCode: "",
|
|
menuName: "",
|
|
langKey: "",
|
|
description: "",
|
|
});
|
|
}
|
|
}, [keyData, isOpen]);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onSave(formData);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setFormData({
|
|
companyCode: "",
|
|
menuName: "",
|
|
langKey: "",
|
|
description: "",
|
|
});
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<ResizableDialog open={isOpen} onOpenChange={handleClose}>
|
|
<ResizableDialogContent className="sm:max-w-[500px]">
|
|
<ResizableDialogHeader>
|
|
<ResizableDialogTitle>{keyData ? "언어 키 수정" : "새 언어 키 추가"}</ResizableDialogTitle>
|
|
</ResizableDialogHeader>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div>
|
|
<Label htmlFor="companyCode">회사</Label>
|
|
<Select
|
|
value={formData.companyCode}
|
|
onValueChange={(value) => setFormData({ ...formData, companyCode: value })}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="회사 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{companies.map((company) => (
|
|
<SelectItem key={company.code} value={company.code}>
|
|
{company.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="menuName">메뉴명</Label>
|
|
<Input
|
|
id="menuName"
|
|
value={formData.menuName}
|
|
onChange={(e) => setFormData({ ...formData, menuName: e.target.value })}
|
|
placeholder="메뉴명 입력"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="langKey">언어 키</Label>
|
|
<Input
|
|
id="langKey"
|
|
value={formData.langKey}
|
|
onChange={(e) => setFormData({ ...formData, langKey: e.target.value })}
|
|
placeholder="언어 키 입력"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="description">설명</Label>
|
|
<Textarea
|
|
id="description"
|
|
value={formData.description}
|
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
|
placeholder="키에 대한 설명 입력"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-2">
|
|
<Button type="button" variant="outline" onClick={handleClose}>
|
|
취소
|
|
</Button>
|
|
<Button type="submit">{keyData ? "수정" : "추가"}</Button>
|
|
</div>
|
|
</form>
|
|
</ResizableDialogContent>
|
|
</ResizableDialog>
|
|
);
|
|
}
|