149 lines
4.4 KiB
TypeScript
149 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/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";
|
|
|
|
interface LanguageModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSave: (languageData: any) => void;
|
|
languageData?: any;
|
|
}
|
|
|
|
export default function LanguageModal({ isOpen, onClose, onSave, languageData }: LanguageModalProps) {
|
|
const [formData, setFormData] = useState({
|
|
langCode: "",
|
|
langName: "",
|
|
langNative: "",
|
|
isActive: "Y",
|
|
sortOrder: 0,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (languageData) {
|
|
// 수정 모드
|
|
setFormData({
|
|
langCode: languageData.langCode || "",
|
|
langName: languageData.langName || "",
|
|
langNative: languageData.langNative || "",
|
|
isActive: languageData.isActive || "Y",
|
|
sortOrder: languageData.sortOrder || 0,
|
|
});
|
|
} else {
|
|
// 새 언어 추가 모드
|
|
setFormData({
|
|
langCode: "",
|
|
langName: "",
|
|
langNative: "",
|
|
isActive: "Y",
|
|
sortOrder: 0,
|
|
});
|
|
}
|
|
}, [languageData, isOpen]);
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onSave(formData);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setFormData({
|
|
langCode: "",
|
|
langName: "",
|
|
langNative: "",
|
|
isActive: "Y",
|
|
sortOrder: 0,
|
|
});
|
|
onClose();
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={handleClose}>
|
|
<DialogContent className="sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle>{languageData ? "언어 수정" : "새 언어 추가"}</DialogTitle>
|
|
</DialogHeader>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label htmlFor="langCode">언어 코드</Label>
|
|
<Input
|
|
id="langCode"
|
|
value={formData.langCode}
|
|
onChange={(e) => setFormData({ ...formData, langCode: e.target.value })}
|
|
placeholder="예: ko, en, ja"
|
|
required
|
|
disabled={!!languageData} // 수정 시에는 언어 코드 변경 불가
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="sortOrder">정렬 순서</Label>
|
|
<Input
|
|
id="sortOrder"
|
|
type="number"
|
|
value={formData.sortOrder}
|
|
onChange={(e) => setFormData({ ...formData, sortOrder: parseInt(e.target.value) || 0 })}
|
|
placeholder="0"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="langName">언어명 (영문)</Label>
|
|
<Input
|
|
id="langName"
|
|
value={formData.langName}
|
|
onChange={(e) => setFormData({ ...formData, langName: e.target.value })}
|
|
placeholder="예: Korean, English, Japanese"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="langNative">언어명 (원어)</Label>
|
|
<Input
|
|
id="langNative"
|
|
value={formData.langNative}
|
|
onChange={(e) => setFormData({ ...formData, langNative: e.target.value })}
|
|
placeholder="예: 한국어, English, 日本語"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="isActive">활성 상태</Label>
|
|
<Select value={formData.isActive} onValueChange={(value) => setFormData({ ...formData, isActive: value })}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="활성 상태 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="Y">활성</SelectItem>
|
|
<SelectItem value="N">비활성</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="flex justify-end space-x-2">
|
|
<Button type="button" variant="outline" onClick={handleClose}>
|
|
취소
|
|
</Button>
|
|
<Button type="submit">{languageData ? "수정" : "추가"}</Button>
|
|
</div>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|