diff --git a/src/entities/settlement/model/constant.ts b/src/entities/settlement/model/constant.ts index c6ac3f4..d6d44f3 100644 --- a/src/entities/settlement/model/constant.ts +++ b/src/entities/settlement/model/constant.ts @@ -1,18 +1,20 @@ +import { TFunction } from 'i18next'; import { SettlementPaymentMethod, SettlementPeriodType } from './types'; -export const SettlementPeriodTypeBtnGroup = [ - {name: '정산일자', value: SettlementPeriodType.SETTLEMENT_DATE }, - {name: '거래일자', value: SettlementPeriodType.TRANSACTION_DATE } +export const getSettlementPeriodTypeBtnGroup = (t: TFunction) => [ + {name: t('settlement.periodType.settlementDate'), value: SettlementPeriodType.SETTLEMENT_DATE }, + {name: t('settlement.periodType.transactionDate'), value: SettlementPeriodType.TRANSACTION_DATE } ]; -export const SettlementPaymentMethodOptionsGroup = [ - {name: '전체', value: SettlementPaymentMethod.ALL}, - {name: '신용카드', value: SettlementPaymentMethod.CREDIT_CARD}, - {name: '가상계좌', value: SettlementPaymentMethod.VIRTUAL_ACCOUNT}, - {name: '계좌이체', value: SettlementPaymentMethod.ACCOUNT_TRANSFER}, - {name: '계좌간편결제', value: SettlementPaymentMethod.ACCOUNT_EASY_PAY}, - {name: '휴대폰', value: SettlementPaymentMethod.MOBILE_PAYMENT}, - {name: 'SSG 머니', value: SettlementPaymentMethod.SSG_MONEY}, - {name: 'SSG 은행계좌', value: SettlementPaymentMethod.SSG_BANK_ACCOUNT}, - {name: '문화상품권', value: SettlementPaymentMethod.CULTURE_VOUCHER}, - {name: '티머니페이', value: SettlementPaymentMethod.TMONEY_PAY}, + +export const getSettlementPaymentMethodOptionsGroup = (t: TFunction) => [ + {name: t('transaction.constants.all'), value: SettlementPaymentMethod.ALL}, + {name: t('transaction.constants.creditCard'), value: SettlementPaymentMethod.CREDIT_CARD}, + {name: t('transaction.constants.virtualAccount'), value: SettlementPaymentMethod.VIRTUAL_ACCOUNT}, + {name: t('transaction.constants.accountTransfer'), value: SettlementPaymentMethod.ACCOUNT_TRANSFER}, + {name: t('transaction.constants.accountSimpleTransfer'), value: SettlementPaymentMethod.ACCOUNT_EASY_PAY}, + {name: t('transaction.constants.mobilePayment'), value: SettlementPaymentMethod.MOBILE_PAYMENT}, + {name: t('transaction.constants.ssgMoney'), value: SettlementPaymentMethod.SSG_MONEY}, + {name: t('transaction.constants.ssgBank'), value: SettlementPaymentMethod.SSG_BANK_ACCOUNT}, + {name: t('transaction.constants.cultureLand'), value: SettlementPaymentMethod.CULTURE_VOUCHER}, + {name: t('transaction.constants.tmoneyPay'), value: SettlementPaymentMethod.TMONEY_PAY}, ]; \ No newline at end of file diff --git a/src/entities/settlement/ui/calandar-amount-row.tsx b/src/entities/settlement/ui/calandar-amount-row.tsx index 1aab143..a4764b0 100644 --- a/src/entities/settlement/ui/calandar-amount-row.tsx +++ b/src/entities/settlement/ui/calandar-amount-row.tsx @@ -1,4 +1,5 @@ import { NumericFormat } from 'react-number-format'; +import { useTranslation } from 'react-i18next'; import { SettlementStatus } from '../model/types'; export interface CalendarAmountRowProps { @@ -10,23 +11,24 @@ export const CalendarAmountRow = ({ amount, settlementStatus }: CalendarAmountRowProps) => { + const { t } = useTranslation(); const makeTitle = () => { let rs = []; if(settlementStatus === SettlementStatus.SCHEDULED){ rs.push( - 예정 + >{t('settlement.scheduled')} ); } else if(settlementStatus === SettlementStatus.COMPLETED){ rs.push( - 완료 + >{t('settlement.completed')} ); } return rs; @@ -35,13 +37,13 @@ export const CalendarAmountRow = ({ return ( <>
-
정산 { makeTitle() } 금액
+
{t('settlement.settlementShort')} { makeTitle() } {t('filter.amount')}
diff --git a/src/entities/settlement/ui/calandar-wrap.tsx b/src/entities/settlement/ui/calandar-wrap.tsx index acee232..b4d905c 100644 --- a/src/entities/settlement/ui/calandar-wrap.tsx +++ b/src/entities/settlement/ui/calandar-wrap.tsx @@ -1,11 +1,12 @@ import moment from 'moment'; import { ChangeEvent, useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { useSettlementsCalendarMutation } from '../api/use-settlements-calendar-mutation'; import { CalendarAmountRow } from './calandar-amount-row'; -import { CalendarSettlementItem } from './calendar-settlement-item'; +import { CalendarSettlementItem } from './calendar-settlement-item'; import { CalendarGrid } from './calendar-grid'; -import { +import { SettlementDays, SettlementsCalendarParams, SettlementsCalendarResponse, @@ -14,7 +15,8 @@ import { import { useStore } from '@/shared/model/store'; export const CalendarWrap = () => { - moment.locale('ko'); + const { t, i18n } = useTranslation(); + moment.locale(i18n.language); const midOptions = useStore.getState().UserStore.selectOptionsMids; const userMid = useStore.getState().UserStore.mid; @@ -135,25 +137,25 @@ export const CalendarWrap = () => {
-
{ moment(yearMonth).format('YYYY년 MM월') }
-
@@ -172,11 +174,11 @@ export const CalendarWrap = () => {
-
정산 완료
+
{t('settlement.settlementCompleted')}
-
입금 예정
+
{t('settlement.depositScheduled')}
diff --git a/src/entities/settlement/ui/calendar-grid.tsx b/src/entities/settlement/ui/calendar-grid.tsx index e7a6a81..3cccb39 100644 --- a/src/entities/settlement/ui/calendar-grid.tsx +++ b/src/entities/settlement/ui/calendar-grid.tsx @@ -1,4 +1,5 @@ import moment from 'moment'; +import { useTranslation } from 'react-i18next'; import { SettlementDays, SettlementStatus } from '../model/types'; import { useEffect, useState } from 'react'; @@ -13,7 +14,8 @@ export const CalendarGrid = ({ scheduledDateList, completedDateList }: CalendarGridProps) => { - + const { t } = useTranslation(); + const makeCalendarDate = () => { let startDay = moment(yearMonth).startOf('month').day(); let lastDate = moment(yearMonth).endOf('month').date(); @@ -73,13 +75,13 @@ export const CalendarGrid = ({ <>
-
-
-
-
-
-
-
+
{t('common.weekdays.sun')}
+
{t('common.weekdays.mon')}
+
{t('common.weekdays.tue')}
+
{t('common.weekdays.wed')}
+
{t('common.weekdays.thu')}
+
{t('common.weekdays.fri')}
+
{t('common.weekdays.sat')}
{ makeCalendarDate() } diff --git a/src/entities/settlement/ui/calendar-settlement-item.tsx b/src/entities/settlement/ui/calendar-settlement-item.tsx index 9ae94df..2e05cde 100644 --- a/src/entities/settlement/ui/calendar-settlement-item.tsx +++ b/src/entities/settlement/ui/calendar-settlement-item.tsx @@ -1,5 +1,6 @@ import moment from 'moment'; import { NumericFormat } from 'react-number-format'; +import { useTranslation } from 'react-i18next'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { SettlementDays, SettlementStatus } from '../model/types'; @@ -14,6 +15,7 @@ export const CalendarSettlementItem = ({ settlementStatus }: CalendarSettlementItemProps) => { const { navigate } = useNavigate(); + const { t } = useTranslation(); const getAmount = ( scheduledAmount: number | undefined, @@ -65,10 +67,10 @@ export const CalendarSettlementItem = ({
diff --git a/src/entities/settlement/ui/filter/list-filter.tsx b/src/entities/settlement/ui/filter/list-filter.tsx index 087d249..c71c05c 100644 --- a/src/entities/settlement/ui/filter/list-filter.tsx +++ b/src/entities/settlement/ui/filter/list-filter.tsx @@ -1,19 +1,20 @@ import { useEffect, useState } from 'react'; import { motion } from 'framer-motion'; +import { useTranslation } from 'react-i18next'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { useStore } from '@/shared/model/store'; -import { +import { SettlementPaymentMethod, SettlementPeriodType } from '../../model/types'; -import { - FilterMotionDuration, - FilterMotionStyle, +import { + FilterMotionDuration, + FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant'; import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterCalendar } from '@/shared/ui/filter/calendar'; -import { SettlementPaymentMethodOptionsGroup, SettlementPeriodTypeBtnGroup } from '../../model/constant'; +import { getSettlementPaymentMethodOptionsGroup, getSettlementPeriodTypeBtnGroup } from '../../model/constant'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterSelectMid } from '@/shared/ui/filter/select-mid'; @@ -46,13 +47,14 @@ export const ListFilter = ({ setEndDate, setPaymentMethod }: ListFilterProps) => { + const { t } = useTranslation(); const [filterMid, setFilterMid] = useState(mid); const [filterPeriodType, setFilterPeriodType] = useState(periodType); const [filterStartDate, setFilterStartDate] = useState(startDate); const [filterEndDate, setFilterEndDate] = useState(endDate); const [filterPaymentMethod, setFilterPaymentMethod] = useState(paymentMethod); - + const midOptions = useStore.getState().UserStore.selectOptionsMids; const onClickToClose = () => { @@ -84,15 +86,15 @@ export const ListFilter = ({ >
-
필터
+
{t('filter.filter')}
- @@ -100,35 +102,35 @@ export const ListFilter = ({
- + >{t('filter.apply')}
diff --git a/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx b/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx index 9925b76..fff40b2 100644 --- a/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx +++ b/src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx @@ -1,11 +1,12 @@ import moment from 'moment'; import { NumericFormat } from 'react-number-format'; -import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; +import { useTranslation } from 'react-i18next'; +import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import SlideDown from 'react-slidedown'; import 'react-slidedown/lib/slidedown.css'; -import { - InfoWrapKeys, - SettlementInfoWrapProps, +import { + InfoWrapKeys, + SettlementInfoWrapProps, SettlementPeriodType } from '../../model/types'; @@ -14,6 +15,7 @@ export const SettlementInfoWrap = ({ isOpen, onClickToShowInfo }: SettlementInfoWrapProps) => { + const { t } = useTranslation(); const onClickToSetShowInfo = () => { if(!!onClickToShowInfo){ @@ -24,59 +26,59 @@ export const SettlementInfoWrap = ({ return ( <>
-
onClickToSetShowInfo() } > - 정산 정보 + {t('settlement.settlementInfo')}
{ isOpen &&
  • - MID + {t('transaction.fields.mid')} { settlementInfo?.mid }
  • - 이체상태 + {t('settlement.transferStatus')} { settlementInfo?.transferStatus }
  • - 이체ID + {t('settlement.transferId')} { settlementInfo?.transferId }
  • - 이체시간 + {t('settlement.transferTime')} - { settlementInfo?.transferTime && - moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss') + { settlementInfo?.transferTime && + moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss') }
  • - 은행명 + {t('settlement.bankName')} { settlementInfo?.bankName }
  • - 계좌번호 + {t('settlement.accountNumber')} { settlementInfo?.accountNumber }
  • - 입금인자 + {t('settlement.depositorName')} { settlementInfo?.depositorName }
  • - 정상입금액 + {t('settlement.settlementDepositAmount')}
  • - 오류사유 + {t('settlement.errorReason')} { settlementInfo?.errorReason }
diff --git a/src/entities/settlement/ui/info-wrap/transaction-info-wrap.tsx b/src/entities/settlement/ui/info-wrap/transaction-info-wrap.tsx index 092e616..00057f2 100644 --- a/src/entities/settlement/ui/info-wrap/transaction-info-wrap.tsx +++ b/src/entities/settlement/ui/info-wrap/transaction-info-wrap.tsx @@ -1,10 +1,11 @@ import moment from 'moment'; -import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; +import { useTranslation } from 'react-i18next'; +import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import SlideDown from 'react-slidedown'; import 'react-slidedown/lib/slidedown.css'; -import { - InfoWrapKeys, - TransactionInfoWrapProps, +import { + InfoWrapKeys, + TransactionInfoWrapProps, } from '@/entities/settlement/model/types'; export const TransactionInfoWrap = ({ @@ -12,6 +13,7 @@ export const TransactionInfoWrap = ({ isOpen, onClickToShowInfo }: TransactionInfoWrapProps) => { + const { t } = useTranslation(); const onClickToSetShowInfo = () => { if(!!onClickToShowInfo){ @@ -22,61 +24,61 @@ export const TransactionInfoWrap = ({ return ( <>
-
onClickToSetShowInfo() } > - 거래 상세 정보 + {t('settlement.transactionDetailInfo')}
- { isOpen && + { isOpen &&
  • - 주문번호 + {t('transaction.fields.orderNumber')} { transactionInfo?.orderNumber }
  • - TID + {t('transaction.fields.tid')} { transactionInfo?.tid }
  • - 원거래 TID + {t('transaction.fields.originalTid')} { transactionInfo?.originalTid }
  • - 거래상태 + {t('transaction.fields.transactionStatus')} { transactionInfo?.transactionStatus }
  • - 결제수단 + {t('transaction.fields.paymentMethod')} { transactionInfo?.paymentMethod }
  • - 정산일 + {t('additionalService.settlementAgency.settlementDate')} { moment(transactionInfo?.settlementDate).format('YYYY.MM.DD') }
  • - 승인일 + {t('transaction.fields.approvalDay')} { moment(transactionInfo?.approvalDate).format('YYYY.MM.DD') }
  • - 취소일 + {t('transaction.fields.cancelDate')} { moment(transactionInfo?.cancelDate).format('YYYY.MM.DD') }
  • - 카드/은행/이통사 + {t('settlement.cardBankTelecom')} { transactionInfo?.cardCompany }
  • - 승인번호/계좌번호/휴대번호 + {t('settlement.approvalAccountPhone')} { transactionInfo?.approvalNumber }
  • - 상품명 + {t('transaction.fields.productName')} { transactionInfo?.productName }
  • - 구매자 + {t('transaction.fields.buyer')} { transactionInfo?.buyerName }
diff --git a/src/entities/settlement/ui/list-summary-extend-settlement.tsx b/src/entities/settlement/ui/list-summary-extend-settlement.tsx index 14f9b33..7451ecb 100644 --- a/src/entities/settlement/ui/list-summary-extend-settlement.tsx +++ b/src/entities/settlement/ui/list-summary-extend-settlement.tsx @@ -1,4 +1,5 @@ import { NumericFormat } from 'react-number-format'; +import { useTranslation } from 'react-i18next'; import { SettlementsHistorySummaryResponse } from '../model/types'; export interface ListSummaryExtendSettlementProps extends SettlementsHistorySummaryResponse {}; @@ -11,59 +12,60 @@ export const ListSummaryExtendSettlement = ({ releaseAmount, offsetAmount }: ListSummaryExtendSettlementProps) => { - + const { t } = useTranslation(); + return ( <>
  • - 거래금액 + {t('settlement.transactionAmount')} + > {t('common.currencyUnit')}
  • - PG 수수료 + {t('settlement.totalPgFee')} + > {t('common.currencyUnit')}
  • - 보류 + {t('settlement.hold')} + > {t('common.currencyUnit')}
  • - 해제 + {t('settlement.release')} + > {t('common.currencyUnit')}
  • - 상계 + {t('settlement.offset')} + > {t('common.currencyUnit')}
diff --git a/src/entities/settlement/ui/list-summary-extend-transaction.tsx b/src/entities/settlement/ui/list-summary-extend-transaction.tsx index 7bdfd0d..18cf3f0 100644 --- a/src/entities/settlement/ui/list-summary-extend-transaction.tsx +++ b/src/entities/settlement/ui/list-summary-extend-transaction.tsx @@ -1,4 +1,5 @@ import { NumericFormat } from 'react-number-format'; +import { useTranslation } from 'react-i18next'; import { SettlementsTransactionSummaryResponse } from '../model/types'; export interface ListSummaryExtendTransactionProps extends SettlementsTransactionSummaryResponse {}; @@ -12,69 +13,70 @@ export const ListSummaryExtendTransaction = ({ vatAmount, preSettlementCancelOffset }: ListSummaryExtendTransactionProps) => { - + const { t } = useTranslation(); + return ( <>
  • - 거래금액 + {t('settlement.transactionAmount')} + > {t('common.currencyUnit')}
  • - 결제 수수료 + {t('settlement.paymentFee')} + > {t('common.currencyUnit')}
  • - 에스크로 수수료 + {t('settlement.escrowFee')} + > {t('common.currencyUnit')}
  • - 인증 수수료 + {t('settlement.authFee')} + > {t('common.currencyUnit')}
  • VAT + > {t('common.currencyUnit')}
  • - 정산전 취소상계 + {t('settlement.preSettlementCancelOffset')} + > {t('common.currencyUnit')}
diff --git a/src/locales/en.json b/src/locales/en.json index 5cf71c6..4eb2fa0 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -17,7 +17,17 @@ "noData": "No data available", "next": "Next", "latest": "Latest", - "oldest": "Oldest" + "oldest": "Oldest", + "weekdays": { + "sun": "Sun", + "mon": "Mon", + "tue": "Tue", + "wed": "Wed", + "thu": "Thu", + "fri": "Fri", + "sat": "Sat" + }, + "currencyUnit": "" }, "menu": { "home": "Home", @@ -343,7 +353,35 @@ "offset": "Offset", "transactionAmount": "Transaction Amount", "expectedSettlementAmount": "Expected Settlement Amount", - "preSettlementCancelOffset": "Pre-Settlement Cancel Offset" + "preSettlementCancelOffset": "Pre-Settlement Cancel Offset", + "periodType": { + "settlementDate": "Settlement Date", + "transactionDate": "Transaction Date" + }, + "searchCriteria": "Search Criteria", + "searchPeriod": "Search Period", + "settlementCompleted": "Settlement Completed", + "depositScheduled": "Deposit Scheduled", + "previousMonth": "Previous Month", + "nextMonth": "Next Month", + "previous": "Previous", + "next": "Next", + "scheduled": "Scheduled", + "completed": "Completed", + "settlementScheduledAmount": "Settlement Scheduled Amount", + "settlementCompletedAmount": "Settlement Completed Amount", + "settlementInfo": "Settlement Information", + "transferStatus": "Transfer Status", + "transferId": "Transfer ID", + "transferTime": "Transfer Time", + "bankName": "Bank Name", + "accountNumber": "Account Number", + "depositorName": "Depositor Name", + "settlementDepositAmount": "Settlement Deposit Amount", + "errorReason": "Error Reason", + "transactionDetailInfo": "Transaction Detail Information", + "cardBankTelecom": "Card/Bank/Telecom", + "approvalAccountPhone": "Approval No./Account No./Phone No." }, "transaction": { "listTitle": "Transactions", diff --git a/src/locales/ko.json b/src/locales/ko.json index 5387eae..47b4911 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -17,7 +17,17 @@ "noData": "데이터가 없습니다", "next": "다음", "latest": "최신순", - "oldest": "오래된순" + "oldest": "오래된순", + "weekdays": { + "sun": "일", + "mon": "월", + "tue": "화", + "wed": "수", + "thu": "목", + "fri": "금", + "sat": "토" + }, + "currencyUnit": "원" }, "menu": { "home": "홈", @@ -347,7 +357,35 @@ "offset": "상계", "transactionAmount": "거래금액", "expectedSettlementAmount": "정산예정금액", - "preSettlementCancelOffset": "정산전 취소상계" + "preSettlementCancelOffset": "정산전 취소상계", + "periodType": { + "settlementDate": "정산일자", + "transactionDate": "거래일자" + }, + "searchCriteria": "조회기준", + "searchPeriod": "조회기간", + "settlementCompleted": "정산 완료", + "depositScheduled": "입금 예정", + "previousMonth": "이전 달", + "nextMonth": "다음 달", + "previous": "이전", + "next": "다음", + "scheduled": "예정", + "completed": "완료", + "settlementScheduledAmount": "정산 예정 금액", + "settlementCompletedAmount": "정산 완료 금액", + "settlementInfo": "정산 정보", + "transferStatus": "이체상태", + "transferId": "이체ID", + "transferTime": "이체시간", + "bankName": "은행명", + "accountNumber": "계좌번호", + "depositorName": "입금인자", + "settlementDepositAmount": "정상입금액", + "errorReason": "오류사유", + "transactionDetailInfo": "거래 상세 정보", + "cardBankTelecom": "카드/은행/이통사", + "approvalAccountPhone": "승인번호/계좌번호/휴대번호" }, "transaction": { "listTitle": "거래내역 조회",