Add comprehensive i18n localization to settlement entity

- Convert settlement constants to i18n-compatible getter functions - Add 28+ translation keys to settlement namespace - Localize 11 settlement UI components Constant conversions: - getSettlementPeriodTypeBtnGroup(t) - getSettlementPaymentMethodOptionsGroup(t) Translation keys added: - settlement.periodType.* (settlementDate, transactionDate) - settlement.searchCriteria, searchPeriod - settlement.settlementCompleted, depositScheduled - settlement.settlementInfo, transferStatus, transferId, transferTime - settlement.bankName, accountNumber, depositorName - settlement.settlementDepositAmount, errorReason - settlement.transactionDetailInfo - settlement.cardBankTelecom, approvalAccountPhone - common.weekdays.* (sun-sat) - common.currencyUnit Localized components: - filter/list-filter.tsx - calandar-wrap.tsx, calendar-grid.tsx - calendar-settlement-item.tsx, calandar-amount-row.tsx - info-wrap/settlement-info-wrap.tsx - info-wrap/transaction-info-wrap.tsx - list-summary-extend-settlement.tsx - list-summary-extend-transaction.tsx All settlement components now support Korean/English language switching. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-30 17:36:42 +09:00
parent 868f6754ed
commit 0d43510307
12 changed files with 233 additions and 137 deletions
--- 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},
 ];
--- 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(
-        <span 
+        <span
          key='amount-label-scheduled'
          className="scheduled"
-        >예정</span>
+        >{t('settlement.scheduled')}</span>
      );
    }
    else if(settlementStatus === SettlementStatus.COMPLETED){
      rs.push(
-        <span 
+        <span
          key='amount-label-complete'
          className="complete"
-        >완료</span>
+        >{t('settlement.completed')}</span>
      );
    }
    return rs;
