홈 화면, 메뉴, 네비게이션, 계정 관리 다국어화 완료

- 홈 화면 일/월 탭, 매출/정산 현황 다국어화
- 매출/정산 상세 정보 라벨 다국어화 (승인/취소 건수, 정산한도 등)
- 거래 인사이트 및 랭킹 섹션 다국어화
- 요일 이름 동적 번역 기능 추가 (월요일-일요일 → Monday-Sunday)
- 계정 관리 화면 다국어화 (계정 상태, 로그인 범위, 권한 설정)
- 메뉴 카테고리 다국어화 (en 언어시 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-10-29 16:53:23 +09:00
parent 8c352e0c2c
commit 4faa8affb0
10 changed files with 195 additions and 132 deletions

View File

@@ -4,6 +4,8 @@ import { UserAccountAuthPermList } from './user-account-auth-perm-list';
import { useUserMenuPermissionsMutation } from '@/entities/user/api/use-user-menu-permission-mutation';
import { useUserUpdatePermissionsMutation } from '@/entities/user/api/use-user-update-permission-mutation';
import { UserMenuPermissionData } from '@/entities/user/model/types';
import { MenuItems } from '@/entities/common/model/constant';
import { useTranslation } from 'react-i18next';
export const UserAccountAuthWrap = ({
mid,
@@ -11,6 +13,7 @@ export const UserAccountAuthWrap = ({
idCL,
status,
}: UserAccountAuthWrapProps) => {
const { t } = useTranslation();
const [currentStatus, setCurrentStatus] = useState(status);
const [currentIdCL, setCurrentIdCl] = useState(idCL);
const [permissions, setPermissions] = useState<Array<UserMenuPermissionData>>([]);
@@ -46,84 +49,21 @@ export const UserAccountAuthWrap = ({
const idCLChanged = currentIdCL !== idCL;
setHasChanges(statusChanged || idCLChanged);
}, [currentStatus, currentIdCL, status, idCL]);
let menuItems = [
{menuId: 30, parent: 30, menuName: '거래조회', subMenu:
[
{menuId: 31, parent: 30, menuName: '거래내역조회'},
{menuId: 32, parent: 30, menuName: '현금영수증발행'},
{menuId: 33, parent: 30, menuName: '에스크로'},
{menuId: 34, parent: 30, menuName: '빌링'}
]
},
{menuId: 35, parent: 35, menuName: '정산조회', subMenu:
[
{menuId: 36, parent: 35, menuName: '정산달력'},
{menuId: 37, parent: 35, menuName: '정산내역'},
]
},
{menuId: 38, parent: 38, menuName: '가맹점관리', subMenu:
[
{menuId: 39, parent: 38, menuName: '가맹점정보'},
{menuId: 40, parent: 38, menuName: '등록현황'},
]
},
{menuId: 41, parent: 41, menuName: '결제관리', subMenu:
[
{menuId: 42, parent: 41, menuName: '결제정보'},
{menuId: 43, parent: 41, menuName: '결제데이터통보'},
]
},
{menuId: 44, parent: 44, menuName: '계정관리', subMenu:
[
{menuId: 45, parent: 44, menuName: '사용자관리'},
{menuId: 46, parent: 44, menuName: '비밀번호관리'},
]
},
{menuId: 47, parent: 47, menuName: '부가세신고자료', subMenu:
[
{menuId: 48, parent: 47, menuName: '세금계산서'},
{menuId: 49, parent: 47, menuName: '부가세참고'},
]
},
{menuId: 50, parent: 50, menuName: '부가서비스', subMenu:
[
{menuId: 51, parent: 50, menuName: '부가서비스소개'},
{menuId: 52, parent: 50, menuName: '신용카드ARS카드결제'},
{menuId: 53, parent: 50, menuName: '지급대행'},
{menuId: 54, parent: 50, menuName: '링크결제'},
{menuId: 55, parent: 50, menuName: '자금이체'},
{menuId: 56, parent: 50, menuName: 'KEY-IN결제'},
{menuId: 57, parent: 50, menuName: 'SMS결제통보'},
{menuId: 58, parent: 50, menuName: '알림톡결제통보'},
{menuId: 59, parent: 50, menuName: '계좌점유인증'},
{menuId: 60, parent: 50, menuName: '계좌성명조회'},
{menuId: 65, parent: 50, menuName: '안면인증'},
]
},
{menuId: 61, parent: 61, menuName: '고객지원', subMenu:
[
{menuId: 62, parent: 61, menuName: '공지사항'},
{menuId: 63, parent: 61, menuName: '자주묻는질문'},
{menuId: 64, parent: 61, menuName: '1:1문의'},
]
},
]
return (
<>
<div className="ing-list pdtop pb-86">
<div className="perm-form">
<div className="perm-field">
<div className="perm-label"> </div>
<div className="perm-label">{t('account.accountStatus')}</div>
<div className="perm-control">
<select value={currentStatus} onChange={(e) => setCurrentStatus(e.target.value)}>
<option value="NORMAL"></option>
<option value="SUSPENDED"></option>
<option value="NORMAL">{t('account.active')}</option>
<option value="SUSPENDED">{t('account.inactive')}</option>
</select>
</div>
</div>
<div className="perm-field">
<div className="perm-label"> </div>
<div className="perm-label">{t('account.loginScope')}</div>
<div className="perm-control">
<select value={currentIdCL} onChange={(e) => setCurrentIdCl(e.target.value)}>
<option value="MID">MID</option>
@@ -133,14 +73,14 @@ export const UserAccountAuthWrap = ({
</div>
</div>
<div className="ing-title fs18"> </div>
<div className="ing-title fs18">{t('account.menuPermissions')}</div>
<UserAccountAuthPermList
mid={ mid }
usrid={ usrid }
idCL={ currentIdCL }
status={ currentStatus }
menuItems={ menuItems }
menuItems={ MenuItems }
menuGrants={ permissions }
></UserAccountAuthPermList>
@@ -160,7 +100,7 @@ export const UserAccountAuthWrap = ({
});
}}
>
{updatePermissionsMutation.isPending ? '저장 중...' : '저장'}
{updatePermissionsMutation.isPending ? t('common.saving') : t('common.save')}
</button>
</div>

View File

@@ -12,9 +12,11 @@ import {
import { useNavigate } from '@/shared/lib/hooks';
import { PATHS } from '@/shared/constants/paths';
import { useStore } from '@/shared/model/store';
import { useTranslation } from 'react-i18next';
export const BoxContainer1 = () => {
const { navigate } = useNavigate();
const { t } = useTranslation();
const userMid = useStore.getState().UserStore.mid;
const [mid, setMid] = useState<string>(userMid);
@@ -66,14 +68,14 @@ export const BoxContainer1 = () => {
return (
<>
<div className="box-wrap">
<h3> </h3>
<h3>{t('home.todaySales')}</h3>
<div className="today-sales">
<span className="won01">
<NumericFormat
value={ sales?.todayTotalAmount }
thousandSeparator
displayType="text"
suffix='원'
suffix={t('home.currencyWon')}
></NumericFormat>
</span>
<span className={ `per ${(increaseRate && increaseRate >= 0)? 'plus': 'minus'}` }>
@@ -88,65 +90,65 @@ export const BoxContainer1 = () => {
<a className="arrow">
<img
src={ IMAGE_ROOT + '/ico_arrow.svg' }
alt="오늘 매출 바로가기"
alt={t('home.goToSales')}
onClick={ onClickToNavigate }
/>
</a>
</div>
<ul className="dales-detail">
<li className="approve">
{t('home.approvalCount')}
<strong style={{marginLeft: '4px'}}>
<NumericFormat
value={ sales?.totalCount }
thousandSeparator
displayType="text"
suffix='건'
suffix={t('home.count')}
></NumericFormat>
</strong>
</li>
<li className="cancel">
{t('home.cancelCount')}
<strong style={{marginLeft: '4px'}}>
<NumericFormat
value={ sales?.cancelCount }
thousandSeparator
displayType="text"
suffix='건'
suffix={t('home.count')}
></NumericFormat>
</strong>
</li>
</ul>
</div>
<div className="box-wrap">
<h3> </h3>
<h3>{t('home.todaySettlement')}</h3>
<div className="today-sales">
<span className="won02">
<NumericFormat
value={ settlement?.todaySettlementAmount }
thousandSeparator
displayType="text"
suffix='원'
suffix={t('home.currencyWon')}
></NumericFormat>
</span>
<span className="per"></span>
<span className="per">{t('home.depositCompleted')}</span>
<a className="arrow">
<img
src={ IMAGE_ROOT + '/ico_arrow.svg' }
alt="오늘 매출 바로가기"
alt={t('home.goToSales')}
onClick={ onClickToNavigate }
/>
</a>
</div>
<div className="progressbar">
<div className="progress-header">
<span className="progress-title"></span>
<span className="progress-title">{t('home.settlementLimit')}</span>
<span className="progress-remaining">
<NumericFormat
value={ availableLimit }
thousandSeparator
displayType="text"
suffix='% 남음'
suffix={t('home.percentRemaining')}
></NumericFormat>
</span>
</div>
@@ -156,13 +158,13 @@ export const BoxContainer1 = () => {
</div>
</div>
<div className="remain-limit">
<span></span>
<span>{t('home.remainingSettlementLimit')}</span>
<strong style={{marginLeft: '4px'}}>
<NumericFormat
value={ settlement?.availableCredit }
thousandSeparator
displayType="text"
suffix='원'
suffix={t('home.currencyWon')}
></NumericFormat>
</strong>
</div>

View File

@@ -8,9 +8,11 @@ import { NumericFormat } from 'react-number-format';
import { useNavigate } from '@/shared/lib/hooks';
import { PATHS } from '@/shared/constants/paths';
import { useStore } from '@/shared/model/store';
import { useTranslation } from 'react-i18next';
export const BoxContainer2 = () => {
const { navigate } = useNavigate();
const { t, i18n } = useTranslation();
const userMid = useStore.getState().UserStore.mid;
const [mid, setMid] = useState<string>(userMid);
@@ -83,22 +85,38 @@ export const BoxContainer2 = () => {
navigate(PATHS.settlement.list);
};
const translateDayOfWeek = (koreanDay: string): string => {
if (i18n.language !== 'en') return koreanDay;
const dayMap: { [key: string]: string } = {
'월요일': 'Monday',
'화요일': 'Tuesday',
'수요일': 'Wednesday',
'목요일': 'Thursday',
'금요일': 'Friday',
'토요일': 'Saturday',
'일요일': 'Sunday'
};
return dayMap[koreanDay] || koreanDay;
};
return (
<>
<div>
<div className="section-header">
<h3>/ </h3>
<p>( / )</p>
<h3>{t('home.salesSettlementStatus')}</h3>
<p>({t('home.comparedToPreviousMonth')})</p>
</div>
<div className="box-wrap two-sales">
<h4> </h4>
<h4>{t('home.totalSales')}</h4>
<div className="today-sales mt-sty">
<span className="won01">
<NumericFormat
value={ sales?.currentMonthAmount }
thousandSeparator
displayType="text"
suffix='원'
suffix={t('home.currencyWon')}
></NumericFormat>
</span>
<span className={ `per ${(salesIncrease && salesIncrease >= 0)? 'plus': 'minus'}` }>
@@ -113,21 +131,21 @@ export const BoxContainer2 = () => {
<a className="arrow">
<img
src={ IMAGE_ROOT + '/ico_arrow.svg' }
alt="오늘 매출 바로가기"
alt={t('home.goToSales')}
onClick={ onClickToNavigate }
/>
</a>
</div>
</div>
<div className="box-wrap two-sales">
<h4> </h4>
<h4>{t('home.totalSettlement')}</h4>
<div className="today-sales mt-sty">
<span className="won02">
<NumericFormat
value={ settlement?.currentMonthSettlementAmount }
thousandSeparator
displayType="text"
suffix='원'
suffix={t('home.currencyWon')}
></NumericFormat>
</span>
<span className={ `per ${(settlementIncrease && settlementIncrease >= 0)? 'plus': 'minus'}` }>
@@ -142,7 +160,7 @@ export const BoxContainer2 = () => {
<a className="arrow">
<img
src={ IMAGE_ROOT + '/ico_arrow.svg' }
alt="오늘 매출 바로가기"
alt={t('home.goToSales')}
onClick={ onClickToNavigate }
/>
</a>
@@ -151,37 +169,37 @@ export const BoxContainer2 = () => {
</div>
<div>
<div className="section-header">
<h3> </h3>
<p>( )</p>
<h3>{t('home.transactionInsights')}</h3>
<p>({t('home.basedOnLastWeek')})</p>
</div>
<div className="box-wrap two-sales img-customer">
<h4> </h4>
<h4>{t('home.averageTransactionAmount')}</h4>
<div className="two-account">
<span>
<NumericFormat
value={ averageTransactionAmount }
thousandSeparator
displayType="text"
suffix='원'
suffix={t('home.currencyWon')}
></NumericFormat>
</span>
</div>
</div>
<div className="box-wrap two-sales img-states">
<h4> </h4>
<h4>{t('home.dailyAverageSalesAndCount')}</h4>
<div className="two-account">
<span>
<NumericFormat
value={ dailyAverageSales }
thousandSeparator
displayType="text"
suffix='원'
suffix={t('home.currencyWon')}
></NumericFormat>
(<NumericFormat
value={ dailyAverageCount }
thousandSeparator
displayType="text"
suffix='원'
suffix={t('home.currencyWon')}
></NumericFormat>)
</span>
</div>
@@ -189,13 +207,13 @@ export const BoxContainer2 = () => {
</div>
<div>
<div className="box-wrap ranking">
<h4> </h4>
<h4>{t('home.topSalesDays')}</h4>
<ul>
{
topSalesDayInfo?.daySalesRatios.map((value, index) => (
<li key={`key-day-sales-ratio-${index}`}>
<span className={ `ranking-num-${(index === 0)? '01': 'ot'}` }>{ (index + 1) }</span>
<span>{ value.dayOfWeek }</span>
<span>{ translateDayOfWeek(value.dayOfWeek) }</span>
<span className="last-per-01">{ value.ratio + '%' }</span>
</li>
))
@@ -203,7 +221,7 @@ export const BoxContainer2 = () => {
</ul>
</div>
<div className="box-wrap ranking">
<h4> </h4>
<h4>{t('home.topSalesHours')}</h4>
<ul>
{
topSalesTimeInfo?.timeSalesRatios.map((value, index) => (
@@ -217,7 +235,7 @@ export const BoxContainer2 = () => {
</ul>
</div>
<div className="box-wrap ranking">
<h4> </h4>
<h4>{t('home.topPaymentMethods')}</h4>
<ul>
{
topPaymentMethodInfo?.paymentMethodRatios.map((value, index) => (

View File

@@ -4,8 +4,10 @@ import { BoxContainer1 } from './day-status-box-container1';
import { BoxContainer2 } from './day-status-box-container2';
import { HomeBannerList } from './home-banner-list';
import { HomeNoticeList } from './home-notice-list';
import { useTranslation } from 'react-i18next';
export const DayStatusBox = () => {
const { t } = useTranslation();
const [tabActive, setTabActive] = useState<1 | 2>(1);
return (
@@ -17,11 +19,11 @@ export const DayStatusBox = () => {
<button
className={ `day-tab-btn ${(tabActive===1)? 'active': ''}` }
onClick={ () => setTabActive(1) }
></button>
>{t('home.daily')}</button>
<button
className={ `day-tab-btn ${(tabActive===2)? 'active': ''}` }
onClick={ () => setTabActive(2) }
></button>
>{t('home.monthly')}</button>
</div>
</div>
<div className={ `con-box one ${(tabActive===1)? 'active': ''}` }>

View File

@@ -6,6 +6,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
import { UserFavorite } from '@/entities/user/model/types';
import { useStore } from '@/shared/model/store';
import { useLocation } from 'react-router';
import { useTranslation } from 'react-i18next';
/*
const items: Array<UserFavorite> = [
@@ -32,13 +33,14 @@ export const FavoriteWrapper = ({
setMenuOn
}: FavoriteWrapperProps) => {
const { navigate } = useNavigate();
const { i18n, t } = useTranslation();
const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
const itemAdd: UserFavorite = {
menuId: 0,
menuName: '편집하기',
menuNameEng: 'edit',
menuName: t('favorite.edit'),
menuNameEng: t('favorite.edit'),
iconFilePath: IMAGE_ROOT + '/ico_menu_plus.svg',
programPath: '',
};
@@ -66,6 +68,10 @@ export const FavoriteWrapper = ({
const makeFavoriteItems = () => {
let rs = [];
for(let i=0;i<favoriteItems.length;i++){
const displayName = i18n.language === 'en' && favoriteItems[i]?.menuNameEng
? favoriteItems[i]?.menuNameEng
: favoriteItems[i]?.menuName;
rs.push(
<SwiperSlide key={ `favorite-slide-key-${i}` }>
<div
@@ -75,10 +81,10 @@ export const FavoriteWrapper = ({
<div className="swiper-icon coin-icon">
<img
src={ favoriteItems[i]?.iconFilePath || '' }
alt={ favoriteItems[i]?.menuName }
alt={ displayName }
/>
</div>
<span className="swiper-text">{ favoriteItems[i]?.menuName }</span>
<span className="swiper-text">{ displayName }</span>
</div>
</SwiperSlide>
);

View File

@@ -49,7 +49,7 @@ export const HomeNoticeList = () => {
return (
<>
<div className="notice-list">
<h3> & </h3>
<h3>{t('home.noticesAndUpdates')}</h3>
<div className="notice-box">
{ (!!resultList && resultList.length > 0) &&
getItems()

View File

@@ -6,6 +6,7 @@
"reset": "Reset",
"close": "Close",
"save": "Save",
"saving": "Saving...",
"delete": "Delete",
"edit": "Edit",
"add": "Add",
@@ -185,5 +186,49 @@
"appInfo": "App Info",
"developerInfo": "Developer Info",
"logout": "Logout"
},
"account": {
"accountStatus": "Account Status",
"active": "Active",
"inactive": "Inactive",
"loginScope": "Login Scope",
"menuPermissions": "Menu Permissions"
},
"favorite": {
"edit": "Edit"
},
"footer": {
"home": "Home",
"transaction": "Transactions",
"settlement": "Settlement",
"account": "Users",
"more": "More"
},
"home": {
"daily": "Daily",
"monthly": "Monthly",
"todaySales": "Today's Sales",
"todaySettlement": "Today's Settlement",
"approvalCount": "Approved",
"cancelCount": "Cancelled",
"count": "",
"depositCompleted": "Completed",
"settlementLimit": "Settlement Limit",
"percentRemaining": "% remaining",
"remainingSettlementLimit": "Remaining Limit",
"salesSettlementStatus": "Sales/Settlement Status",
"comparedToPreviousMonth": "Compared to Previous Month",
"totalSales": "Total Sales",
"totalSettlement": "Total Settlement",
"currencyWon": "KRW",
"goToSales": "Go to Sales",
"transactionInsights": "Transaction Insights",
"basedOnLastWeek": "Based on Last Week",
"averageTransactionAmount": "Average Transaction Amount",
"dailyAverageSalesAndCount": "Daily Average Sales & Count",
"topSalesDays": "Top Sales Days",
"topSalesHours": "Top Sales Hours",
"topPaymentMethods": "Top Payment Methods",
"noticesAndUpdates": "Notices & Updates"
}
}

View File

@@ -6,6 +6,7 @@
"reset": "초기화",
"close": "닫기",
"save": "저장",
"saving": "저장 중...",
"delete": "삭제",
"edit": "수정",
"add": "추가",
@@ -190,5 +191,49 @@
"appInfo": "앱 정보",
"developerInfo": "개발자 정보",
"logout": "로그아웃"
},
"account": {
"accountStatus": "계정 상태",
"active": "사용",
"inactive": "미사용",
"loginScope": "로그인 범위",
"menuPermissions": "메뉴별 권한 설정"
},
"favorite": {
"edit": "편집하기"
},
"footer": {
"home": "홈",
"transaction": "거래조회",
"settlement": "정산내역",
"account": "사용자관리",
"more": "더보기"
},
"home": {
"daily": "일",
"monthly": "월",
"todaySales": "오늘 매출",
"todaySettlement": "오늘 정산",
"approvalCount": "승인 건수",
"cancelCount": "취소 건수",
"count": "건",
"depositCompleted": "입금완료",
"settlementLimit": "정산한도",
"percentRemaining": "% 남음",
"remainingSettlementLimit": "잔여정산한도",
"salesSettlementStatus": "매출/정산 현황",
"comparedToPreviousMonth": "전월 전체 매출/정산 대비 기준",
"totalSales": "총 매출액",
"totalSettlement": "총 정산액",
"currencyWon": "원",
"goToSales": "오늘 매출 바로가기",
"transactionInsights": "거래 인사이트",
"basedOnLastWeek": "최근 일주일 기준",
"averageTransactionAmount": "평균 객단가",
"dailyAverageSalesAndCount": "하루 평균 매출 및 건수",
"topSalesDays": "매출이 가장 높은 요일",
"topSalesHours": "매출이 가장 높은 시간",
"topPaymentMethods": "가장 많이쓰인 결제 수단",
"noticesAndUpdates": "공지 & 최신정보"
}
}

View File

@@ -11,6 +11,7 @@ import { useLocation } from 'react-router';
import { setHomeReloadKey } from '@/pages/home/home-page';
import { useShortcutSaveMutation } from '@/entities/user/api/use-shortcut-save-mutation';
import { ShortcutSaveParams, ShortcutSaveResponse } from '@/entities/user/model/types';
import { useTranslation } from 'react-i18next';
// 상수 정의
const SCROLL_ANIMATION_DURATION = 800;
@@ -35,6 +36,7 @@ export const Menu = ({
setMenuOn,
favoriteEdit
}: MenuProps) => {
const { i18n } = useTranslation();
const userMids = useStore.getState().UserStore.userMids;
const userInfo = useStore.getState().UserStore.userInfo;
const location = useLocation();
@@ -166,7 +168,7 @@ export const Menu = ({
const shortBtnsSetting = () => {
const shortList: ShortButton[] = MenuItems.map((item, index) => ({
menuId: item.menuId,
menuName: item.menuName,
menuName: i18n.language === 'en' && item.menuNameEng ? item.menuNameEng : item.menuName,
index
}));
setShortBtns(shortList);
@@ -227,7 +229,8 @@ export const Menu = ({
useEffect(() => {
shortBtnsSetting();
}, []);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [i18n.language]);
useEffect(() => {
if(favoriteEdit){

View File

@@ -7,6 +7,7 @@ import {
} from '@/entities/common/model/types';
import { useEffect, useState } from 'react';
import { useAppBridge } from '@/hooks';
import { useTranslation } from 'react-i18next';
export const FooterNavigation = ({
setMenuOn,
@@ -14,6 +15,7 @@ export const FooterNavigation = ({
setFavoriteEdit
}: FooterProps) => {
const { navigate } = useNavigate();
const { t } = useTranslation();
const [isFooterOn, setIsFooterOn] = useState<boolean>(true);
const onClickToNavigate = (path?: string) => {
@@ -32,33 +34,33 @@ export const FooterNavigation = ({
inactiveIcon: IMAGE_ROOT + '/home.svg',
path: PATHS.home,
activeKey: FooterItemActiveKey.Home,
title: '홈'
title: t('footer.home')
},
{
activeIcon: IMAGE_ROOT + '/chart-active.svg',
inactiveIcon: IMAGE_ROOT + '/chart.svg',
path: PATHS.transaction.allTransaction.list,
activeKey: FooterItemActiveKey.Transaction,
title: '거래조회'
title: t('footer.transaction')
},
{
activeIcon: IMAGE_ROOT + '/money-active.svg',
inactiveIcon: IMAGE_ROOT + '/money.svg',
path: PATHS.settlement.list,
activeKey: FooterItemActiveKey.Settlement,
title: '정산내역'
title: t('footer.settlement')
},
{
activeIcon: IMAGE_ROOT + '/users-active.svg',
inactiveIcon: IMAGE_ROOT + '/users.svg',
path: PATHS.account.user.manage,
activeKey: FooterItemActiveKey.Account,
title: '사용자관리'
title: t('footer.account')
},
{
activeIcon: IMAGE_ROOT + '/more-active.svg',
inactiveIcon: IMAGE_ROOT + '/more.svg',
title: '더보기'
title: t('footer.more')
},
];