diff --git a/src/entities/home/ui/day-status-box-container1.tsx b/src/entities/home/ui/day-status-box-container1.tsx index 221f0a4..3e65ba5 100644 --- a/src/entities/home/ui/day-status-box-container1.tsx +++ b/src/entities/home/ui/day-status-box-container1.tsx @@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next'; export const BoxContainer1 = () => { const { navigate } = useNavigate(); - const { t } = useTranslation(); + const { t, i18n } = useTranslation(); const userMid = useStore.getState().UserStore.mid; const [mid, setMid] = useState(userMid); @@ -75,7 +75,8 @@ export const BoxContainer1 = () => { value={ sales?.todayTotalAmount } thousandSeparator displayType="text" - suffix={t('home.currencyWon')} + prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''} + suffix={i18n.language === 'en' ? '' : t('home.currencyWon')} > = 0)? 'plus': 'minus'}` }> @@ -128,7 +129,8 @@ export const BoxContainer1 = () => { value={ settlement?.todaySettlementAmount } thousandSeparator displayType="text" - suffix={t('home.currencyWon')} + prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''} + suffix={i18n.language === 'en' ? '' : t('home.currencyWon')} > {t('home.depositCompleted')} @@ -164,7 +166,8 @@ export const BoxContainer1 = () => { value={ settlement?.availableCredit } thousandSeparator displayType="text" - suffix={t('home.currencyWon')} + prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''} + suffix={i18n.language === 'en' ? '' : t('home.currencyWon')} > diff --git a/src/entities/home/ui/day-status-box-container2.tsx b/src/entities/home/ui/day-status-box-container2.tsx index 3ca265c..1594006 100644 --- a/src/entities/home/ui/day-status-box-container2.tsx +++ b/src/entities/home/ui/day-status-box-container2.tsx @@ -116,7 +116,8 @@ export const BoxContainer2 = () => { value={ sales?.currentMonthAmount } thousandSeparator displayType="text" - suffix={t('home.currencyWon')} + prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''} + suffix={i18n.language === 'en' ? '' : t('home.currencyWon')} > = 0)? 'plus': 'minus'}` }> @@ -145,7 +146,8 @@ export const BoxContainer2 = () => { value={ settlement?.currentMonthSettlementAmount } thousandSeparator displayType="text" - suffix={t('home.currencyWon')} + prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''} + suffix={i18n.language === 'en' ? '' : t('home.currencyWon')} > = 0)? 'plus': 'minus'}` }> @@ -180,7 +182,8 @@ export const BoxContainer2 = () => { value={ averageTransactionAmount } thousandSeparator displayType="text" - suffix={t('home.currencyWon')} + prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''} + suffix={i18n.language === 'en' ? '' : t('home.currencyWon')} > @@ -193,13 +196,14 @@ export const BoxContainer2 = () => { value={ dailyAverageSales } thousandSeparator displayType="text" - suffix={t('home.currencyWon')} + prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''} + suffix={i18n.language === 'en' ? '' : t('home.currencyWon')} > () diff --git a/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx b/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx index 0a7acdd..9b2cf44 100644 --- a/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx +++ b/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx @@ -1,7 +1,8 @@ import { NumericFormat } from 'react-number-format'; -import { - InfoWrapKeys, - AmountInfoWrapProps, +import { useTranslation } from 'react-i18next'; +import { + InfoWrapKeys, + AmountInfoWrapProps, SettlementPeriodType } from '@/entities/settlement/model/types'; @@ -10,24 +11,26 @@ export const AmountInfoWrap = ({ amountInfo, settlementAmount }: AmountInfoWrapProps) => { + const { t, i18n } = useTranslation(); return ( <>
-
금액 정보
+
{t('settlement.amountInfo')}
{ (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
- { + { + prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''} + suffix={i18n.language === 'en' ? '' : t('home.currencyWon')} + > }
diff --git a/src/entities/settlement/ui/list-wrap.tsx b/src/entities/settlement/ui/list-wrap.tsx index 1df46d2..be990eb 100644 --- a/src/entities/settlement/ui/list-wrap.tsx +++ b/src/entities/settlement/ui/list-wrap.tsx @@ -33,6 +33,7 @@ import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/ import { useStore } from '@/shared/model/store'; import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; import useIntersectionObserver from '@/widgets/intersection-observer'; +import { useTranslation } from 'react-i18next'; export interface ListWrapProps { startDateFromCalendar?: string; @@ -44,6 +45,7 @@ export const ListWrap = ({ endDateFromCalendar }: ListWrapProps) => { const { navigate } = useNavigate(); + const { t, i18n } = useTranslation(); const userMid = useStore.getState().UserStore.mid; const [onActionIntersect, setOnActionIntersect] = useState(false); @@ -371,38 +373,39 @@ export const ListWrap = ({ readOnly={ true } /> -
정산금액
+
{t('settlement.settlementAmount')}
@@ -445,14 +448,14 @@ export const ListWrap = ({ >
- changePeriodType(SettlementPeriodType.SETTLEMENT_DATE) } - >가맹점 기준 - {t('settlement.merchantBasis')} + changePeriodType(SettlementPeriodType.TRANSACTION_DATE) } - >거래 기준 + >{t('settlement.transactionBasis')}
diff --git a/src/entities/settlement/ui/settlement-tab.tsx b/src/entities/settlement/ui/settlement-tab.tsx index 9d07e1a..e144869 100644 --- a/src/entities/settlement/ui/settlement-tab.tsx +++ b/src/entities/settlement/ui/settlement-tab.tsx @@ -1,14 +1,16 @@ import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; -import { +import { SettlementTabKeys, SettlementTabProps } from '../model/types'; +import { useTranslation } from 'react-i18next'; export const SettlementTab = ({ activeTab }: SettlementTabProps) => { const { navigate } = useNavigate(); + const { t } = useTranslation(); const onClickToNavigation = (tab: SettlementTabKeys) => { if(activeTab !== tab){ @@ -23,14 +25,14 @@ export const SettlementTab = ({ return( <>
- - + + onClick={ () => onClickToNavigation(SettlementTabKeys.List) } + >{t('settlement.history')}
); diff --git a/src/locales/en.json b/src/locales/en.json index e75e83b..c293399 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -220,7 +220,8 @@ "comparedToPreviousMonth": "Compared to Previous Month", "totalSales": "Total Sales", "totalSettlement": "Total Settlement", - "currencyWon": "KRW", + "currencyWon": "", + "currencySymbol": "₩", "goToSales": "Go to Sales", "transactionInsights": "Transaction Insights", "basedOnLastWeek": "Based on Last Week", @@ -230,5 +231,49 @@ "topSalesHours": "Top Sales Hours", "topPaymentMethods": "Top Payment Methods", "noticesAndUpdates": "Notices & Updates" + }, + "settlement": { + "title": "Settlement", + "calendar": "Calendar", + "history": "History", + "detailTitle": "Settlement Details", + "settlementAmount": "Settlement Amount", + "arrow": "Arrow", + "merchantBasis": "Merchant Basis", + "transactionBasis": "Transaction Basis", + "settled": "Settled", + "approved": "Approved", + "settlementShort": "Settlement", + "approvalShort": "Approval", + "amountInfo": "Amount Information", + "totalTransactionAmount": "Total Transaction Amount", + "creditCard": "Credit Card", + "accountTransfer": "Account Transfer", + "totalPgFee": "Total PG Fee", + "paymentFee": "Payment Fee", + "escrowFee": "Escrow Fee", + "authFee": "Auth Fee", + "hold": "Hold", + "release": "Release", + "offset": "Offset", + "transactionAmount": "Transaction Amount", + "expectedSettlementAmount": "Expected Settlement Amount", + "preSettlementCancelOffset": "Pre-Settlement Cancel Offset" + }, + "transaction": { + "listTitle": "Transaction History", + "detailTitle": "Transaction Details", + "cancelTitle": "Cancel Transaction", + "fullCancel": "Full Cancel", + "partialCancel": "Partial Cancel", + "submit": "Submit", + "searchAmount": "Search Amount", + "searchDate": "Search Date", + "transactionCount": "Transaction Count", + "total": "Total", + "searchOptions": "Search Options", + "download": "Download", + "cancelTransaction": "Cancel Transaction", + "confirmCancel": "Do you want to cancel this transaction?" } } \ No newline at end of file diff --git a/src/locales/ko.json b/src/locales/ko.json index cc647f4..12414c0 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -235,5 +235,49 @@ "topSalesHours": "매출이 가장 높은 시간", "topPaymentMethods": "가장 많이쓰인 결제 수단", "noticesAndUpdates": "공지 & 최신정보" + }, + "settlement": { + "title": "정산조회", + "calendar": "정산달력", + "history": "정산내역", + "detailTitle": "정산내역 상세", + "settlementAmount": "정산금액", + "arrow": "화살표", + "merchantBasis": "가맹점 기준", + "transactionBasis": "거래 기준", + "settled": "정산", + "approved": "승인", + "settlementShort": "정산", + "approvalShort": "승인", + "amountInfo": "금액 정보", + "totalTransactionAmount": "거래금액 합계", + "creditCard": "신용카드", + "accountTransfer": "계좌이체", + "totalPgFee": "PG 수수료 합계", + "paymentFee": "결제 수수료", + "escrowFee": "에스크로 수수료", + "authFee": "인증 수수료", + "hold": "보류", + "release": "해제", + "offset": "상계", + "transactionAmount": "거래금액", + "expectedSettlementAmount": "정산예정금액", + "preSettlementCancelOffset": "정산전 취소상계" + }, + "transaction": { + "listTitle": "거래내역 조회", + "detailTitle": "거래내역 상세", + "cancelTitle": "거래 취소", + "fullCancel": "전체 취소", + "partialCancel": "부분 취소", + "submit": "신청", + "searchAmount": "조회금액", + "searchDate": "조회일자", + "transactionCount": "거래건수", + "total": "총", + "searchOptions": "검색옵션", + "download": "다운로드", + "cancelTransaction": "거래 취소", + "confirmCancel": "거래를 취소하시겠습니까?" } } \ No newline at end of file diff --git a/src/pages/settlement/calendar/calendar-page.tsx b/src/pages/settlement/calendar/calendar-page.tsx index a63407b..8ebab55 100644 --- a/src/pages/settlement/calendar/calendar-page.tsx +++ b/src/pages/settlement/calendar/calendar-page.tsx @@ -5,19 +5,21 @@ import { SettlementTab } from '@/entities/settlement/ui/settlement-tab'; import { CalendarWrap } from '@/entities/settlement/ui/calandar-wrap'; import { SettlementTabKeys } from '@/entities/settlement/model/types'; import { HeaderType } from '@/entities/common/model/types'; -import { +import { useSetHeaderTitle, useSetHeaderType, useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; +import { useTranslation } from 'react-i18next'; export const CalendarPage = () => { const { navigate } = useNavigate(); - + const { t } = useTranslation(); + const [activeTab, setActiveTab] = useState(SettlementTabKeys.Calendar); - useSetHeaderTitle('정산조회'); + useSetHeaderTitle(t('settlement.title')); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); useSetOnBack(() => { diff --git a/src/pages/settlement/list/detail-page.tsx b/src/pages/settlement/list/detail-page.tsx index b715c03..ad8b1af 100644 --- a/src/pages/settlement/list/detail-page.tsx +++ b/src/pages/settlement/list/detail-page.tsx @@ -18,7 +18,7 @@ import { TransactionInfo } from '@/entities/settlement/model/types'; import { - useSetOnBack, + useSetOnBack, useSetHeaderTitle, useSetHeaderType, useSetFooterMode @@ -27,9 +27,11 @@ import { useSettlementsHistoryDetailMutation } from '@/entities/settlement/api/u import { useSettlementsTransactionDetailMutation } from '@/entities/settlement/api/use-settlements-transaction-detail-mutation'; import { NumericFormat } from 'react-number-format'; import moment from 'moment'; +import { useTranslation } from 'react-i18next'; export const DetailPage = () => { const { navigate } = useNavigate(); + const { t, i18n } = useTranslation(); const location = useLocation(); const [amountInfo, setAmountInfo] = useState(); @@ -50,9 +52,9 @@ export const DetailPage = () => { const approvalNumber = location.state.approvalNumber; const periodType = location.state.periodType; const tid = location.state.tid; - - useSetHeaderTitle('정산내역 상세'); + + useSetHeaderTitle(t('settlement.detailTitle')); useSetHeaderType(HeaderType.RightClose); useSetOnBack(() => { navigate(PATHS.settlement.list); @@ -109,29 +111,33 @@ export const DetailPage = () => {
- { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && + { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
+ {i18n.language === 'en' && {t('home.currencySymbol')}} 원 + > + {i18n.language !== 'en' && {t('home.currencyWon')}}
{ moment(settlementDate).format('YYYY.MM.DD') }
} - { (periodType === SettlementPeriodType.TRANSACTION_DATE) && + { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
+ {i18n.language === 'en' && {t('home.currencySymbol')}} 원 + > + {i18n.language !== 'en' && {t('home.currencyWon')}}
{ merchantName }
diff --git a/src/pages/settlement/list/list-page.tsx b/src/pages/settlement/list/list-page.tsx index 0c9376c..44bc3fb 100644 --- a/src/pages/settlement/list/list-page.tsx +++ b/src/pages/settlement/list/list-page.tsx @@ -7,15 +7,17 @@ import { ListWrap } from '@/entities/settlement/ui/list-wrap'; import { SettlementTabKeys } from '@/entities/settlement/model/types'; import { FooterItemActiveKey } from '@/entities/common/model/types'; import { HeaderType } from '@/entities/common/model/types'; -import { +import { useSetHeaderTitle, useSetHeaderType, useSetFooterMode, useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; +import { useTranslation } from 'react-i18next'; export const ListPage = () => { const { navigate } = useNavigate(); + const { t } = useTranslation(); const location = useLocation(); const startDate: string | undefined = location?.state?.startDate; @@ -23,7 +25,7 @@ export const ListPage = () => { const [activeTab, setActiveTab] = useState(SettlementTabKeys.List); - useSetHeaderTitle('정산조회'); + useSetHeaderTitle(t('settlement.title')); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); useSetOnBack(() => { diff --git a/src/pages/transaction/all-transaction/cancel-page.tsx b/src/pages/transaction/all-transaction/cancel-page.tsx index 2ccbef8..7634c8a 100644 --- a/src/pages/transaction/all-transaction/cancel-page.tsx +++ b/src/pages/transaction/all-transaction/cancel-page.tsx @@ -13,7 +13,7 @@ import { DebtPreventionCancelDisplayInfo, DebtPreventionCancelRequestInfo } from '@/entities/transaction/model/types'; -import { +import { useSetHeaderTitle, useSetHeaderType, useSetFooterMode @@ -23,14 +23,16 @@ import { NumericFormat } from 'react-number-format'; import { useStore } from '@/shared/model/store'; import { AllTransactionCancelPreventBond } from '@/entities/transaction/ui/all-transaction-cancel-prevent-bond'; import { snackBar } from '@/shared/lib'; +import { useTranslation } from 'react-i18next'; export const AllTransactionCancelPage = () => { + const { t } = useTranslation(); const location = useLocation(); const userInfo = useStore.getState().UserStore.userInfo; const tid = location.state.tid; const serviceCode = location.state.serviceCode; - - useSetHeaderTitle('거래 취소'); + + useSetHeaderTitle(t('transaction.cancelTitle')); useSetHeaderType(HeaderType.RightClose); useSetFooterMode(false); @@ -156,15 +158,15 @@ export const AllTransactionCancelPage = () => {
- + >{t('transaction.fullCancel')} { !!partCancelCl && - + >{t('transaction.partialCancel')} }
@@ -237,10 +239,10 @@ export const AllTransactionCancelPage = () => { }
- + >{t('transaction.submit')}
diff --git a/src/pages/transaction/all-transaction/detail-page.tsx b/src/pages/transaction/all-transaction/detail-page.tsx index f1f29ce..b817031 100644 --- a/src/pages/transaction/all-transaction/detail-page.tsx +++ b/src/pages/transaction/all-transaction/detail-page.tsx @@ -25,14 +25,16 @@ import { InfoSectionKeys } from '@/entities/transaction/model/types'; import { - useSetOnBack, + useSetOnBack, useSetHeaderTitle, useSetHeaderType, useSetFooterMode } from '@/widgets/sub-layout/use-sub-layout'; +import { useTranslation } from 'react-i18next'; export const AllTransactionDetailPage = () => { const { navigate } = useNavigate(); + const { t } = useTranslation(); const location = useLocation(); const tid = location.state.tid; const serviceCode = location.state.serviceCode; @@ -49,7 +51,7 @@ export const AllTransactionDetailPage = () => { const [showSettlementInfo, setShowSettlementInfo] = useState(false); const [showPartCancelInfo, setShowPartCancelInfo] = useState(false); - useSetHeaderTitle('거래내역 상세'); + useSetHeaderTitle(t('transaction.detailTitle')); useSetHeaderType(HeaderType.RightClose); useSetOnBack(() => { navigate(PATHS.transaction.allTransaction.list); @@ -89,9 +91,9 @@ export const AllTransactionDetailPage = () => { }; const onClickToCancel = () => { - let msg = '거래를 취소하시겠습니까?'; - - overlay.open(({ + let msg = t('transaction.confirmCancel'); + + overlay.open(({ isOpen, close, unmount @@ -104,7 +106,7 @@ export const AllTransactionDetailPage = () => { onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) } // onConfirmClick={ () => callCancelInfo() } message={ msg } - buttonLabel={['취소', '확인']} + buttonLabel={[t('common.cancel'), t('common.confirm')]} /> ); }); @@ -198,10 +200,10 @@ export const AllTransactionDetailPage = () => {
- + >{t('transaction.cancelTransaction')}
diff --git a/src/pages/transaction/all-transaction/list-page.tsx b/src/pages/transaction/all-transaction/list-page.tsx index c3cd865..0aab01a 100644 --- a/src/pages/transaction/all-transaction/list-page.tsx +++ b/src/pages/transaction/all-transaction/list-page.tsx @@ -22,7 +22,7 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { AllTransactionFilter } from '@/entities/transaction/ui/filter/all-transaction-filter'; import { SortTypeBox } from '@/entities/common/ui/sort-type-box'; import { SortTypeKeys, HeaderType, DefaultRequestPagination } from '@/entities/common/model/types'; -import { +import { useSetOnBack, useSetHeaderTitle, useSetHeaderType, @@ -30,9 +30,11 @@ import { } from '@/widgets/sub-layout/use-sub-layout'; import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; import useIntersectionObserver from '@/widgets/intersection-observer'; +import { useTranslation } from 'react-i18next'; export const AllTransactionListPage = () => { const { navigate } = useNavigate(); + const { t, i18n } = useTranslation(); const userMid = useStore.getState().UserStore.mid; const [serviceCodeOptions, setServiceCodeOptions] = useState>>(); @@ -64,7 +66,7 @@ export const AllTransactionListPage = () => { const [emailBottomSheetOn, setEmailBottomSheetOn] = useState(false); - useSetHeaderTitle('거래내역 조회'); + useSetHeaderTitle(t('transaction.listTitle')); useSetHeaderType(HeaderType.LeftArrow); useSetOnBack(() => { navigate(PATHS.home); @@ -226,28 +228,29 @@ export const AllTransactionListPage = () => {
-
조회금액
+
{t('transaction.searchAmount')}
+ prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''} + suffix={i18n.language === 'en' ? '' : t('home.currencyWon')} + >
@@ -255,18 +258,18 @@ export const AllTransactionListPage = () => {
- 조회일자 + {t('transaction.searchDate')} { moment(fromDate).format('YYYY.MM.DD') } ~ { moment(toDate).format('YYYY.MM.DD') }
- 거래건수 + {t('transaction.transactionCount')}