chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메뉴관리 다국어 중간 커밋

Browse Source
This commit is contained in:
kjs
2025-08-25 17:22:20 +09:00
parent 0e89393a14
commit 307faba089
9 changed files with 485 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/components/admin/MenuFormModal.tsx
View File

@@ -345,58 +345,79 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
const selectedLangKeyInfo = getSelectedLangKeyInfo();
// 전역 사용자 로케일 가져오기
const getCurrentUserLang = () => {
return (window as any).__GLOBAL_USER_LANG || localStorage.getItem("userLocale") || "KR";
};
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)}
? getMenuTextSync(MENU_MANAGEMENT_KEYS.MODAL_MENU_MODIFY_TITLE, getCurrentUserLang())
: getMenuTextSync(MENU_MANAGEMENT_KEYS.MODAL_MENU_REGISTER_TITLE, getCurrentUserLang())}
</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>
<Label htmlFor="menuType">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_TYPE, getCurrentUserLang())}
</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>
<SelectItem value="0">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_TYPE_ADMIN, getCurrentUserLang())}
</SelectItem>
<SelectItem value="1">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_TYPE_USER, getCurrentUserLang())}
</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="status">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_STATUS)}</Label>
<Label htmlFor="status">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_STATUS, getCurrentUserLang())}</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>
<SelectItem value="ACTIVE">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_STATUS_ACTIVE, getCurrentUserLang())}
</SelectItem>
<SelectItem value="INACTIVE">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_STATUS_INACTIVE, getCurrentUserLang())}
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="companyCode">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY)} *</Label>
<Label htmlFor="companyCode">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY, getCurrentUserLang())} *
</Label>
<Select
value={formData.companyCode}
onValueChange={(value) => handleInputChange("companyCode", value)}
disabled={!isEdit && level !== 1} // 수정 모드가 아니고 최상위 메뉴가 아니면 비활성화
>
<SelectTrigger>
<SelectValue placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SELECT)} />
<SelectValue
placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SELECT, getCurrentUserLang())}
/>
</SelectTrigger>
<SelectContent>
<SelectItem value="none">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_COMMON)}</SelectItem>
<SelectItem value="none">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_COMMON, getCurrentUserLang())}
</SelectItem>
{companies.map((company) => (
<SelectItem key={company.company_code} value={company.company_code}>
{company.company_name}
@@ -405,12 +426,14 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
</SelectContent>
</Select>
{!isEdit && level !== 1 && (
<p className="text-xs text-gray-500">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SUBMENU_NOTE)}</p>
<p className="text-xs text-gray-500">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_COMPANY_SUBMENU_NOTE, getCurrentUserLang())}
</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="langKey">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY)}</Label>
<Label htmlFor="langKey">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY, getCurrentUserLang())}</Label>
<div className="langkey-dropdown relative">
<button
type="button"
@@ -419,7 +442,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
disabled={!formData.companyCode}
>
<span className={!formData.langKey ? "text-muted-foreground" : ""}>
{formData.langKey || getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SELECT)}
{formData.langKey || getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SELECT, getCurrentUserLang())}
</span>
<svg
className={`h-4 w-4 transition-transform ${isLangKeyDropdownOpen ? "rotate-180" : ""}`}
@@ -436,7 +459,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
{/* 검색 입력 */}
<div className="border-b p-2">
<Input
placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SEARCH)}
placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_SEARCH, getCurrentUserLang())}
value={langKeySearchText}
onChange={(e) => setLangKeySearchText(e.target.value)}
className="h-8 text-sm"
@@ -454,7 +477,7 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
setLangKeySearchText("");
}}
>
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_NONE)}
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_LANG_KEY_NONE, getCurrentUserLang())}
</div>
{langKeys
@@ -492,39 +515,48 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
</div>
<div className="space-y-2">
<Label htmlFor="menuNameKor">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_NAME)} *</Label>
<Label htmlFor="menuNameKor">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_NAME, getCurrentUserLang())} *
</Label>
<Input
id="menuNameKor"
value={formData.menuNameKor}
onChange={(e) => handleInputChange("menuNameKor", e.target.value)}
placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_NAME_PLACEHOLDER)}
placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_NAME_PLACEHOLDER, getCurrentUserLang())}
required
/>
</div>
<div className="space-y-2">
<Label htmlFor="menuUrl">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_URL)}</Label>
<Label htmlFor="menuUrl">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_URL, getCurrentUserLang())}</Label>
<Input
id="menuUrl"
value={formData.menuUrl}
onChange={(e) => handleInputChange("menuUrl", e.target.value)}
placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_URL_PLACEHOLDER)}
placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_URL_PLACEHOLDER, getCurrentUserLang())}
/>
</div>
<div className="space-y-2">
<Label htmlFor="menuDesc">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_DESCRIPTION)}</Label>
<Label htmlFor="menuDesc">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_DESCRIPTION, getCurrentUserLang())}
</Label>
<Textarea
id="menuDesc"
value={formData.menuDesc}
onChange={(e) => handleInputChange("menuDesc", e.target.value)}
placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_DESCRIPTION_PLACEHOLDER)}
placeholder={getMenuTextSync(
MENU_MANAGEMENT_KEYS.FORM_MENU_DESCRIPTION_PLACEHOLDER,
getCurrentUserLang(),
)}
rows={3}
/>
</div>
<div className="space-y-2">
<Label htmlFor="seq">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_SEQUENCE)}</Label>
<Label htmlFor="seq">
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FORM_MENU_SEQUENCE, getCurrentUserLang())}
</Label>
<Input
id="seq"
type="number"
@@ -536,14 +568,14 @@ export const MenuFormModal: React.FC<MenuFormModalProps> = ({
<div className="flex justify-end space-x-2 pt-4">
<Button type="button" variant="outline" onClick={onClose}>
{getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_CANCEL)}
{getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_CANCEL, getCurrentUserLang())}
</Button>
<Button type="submit" disabled={loading}>
{loading
? getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_SAVE_PROCESSING)
? getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_SAVE_PROCESSING, getCurrentUserLang())
: isEdit
? getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_MODIFY)
: getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_REGISTER)}
? getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_MODIFY, getCurrentUserLang())
: getMenuTextSync(MENU_MANAGEMENT_KEYS.BUTTON_REGISTER, getCurrentUserLang())}
</Button>
</div>
</form>

