계정 권한 메뉴 이름에 다국어 지원 추가

- PermItem 타입에 menuNameEng 속성 추가
- 메뉴 권한 목록/아이템/페이지에서 현재 언어에 따라 메뉴 이름 선택
- 영어 번역 파일에 사용자 삭제 관련 번역 키 추가

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-11-14 19:12:34 +09:00
parent 62ce138a5a
commit 756137e809
5 changed files with 32 additions and 6 deletions

View File

@@ -41,7 +41,11 @@ export interface UserAccountAuthWrapProps {
}; };
export interface PermItem { export interface PermItem {
menuId?: number; menuId?: number;
parent?: number;
menuName?: string; menuName?: string;
menuNameEng?: string;
iconFilePath?: string;
programPath?: string;
subMenu?: Array<PermItem>; subMenu?: Array<PermItem>;
}; };
export interface UserAccountAuthPermListProps { export interface UserAccountAuthPermListProps {

View File

@@ -1,6 +1,7 @@
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { UserAccountAuthPermItemProps } from '../model/types'; import { UserAccountAuthPermItemProps } from '../model/types';
import { useTranslation } from 'react-i18next';
export const UserAccountAuthPermItem = ({ export const UserAccountAuthPermItem = ({
mid, mid,
@@ -13,8 +14,16 @@ export const UserAccountAuthPermItem = ({
menuGrants, menuGrants,
}: UserAccountAuthPermItemProps) => { }: UserAccountAuthPermItemProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { i18n } = useTranslation();
const isEnglish = i18n.language === 'en';
const onClickToNavigation = () => { const onClickToNavigation = () => {
// 현재 언어에 맞게 서브메뉴도 변환
const localizedSubMenu = subMenu.map(sub => ({
...sub,
menuName: isEnglish ? (sub.menuNameEng || sub.menuName) : sub.menuName
}));
navigate(PATHS.account.user.menuAuth, { navigate(PATHS.account.user.menuAuth, {
state: { state: {
mid: mid, mid: mid,
@@ -23,7 +32,7 @@ export const UserAccountAuthPermItem = ({
status: status, status: status,
menuId: menuId, menuId: menuId,
menuName: menuName, menuName: menuName,
subMenu: subMenu, subMenu: localizedSubMenu,
menuGrants: menuGrants, menuGrants: menuGrants,
} }
}) })

View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { UserAccountAuthPermListProps } from '../model/types'; import { UserAccountAuthPermListProps } from '../model/types';
import { UserAccountAuthPermItem } from './user-account-auth-perm-item'; import { UserAccountAuthPermItem } from './user-account-auth-perm-item';
@@ -9,6 +10,9 @@ export const UserAccountAuthPermList = ({
menuItems, menuItems,
menuGrants, menuGrants,
}: UserAccountAuthPermListProps) => { }: UserAccountAuthPermListProps) => {
const { i18n } = useTranslation();
const isEnglish = i18n.language === 'en';
return ( return (
<div className="perm-list"> <div className="perm-list">
{menuItems.map((item, index) => { {menuItems.map((item, index) => {
@@ -18,6 +22,9 @@ export const UserAccountAuthPermList = ({
subMenuIds.includes(grant.menuId) subMenuIds.includes(grant.menuId)
); );
// 현재 언어에 맞는 메뉴 이름 선택
const menuName = isEnglish ? (item.menuNameEng ?? item.menuName ?? '') : (item.menuName ?? '');
return ( return (
<UserAccountAuthPermItem <UserAccountAuthPermItem
key={`perm-${item.menuId || index}`} key={`perm-${item.menuId || index}`}
@@ -26,7 +33,7 @@ export const UserAccountAuthPermList = ({
idCL={idCL} idCL={idCL}
status={status} status={status}
menuId={item.menuId} menuId={item.menuId}
menuName={item.menuName ?? ''} menuName={menuName}
subMenu={item.subMenu ?? []} subMenu={item.subMenu ?? []}
menuGrants={relevantGrants} menuGrants={relevantGrants}
/> />

View File

@@ -354,7 +354,10 @@
"active": "Active", "active": "Active",
"inactive": "Inactive", "inactive": "Inactive",
"loginScope": "Login Scope", "loginScope": "Login Scope",
"menuPermissions": "Menu Permissions" "menuPermissions": "Menu Permissions",
"deleteUserConfirm": "Do you want to delete this user?",
"deleteUserSuccess": "User deleted successfully.",
"deleteUserFailed": "Failed to delete user."
}, },
"favorite": { "favorite": {
"edit": "Edit", "edit": "Edit",

View File

@@ -24,10 +24,11 @@ const PERMISSION = {
}; };
export const UserMenuAuthPage = () => { export const UserMenuAuthPage = () => {
const { t } = useTranslation(); const { t, i18n } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const location = useLocation(); const location = useLocation();
const { mid, usrid, menuName, subMenu, menuGrants } = location.state || {}; const { mid, usrid, menuName, subMenu, menuGrants } = location.state || {};
const isEnglish = i18n.language === 'en';
// 메뉴별 권한 상태 관리 // 메뉴별 권한 상태 관리
const [permissions, setPermissions] = useState<Record<number, number>>({}); const [permissions, setPermissions] = useState<Record<number, number>>({});
@@ -205,15 +206,17 @@ export const UserMenuAuthPage = () => {
<div className="desc service-tip">{t('account.setMenuPermissions')}</div> <div className="desc service-tip">{t('account.setMenuPermissions')}</div>
<div className="desc service-tip">{t('account.permissionRestrictionsNotice')}</div> <div className="desc service-tip">{t('account.permissionRestrictionsNotice')}</div>
{subMenu && subMenu.map((menu: { menuId: number; menuName: string }) => { {subMenu && subMenu.map((menu: { menuId: number; menuName: string; menuNameEng?: string }) => {
const menuGrant = permissions[menu.menuId] || 0; const menuGrant = permissions[menu.menuId] || 0;
const hasAccess = menuGrant > 0; const hasAccess = menuGrant > 0;
// 현재 언어에 맞는 메뉴 이름 선택
const displayMenuName = isEnglish ? (menu.menuNameEng || menu.menuName) : menu.menuName;
return ( return (
<div key={menu.menuId}> <div key={menu.menuId}>
<div className="settings-section nopadding"> <div className="settings-section nopadding">
<div className="settings-row"> <div className="settings-row">
<div className="settings-row-title bd-style">{menu.menuName}</div> <div className="settings-row-title bd-style">{displayMenuName}</div>
<label className="settings-switch"> <label className="settings-switch">
<input <input
type="checkbox" type="checkbox"