1d49fc7ac7
- Integrated multi-language functionality across various user management components, including user list, roles list, and user authorization pages, enhancing accessibility for diverse users. - Updated UI elements to utilize translation keys, ensuring that all text is dynamically translated based on user preferences. - Improved error handling messages to be localized, providing a better user experience in case of issues. These changes significantly enhance the usability and internationalization of the user management features, making the application more inclusive.
76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import { useState, useEffect, useCallback } from "react";
|
|
import { apiClient } from "@/lib/api/client";
|
|
import { useMultiLang } from "@/hooks/useMultiLang";
|
|
import { setTranslationCache } from "@/lib/utils/multilang";
|
|
|
|
interface UsePageMultiLangOptions {
|
|
keys: readonly string[];
|
|
defaults: Record<string, string>;
|
|
menuCode: string;
|
|
}
|
|
|
|
/**
|
|
* 페이지별 다국어 텍스트 관리 훅
|
|
* - keys: 다국어 키 배열
|
|
* - defaults: 한국어 기본 텍스트 매핑
|
|
* - menuCode: 배치 API에 전달할 메뉴 코드
|
|
*/
|
|
export function usePageMultiLang({ keys, defaults, menuCode }: UsePageMultiLangOptions) {
|
|
const { userLang } = useMultiLang();
|
|
const [uiTexts, setUiTexts] = useState<Record<string, string>>(() => ({ ...defaults }));
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// 배치 번역 로드
|
|
useEffect(() => {
|
|
if (!userLang || loading) return;
|
|
|
|
let cancelled = false;
|
|
const load = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const response = await apiClient.post(
|
|
"/multilang/batch",
|
|
{
|
|
langKeys: keys,
|
|
companyCode: "*",
|
|
menuCode,
|
|
userLang,
|
|
},
|
|
{ params: {} },
|
|
);
|
|
|
|
if (!cancelled && response.data.success && response.data.data) {
|
|
const merged = { ...defaults, ...response.data.data };
|
|
setUiTexts(merged);
|
|
setTranslationCache(userLang, merged);
|
|
}
|
|
} catch {
|
|
// API 실패 시 기본 텍스트 유지
|
|
} finally {
|
|
if (!cancelled) setLoading(false);
|
|
}
|
|
};
|
|
|
|
load();
|
|
return () => { cancelled = true; };
|
|
}, [userLang]);
|
|
|
|
// 동기 텍스트 조회 함수
|
|
const t = useCallback(
|
|
(key: string, params?: Record<string, string | number>): string => {
|
|
let text = uiTexts[key] || defaults[key] || key;
|
|
|
|
if (params) {
|
|
Object.entries(params).forEach(([k, v]) => {
|
|
text = text.replace(`{${k}}`, String(v));
|
|
});
|
|
}
|
|
|
|
return text;
|
|
},
|
|
[uiTexts, defaults],
|
|
);
|
|
|
|
return { t, userLang, loading };
|
|
}
|