홈 화면, 메뉴, 네비게이션, 계정 관리 다국어화 완료
- 홈 화면 일/월 탭, 매출/정산 현황 다국어화 - 매출/정산 상세 정보 라벨 다국어화 (승인/취소 건수, 정산한도 등) - 거래 인사이트 및 랭킹 섹션 다국어화 - 요일 이름 동적 번역 기능 추가 (월요일-일요일 → 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
@@ -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'}` }>
|
||||
@@ -111,23 +129,23 @@ export const BoxContainer2 = () => {
|
||||
></NumericFormat>
|
||||
</span>
|
||||
<a className="arrow">
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_arrow.svg' }
|
||||
alt="오늘 매출 바로가기"
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_arrow.svg' }
|
||||
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'}` }>
|
||||
@@ -140,9 +158,9 @@ export const BoxContainer2 = () => {
|
||||
></NumericFormat>
|
||||
</span>
|
||||
<a className="arrow">
|
||||
<img
|
||||
<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) => (
|
||||
|
||||
Reference in New Issue
Block a user