최초커밋

2025-08-21 09:41:46 +09:00
commit a0e5b57a24
2454 changed files with 1476904 additions and 0 deletions
--- a/frontend/components/admin/MenuFormModal.tsx
+++ b/frontend/components/admin/MenuFormModal.tsx
@@ -0,0 +1,509 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { MenuItem, MenuFormData, menuApi, LangKey } from "@/lib/api/menu";
+import { companyAPI } from "@/lib/api/company";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "sonner";
+import { getMenuTextSync, MENU_MANAGEMENT_KEYS, setTranslationCache } from "@/lib/utils/multilang";
+
+interface Company {
+  company_code: string;
+  company_name: string;
+  status: string;
+}
+
+interface MenuFormModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+  menuId?: string;
+  parentId?: string;
+  menuType?: string;
+  level?: number;
+  parentCompanyCode?: string;
+}
+
+export const MenuFormModal: React.FC<MenuFormModalProps> = ({
+  isOpen,
+  onClose,
+  onSuccess,
+  menuId,
+  parentId,
+  menuType,
+  level,
+  parentCompanyCode,
+}) => {
+  const [formData, setFormData] = useState<MenuFormData>({
+    parentObjId: parentId || "0",
+    menuNameKor: "",
+    menuUrl: "",
+    menuDesc: "",
+    seq: 1,
+    menuType: menuType || "1",
+    status: "active",
+    companyCode: "",
+    langKey: "", // 다국어 키 추가
+  });
+  const [loading, setLoading] = useState(false);
+  const [isEdit, setIsEdit] = useState(false);
+  const [companies, setCompanies] = useState<Company[]>([]);
+  const [langKeys, setLangKeys] = useState<LangKey[]>([]);
+  const [isLangKeyDropdownOpen, setIsLangKeyDropdownOpen] = useState(false);
+  const [langKeySearchText, setLangKeySearchText] = useState("");
+
+  // 회사 목록 로드
+  useEffect(() => {
+    if (isOpen) {
+      loadCompanies();
+    }
+  }, [isOpen]);
+
+  // 다국어 키 목록 로드
+  useEffect(() => {
+    if (isOpen && formData.companyCode) {
+      loadLangKeys();
+    }
+  }, [isOpen, formData.companyCode]);
+
+  // 드롭다운 외부 클릭 시 닫기
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Element;
+      if (!target.closest(".langkey-dropdown")) {
+        setIsLangKeyDropdownOpen(false);
+        setLangKeySearchText("");
+      }
+    };
+
+    if (isLangKeyDropdownOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isLangKeyDropdownOpen]);
+
+  const loadCompanies = async () => {
+    try {
+      const companyList = await companyAPI.getList({ status: "active" });
+      setCompanies(companyList);
+    } catch (error) {
+      console.error("회사 목록 로딩 오류:", error);
+      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_COMPANY_LIST));
+    }
+  };
+
+  const loadLangKeys = async () => {
+    console.log(`🔤 다국어 키 목록 조회 시작 - companyCode:`, formData.companyCode);
+    try {
+      const response = await menuApi.getLangKeys({
+        companyCode: formData.companyCode === "none" ? "*" : formData.companyCode,
+      });
+
+      if (response.success && response.data) {
+        // 활성화된 다국어 키만 필터링
+        const activeKeys = response.data.filter((key) => key.isActive === "Y");
+        console.log(`🔤 다국어 키 목록 조회 성공:`, activeKeys.length, "개 (활성화된 키)");
+        setLangKeys(activeKeys);
+      }
+    } catch (error) {
+      console.error("❌ 다국어 키 목록 로딩 오류:", error);
+      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_LANG_KEY_LIST));
+      setLangKeys([]);
+    }
+  };
+
+  useEffect(() => {
+    console.log("MenuFormModal useEffect - menuId:", menuId, "parentId:", parentId, "menuType:", menuType);
+
+    if (menuId) {
+      console.log("메뉴 수정 모드 - menuId:", menuId);
+      setIsEdit(true);
+      loadMenuData();
+    } else {
+      console.log("메뉴 등록 모드 - parentId:", parentId, "menuType:", menuType);
+      setIsEdit(false);
+
+      // 메뉴 타입 변환 (0 -> 0, 1 -> 1, admin -> 0, user -> 1)
+      let defaultMenuType = "1"; // 기본값은 사용자
+      if (menuType === "0" || menuType === "admin") {
+        defaultMenuType = "0"; // 관리자
+      } else if (menuType === "1" || menuType === "user") {
+        defaultMenuType = "1"; // 사용자
+      }
+
+      setFormData({
+        parentObjId: parentId || "0",
+        menuNameKor: "",
+        menuUrl: "",
+        menuDesc: "",
+        seq: 1,
+        menuType: defaultMenuType,
+        status: "ACTIVE", // 기본값은 활성화
+        companyCode: parentCompanyCode || "none", // 상위 메뉴의 회사 코드를 기본값으로 설정
+        langKey: "", // 다국어 키 초기화
+      });
+
+      console.log("메뉴 등록 기본값 설정:", {
+        parentObjId: parentId || "0",
+        menuType: defaultMenuType,
+        status: "ACTIVE",
+        companyCode: "",
+        langKey: "",
+      });
+    }
+  }, [menuId, parentId, menuType]);
+
+  const loadMenuData = async () => {
+    console.log("loadMenuData 호출됨 - menuId:", menuId);
+    if (!menuId) {
+      console.log("menuId가 없어서 loadMenuData 종료");
+      return;
+    }
+
+    try {
+      setLoading(true);
+      console.log("API 호출 시작 - menuId:", menuId);
+      console.log("API URL:", `/admin/menus/${menuId}`);
+
+      const response = await menuApi.getMenuInfo(menuId);
+      console.log("메뉴 정보 조회 응답:", response);
+      console.log("응답 success:", response.success);
+      console.log("응답 data:", response.data);
+      console.log("응답 message:", response.message);
+      console.log("응답 errorCode:", response.errorCode);
+
+      if (response.success && response.data) {
+        const menu = response.data;
+        console.log("메뉴 데이터:", menu);
+        console.log("메뉴 데이터 키들:", Object.keys(menu));
+
+        // 대문자 키와 소문자 키 모두 처리
+        const menuType = menu.menu_type || menu.MENU_TYPE || "1";
+        const status = menu.status || menu.STATUS || "active";
+        const companyCode = menu.company_code || menu.COMPANY_CODE || "";
+        const langKey = menu.lang_key || menu.LANG_KEY || "";
+
+        // 메뉴 타입 변환 (admin/user -> 0/1)
+        let convertedMenuType = menuType;
+        if (menuType === "admin" || menuType === "0") {
+          convertedMenuType = "0";
+        } else if (menuType === "user" || menuType === "1") {
+          convertedMenuType = "1";
+        }
+
+        // 상태 변환 (active/inactive/inActive -> ACTIVE/INACTIVE)
+        let convertedStatus = status;
+        if (status === "active") {
+          convertedStatus = "ACTIVE";
+        } else if (status === "inactive" || status === "inActive") {
+          convertedStatus = "INACTIVE";
+        }
+
+        setFormData({
+          objid: menu.objid || menu.OBJID,
+          parentObjId: menu.parent_obj_id || menu.PARENT_OBJ_ID || "0",
+          menuNameKor: menu.menu_name_kor || menu.MENU_NAME_KOR || "",
+          menuUrl: menu.menu_url || menu.MENU_URL || "",
+          menuDesc: menu.menu_desc || menu.MENU_DESC || "",
+          seq: menu.seq || menu.SEQ || 1,
+          menuType: convertedMenuType,
+          status: convertedStatus,
+          companyCode: companyCode,
+          langKey: langKey, // 다국어 키 설정
+        });
+
+        console.log("설정된 폼 데이터:", {
+          objid: menu.objid || menu.OBJID,
+          parentObjId: menu.parent_obj_id || menu.PARENT_OBJ_ID || "0",
+          menuNameKor: menu.menu_name_kor || menu.MENU_NAME_KOR || "",
+          menuUrl: menu.menu_url || menu.MENU_URL || "",
+          menuDesc: menu.menu_desc || menu.MENU_DESC || "",
+          seq: menu.seq || menu.SEQ || 1,
+          menuType: convertedMenuType,
+          status: convertedStatus,
+          companyCode: companyCode,
+          langKey: langKey,
+        });
+      }
+    } catch (error: any) {
+      console.error("메뉴 정보 로딩 오류:", error);
+      console.error("오류 상세 정보:", {
+        message: error?.message,
+        stack: error?.stack,
+        response: error?.response,
+      });
+      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_MENU_INFO));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!formData.menuNameKor.trim()) {
+      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_VALIDATION_MENU_NAME_REQUIRED));
+      return;
+    }
+
+    if (!formData.companyCode) {
+      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_VALIDATION_COMPANY_REQUIRED));
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      // 백엔드에 전송할 데이터 변환
+      const submitData = {
+        ...formData,
+        // 상태를 소문자로 변환 (백엔드에서 소문자 기대)
+        status: formData.status.toLowerCase(),
+      };
+
+      console.log("저장할 데이터:", submitData);
+      const response = await menuApi.saveMenu(submitData);
+
+      if (response.success) {
+        toast.success(response.message);
+        onSuccess();
+        onClose();
+      } else {
+        toast.error(response.message);
+      }
+    } catch (error) {
+      toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_MENU_SAVE_FAILED));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInputChange = (field: keyof MenuFormData, value: string | number) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  // 선택된 다국어 키 정보 가져오기
+  const getSelectedLangKeyInfo = () => {
+    if (!formData.langKey) return null;
+    return langKeys.find((key) => key.langKey === formData.langKey);
+  };
+
+  const selectedLangKeyInfo = getSelectedLangKeyInfo();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>
+            {isEdit
+              ? getMenuTextSync(MENU_MANAGEMENT_KEYS.MODAL_MENU_MODIFY_TITLE)
+              : getMenuTextSync(MENU_MANAGEMENT_KEYS.MODAL_MENU_REGISTER_TITLE)}
+          </DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="menuType">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_TYPE)}</Label>
+              <Select value={formData.menuType} onValueChange={(value) => handleInputChange("menuType", value)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="0">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_TYPE_ADMIN)}</SelectItem>
+                  <SelectItem value="1">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_TYPE_USER)}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="status">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_STATUS)}</Label>
+              <Select value={formData.status} onValueChange={(value) => handleInputChange("status", value)}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="ACTIVE">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_STATUS_ACTIVE)}</SelectItem>
+                  <SelectItem value="INACTIVE">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_STATUS_INACTIVE)}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="companyCode">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY)} *</Label>
+            <Select
+              value={formData.companyCode}
+              onValueChange={(value) => handleInputChange("companyCode", value)}
+              disabled={!isEdit && level !== 1} // 수정 모드가 아니고 최상위 메뉴가 아니면 비활성화
+            >
+              <SelectTrigger>
+                <SelectValue placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SELECT)} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="none">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_COMMON)}</SelectItem>
+                {companies.map((company) => (
+                  <SelectItem key={company.company_code} value={company.company_code}>
+                    {company.company_name}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            {!isEdit && level !== 1 && (
+              <p className="text-xs text-gray-500">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SUBMENU_NOTE)}</p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="langKey">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY)}</Label>
+            <div className="langkey-dropdown relative">
+              <button
+                type="button"
+                onClick={() => setIsLangKeyDropdownOpen(!isLangKeyDropdownOpen)}
+                className="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+                disabled={!formData.companyCode}
+              >
+                <span className={!formData.langKey ? "text-muted-foreground" : ""}>
+                  {formData.langKey || getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SELECT)}
+                </span>
+                <svg
+                  className={`h-4 w-4 transition-transform ${isLangKeyDropdownOpen ? "rotate-180" : ""}`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+
+              {isLangKeyDropdownOpen && (
+                <div className="bg-popover text-popover-foreground absolute top-full left-0 z-50 mt-1 w-full rounded-md border shadow-md">
+                  {/* 검색 입력 */}
+                  <div className="border-b p-2">
+                    <Input
+                      placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SEARCH)}
+                      value={langKeySearchText}
+                      onChange={(e) => setLangKeySearchText(e.target.value)}
+                      className="h-8 text-sm"
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  </div>
+
+                  {/* 다국어 키 목록 */}
+                  <div className="max-h-48 overflow-y-auto">
+                    <div
+                      className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center px-2 py-1.5 text-sm"
+                      onClick={() => {
+                        handleInputChange("langKey", "");
+                        setIsLangKeyDropdownOpen(false);
+                        setLangKeySearchText("");
+                      }}
+                    >
+                      {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_NONE)}
+                    </div>
+
+                    {langKeys
+                      .filter(
+                        (key) =>
+                          key.langKey.toLowerCase().includes(langKeySearchText.toLowerCase()) ||
+                          key.description.toLowerCase().includes(langKeySearchText.toLowerCase()),
+                      )
+                      .map((key) => (
+                        <div
+                          key={key.keyId}
+                          className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer flex-col px-2 py-1.5 text-sm"
+                          onClick={() => {
+                            handleInputChange("langKey", key.langKey);
+                            setIsLangKeyDropdownOpen(false);
+                            setLangKeySearchText("");
+                          }}
+                        >
+                          <div className="font-medium">{key.langKey}</div>
+                          {key.description && <div className="text-xs text-gray-500">{key.description}</div>}
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            {selectedLangKeyInfo && (
+              <p className="text-xs text-gray-500">
+                {getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SELECTED, {
+                  key: selectedLangKeyInfo.langKey,
+                  description: selectedLangKeyInfo.description,
+                })}
+              </p>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="menuNameKor">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_NAME)} *</Label>
+            <Input
+              id="menuNameKor"
+              value={formData.menuNameKor}
+              onChange={(e) => handleInputChange("menuNameKor", e.target.value)}
+              placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_NAME_PLACEHOLDER)}
+              required
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="menuUrl">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_URL)}</Label>
+            <Input
+              id="menuUrl"
+              value={formData.menuUrl}
+              onChange={(e) => handleInputChange("menuUrl", e.target.value)}
+              placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_URL_PLACEHOLDER)}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="menuDesc">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_DESCRIPTION)}</Label>
+            <Textarea
+              id="menuDesc"
+              value={formData.menuDesc}
+              onChange={(e) => handleInputChange("menuDesc", e.target.value)}
+              placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_DESCRIPTION_PLACEHOLDER)}
+              rows={3}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="seq">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_SEQUENCE)}</Label>
+            <Input
+              id="seq"
+              type="number"
+              value={formData.seq}
+              onChange={(e) => handleInputChange("seq", parseInt(e.target.value) || 1)}
+              min="1"
+            />
+          </div>
+
+          <div className="flex justify-end space-x-2 pt-4">
+            <Button type="button" variant="outline" onClick={onClose}>
+              {getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_CANCEL)}
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading
+                ? getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_SAVE_PROCESSING)
+                : isEdit
+                  ? getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_MODIFY)
+                  : getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_REGISTER)}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+};