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

- 홈 화면 일/월 탭, 매출/정산 현황 다국어화
- 매출/정산 상세 정보 라벨 다국어화 (승인/취소 건수, 정산한도 등)
- 거래 인사이트 및 랭킹 섹션 다국어화
- 요일 이름 동적 번역 기능 추가 (월요일-일요일 → 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 { useUserMenuPermissionsMutation } from '@/entities/user/api/use-user-menu-permission-mutation';
import { useUserUpdatePermissionsMutation } from '@/entities/user/api/use-user-update-permission-mutation'; import { useUserUpdatePermissionsMutation } from '@/entities/user/api/use-user-update-permission-mutation';
import { UserMenuPermissionData } from '@/entities/user/model/types'; import { UserMenuPermissionData } from '@/entities/user/model/types';
import { MenuItems } from '@/entities/common/model/constant';
import { useTranslation } from 'react-i18next';
export const UserAccountAuthWrap = ({ export const UserAccountAuthWrap = ({
mid, mid,
@@ -11,6 +13,7 @@ export const UserAccountAuthWrap = ({
idCL, idCL,
status, status,
}: UserAccountAuthWrapProps) => { }: UserAccountAuthWrapProps) => {
const { t } = useTranslation();
const [currentStatus, setCurrentStatus] = useState(status); const [currentStatus, setCurrentStatus] = useState(status);
const [currentIdCL, setCurrentIdCl] = useState(idCL); const [currentIdCL, setCurrentIdCl] = useState(idCL);
const [permissions, setPermissions] = useState<Array<UserMenuPermissionData>>([]); const [permissions, setPermissions] = useState<Array<UserMenuPermissionData>>([]);
@@ -46,84 +49,21 @@ export const UserAccountAuthWrap = ({
const idCLChanged = currentIdCL !== idCL; const idCLChanged = currentIdCL !== idCL;
setHasChanges(statusChanged || idCLChanged); setHasChanges(statusChanged || idCLChanged);
}, [currentStatus, currentIdCL, status, idCL]); }, [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 ( return (
<> <>
<div className="ing-list pdtop pb-86"> <div className="ing-list pdtop pb-86">
<div className="perm-form"> <div className="perm-form">
<div className="perm-field"> <div className="perm-field">
<div className="perm-label"> </div> <div className="perm-label">{t('account.accountStatus')}</div>
<div className="perm-control"> <div className="perm-control">
<select value={currentStatus} onChange={(e) => setCurrentStatus(e.target.value)}> <select value={currentStatus} onChange={(e) => setCurrentStatus(e.target.value)}>
<option value="NORMAL"></option> <option value="NORMAL">{t('account.active')}</option>
<option value="SUSPENDED"></option> <option value="SUSPENDED">{t('account.inactive')}</option>
</select> </select>
</div> </div>
</div> </div>
<div className="perm-field"> <div className="perm-field">
<div className="perm-label"> </div> <div className="perm-label">{t('account.loginScope')}</div>
<div className="perm-control"> <div className="perm-control">
<select value={currentIdCL} onChange={(e) => setCurrentIdCl(e.target.value)}> <select value={currentIdCL} onChange={(e) => setCurrentIdCl(e.target.value)}>
<option value="MID">MID</option> <option value="MID">MID</option>
@@ -133,14 +73,14 @@ export const UserAccountAuthWrap = ({
</div> </div>
</div> </div>
<div className="ing-title fs18"> </div> <div className="ing-title fs18">{t('account.menuPermissions')}</div>
<UserAccountAuthPermList <UserAccountAuthPermList
mid={ mid } mid={ mid }
usrid={ usrid } usrid={ usrid }
idCL={ currentIdCL } idCL={ currentIdCL }
status={ currentStatus } status={ currentStatus }
menuItems={ menuItems } menuItems={ MenuItems }
menuGrants={ permissions } menuGrants={ permissions }
></UserAccountAuthPermList> ></UserAccountAuthPermList>
@@ -160,7 +100,7 @@ export const UserAccountAuthWrap = ({
}); });
}} }}
> >
{updatePermissionsMutation.isPending ? '저장 중...' : '저장'} {updatePermissionsMutation.isPending ? t('common.saving') : t('common.save')}
</button> </button>
</div> </div>

View File

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

View File

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

View File

@@ -3,9 +3,11 @@ import { useState } from 'react';
import { BoxContainer1 } from './day-status-box-container1'; import { BoxContainer1 } from './day-status-box-container1';
import { BoxContainer2 } from './day-status-box-container2'; import { BoxContainer2 } from './day-status-box-container2';
import { HomeBannerList } from './home-banner-list'; import { HomeBannerList } from './home-banner-list';
import { HomeNoticeList } from './home-notice-list'; import { HomeNoticeList } from './home-notice-list';
import { useTranslation } from 'react-i18next';
export const DayStatusBox = () => { export const DayStatusBox = () => {
const { t } = useTranslation();
const [tabActive, setTabActive] = useState<1 | 2>(1); const [tabActive, setTabActive] = useState<1 | 2>(1);
return ( return (
@@ -14,14 +16,14 @@ export const DayStatusBox = () => {
<div className="day-tab"> <div className="day-tab">
<div>{ moment().format('YYYY.MM.DD') }</div> <div>{ moment().format('YYYY.MM.DD') }</div>
<div> <div>
<button <button
className={ `day-tab-btn ${(tabActive===1)? 'active': ''}` } className={ `day-tab-btn ${(tabActive===1)? 'active': ''}` }
onClick={ () => setTabActive(1) } onClick={ () => setTabActive(1) }
></button> >{t('home.daily')}</button>
<button <button
className={ `day-tab-btn ${(tabActive===2)? 'active': ''}` } className={ `day-tab-btn ${(tabActive===2)? 'active': ''}` }
onClick={ () => setTabActive(2) } onClick={ () => setTabActive(2) }
></button> >{t('home.monthly')}</button>
</div> </div>
</div> </div>
<div className={ `con-box one ${(tabActive===1)? 'active': ''}` }> <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 { UserFavorite } from '@/entities/user/model/types';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { useLocation } from 'react-router'; import { useLocation } from 'react-router';
import { useTranslation } from 'react-i18next';
/* /*
const items: Array<UserFavorite> = [ const items: Array<UserFavorite> = [
@@ -32,13 +33,14 @@ export const FavoriteWrapper = ({
setMenuOn setMenuOn
}: FavoriteWrapperProps) => { }: FavoriteWrapperProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { i18n, t } = useTranslation();
const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]); const [favoriteItems, setFavoriteItems] = useState<Array<UserFavorite>>([]);
const itemAdd: UserFavorite = { const itemAdd: UserFavorite = {
menuId: 0, menuId: 0,
menuName: '편집하기', menuName: t('favorite.edit'),
menuNameEng: 'edit', menuNameEng: t('favorite.edit'),
iconFilePath: IMAGE_ROOT + '/ico_menu_plus.svg', iconFilePath: IMAGE_ROOT + '/ico_menu_plus.svg',
programPath: '', programPath: '',
}; };
@@ -66,6 +68,10 @@ export const FavoriteWrapper = ({
const makeFavoriteItems = () => { const makeFavoriteItems = () => {
let rs = []; let rs = [];
for(let i=0;i<favoriteItems.length;i++){ for(let i=0;i<favoriteItems.length;i++){
const displayName = i18n.language === 'en' && favoriteItems[i]?.menuNameEng
? favoriteItems[i]?.menuNameEng
: favoriteItems[i]?.menuName;
rs.push( rs.push(
<SwiperSlide key={ `favorite-slide-key-${i}` }> <SwiperSlide key={ `favorite-slide-key-${i}` }>
<div <div
@@ -75,10 +81,10 @@ export const FavoriteWrapper = ({
<div className="swiper-icon coin-icon"> <div className="swiper-icon coin-icon">
<img <img
src={ favoriteItems[i]?.iconFilePath || '' } src={ favoriteItems[i]?.iconFilePath || '' }
alt={ favoriteItems[i]?.menuName } alt={ displayName }
/> />
</div> </div>
<span className="swiper-text">{ favoriteItems[i]?.menuName }</span> <span className="swiper-text">{ displayName }</span>
</div> </div>
</SwiperSlide> </SwiperSlide>
); );

View File

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

View File

@@ -6,6 +6,7 @@
"reset": "Reset", "reset": "Reset",
"close": "Close", "close": "Close",
"save": "Save", "save": "Save",
"saving": "Saving...",
"delete": "Delete", "delete": "Delete",
"edit": "Edit", "edit": "Edit",
"add": "Add", "add": "Add",
@@ -185,5 +186,49 @@
"appInfo": "App Info", "appInfo": "App Info",
"developerInfo": "Developer Info", "developerInfo": "Developer Info",
"logout": "Logout" "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": "초기화", "reset": "초기화",
"close": "닫기", "close": "닫기",
"save": "저장", "save": "저장",
"saving": "저장 중...",
"delete": "삭제", "delete": "삭제",
"edit": "수정", "edit": "수정",
"add": "추가", "add": "추가",
@@ -190,5 +191,49 @@
"appInfo": "앱 정보", "appInfo": "앱 정보",
"developerInfo": "개발자 정보", "developerInfo": "개발자 정보",
"logout": "로그아웃" "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 { setHomeReloadKey } from '@/pages/home/home-page';
import { useShortcutSaveMutation } from '@/entities/user/api/use-shortcut-save-mutation'; import { useShortcutSaveMutation } from '@/entities/user/api/use-shortcut-save-mutation';
import { ShortcutSaveParams, ShortcutSaveResponse } from '@/entities/user/model/types'; import { ShortcutSaveParams, ShortcutSaveResponse } from '@/entities/user/model/types';
import { useTranslation } from 'react-i18next';
// 상수 정의 // 상수 정의
const SCROLL_ANIMATION_DURATION = 800; const SCROLL_ANIMATION_DURATION = 800;
@@ -35,6 +36,7 @@ export const Menu = ({
setMenuOn, setMenuOn,
favoriteEdit favoriteEdit
}: MenuProps) => { }: MenuProps) => {
const { i18n } = useTranslation();
const userMids = useStore.getState().UserStore.userMids; const userMids = useStore.getState().UserStore.userMids;
const userInfo = useStore.getState().UserStore.userInfo; const userInfo = useStore.getState().UserStore.userInfo;
const location = useLocation(); const location = useLocation();
@@ -166,7 +168,7 @@ export const Menu = ({
const shortBtnsSetting = () => { const shortBtnsSetting = () => {
const shortList: ShortButton[] = MenuItems.map((item, index) => ({ const shortList: ShortButton[] = MenuItems.map((item, index) => ({
menuId: item.menuId, menuId: item.menuId,
menuName: item.menuName, menuName: i18n.language === 'en' && item.menuNameEng ? item.menuNameEng : item.menuName,
index index
})); }));
setShortBtns(shortList); setShortBtns(shortList);
@@ -227,7 +229,8 @@ export const Menu = ({
useEffect(() => { useEffect(() => {
shortBtnsSetting(); shortBtnsSetting();
}, []); // eslint-disable-next-line react-hooks/exhaustive-deps
}, [i18n.language]);
useEffect(() => { useEffect(() => {
if(favoriteEdit){ if(favoriteEdit){

View File

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