홈 화면, 메뉴, 네비게이션, 계정 관리 다국어화 완료
- 홈 화면 일/월 탭, 매출/정산 현황 다국어화 - 매출/정산 상세 정보 라벨 다국어화 (승인/취소 건수, 정산한도 등) - 거래 인사이트 및 랭킹 섹션 다국어화 - 요일 이름 동적 번역 기능 추가 (월요일-일요일 → 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
@@ -3,7 +3,7 @@ import { NumericFormat } from 'react-number-format';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { useHomeTodayMutation } from '../api/use-home-today-mutation';
|
||||
import {
|
||||
import {
|
||||
HomeTodayParams,
|
||||
HomeTodayResponse,
|
||||
Sales,
|
||||
@@ -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'}` }>
|
||||
@@ -86,67 +88,67 @@ export const BoxContainer1 = () => {
|
||||
></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>
|
||||
<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="오늘 매출 바로가기"
|
||||
<img
|
||||
src={ IMAGE_ROOT + '/ico_arrow.svg' }
|
||||
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>
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
@@ -3,9 +3,11 @@ import { useState } from 'react';
|
||||
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 { HomeNoticeList } from './home-notice-list';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
export const DayStatusBox = () => {
|
||||
const { t } = useTranslation();
|
||||
const [tabActive, setTabActive] = useState<1 | 2>(1);
|
||||
|
||||
return (
|
||||
@@ -14,14 +16,14 @@ export const DayStatusBox = () => {
|
||||
<div className="day-tab">
|
||||
<div>{ moment().format('YYYY.MM.DD') }</div>
|
||||
<div>
|
||||
<button
|
||||
<button
|
||||
className={ `day-tab-btn ${(tabActive===1)? 'active': ''}` }
|
||||
onClick={ () => setTabActive(1) }
|
||||
>일</button>
|
||||
<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': ''}` }>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -49,10 +49,10 @@ export const HomeNoticeList = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="notice-list">
|
||||
<h3>공지 & 최신정보</h3>
|
||||
<h3>{t('home.noticesAndUpdates')}</h3>
|
||||
<div className="notice-box">
|
||||
{ (!!resultList && resultList.length > 0) &&
|
||||
getItems()
|
||||
{ (!!resultList && resultList.length > 0) &&
|
||||
getItems()
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user