@@ -35,13 +37,13 @@ export const CalendarAmountRow = ({
  return (
    <>
      <div className="amount-row">
-        <div className="amount-label">정산 { makeTitle() } 금액</div>
+        <div className="amount-label">{t('settlement.settlementShort')} { makeTitle() } {t('filter.amount')}</div>
        <div className="amount-value">
          <NumericFormat
-            value={ amount } 
+            value={ amount }
            thousandSeparator
            displayType="text"
-            suffix='원'
+            suffix={t('common.currencyUnit')}
          ></NumericFormat>
        </div>
      </div>
--- 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 = () => {
        </div>
        
        <div className="month-group">
-          <button 
+          <button
            className={ `month-btn ${(!onActionCalendar)? 'disabled': ''}` }
-            aria-label="이전 달"
+            aria-label={t('settlement.previousMonth')}
            onClick={ onClickToMoveMonthPrev }
          >
-            <img 
+            <img
              src={ IMAGE_ROOT + '/ico_date_prev.svg' }
-              alt="이전"
+              alt={t('settlement.previous')}
            />
          </button>
          <div className="month-title">{ moment(yearMonth).format('YYYY년 MM월') }</div>
-          <button 
+          <button
            className={ `month-btn ${(lastMonth || !onActionCalendar)? 'disabled': ''}` }
-            aria-label="다음 달"
+            aria-label={t('settlement.nextMonth')}
            onClick={ onClickToMoveMonthNext }
          >
-            <img 
+            <img
              src={ IMAGE_ROOT + '/ico_date_next.svg' }
-              alt="다음"
+              alt={t('settlement.next')}
            />
          </button>
        </div>
@@ -172,11 +174,11 @@ export const CalendarWrap = () => {
        <div className="legend-group">
          <div className="legend-item">
            <div className="legend-dot complete"></div>
-            <div className="legend-text">정산 완료</div>
+            <div className="legend-text">{t('settlement.settlementCompleted')}</div>
          </div>
          <div className="legend-item">
            <div className="legend-dot scheduled"></div>
-            <div className="legend-text">입금 예정</div>
+            <div className="legend-text">{t('settlement.depositScheduled')}</div>
          </div>
        </div>

--- 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 = ({
    <>
      <div className="calendar-grid">
        <div className="weekdays">
-          <div className="weekday sun">일</div>
-          <div className="weekday">월</div>
-          <div className="weekday">화</div>
-          <div className="weekday">수</div>
-          <div className="weekday">목</div>
-          <div className="weekday">금</div>
-          <div className="weekday sat">토</div>
+          <div className="weekday sun">{t('common.weekdays.sun')}</div>
+          <div className="weekday">{t('common.weekdays.mon')}</div>
+          <div className="weekday">{t('common.weekdays.tue')}</div>
+          <div className="weekday">{t('common.weekdays.wed')}</div>
+          <div className="weekday">{t('common.weekdays.thu')}</div>
+          <div className="weekday">{t('common.weekdays.fri')}</div>
+          <div className="weekday sat">{t('common.weekdays.sat')}</div>
        </div>
        <div className="days">
        {  makeCalendarDate() }
--- 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 = ({
          </div>
          <div className="settlement-amount">
            <NumericFormat
-              value={ getAmount(value?.scheduledAmount, value?.completedAmount) } 
+              value={ getAmount(value?.scheduledAmount, value?.completedAmount) }
              thousandSeparator
              displayType="text"
-              suffix='원'
+              suffix={t('common.currencyUnit')}
            ></NumericFormat>
          </div>
        </div>
--- 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<string>(mid);
  const [filterPeriodType, setFilterPeriodType] = useState<SettlementPeriodType>(periodType);
  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
  const [filterPaymentMethod, setFilterPaymentMethod] = useState<SettlementPaymentMethod>(paymentMethod);
-  
+
  const midOptions = useStore.getState().UserStore.selectOptionsMids;
  
  const onClickToClose = () => {
@@ -84,15 +86,15 @@ export const ListFilter = ({
      >
        <div className="full-menu-container">
          <div className="full-menu-header">
-            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-title center">{t('filter.filter')}</div>
            <div className="full-menu-actions">
-              <button 
+              <button
                id="closeFullMenu"
                className="full-menu-close"
              >
-                <img 
+                <img
                  src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt="닫기"
+                  alt={t('common.close')}
                  onClick={ () => onClickToClose() }
                />
              </button>
@@ -100,35 +102,35 @@ export const ListFilter = ({
          </div>
          <div className="option-list pt-16">
            <FilterSelectMid
-              title='가맹점'
+              title={t('filter.merchant')}
              selectSetter={ setMid }
              showType={ 'GID' }
            ></FilterSelectMid>
            <FilterButtonGroups
-              title='조회기준'
+              title={t('settlement.searchCriteria')}
              activeValue={ filterPeriodType }
-              btnGroups={ SettlementPeriodTypeBtnGroup }
+              btnGroups={ getSettlementPeriodTypeBtnGroup(t) }
              setter={ setFilterPeriodType }
            ></FilterButtonGroups>
            <FilterCalendar
-              title='조회기간'
+              title={t('settlement.searchPeriod')}
              startDate={ filterStartDate }
              endDate={ filterEndDate }
              setStartDate={ setFilterStartDate }
              setEndDate={ setFilterEndDate }
            ></FilterCalendar>
            <FilterSelect
-              title='결제수단'
+              title={t('filter.paymentMethod')}
              selectValue={ filterPaymentMethod }
              selectSetter={ setFilterPaymentMethod }
-              selectOptions={ SettlementPaymentMethodOptionsGroup }
+              selectOptions={ getSettlementPaymentMethodOptionsGroup(t) }
            ></FilterSelect>
          </div>
          <div className="apply-row">
-            <button 
+            <button
              className="btn-50 btn-blue flex-1"
 							onClick={ () => onClickToSetFilter() }
-            >적용</button>
+            >{t('filter.apply')}</button>
          </div>
        </div>
      </motion.div>
--- 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 (
    <>
      <div className="txn-section">
-        <div 
+        <div
          className="section-title"
          onClick={ () => onClickToSetShowInfo() }
        >
-          정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          {t('settlement.settlementInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { isOpen &&
          <ul className="kv-list">
            <li className="kv-row">
-              <span className="k">MID</span>
+              <span className="k">{t('transaction.fields.mid')}</span>
              <span className="v">{ settlementInfo?.mid }</span>
            </li>
            <li className="kv-row">
-              <span className="k">이체상태</span>
+              <span className="k">{t('settlement.transferStatus')}</span>
              <span className="v">{ settlementInfo?.transferStatus }</span>
            </li>
            <li className="kv-row">
-              <span className="k">이체ID</span>
+              <span className="k">{t('settlement.transferId')}</span>
              <span className="v">{ settlementInfo?.transferId }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">이체시간</span>
+              <span className="k">{t('settlement.transferTime')}</span>
              <span className="v">
-                { settlementInfo?.transferTime && 
-                  moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss') 
+                { settlementInfo?.transferTime &&
+                  moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss')
                }
              </span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">은행명</span>
+              <span className="k">{t('settlement.bankName')}</span>
              <span className="v">{ settlementInfo?.bankName }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">계좌번호</span>
+              <span className="k">{t('settlement.accountNumber')}</span>
              <span className="v">{ settlementInfo?.accountNumber }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">입금인자</span>
+              <span className="k">{t('settlement.depositorName')}</span>
              <span className="v">{ settlementInfo?.depositorName }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">정상입금액</span>
+              <span className="k">{t('settlement.settlementDepositAmount')}</span>
              <span className="v">
                <NumericFormat
-                  value={ settlementInfo?.settlementDepositAmount } 
+                  value={ settlementInfo?.settlementDepositAmount }
                  thousandSeparator
                  displayType="text"
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">오류사유</span>
+              <span className="k">{t('settlement.errorReason')}</span>
              <span className="v">{ settlementInfo?.errorReason }</span>
            </li>
          </ul>
--- 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 (
    <>
      <div className="txn-section">
-        <div 
+        <div
          className="section-title"
          onClick={ () => onClickToSetShowInfo() }
        >
-          거래 상세 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          {t('settlement.transactionDetailInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
-        { isOpen && 
+        { isOpen &&
          <ul className="kv-list">
            <li className="kv-row">
-              <span className="k">주문번호</span>
+              <span className="k">{t('transaction.fields.orderNumber')}</span>
              <span className="v">{ transactionInfo?.orderNumber }</span>
            </li>
            <li className="kv-row">
-              <span className="k">TID</span>
+              <span className="k">{t('transaction.fields.tid')}</span>
              <span className="v">{ transactionInfo?.tid }</span>
            </li>
            <li className="kv-row">
-              <span className="k">원거래 TID</span>
+              <span className="k">{t('transaction.fields.originalTid')}</span>
              <span className="v">{ transactionInfo?.originalTid }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">거래상태</span>
+              <span className="k">{t('transaction.fields.transactionStatus')}</span>
              <span className="v">{ transactionInfo?.transactionStatus }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">결제수단</span>
+              <span className="k">{t('transaction.fields.paymentMethod')}</span>
              <span className="v">{ transactionInfo?.paymentMethod }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">정산일</span>
+              <span className="k">{t('additionalService.settlementAgency.settlementDate')}</span>
              <span className="v">{ moment(transactionInfo?.settlementDate).format('YYYY.MM.DD') }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">승인일</span>
+              <span className="k">{t('transaction.fields.approvalDay')}</span>
              <span className="v">{ moment(transactionInfo?.approvalDate).format('YYYY.MM.DD') }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">취소일</span>
+              <span className="k">{t('transaction.fields.cancelDate')}</span>
              <span className="v">{ moment(transactionInfo?.cancelDate).format('YYYY.MM.DD') }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">카드/은행/이통사</span>
+              <span className="k">{t('settlement.cardBankTelecom')}</span>
              <span className="v">{ transactionInfo?.cardCompany }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">승인번호/계좌번호/휴대번호</span>
+              <span className="k">{t('settlement.approvalAccountPhone')}</span>
              <span className="v">{ transactionInfo?.approvalNumber }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">상품명</span>
+              <span className="k">{t('transaction.fields.productName')}</span>
              <span className="v">{ transactionInfo?.productName }</span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">구매자</span>
+              <span className="k">{t('transaction.fields.buyer')}</span>
              <span className="v">{ transactionInfo?.buyerName }</span>
            </li>
          </ul>
--- 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 (
    <>
      <div className="summary-extend">
        <ul className="summary-amount-list">
          <li className="summary-amount-item">
-            <span className="label">거래금액</span>
+            <span className="label">{t('settlement.transactionAmount')}</span>
            <span className="value">
              <NumericFormat
-                value={ transactionAmount } 
+                value={ transactionAmount }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
-            <span className="label">PG 수수료</span>
+            <span className="label">{t('settlement.totalPgFee')}</span>
            <span className="value minus">
              <NumericFormat
-                value={ pgFeeAmount } 
+                value={ pgFeeAmount }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
-            <span className="label">보류</span>
+            <span className="label">{t('settlement.hold')}</span>
            <span className="value">
              <NumericFormat
-                value={ holdAmount } 
+                value={ holdAmount }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
-            <span className="label">해제</span>
+            <span className="label">{t('settlement.release')}</span>
            <span className="value link">
              <NumericFormat
-                value={ releaseAmount } 
+                value={ releaseAmount }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
-            <span className="label">상계</span>
+            <span className="label">{t('settlement.offset')}</span>
            <span className="value minus">
              <NumericFormat
-                value={ offsetAmount } 
+                value={ offsetAmount }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
        </ul>
--- 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 (
    <>
      <div className="summary-extend">
        <ul className="summary-amount-list">
          <li className="summary-amount-item">
-            <span className="label">거래금액</span>
+            <span className="label">{t('settlement.transactionAmount')}</span>
            <span className="value">
              <NumericFormat
-                value={ transactionAmount } 
+                value={ transactionAmount }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
-            <span className="label">결제 수수료</span>
+            <span className="label">{t('settlement.paymentFee')}</span>
            <span className="value minus">
              <NumericFormat
-                value={ paymentFeeAmount } 
+                value={ paymentFeeAmount }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
-            <span className="label">에스크로 수수료</span>
+            <span className="label">{t('settlement.escrowFee')}</span>
            <span className="value">
              <NumericFormat
-                value={ escrowFeeAmount } 
+                value={ escrowFeeAmount }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
-            <span className="label">인증 수수료</span>
+            <span className="label">{t('settlement.authFee')}</span>
            <span className="value link">
              <NumericFormat
-                value={ authFeeAmount } 
+                value={ authFeeAmount }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
            <span className="label">VAT</span>
            <span className="value minus">
              <NumericFormat
-                value={ vatAmount } 
+                value={ vatAmount }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
          <li className="summary-amount-item">
-            <span className="label">정산전 취소상계</span>
+            <span className="label">{t('settlement.preSettlementCancelOffset')}</span>
            <span className="value minus">
              <NumericFormat
-                value={ preSettlementCancelOffset } 
+                value={ preSettlementCancelOffset }
                thousandSeparator
                displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
            </span>
          </li>
        </ul>
--- 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",
--- 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": "거래내역 조회",