메뉴 및 슬라이드 메뉴 다국어화

- MenuItems에 영문 메뉴명(menuNameEng) 추가
- MenuCategory 컴포넌트에 i18n 적용하여 언어별 메뉴 표시
- SlideMenu 컴포넌트 다국어 지원 추가
- ko.json, en.json에 slideMenu 번역 키 추가

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Jay Sheen
2025-10-29 15:22:55 +09:00
parent 7c0da1cd8e
commit 0c40d2150c
5 changed files with 114 additions and 54 deletions

View File

@@ -5,6 +5,8 @@ import { UserFavorite } from '@/entities/user/model/types';
import { RefObject, useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { MenuItem } from '../model/types';
import { useTranslation } from 'react-i18next';
import { MenuItems } from '@/entities/common/model/constant';
export interface MenuCategoryProps {
menuId?: number;
@@ -32,6 +34,7 @@ export const MenuCategory = ({
itemIndex
}: MenuCategoryProps) => {
const { navigate } = useNavigate();
const { i18n } = useTranslation();
// const location = useLocation();
const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
@@ -115,29 +118,33 @@ export const MenuCategory = ({
let rs = [];
if(subMenu){
for(let i=0;i<subMenu.length;i++){
const displayName = i18n.language === 'en' && subMenu[i]?.menuNameEng
? subMenu[i]?.menuNameEng
: subMenu[i]?.menuName;
if(!!editMode && subMenu[i] && subMenu[i]?.menuId){
rs.push(
<li
key={ `menu-item-key-${menuId}-${i}` }
onClick={ () => onClickToNavigate(subMenu[i]?.programPath) }
>
<span>{ subMenu[i]?.menuName }</span>
<span>{ displayName }</span>
<div className="check_box_scrap">
<input
<input
id={ `menu-item-checkbox-${subMenu[i]?.menuId}-${i}` }
className="checkbox"
type="checkbox"
checked={ menuIds.includes(subMenu[i]?.menuId)? true: false }
onChange={ (e) => favoriteSetting(
e.target.checked,
e.target.checked,
subMenu[i]?.menuId,
subMenu[i]?.menuName,
subMenu[i]?.menuNameEng,
subMenu[i]?.menuNameEng,
subMenu[i]?.iconFilePath,
subMenu[i]?.programPath,
)}
/>
<label
<label
className="gtr"
htmlFor={ `menu-item-checkbox-${subMenu[i]?.menuId}-${i}` }
></label>
@@ -150,16 +157,20 @@ export const MenuCategory = ({
<li
key={ `menu-item-key-${i}` }
onClick={ () => onClickToNavigate(subMenu[i]?.programPath) }
>{ subMenu[i]?.menuName }</li>
>{ displayName }</li>
);
}
}
}
return rs;
};
const displayCategoryName = i18n.language === 'en'
? MenuItems.find(item => item.menuId === menuId)?.menuNameEng || menuName
: menuName;
return (
<>
<div
@@ -172,7 +183,7 @@ export const MenuCategory = ({
>
<div className="category-header">
<div className={ 'category-icon ' + iconFilePath }></div>
<span>{ menuName }</span>
<span>{ displayCategoryName }</span>
</div>
<ul className="category-items">
{ getMenuItems() }