최초커밋

frontend/components/admin/LanguageModal.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } 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>
+  );
+}
+