498
frontend/components/admin/MenuManagement.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useMemo } from "react";
import { menuApi } from "@/lib/api/menu";
import type { MenuItem } from "@/lib/api/menu";
import { MenuTable } from "./MenuTable";
@@ -24,12 +24,7 @@ import {
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useMenu } from "@/contexts/MenuContext";
import {
getMenuTextSync,
MENU_MANAGEMENT_KEYS,
useMenuManagementText,
setTranslationCache,
} from "@/lib/utils/multilang";
import { useMenuManagementText, setTranslationCache } from "@/lib/utils/multilang";
import { useMultiLang } from "@/hooks/useMultiLang";
import { apiClient } from "@/lib/api/client";
@@ -46,7 +41,7 @@ export const MenuManagement: React.FC = () => {
const [selectedMenus, setSelectedMenus] = useState<Set<string>>(new Set());
// 다국어 텍스트 훅 사용
const { getMenuText } = useMenuManagementText();
// getMenuText는 더 이상 사용하지 않음 - getUITextSync만 사용
const { userLang } = useMultiLang({ companyCode: "*" });
// 다국어 텍스트 상태
@@ -68,6 +63,119 @@ export const MenuManagement: React.FC = () => {
parentCompanyCode: "",
});
// 언어별 텍스트 매핑 테이블 제거 - DB에서 직접 가져옴
// 메뉴관리 페이지에서 사용할 다국어 키들 (실제 DB에 등록된 키들)
const MENU_MANAGEMENT_LANG_KEYS = [
// 페이지 제목 및 설명
"menu.management.title",
"menu.management.description",
"menu.type.title",
"menu.type.admin",
"menu.type.user",
"menu.management.admin",
"menu.management.user",
"menu.management.admin.description",
"menu.management.user.description",
// 버튼
"button.add",
"button.add.top.level",
"button.add.sub",
"button.edit",
"button.delete",
"button.delete.selected",
"button.delete.selected.count",
"button.delete.processing",
"button.cancel",
"button.save",
"button.register",
"button.modify",
// 필터 및 검색
"filter.company",
"filter.company.all",
"filter.company.common",
"filter.company.search",
"filter.search",
"filter.search.placeholder",
"filter.reset",
// 테이블 헤더
"table.header.select",
"table.header.menu.name",
"table.header.menu.url",
"table.header.menu.type",
"table.header.status",
"table.header.company",
"table.header.sequence",
"table.header.actions",
// 상태
"status.active",
"status.inactive",
"status.unspecified",
// 폼
"form.menu.type",
"form.menu.type.admin",
"form.menu.type.user",
"form.status",
"form.company",
"form.company.select",
"form.company.common",
"form.company.submenu.note",
"form.lang.key",
"form.lang.key.select",
"form.lang.key.none",
"form.lang.key.search",
"form.lang.key.selected",
"form.menu.name",
"form.menu.name.placeholder",
"form.menu.url",
"form.menu.url.placeholder",
"form.menu.description",
"form.menu.description.placeholder",
"form.menu.sequence",
// 모달
"modal.menu.register.title",
"modal.menu.modify.title",
"modal.delete.title",
"modal.delete.description",
"modal.delete.batch.description",
// 메시지
"message.loading",
"message.menu.delete.processing",
"message.menu.save.success",
"message.menu.save.failed",
"message.menu.delete.success",
"message.menu.delete.failed",
"message.menu.delete.batch.success",
"message.menu.delete.batch.partial",
"message.menu.status.toggle.success",
"message.menu.status.toggle.failed",
"message.validation.menu.name.required",
"message.validation.company.required",
"message.validation.select.menu.delete",
"message.error.load.menu.list",
"message.error.load.menu.info",
"message.error.load.company.list",
"message.error.load.lang.key.list",
// 리스트 정보
"menu.list.title",
"menu.list.total",
"menu.list.search.result",
// UI
"ui.expand",
"ui.collapse",
"ui.menu.collapse",
"ui.language",
];
// 초기 로딩
useEffect(() => {
loadCompanies();
@@ -80,6 +188,17 @@ export const MenuManagement: React.FC = () => {
}
}, [userLang]); // userLang 변경 시마다 실행
// uiTexts 상태 변경 감지
useEffect(() => {
console.log("🔄 uiTexts 상태 변경됨:", {
count: Object.keys(uiTexts).length,
sampleKeys: Object.keys(uiTexts).slice(0, 5),
sampleValues: Object.entries(uiTexts)
.slice(0, 3)
.map(([k, v]) => `${k}: ${v}`),
});
}, [uiTexts]);
// 컴포넌트 마운트 시 강제로 번역 로드 (userLang이 아직 설정되지 않았을 수 있음)
useEffect(() => {
const timer = setTimeout(() => {
@@ -134,10 +253,10 @@ export const MenuManagement: React.FC = () => {
setLoading(true);
}
await refreshMenus();
console.log(`📋 메뉴 목록 조회 성공`);
console.log("📋 메뉴 목록 조회 성공");
} catch (error) {
console.error("❌ 메뉴 목록 조회 실패:", error);
toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_ERROR_LOAD_MENU_LIST));
toast.error(getUITextSync("message.error.load.menu.list"));
} finally {
if (showLoading) {
setLoading(false);
@@ -147,7 +266,7 @@ export const MenuManagement: React.FC = () => {
// 회사 목록 조회
const loadCompanies = async () => {
console.log(`🏢 회사 목록 조회 시작`);
console.log("🏢 회사 목록 조회 시작");
try {
const response = await apiClient.get("/admin/companies");
@@ -165,230 +284,99 @@ export const MenuManagement: React.FC = () => {
}
};
// 다국어 텍스트 로드 함수
// 다국어 텍스트 로드 함수 - 배치 API 사용
const loadUITexts = async () => {
if (uiTextsLoading) return; // 이미 로딩 중이면 중단
// userLang이 없으면 기본값 사용
const currentUserLang = userLang || "KR";
console.log("🌐 UI 다국어 텍스트 로드 시작", { currentUserLang });
// userLang이 설정되지 않았으면 기본값 설정
if (!userLang) {
console.log("🌐 사용자 언어가 설정되지 않음, 기본값 설정");
const defaultTexts: Record<string, string> = {};
MENU_MANAGEMENT_LANG_KEYS.forEach((key) => {
defaultTexts[key] = key; // 키를 기본값으로 사용
});
setUiTexts(defaultTexts);
return;
}
console.log("🌐 UI 다국어 텍스트 로드 시작", {
userLang,
apiParams: {
companyCode: "*",
menuCode: "menu.management",
userLang: userLang,
},
});
setUiTextsLoading(true);
const texts: Record<string, string> = {};
try {
const textPromises = [
getMenuText(MENU_MANAGEMENT_KEYS.TITLE),
getMenuText(MENU_MANAGEMENT_KEYS.DESCRIPTION),
getMenuText(MENU_MANAGEMENT_KEYS.MENU_TYPE_TITLE),
getMenuText(MENU_MANAGEMENT_KEYS.MENU_TYPE_ADMIN),
getMenuText(MENU_MANAGEMENT_KEYS.MENU_TYPE_USER),
getMenuText(MENU_MANAGEMENT_KEYS.ADMIN_MENU),
getMenuText(MENU_MANAGEMENT_KEYS.USER_MENU),
getMenuText(MENU_MANAGEMENT_KEYS.ADMIN_DESCRIPTION),
getMenuText(MENU_MANAGEMENT_KEYS.USER_DESCRIPTION),
getMenuText(MENU_MANAGEMENT_KEYS.BUTTON_ADD),
getMenuText(MENU_MANAGEMENT_KEYS.BUTTON_ADD_TOP_LEVEL),
getMenuText(MENU_MANAGEMENT_KEYS.BUTTON_ADD_SUB),
getMenuText(MENU_MANAGEMENT_KEYS.BUTTON_EDIT),
getMenuText(MENU_MANAGEMENT_KEYS.BUTTON_DELETE),
getMenuText(MENU_MANAGEMENT_KEYS.BUTTON_DELETE_SELECTED),
getMenuText(MENU_MANAGEMENT_KEYS.BUTTON_DELETE_SELECTED_COUNT),
getMenuText(MENU_MANAGEMENT_KEYS.BUTTON_DELETE_PROCESSING),
getMenuText(MENU_MANAGEMENT_KEYS.FILTER_RESET),
getMenuText(MENU_MANAGEMENT_KEYS.LIST_TOTAL),
getMenuText(MENU_MANAGEMENT_KEYS.LIST_SEARCH_RESULT),
getMenuText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_NAME),
getMenuText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_URL),
getMenuText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_TYPE),
getMenuText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_STATUS),
getMenuText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_COMPANY),
getMenuText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_SEQUENCE),
getMenuText(MENU_MANAGEMENT_KEYS.TABLE_HEADER_ACTIONS),
// 추가 키들 - 실제 UI에서 사용되는 모든 키들
getMenuText("menu.list.title"),
getMenuText("filter.company"),
getMenuText("filter.company.all"),
getMenuText("filter.search"),
getMenuText("filter.search.placeholder"),
getMenuText("status.unspecified"),
getMenuText("status.active"),
getMenuText("filter.company.common"),
getMenuText("modal.menu.register.title"),
getMenuText("form.menu.type"),
getMenuText("form.menu.type.admin"),
getMenuText("form.menu.type.user"),
getMenuText("form.status"),
getMenuText("form.status.active"),
getMenuText("form.status.inactive"),
getMenuText("form.company"),
getMenuText("form.company.select"),
getMenuText("form.company.common"),
getMenuText("form.company.submenu.note"),
getMenuText("form.lang.key"),
getMenuText("form.lang.key.select"),
getMenuText("form.menu.name"),
getMenuText("form.menu.name.placeholder"),
getMenuText("form.menu.url"),
getMenuText("form.menu.url.placeholder"),
getMenuText("form.menu.description"),
getMenuText("form.menu.description.placeholder"),
getMenuText("form.menu.sequence"),
getMenuText("button.cancel"),
getMenuText("button.register"),
// 테이블 헤더 관련 추가 키들
getMenuText("table.header.menu.name"),
getMenuText("table.header.sequence"),
getMenuText("table.header.company"),
getMenuText("table.header.menu.url"),
getMenuText("table.header.status"),
getMenuText("table.header.actions"),
// 액션 버튼 관련 추가 키들
getMenuText("button.add"),
getMenuText("button.add.sub"),
getMenuText("button.edit"),
getMenuText("button.delete"),
// 페이지 제목 관련
getMenuText("page.title.menu.management"),
getMenuText("page.description.menu.management"),
getMenuText("section.title.menu.type"),
getMenuText("section.title.admin.menu.list"),
];
// 배치 API를 사용하여 모든 다국어 키를 한 번에 조회
const response = await apiClient.post(
"/multilang/batch",
{
langKeys: MENU_MANAGEMENT_LANG_KEYS,
companyCode: "*", // 모든 회사
menuCode: "menu.management", // 메뉴관리 메뉴
userLang: userLang, // body에 포함
},
{
params: {}, // query params는 비움
},
);
const results = await Promise.all(textPromises);
if (response.data.success) {
const translations = response.data.data;
console.log("🌐 배치 다국어 텍스트 응답:", translations);
// 결과를 키와 매핑
const keys = [
MENU_MANAGEMENT_KEYS.TITLE,
MENU_MANAGEMENT_KEYS.DESCRIPTION,
MENU_MANAGEMENT_KEYS.MENU_TYPE_TITLE,
MENU_MANAGEMENT_KEYS.MENU_TYPE_ADMIN,
MENU_MANAGEMENT_KEYS.MENU_TYPE_USER,
MENU_MANAGEMENT_KEYS.ADMIN_MENU,
MENU_MANAGEMENT_KEYS.USER_MENU,
MENU_MANAGEMENT_KEYS.ADMIN_DESCRIPTION,
MENU_MANAGEMENT_KEYS.USER_DESCRIPTION,
MENU_MANAGEMENT_KEYS.BUTTON_ADD,
MENU_MANAGEMENT_KEYS.BUTTON_ADD_TOP_LEVEL,
MENU_MANAGEMENT_KEYS.BUTTON_ADD_SUB,
MENU_MANAGEMENT_KEYS.BUTTON_EDIT,
MENU_MANAGEMENT_KEYS.BUTTON_DELETE,
MENU_MANAGEMENT_KEYS.BUTTON_DELETE_SELECTED,
MENU_MANAGEMENT_KEYS.BUTTON_DELETE_SELECTED_COUNT,
MENU_MANAGEMENT_KEYS.BUTTON_DELETE_PROCESSING,
MENU_MANAGEMENT_KEYS.FILTER_RESET,
MENU_MANAGEMENT_KEYS.LIST_TOTAL,
MENU_MANAGEMENT_KEYS.LIST_SEARCH_RESULT,
MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_NAME,
MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_URL,
MENU_MANAGEMENT_KEYS.TABLE_HEADER_MENU_TYPE,
MENU_MANAGEMENT_KEYS.TABLE_HEADER_STATUS,
MENU_MANAGEMENT_KEYS.TABLE_HEADER_COMPANY,
MENU_MANAGEMENT_KEYS.TABLE_HEADER_SEQUENCE,
MENU_MANAGEMENT_KEYS.TABLE_HEADER_ACTIONS,
// 추가 키들 - 실제 UI에서 사용되는 모든 키들
"menu.list.title",
"filter.company",
"filter.company.all",
"filter.search",
"filter.search.placeholder",
"status.unspecified",
"status.active",
"filter.company.common",
"modal.menu.register.title",
"form.menu.type",
"form.menu.type.admin",
"form.menu.type.user",
"form.status",
"form.status.active",
"form.status.inactive",
"form.company",
"form.company.select",
"form.company.common",
"form.company.submenu.note",
"form.lang.key",
"form.lang.key.select",
"form.menu.name",
"form.menu.name.placeholder",
"form.menu.url",
"form.menu.url.placeholder",
"form.menu.description",
"form.menu.description.placeholder",
"form.menu.sequence",
"button.cancel",
"button.register",
// 테이블 헤더 관련 추가 키들
"table.header.menu.name",
"table.header.sequence",
"table.header.company",
"table.header.menu.url",
"table.header.status",
"table.header.actions",
// 액션 버튼 관련 추가 키들
"button.add",
"button.add.sub",
"button.edit",
"button.delete",
// 페이지 제목 관련
"page.title.menu.management",
"page.description.menu.management",
"section.title.menu.type",
"section.title.admin.menu.list",
];
// 번역 결과를 상태에 저장
console.log("🔧 setUiTexts 호출 전:", { translationsCount: Object.keys(translations).length });
setUiTexts(translations);
console.log("🔧 setUiTexts 호출 후 - translations:", translations);
keys.forEach((key, index) => {
texts[key] = results[index];
});
// 번역 캐시에 저장 (다른 컴포넌트에서도 사용할 수 있도록)
setTranslationCache(userLang, translations);
} else {
console.error("❌ 다국어 텍스트 배치 조회 실패:", response.data.message);
setUiTexts(texts);
// 번역 텍스트를 캐시에 저장
setTranslationCache(currentUserLang, texts);
console.log("🌐 UI 다국어 텍스트 로드 완료:", texts);
// API 실패 시 기본 텍스트 사용
const defaultTexts: Record<string, string> = {};
MENU_MANAGEMENT_LANG_KEYS.forEach((key) => {
defaultTexts[key] = key; // 키를 기본값으로 사용
});
setUiTexts(defaultTexts);
}
} catch (error) {
console.error("❌ UI 다국어 텍스트 로드 실패:", error);
// API 실패 시 기본 텍스트 사용
const defaultTexts: Record<string, string> = {};
MENU_MANAGEMENT_LANG_KEYS.forEach((key) => {
defaultTexts[key] = key; // 키를 기본값으로 사용
});
setUiTexts(defaultTexts);
} finally {
setUiTextsLoading(false);
}
};
// UI 텍스트 가져오기 함수
const getUIText = async (
key: string,
params?: Record<string, string | number>,
fallback?: string,
): Promise<string> => {
// uiTexts에서 먼저 찾기
let text = uiTexts[key];
// UI 텍스트 가져오기 함수 (동기 버전만 사용)
// getUIText 함수는 제거 - getUITextSync만 사용
// uiTexts에 없으면 비동기적으로 API 호출
if (!text) {
try {
text = await getMenuText(key);
// 새로운 텍스트를 uiTexts에 추가
setUiTexts((prev) => ({ ...prev, [key]: text }));
} catch (error) {
console.error(`❌ 키 "${key}" 번역 실패:`, error);
text = fallback || key;
}
}
// 파라미터 치환
if (params && text) {
Object.entries(params).forEach(([paramKey, paramValue]) => {
text = text!.replace(`{${paramKey}}`, String(paramValue));
});
}
return text || key;
};
// 동기 버전 (기존 호환성을 위해)
// 동기 버전 (DB에서 가져온 번역 텍스트 사용)
const getUITextSync = (key: string, params?: Record<string, string | number>, fallback?: string): string => {
// uiTexts에서 번역 텍스트 찾기
let text = uiTexts[key];
// 디버깅: uiTexts 상태 확인
if (!text) {
console.log(`🔍 getUITextSync - 키 "${key}"를 uiTexts에서 찾을 수 없음`);
console.log("🔍 uiTexts 상태:", {
count: Object.keys(uiTexts).length,
sampleKeys: Object.keys(uiTexts).slice(0, 5),
});
text = fallback || key;
} else {
console.log(`✅ getUITextSync - 키 "${key}" 번역 텍스트 찾음: "${text}"`);
}
// 파라미터 치환
@@ -401,11 +389,11 @@ export const MenuManagement: React.FC = () => {
return text || key;
};
// 다국어 API 테스트 함수
// 다국어 API 테스트 함수 (getUITextSync 사용)
const testMultiLangAPI = async () => {
console.log("🧪 다국어 API 테스트 시작");
try {
const text = await getMenuText(MENU_MANAGEMENT_KEYS.ADMIN_MENU);
const text = getUITextSync("menu.management.admin");
console.log("🧪 다국어 API 테스트 결과:", text);
} catch (error) {
console.error("❌ 다국어 API 테스트 실패:", error);
@@ -513,11 +501,11 @@ export const MenuManagement: React.FC = () => {
const handleDeleteSelectedMenus = async () => {
if (selectedMenus.size === 0) {
toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_VALIDATION_SELECT_MENU_DELETE));
toast.error(getUITextSync("message.validation.select.menu.delete"));
return;
}
if (!confirm(getMenuTextSync(MENU_MANAGEMENT_KEYS.MODAL_DELETE_BATCH_DESCRIPTION, { count: selectedMenus.size }))) {
if (!confirm(getUITextSync("modal.delete.batch.description", { count: selectedMenus.size }))) {
return;
}
@@ -526,7 +514,7 @@ export const MenuManagement: React.FC = () => {
const menuIds = Array.from(selectedMenus);
console.log("삭제할 메뉴 IDs:", menuIds);
toast.info(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_MENU_DELETE_PROCESSING));
toast.info(getUITextSync("message.menu.delete.processing"));
const response = await menuApi.deleteMenusBatch(menuIds);
console.log("삭제 API 응답:", response);
@@ -552,12 +540,10 @@ export const MenuManagement: React.FC = () => {
// 삭제 결과 메시지
if (failedCount === 0) {
toast.success(
getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_MENU_DELETE_BATCH_SUCCESS, { count: deletedCount }),
);
toast.success(getUITextSync("message.menu.delete.batch.success", { count: deletedCount }));
} else {
toast.success(
getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_MENU_DELETE_BATCH_PARTIAL, {
getUITextSync("message.menu.delete.batch.partial", {
success: deletedCount,
failed: failedCount,
}),
@@ -569,7 +555,7 @@ export const MenuManagement: React.FC = () => {
}
} catch (error) {
console.error("메뉴 삭제 중 오류:", error);
toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_MENU_DELETE_FAILED));
toast.error(getUITextSync("message.menu.delete.failed"));
} finally {
setDeleting(false);
}
@@ -605,7 +591,7 @@ export const MenuManagement: React.FC = () => {
}
} catch (error) {
console.error("메뉴 상태 토글 오류:", error);
toast.error(getMenuTextSync(MENU_MANAGEMENT_KEYS.MESSAGE_MENU_STATUS_TOGGLE_FAILED));
toast.error(getUITextSync("message.menu.status.toggle.failed"));
}
};
@@ -658,15 +644,29 @@ export const MenuManagement: React.FC = () => {
};
const getMenuTypeString = () => {
return selectedMenuType === "admin"
? getMenuTextSync(MENU_MANAGEMENT_KEYS.MENU_TYPE_ADMIN)
: getMenuTextSync(MENU_MANAGEMENT_KEYS.MENU_TYPE_USER);
return selectedMenuType === "admin" ? getUITextSync("menu.type.admin") : getUITextSync("menu.type.user");
};
const getMenuTypeValue = () => {
return selectedMenuType === "admin" ? "0" : "1";
};
// uiTextsCount를 useMemo로 계산하여 상태 변경 시에만 재계산
const uiTextsCount = useMemo(() => Object.keys(uiTexts).length, [uiTexts]);
const adminMenusCount = useMemo(() => adminMenus?.length || 0, [adminMenus]);
const userMenusCount = useMemo(() => userMenus?.length || 0, [userMenus]);
// 디버깅을 위한 간단한 상태 표시
console.log("🔍 MenuManagement 렌더링 상태:", {
loading,
uiTextsLoading,
uiTextsCount,
adminMenusCount,
userMenusCount,
selectedMenuType,
userLang,
});
if (loading) {
return (
<div className="flex h-64 items-center justify-center">
@@ -676,14 +676,14 @@ export const MenuManagement: React.FC = () => {
}
return (
<LoadingOverlay isLoading={deleting} text="메뉴 삭제 중...">
<LoadingOverlay isLoading={deleting} text={getUITextSync("button.delete.processing")}>
<div className="flex h-full flex-col">
{/* 메인 컨텐츠 - 2:8 비율 */}
<div className="flex flex-1 overflow-hidden">
{/* 좌측 사이드바 - 메뉴 타입 선택 (20%) */}
<div className="w-[20%] border-r bg-gray-50">
<div className="p-6">
<h2 className="mb-4 text-lg font-semibold">{getMenuTextSync(MENU_MANAGEMENT_KEYS.MENU_TYPE_TITLE)}</h2>
<h2 className="mb-4 text-lg font-semibold">{getUITextSync("menu.type.title")}</h2>
<div className="space-y-3">
<Card
className={`cursor-pointer transition-all ${
@@ -694,9 +694,9 @@ export const MenuManagement: React.FC = () => {
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">{getUITextSync(MENU_MANAGEMENT_KEYS.ADMIN_MENU)}</h3>
<h3 className="font-medium">{getUITextSync("menu.management.admin")}</h3>
<p className="mt-1 text-sm text-gray-600">
{getUITextSync(MENU_MANAGEMENT_KEYS.ADMIN_DESCRIPTION)}
{getUITextSync("menu.management.admin.description")}
</p>
</div>
<Badge variant={selectedMenuType === "admin" ? "default" : "secondary"}>
@@ -715,9 +715,9 @@ export const MenuManagement: React.FC = () => {
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div>
<h3 className="font-medium">{getUITextSync(MENU_MANAGEMENT_KEYS.USER_MENU)}</h3>
<h3 className="font-medium">{getUITextSync("menu.management.user")}</h3>
<p className="mt-1 text-sm text-gray-600">
{getUITextSync(MENU_MANAGEMENT_KEYS.USER_DESCRIPTION)}
{getUITextSync("menu.management.user.description")}
</p>
</div>
<Badge variant={selectedMenuType === "user" ? "default" : "secondary"}>{userMenus.length}</Badge>
@@ -733,7 +733,7 @@ export const MenuManagement: React.FC = () => {
<div className="flex h-full flex-col p-6">
<div className="mb-6 flex-shrink-0">
<h2 className="mb-2 text-xl font-semibold">
{getMenuTypeString()} {getMenuTextSync(MENU_MANAGEMENT_KEYS.LIST_TITLE)}
{getMenuTypeString()} {getUITextSync("menu.list.title")}
</h2>
</div>
@@ -741,7 +741,7 @@ export const MenuManagement: React.FC = () => {
<div className="mb-4 flex-shrink-0">
<div className="grid grid-cols-1 gap-4 md:grid-cols-4">
<div>
<Label htmlFor="company">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FILTER_COMPANY)}</Label>
<Label htmlFor="company">{getUITextSync("filter.company")}</Label>
<div className="company-dropdown relative">
<button
type="button"
@@ -750,11 +750,11 @@ export const MenuManagement: React.FC = () => {
>
<span className={selectedCompany === "all" ? "text-muted-foreground" : ""}>
{selectedCompany === "all"
? getMenuTextSync(MENU_MANAGEMENT_KEYS.FILTER_COMPANY_ALL)
? getUITextSync("filter.company.all")
: selectedCompany === "*"
? getMenuTextSync(MENU_MANAGEMENT_KEYS.FILTER_COMPANY_COMMON)
? getUITextSync("filter.company.common")
: companies.find((c) => c.code === selectedCompany)?.name ||
getMenuTextSync(MENU_MANAGEMENT_KEYS.FILTER_COMPANY_ALL)}
getUITextSync("filter.company.all")}
</span>
<svg
className={`h-4 w-4 transition-transform ${isCompanyDropdownOpen ? "rotate-180" : ""}`}
@@ -771,7 +771,7 @@ export const MenuManagement: React.FC = () => {
{/* 검색 입력 */}
<div className="border-b p-2">
<Input
placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FILTER_COMPANY_SEARCH)}
placeholder={getUITextSync("filter.company.search")}
value={companySearchText}
onChange={(e) => setCompanySearchText(e.target.value)}
className="h-8 text-sm"
@@ -789,7 +789,7 @@ export const MenuManagement: React.FC = () => {
setCompanySearchText("");
}}
>
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FILTER_COMPANY_ALL)}
{getUITextSync("filter.company.all")}
</div>
<div
className="hover:bg-accent hover:text-accent-foreground flex cursor-pointer items-center px-2 py-1.5 text-sm"
@@ -799,7 +799,7 @@ export const MenuManagement: React.FC = () => {
setCompanySearchText("");
}}
>
{getMenuTextSync(MENU_MANAGEMENT_KEYS.FILTER_COMPANY_COMMON)}
{getUITextSync("filter.company.common")}
</div>
{companies
@@ -819,7 +819,7 @@ export const MenuManagement: React.FC = () => {
setCompanySearchText("");
}}
>
{company.code === "*" ? "공통" : company.name}
{company.code === "*" ? getUITextSync("filter.company.common") : company.name}
</div>
))}
</div>
@@ -829,9 +829,9 @@ export const MenuManagement: React.FC = () => {
</div>
<div>
<Label htmlFor="search">{getMenuTextSync(MENU_MANAGEMENT_KEYS.FILTER_SEARCH)}</Label>
<Label htmlFor="search">{getUITextSync("filter.search")}</Label>
<Input
placeholder={getMenuTextSync(MENU_MANAGEMENT_KEYS.FILTER_SEARCH_PLACEHOLDER)}
placeholder={getUITextSync("filter.search.placeholder")}
value={searchText}
onChange={(e) => setSearchText(e.target.value)}
/>
@@ -847,13 +847,13 @@ export const MenuManagement: React.FC = () => {
variant="outline"
className="w-full"
>
{getUITextSync(MENU_MANAGEMENT_KEYS.FILTER_RESET)}
{getUITextSync("filter.reset")}
</Button>
</div>
<div className="flex items-end">
<div className="text-sm text-gray-600">
{getUITextSync(MENU_MANAGEMENT_KEYS.LIST_SEARCH_RESULT, { count: getCurrentMenus().length })}
{getUITextSync("menu.list.search.result", { count: getCurrentMenus().length })}
</div>
</div>
</div>
@@ -862,11 +862,11 @@ export const MenuManagement: React.FC = () => {
<div className="flex-1 overflow-hidden">
<div className="mb-4 flex items-center justify-between">
<div className="text-sm text-gray-600">
{getUITextSync(MENU_MANAGEMENT_KEYS.LIST_TOTAL, { count: getCurrentMenus().length })}
{getUITextSync("menu.list.total", { count: getCurrentMenus().length })}
</div>
<div className="flex space-x-2">
<Button variant="outline" onClick={() => handleAddTopLevelMenu()} className="min-w-[100px]">
{getUITextSync(MENU_MANAGEMENT_KEYS.BUTTON_ADD_TOP_LEVEL)}
{getUITextSync("button.add.top.level")}
</Button>
{selectedMenus.size > 0 && (
<Button
@@ -878,10 +878,10 @@ export const MenuManagement: React.FC = () => {
{deleting ? (
<>
<LoadingSpinner size="sm" className="mr-2" />
{getUITextSync(MENU_MANAGEMENT_KEYS.BUTTON_DELETE_PROCESSING)}
{getUITextSync("button.delete.processing")}
</>
) : (
getUITextSync(MENU_MANAGEMENT_KEYS.BUTTON_DELETE_SELECTED_COUNT, {
getUITextSync("button.delete.selected.count", {
count: selectedMenus.size,
})
)}