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>

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},
 ];

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>

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>
 

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() }

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>

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>

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>

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>

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>

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>