Add comprehensive i18n localization to transaction UI components

- Localize 23 transaction UI component files
- Add 150+ translation keys to ko.json and en.json
- Organized translations under transaction namespace:
  * transaction.bottomSheet - Bottom sheet modals
  * transaction.sections - Section titles
  * transaction.fields - Field labels (90+ keys)
  * transaction.cancel - Cancellation flows
  * transaction.handWrittenIssuance - Manual issuance forms
  * transaction.list - List actions

Updated files:
- Bottom sheets: escrow-mail-resend, cash-receipt-purpose-update
- Sections: billing-info, part-cancel-info, detail-info, issue-info,
  escrow-info, important-info, payment-info, transaction-info,
  settlement-info, merchant-info, amount-info, cancel-bank-group,
  cancel-password-group
- Lists: list-item, billing-list, cash-receipt-list
- Cancel flows: all-cancel, part-cancel, prevent-bond
- Issuance: hand-written-issuance-step1, hand-written-issuance-step2

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/entities/transaction/ui/section/all-transaction-cancel-section-bank-group.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { useStore } from "@/shared/model/store";
 import { ChangeEvent, useState } from "react";
 
@@ -17,6 +18,7 @@ export const AllTransactionCancelSectionBankGroup = ({
   accountHolder,
   setAccountHolder
 }: AllTransactionCancelSectionBankGroupProps ) => {
+  const { t } = useTranslation();
   let bankList = useStore.getState().CommonStore.virtualBankList;
   bankList = bankList.filter((value, index) => value.code1 !== '****');
   
@@ -37,14 +39,14 @@ export const AllTransactionCancelSectionBankGroup = ({
   return (
     <>
       <div className="form-group">
-        <label className="form-label">은행</label>
+        <label className="form-label">{t('transaction.fields.bank')}</label>
         <div className="input-wrapper wid-100">
-          <select 
+          <select
             className="wid-100 align-right"
             value={ bankCode }
             onChange={ (e: ChangeEvent<HTMLSelectElement>) => onChangeNewBankCode(e.target.value) }
           >
-            <option value="">선택</option>
+            <option value="">{t('transaction.cancel.bankGroup.select')}</option>
             { bankList.map((value, index) => (
                 <option value={ value.code1 }>{ value.desc1 }</option>
               ))
@@ -54,11 +56,11 @@ export const AllTransactionCancelSectionBankGroup = ({
       </div>
 
       <div className="form-group">
-        <label className="form-label">계좌번호</label>
+        <label className="form-label">{t('transaction.fields.accountNo')}</label>
         <div className="input-wrapper wid-100">
-          <input 
-            className="form-input wid-100" 
-            type="text" 
+          <input
+            className="form-input wid-100"
+            type="text"
             value={ newAccountNo }
             onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountNo(e.target.value) }
           />
@@ -66,11 +68,11 @@ export const AllTransactionCancelSectionBankGroup = ({
       </div>
 
       <div className="form-group">
-        <label className="form-label">예금주</label>
+        <label className="form-label">{t('transaction.fields.accountHolder')}</label>
         <div className="input-wrapper wid-100">
-          <input 
-            className="form-input  wid-100" 
-            type="text" 
+          <input
+            className="form-input  wid-100"
+            type="text"
             value={ newAccountHolder }
             onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountHolder(e.target.value) }
           />
@@ -78,7 +80,7 @@ export const AllTransactionCancelSectionBankGroup = ({
       </div>
 
       <div className="notice-text wid-100">
-        <p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p>
+        <p>{t('transaction.cancel.bankGroup.notice')}</p>
       </div>
     </>
   );

src/entities/transaction/ui/section/all-transaction-cancel-section-password-group.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { ChangeEvent, useState } from "react";
 
 export interface AllTransactionCancelSectionPasswordGroupProps {
@@ -11,6 +12,7 @@ export const AllTransactionCancelSectionPasswordGroup = ({
   setCancelPassword,
   requestSuccess
 }: AllTransactionCancelSectionPasswordGroupProps) => {
+  const { t } = useTranslation();
 
   const [newCancelPassword, setNewCancelPassword] = useState<string>(cancelPassword);
   
@@ -21,18 +23,18 @@ export const AllTransactionCancelSectionPasswordGroup = ({
   return (
     <>
       <div className="form-group">
-        <label className="form-label">취소 비밀번호</label>
+        <label className="form-label">{t('transaction.cancel.passwordGroup.cancelPassword')}</label>
         <div className="input-wrapper wid-100 error">
-          <input 
-            className="wid-100 align-right" 
-            type="password" 
+          <input
+            className="wid-100 align-right"
+            type="password"
             value={ newCancelPassword }
             onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewCancelPassword(e.target.value) }
           />
         </div>
       </div>
       { !requestSuccess &&
-        <div className="error-msg">비밀번호 불일치</div>
+        <div className="error-msg">{t('transaction.cancel.passwordGroup.passwordMismatch')}</div>
       }
     </>
   );

src/entities/transaction/ui/section/amount-info-section.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { NumericFormat } from 'react-number-format';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
@@ -7,7 +8,7 @@ import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 
 export const AmountInfoSection = ({
-  transactionCategory, 
+  transactionCategory,
   amountInfo,
   isOpen,
   tid,
@@ -15,23 +16,24 @@ export const AmountInfoSection = ({
   onClickToOpenInfo,
   canDownloadReceipt
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
   const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
   let newAmountInfo: Record<string, any> | undefined = amountInfo;
   const subItems: Record<string, Record<string, string>> = {
-    mid: {name: 'MID', type: 'string'}, 
-    transactionRequestAmount: {name: '거래요청금액', type: 'number'},
-    transactionAmount: {name: '거래금액', type: 'number'},
-    pointAmount: {name: '포인트금액', type: 'number'},
-    couponAmount: {name: '쿠폰금액', type: 'number'},
-    escrowFee: {name: '에스크로수수료', type: 'number'},
-    kakaoMoneyAmount: {name: '카카오머니', type: 'number'},
-    kakaoPointAmount: {name: '카카오포인트', type: 'number'},
-    kakaoDiscountAmount: {name: '카카오 즉시할인', type: 'number'},
-    naverPointAmount: {name: '네이버 포인트', type: 'number'},
-    tossMoneyAmount: {name: '토스머니', type: 'number'},
-    tossDiscountAmount: {name: '토스할인', type: 'number'},
-    paycoPointAmount: {name: '페이코포인트', type: 'number'},
-    paycoCouponAmount: {name: '페이코쿠폰', type: 'number'},
+    mid: {name: t('transaction.fields.mid'), type: 'string'},
+    transactionRequestAmount: {name: t('transaction.fields.transactionRequestAmount'), type: 'number'},
+    transactionAmount: {name: t('transaction.fields.transactionAmount'), type: 'number'},
+    pointAmount: {name: t('transaction.fields.pointAmount'), type: 'number'},
+    couponAmount: {name: t('transaction.fields.couponAmount'), type: 'number'},
+    escrowFee: {name: t('transaction.fields.escrowFee'), type: 'number'},
+    kakaoMoneyAmount: {name: t('transaction.fields.kakaoMoneyAmount'), type: 'number'},
+    kakaoPointAmount: {name: t('transaction.fields.kakaoPointAmount'), type: 'number'},
+    kakaoDiscountAmount: {name: t('transaction.fields.kakaoDiscountAmount'), type: 'number'},
+    naverPointAmount: {name: t('transaction.fields.naverPointAmount'), type: 'number'},
+    tossMoneyAmount: {name: t('transaction.fields.tossMoneyAmount'), type: 'number'},
+    tossDiscountAmount: {name: t('transaction.fields.tossDiscountAmount'), type: 'number'},
+    paycoPointAmount: {name: t('transaction.fields.paycoPointAmount'), type: 'number'},
+    paycoCouponAmount: {name: t('transaction.fields.paycoCouponAmount'), type: 'number'},
   };
  
   const openSubItems: Record<string, Array<string>> = {
@@ -134,13 +136,14 @@ export const AmountInfoSection = ({
         let k = openSubItems[serviceCode][i];
         if(!!k){
           let name = subItems[k]?.name;
-          
+
+
           if(serviceCode === '01'){
             if(k === 'transactionAmount'){
-              name = '신용카드금액'
+              name = t('transaction.fields.cardAmount')
             }
             if(k === 'transactionRequestAmount'){
-              name = '승인요청금액';
+              name = t('transaction.fields.approvalRequestAmount');
             }
           }
           
@@ -223,12 +226,12 @@ export const AmountInfoSection = ({
             }
             <span className="unit">원</span>
           </div>
-          <button 
-            className="chip-btn" 
+          <button
+            className="chip-btn"
             type="button"
             onClick={ () => onClickToSetShowInfo() }
           >
-            금액상세 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+            {t('transaction.sections.amountDetail')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
           </button>
         </div>
 
@@ -239,43 +242,43 @@ export const AmountInfoSection = ({
               { (transactionCategory === TransactionCategory.AllTransaction) && 
                 subLi() 
               }
-              { (transactionCategory === TransactionCategory.CashReceipt) && 
+              { (transactionCategory === TransactionCategory.CashReceipt) &&
                 <>
                   <li className="amount-item">
-                    <span className="label">·&nbsp;&nbsp;공급가액</span>
+                    <span className="label">·&nbsp;&nbsp;{t('transaction.fields.supplyAmount')}</span>
                     <span className="value">
                       <NumericFormat
-                        value={ amountInfo?.supplyAmount } 
+                        value={ amountInfo?.supplyAmount }
                         thousandSeparator
                         displayType="text"
                       ></NumericFormat>
                     </span>
                   </li>
                   <li className="amount-item">
-                    <span className="label">·&nbsp;&nbsp;VAT</span>
+                    <span className="label">·&nbsp;&nbsp;{t('transaction.fields.vat')}</span>
                     <span className="value">
                       <NumericFormat
-                        value={ amountInfo?.vat } 
+                        value={ amountInfo?.vat }
                         thousandSeparator
                         displayType="text"
                       ></NumericFormat>
                     </span>
                   </li>
                   <li className="amount-item">
-                    <span className="label">·&nbsp;&nbsp;봉사료</span>
+                    <span className="label">·&nbsp;&nbsp;{t('transaction.fields.serviceAmount')}</span>
                     <span className="value">
                       <NumericFormat
-                        value={ amountInfo?.serviceAmount } 
+                        value={ amountInfo?.serviceAmount }
                         thousandSeparator
                         displayType="text"
                       ></NumericFormat>
                     </span>
                   </li>
                   <li className="amount-item">
-                    <span className="label">·&nbsp;&nbsp;면세금액</span>
+                    <span className="label">·&nbsp;&nbsp;{t('transaction.fields.taxFreeAmount')}</span>
                     <span className="value">
                       <NumericFormat
-                        value={ amountInfo?.taxFreeAmount } 
+                        value={ amountInfo?.taxFreeAmount }
                         thousandSeparator
                         displayType="text"
                       ></NumericFormat>
@@ -283,47 +286,47 @@ export const AmountInfoSection = ({
                   </li>
                 </>
               }
-              { (transactionCategory === TransactionCategory.Escrow) && 
+              { (transactionCategory === TransactionCategory.Escrow) &&
                 <>
                   { (serviceCode === '02' || serviceCode === '03') &&
                     <li className="amount-item">
-                      <span className="label">·&nbsp;&nbsp;거래금액</span>
+                      <span className="label">·&nbsp;&nbsp;{t('transaction.fields.transactionAmount')}</span>
                       <span className="value">
                         <NumericFormat
-                          value={ amountInfo?.transactionAmount } 
+                          value={ amountInfo?.transactionAmount }
                           thousandSeparator
                           displayType="text"
                         ></NumericFormat>
                       </span>
                     </li>
                   }
-                  { (serviceCode === '01') && 
+                  { (serviceCode === '01') &&
                     <>
                       <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;신용카드금액</span>
+                        <span className="label">·&nbsp;&nbsp;{t('transaction.fields.cardAmount')}</span>
                         <span className="value">
                           <NumericFormat
-                            value={ amountInfo?.cardAmount } 
+                            value={ amountInfo?.cardAmount }
                             thousandSeparator
                             displayType="text"
                           ></NumericFormat>
                         </span>
                       </li>
                       <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;포인트금액</span>
+                        <span className="label">·&nbsp;&nbsp;{t('transaction.fields.pointAmount')}</span>
                         <span className="value">
                           <NumericFormat
-                            value={ amountInfo?.pointAmount } 
+                            value={ amountInfo?.pointAmount }
                             thousandSeparator
                             displayType="text"
                           ></NumericFormat>
                         </span>
                       </li>
                       <li className="amount-item">
-                        <span className="label">·&nbsp;&nbsp;쿠폰금액</span>
+                        <span className="label">·&nbsp;&nbsp;{t('transaction.fields.couponAmount')}</span>
                         <span className="value">
                           <NumericFormat
-                            value={ amountInfo?.couponAmount } 
+                            value={ amountInfo?.couponAmount }
                             thousandSeparator
                             displayType="text"
                           ></NumericFormat>
@@ -333,10 +336,10 @@ export const AmountInfoSection = ({
                   }
                   { (serviceCode === '01' || serviceCode === '02') &&
                     <li className="amount-item">
-                      <span className="label">·&nbsp;&nbsp;에스크로수수료</span>
+                      <span className="label">·&nbsp;&nbsp;{t('transaction.fields.escrowFee')}</span>
                       <span className="value">
                         <NumericFormat
-                          value={ amountInfo?.escrowFee } 
+                          value={ amountInfo?.escrowFee }
                           thousandSeparator
                           displayType="text"
                         ></NumericFormat>
@@ -348,30 +351,30 @@ export const AmountInfoSection = ({
                       { (amountInfo?.simplePaymentServiceCode === 'E016') &&
                         <>
                           <li className="amount-item">
-                            <span className="label">·&nbsp;&nbsp;카카오머니</span>
+                            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoMoneyAmount')}</span>
                             <span className="value">
                               <NumericFormat
-                                value={ amountInfo?.multiPointAmount } 
+                                value={ amountInfo?.multiPointAmount }
                                 thousandSeparator
                                 displayType="text"
                               ></NumericFormat>
                             </span>
                           </li>
                           <li className="amount-item">
-                            <span className="label">·&nbsp;&nbsp;카카오포인트</span>
+                            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoPointAmount')}</span>
                             <span className="value">
                               <NumericFormat
-                                value={ amountInfo?.multiCouponAmount } 
+                                value={ amountInfo?.multiCouponAmount }
                                 thousandSeparator
                                 displayType="text"
                               ></NumericFormat>
                             </span>
                           </li>
                           <li className="amount-item">
-                            <span className="label">·&nbsp;&nbsp;카카오즉시할인</span>
+                            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoDiscountAmount')}</span>
                             <span className="value">
                               <NumericFormat
-                                value={ amountInfo?.kakaoDiscountAmount } 
+                                value={ amountInfo?.kakaoDiscountAmount }
                                 thousandSeparator
                                 displayType="text"
                               ></NumericFormat>
@@ -381,10 +384,10 @@ export const AmountInfoSection = ({
                       }
                       { (amountInfo?.simplePaymentServiceCode === 'E020') &&
                         <li className="amount-item">
-                          <span className="label">·&nbsp;&nbsp;네이버포인트</span>
+                          <span className="label">·&nbsp;&nbsp;{t('transaction.fields.naverPointAmount')}</span>
                           <span className="value">
                             <NumericFormat
-                              value={ amountInfo?.multiPointAmount } 
+                              value={ amountInfo?.multiPointAmount }
                               thousandSeparator
                               displayType="text"
                             ></NumericFormat>
@@ -394,20 +397,20 @@ export const AmountInfoSection = ({
                       { (amountInfo?.simplePaymentServiceCode === 'E025') &&
                         <>
                           <li className="amount-item">
-                            <span className="label">·&nbsp;&nbsp;토스머니</span>
+                            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.tossMoneyAmount')}</span>
                             <span className="value">
                               <NumericFormat
-                                value={ amountInfo?.multiPointAmount } 
+                                value={ amountInfo?.multiPointAmount }
                                 thousandSeparator
                                 displayType="text"
                               ></NumericFormat>
                             </span>
                           </li>
                           <li className="amount-item">
-                            <span className="label">·&nbsp;&nbsp;토스할인</span>
+                            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.tossDiscountAmount')}</span>
                             <span className="value">
                               <NumericFormat
-                                value={ amountInfo?.tossDiscountAmount } 
+                                value={ amountInfo?.tossDiscountAmount }
                                 thousandSeparator
                                 displayType="text"
                               ></NumericFormat>
@@ -418,20 +421,20 @@ export const AmountInfoSection = ({
                       { (amountInfo?.simplePaymentServiceCode === 'E015') &&
                         <>
                           <li className="amount-item">
-                            <span className="label">·&nbsp;&nbsp;페이코포인트</span>
+                            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.paycoPointAmount')}</span>
                             <span className="value">
                               <NumericFormat
-                                value={ amountInfo?.multiPointAmount } 
+                                value={ amountInfo?.multiPointAmount }
                                 thousandSeparator
                                 displayType="text"
                               ></NumericFormat>
                             </span>
                           </li>
                           <li className="amount-item">
-                            <span className="label">·&nbsp;&nbsp;페이코쿠폰</span>
+                            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.paycoCouponAmount')}</span>
                             <span className="value">
                               <NumericFormat
-                                value={ amountInfo?.multiCouponAmount } 
+                                value={ amountInfo?.multiCouponAmount }
                                 thousandSeparator
                                 displayType="text"
                               ></NumericFormat>
@@ -460,13 +463,13 @@ export const AmountInfoSection = ({
         }
         <div className="txn-doc">
           {
-            (transactionCategory === TransactionCategory.CashReceipt) && 
+            (transactionCategory === TransactionCategory.CashReceipt) &&
             !!canDownloadReceipt &&
-            <button 
-              className="doc-btn" 
+            <button
+              className="doc-btn"
               type="button"
               onClick={ () => onClickToDownloadConfirmation() }
-            >거래 확인서</button>
+            >{t('transaction.fields.transactionConfirmation')}</button>
           }
         </div>
       </div>

src/entities/transaction/ui/section/billing-info-section.tsx

@@ -1,32 +1,34 @@
 import moment from 'moment';
 import { InfoSectionProps } from '../../model/types';
+import { useTranslation } from 'react-i18next';
 
 export const BillingInfoSection = ({
   billingInfo,
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
 
   const getInstallmentMonth = () => {
     let rs = [];
     if((!!billingInfo?.installmentMonth && parseInt(billingInfo?.installmentMonth) > 1)){
       rs.push(
-        <li 
+        <li
           key={ `key-installmentMonth`}
           className="kv-row"
         >
-          <span className="k">할부개월</span>
-          <span className="v">{ billingInfo?.installmentMonth }개월 할부</span>
-        </li> 
+          <span className="k">{ t('transaction.fields.installmentMonth') }</span>
+          <span className="v">{ t('transaction.fields.installmentMonthly', { count: billingInfo?.installmentMonth }) }</span>
+        </li>
       );
     }
     else{
       rs.push(
-        <li 
+        <li
           key={ `key-installmentMonth`}
           className="kv-row"
         >
-          <span className="k">할부개월</span>
-          <span className="v">일시불</span>
-        </li> 
+          <span className="k">{ t('transaction.fields.installmentMonth') }</span>
+          <span className="v">{ t('transaction.fields.lumpSum') }</span>
+        </li>
       );
     }
     return rs;
@@ -34,43 +36,43 @@ export const BillingInfoSection = ({
   return (
     <>
       <div className="txn-section">
-        <div className="section-title">중요 정보</div>
+        <div className="section-title">{ t('transaction.sections.importantInfo') }</div>
         <ul className="kv-list">
           <li className="kv-row">
-            <span className="k">빌키</span>
+            <span className="k">{ t('transaction.fields.billKey') }</span>
             <span className="v">{ billingInfo?.billKey }</span>
           </li>
           <li className="kv-row">
-            <span className="k">TID</span>
+            <span className="k">{ t('transaction.fields.tid') }</span>
             <span className="v">{ billingInfo?.tid }</span>
           </li>
           <li className="kv-row">
-            <span className="k">주분번호</span>
+            <span className="k">{ t('transaction.fields.orderNumber') }</span>
             <span className="v">{ billingInfo?.orderNumber }</span>
           </li>
           <li className="kv-row">
-            <span className="k">승인번호</span>
+            <span className="k">{ t('transaction.fields.approvalNumber') }</span>
             <span className="v">{ billingInfo?.approvalNumber }</span>
           </li>
           <li className="kv-row">
-            <span className="k">승인일자</span>
+            <span className="k">{ t('transaction.fields.approvalDate') }</span>
             <span className="v">{ moment(billingInfo?.approvalDate).format('YYYY.MM.DD') }</span>
           </li>
           <li className="kv-row">
-            <span className="k">요청상태</span>
+            <span className="k">{ t('transaction.fields.requestStatus') }</span>
             <span className="v">{ billingInfo?.requestStatus }</span>
           </li>
           <li className="kv-row">
-            <span className="k">처리결과</span>
+            <span className="k">{ t('transaction.fields.processResult') }</span>
             <span className="v">{ billingInfo?.processResult }</span>
           </li>
           { getInstallmentMonth() }
           <li className="kv-row">
-            <span className="k">상품명</span>
+            <span className="k">{ t('transaction.fields.productName') }</span>
             <span className="v">{ billingInfo?.productName }</span>
           </li>
           <li className="kv-row">
-            <span className="k">구매자</span>
+            <span className="k">{ t('transaction.fields.buyer') }</span>
             <span className="v">{ billingInfo?.buyerName }</span>
           </li>
         </ul>

src/entities/transaction/ui/section/detail-info-section.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
 import { SlideDown } from 'react-slidedown';
@@ -10,6 +11,7 @@ export const DetailInfoSection = ({
   isOpen,
   onClickToOpenInfo
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
   
   const onClickToSetOpenInfo = () => {
     if(!!onClickToOpenInfo){
@@ -20,49 +22,49 @@ export const DetailInfoSection = ({
   return (
     <>
       <div className="txn-section">
-        <div 
+        <div
           className="section-title with-toggle"
           onClick={ () => onClickToSetOpenInfo() }
         >
-          상세 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          {t('transaction.sections.detailInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
         <SlideDown className={'my-dropdown-slidedown'}>
         { !!isOpen &&
           <ul className="kv-list">
             <li className="kv-row">
-              <span className="k">취소일자</span>
+              <span className="k">{t('transaction.fields.cancelDate')}</span>
               <span className="v">{ detailInfo?.cancelDate? moment(detailInfo?.cancelDate).format('YYYY.MM.DD'): '' }</span>
             </li>
             <li className="kv-row">
-              <span className="k">취소승인번호</span>
+              <span className="k">{t('transaction.fields.cancelApprovalNumber')}</span>
               <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
             </li>
             <li className="kv-row">
-              <span className="k">현금영수증</span>
+              <span className="k">{t('transaction.fields.receiptInfo')}</span>
               <span className="v">{ detailInfo?.receiptInfo }</span>
             </li>
             <li className="kv-row">
-              <span className="k">TID</span>
+              <span className="k">{t('transaction.fields.tid')}</span>
               <span className="v">{ detailInfo?.tid }</span>
             </li>
             <li className="kv-row">
-              <span className="k">거래ID</span>
+              <span className="k">{t('transaction.fields.transactionId')}</span>
               <span className="v">{ detailInfo?.merchantTid }</span>
             </li>
             <li className="kv-row">
-              <span className="k">서브몰명</span>
+              <span className="k">{t('transaction.fields.subMallName')}</span>
               <span className="v">{ detailInfo?.subMallName }</span>
             </li>
             <li className="kv-row">
-              <span className="k">서브몰 사업자 번호</span>
+              <span className="k">{t('transaction.fields.subMallBusinessNumber')}</span>
               <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
             </li>
             <li className="kv-row">
-              <span className="k">발행경로</span>
+              <span className="k">{t('transaction.fields.issueChannel')}</span>
               <span className="v">{ detailInfo?.issueChannel }</span>
             </li>
             <li className="kv-row">
-              <span className="k">실패사유</span>
+              <span className="k">{t('transaction.fields.failureReason')}</span>
               <span className="v">{ detailInfo?.failureReason }</span>
             </li>
           </ul>

src/entities/transaction/ui/section/escrow-info-section.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
 import { SlideDown } from 'react-slidedown';
@@ -9,6 +10,7 @@ export const EscrowInfoSection = ({
   isOpen,
   onClickToOpenInfo
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
   
   const onClickToSetOpenInfo = () => {
     if(!!onClickToOpenInfo){
@@ -19,53 +21,53 @@ export const EscrowInfoSection = ({
   return (
     <>
       <div className="txn-section">
-        <div 
+        <div
           className="section-title with-toggle"
           onClick={ () => onClickToSetOpenInfo() }
         >
-          에스크로 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          {t('transaction.sections.escrowInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
         <SlideDown className={'my-dropdown-slidedown'}>
         { !!isOpen &&
           <ul className="kv-list">
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;배송상태</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryStatus')}</span>
               <span className="v">{ escrowInfo?.deliveryStatus }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;배송등록</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryRegistration')}</span>
               <span className="v">{ escrowInfo?.deliveryRegistrationDate? moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD'): '' }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;배송완료</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryComplete')}</span>
               <span className="v">{ escrowInfo?.deliveryCompleteDate? moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD'): '' }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;구매확인</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseConfirm')}</span>
               <span className="v">{ escrowInfo?.purchaseConfirmDate? moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD'): '' }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;구매거절</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseReject')}</span>
               <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;거절사유</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.rejectReason')}</span>
               <span className="v">{ escrowInfo?.rejectReason }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;에스크로인증번호</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.escrowCertNumber')}</span>
               <span className="v">{ escrowInfo?.escrowCertNumber }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;택배사</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryCompany')}</span>
               <span className="v">{ escrowInfo?.deliveryCompany }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;운송장번호</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.trackingNumber')}</span>
               <span className="v">{ escrowInfo?.trackingNumber }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;배송주소</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryAddress')}</span>
               <span className="v">{ escrowInfo?.deliveryAddress }</span>
             </li>
           </ul>

src/entities/transaction/ui/section/important-info-section.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { NumericFormat } from 'react-number-format';
 import { InfoSectionProps, TransactionCategory } from '../../model/types';
 import { useStore } from '@/shared/model/store';
@@ -9,6 +10,7 @@ export const ImportantInfoSection = ({
   importantInfo,
   serviceCode
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
   let serviceCodes = useStore.getState().CommonStore.serviceCodes;
   let serviceName = '';
   let statusName = '';
@@ -60,15 +62,15 @@ export const ImportantInfoSection = ({
   }
 
   const subItems: Record<string, Record<string, string>> = {
-    moid: {name: '주문번호', type: 'string'},
-    tid: {name: 'TID', type: 'string'},
-    statusName: {name: '거래상태', type: 'string'},
-    serviceName: {name: '거래수단', type: 'string'},
-    approvalDate: {name: '승인일', type: 'date'},
-    transactionDate: {name: '거래일', type: 'date'},
-    requestDate: {name: '요청일', type: 'date'},
-    cancelDate: {name: '취소일', type: 'date'},
-    goodsName: {name: '상품명', type: 'string'}
+    moid: {name: t('transaction.fields.orderNumber'), type: 'string'},
+    tid: {name: t('transaction.fields.tid'), type: 'string'},
+    statusName: {name: t('transaction.fields.transactionStatus'), type: 'string'},
+    serviceName: {name: t('transaction.fields.transactionMethod'), type: 'string'},
+    approvalDate: {name: t('transaction.fields.approvalDay'), type: 'date'},
+    transactionDate: {name: t('filter.date'), type: 'date'},
+    requestDate: {name: t('filter.date'), type: 'date'},
+    cancelDate: {name: t('transaction.fields.cancelDate'), type: 'date'},
+    goodsName: {name: t('transaction.fields.productName'), type: 'string'}
   };
   
   const openSubItems: Record<string, Array<string>> = {
@@ -146,54 +148,54 @@ export const ImportantInfoSection = ({
   return (
     <>
       <div className="txn-section">
-        <div className="section-title">중요 정보</div>
+        <div className="section-title">{t('transaction.sections.importantInfo')}</div>
         <ul className="kv-list">
-          { (transactionCategory === TransactionCategory.AllTransaction) && 
+          { (transactionCategory === TransactionCategory.AllTransaction) &&
             subLi()
           }
-          { 
-          (transactionCategory === TransactionCategory.Escrow) && 
+          {
+          (transactionCategory === TransactionCategory.Escrow) &&
             <>
               <li className="kv-row">
-                <span className="k">주문번호</span>
+                <span className="k">{t('transaction.fields.orderNumber')}</span>
                 <span className="v">{ importantInfo?.orderNumber }</span>
               </li>
               <li className="kv-row">
-                <span className="k">TID</span>
+                <span className="k">{t('transaction.fields.tid')}</span>
                 <span className="v">{ importantInfo?.tid }</span>
               </li>
               <li className="kv-row">
-                <span className="k">거래상태</span>
+                <span className="k">{t('transaction.fields.transactionStatus')}</span>
                 <span className="v">{ importantInfo?.transactionStatus }</span>
               </li>
               <li className="kv-row">
-                <span className="k">거래수단</span>
+                <span className="k">{t('transaction.fields.transactionMethod')}</span>
                 <span className="v">{ importantInfo?.paymentMethod }</span>
               </li>
               { serviceCode === '01' &&
                 <li className="kv-row">
-                  <span className="k">승인일</span>
+                  <span className="k">{t('transaction.fields.approvalDay')}</span>
                   <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
                 </li>
               }
               { serviceCode === '02' &&
                 <li className="kv-row">
-                  <span className="k">거래일</span>
+                  <span className="k">{t('filter.date')}</span>
                   <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
                 </li>
               }
-              { serviceCode === '03' && 
+              { serviceCode === '03' &&
                 <li className="kv-row">
-                  <span className="k">요청일</span>
+                  <span className="k">{t('filter.date')}</span>
                   <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
                 </li>
               }
               <li className="kv-row">
-                <span className="k">취소일</span>
+                <span className="k">{t('transaction.fields.cancelDate')}</span>
                 <span className="v">{ importantInfo?.cancelDate? moment(importantInfo?.cancelDate).format('YYYY-MM-DD'): '' }</span>
               </li>
               <li className="kv-row">
-                <span className="k">상품명</span>
+                <span className="k">{t('transaction.fields.productName')}</span>
                 <span className="v">{ importantInfo?.productName }</span>
               </li>
             </>

src/entities/transaction/ui/section/issue-info-section.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { InfoSectionProps } from '../../model/types';
 import moment from 'moment';
 import { useEffect, useState } from 'react';
@@ -7,6 +8,7 @@ export const IssueInfoSection = ({
   issueInfo,
   purposeType,
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
   const [issueDateTime, setIssueDateTime] = useState<string>('');
 
   useEffect(() => {
@@ -22,38 +24,38 @@ export const IssueInfoSection = ({
   return (
     <>
       <div className="txn-section">
-        <div className="section-title">발급 정보</div>
+        <div className="section-title">{t('transaction.sections.issueInfo')}</div>
         <ul className="kv-list">
           <li className="kv-row">
-            <span className="k">승인번호</span>
+            <span className="k">{t('transaction.fields.approvalNumber')}</span>
             <span className="v">{ issueInfo?.approvalNumber }</span>
           </li>
           <li className="kv-row">
-            <span className="k">발행번호</span>
+            <span className="k">{t('transaction.fields.issueNumber')}</span>
             <span className="v">{ issueInfo?.issueNumber }</span>
           </li>
           <li className="kv-row">
-            <span className="k">발행일시</span>
+            <span className="k">{t('transaction.fields.issueDateTime')}</span>
             <span className="v">{ moment(issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
           </li>
           <li className="kv-row">
-            <span className="k">용도</span>
+            <span className="k">{t('transaction.fields.purpose')}</span>
             <span className="v">{ issueInfo?.purpose }</span>
           </li>
           <li className="kv-row">
-            <span className="k">결제수단</span>
+            <span className="k">{t('transaction.fields.paymentMethod')}</span>
             <span className="v">{ issueInfo?.paymentMethod }</span>
           </li>
           <li className="kv-row">
-            <span className="k">상품명</span>
+            <span className="k">{t('transaction.fields.productName')}</span>
             <span className="v">{ issueInfo?.productName }</span>
           </li>
           <li className="kv-row">
-            <span className="k">진행상태</span>
+            <span className="k">{t('transaction.fields.processResult')}</span>
             <span className="v">{ issueInfo?.processResult }</span>
           </li>
           <li className="kv-row">
-            <span className="k">거래구분</span>
+            <span className="k">{t('transaction.fields.transactionType')}</span>
             <span className="v">{ issueInfo?.transactionType }</span>
           </li>
         </ul>

src/entities/transaction/ui/section/merchant-info-section.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
 import { SlideDown } from 'react-slidedown';
@@ -8,6 +9,7 @@ export const MerchantInfoSection = ({
   isOpen,
   onClickToOpenInfo
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
 
   const onClickToSetOpenInfo = () => {
     if(!!onClickToOpenInfo){
@@ -18,25 +20,25 @@ export const MerchantInfoSection = ({
   return (
     <>
       <div className="txn-section">
-        <div 
+        <div
           className="section-title with-toggle"
           onClick={ () => onClickToSetOpenInfo() }
         >
-          상점 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          {t('transaction.sections.merchantInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
         <SlideDown className={'my-dropdown-slidedown'}>
         { !!isOpen &&
           <ul className="kv-list">
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;상호</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.companyName')}</span>
               <span className="v">{ merchantInfo?.companyName }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;GID</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.gid')}</span>
               <span className="v">{ merchantInfo?.gid }</span>
             </li>
             <li className="kv-row">
-              <span className="k">·&nbsp;&nbsp;AID</span>
+              <span className="k">·&nbsp;&nbsp;{t('transaction.fields.aid')}</span>
               <span className="v">{ merchantInfo?.aid }</span>
             </li>
           </ul>

src/entities/transaction/ui/section/part-cancel-info-section.tsx

@@ -4,6 +4,7 @@ import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
 import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
+import { useTranslation } from 'react-i18next';
 
 export const PartCancelInfoSection = ({
   transactionCategory,
@@ -12,13 +13,14 @@ export const PartCancelInfoSection = ({
   isOpen,
   onClickToOpenInfo
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
   
   const subItems: Record<string, Record<string, string>> = {
-    originalTid: {name: '원거래 TID', type: 'string'},
-    originalAmount: {name: '원거래 금액', type: 'number'},
-    partCancelTid: {name: (serviceCode === '05')? '재승인 TID': '부분취소 TID', type: 'string'},
-    partCancelAmount: {name: '부분취소 금액', type: 'number'},
-    remainingAmount: {name: (serviceCode === '05')? '재승인 금액': '부분취소 후 잔액', type: 'number'},
+    originalTid: {name: t('transaction.fields.originalTid'), type: 'string'},
+    originalAmount: {name: t('transaction.fields.originalAmount'), type: 'number'},
+    partCancelTid: {name: (serviceCode === '05')? t('transaction.fields.reApprovalTid'): t('transaction.fields.partCancelTid'), type: 'string'},
+    partCancelAmount: {name: t('transaction.fields.partCancelAmount'), type: 'number'},
+    remainingAmount: {name: (serviceCode === '05')? t('transaction.fields.reApprovalAmount'): t('transaction.fields.remainingAmount'), type: 'number'},
   };
   
   const openSubItems: Record<string, Array<string>> = {
@@ -101,11 +103,11 @@ export const PartCancelInfoSection = ({
   return (
     <>
       <div className="txn-section">
-        <div 
+        <div
           className="section-title with-toggle"
           onClick={ () => onClickToSetOpenInfo() }
         >
-          부분취소 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          { t('transaction.sections.partCancelInfo') } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
         <SlideDown className={'my-dropdown-slidedown'}>
         { !!isOpen &&
@@ -114,7 +116,7 @@ export const PartCancelInfoSection = ({
           </ul>
         }
         </SlideDown>
-       
+
       </div>
     </>
   )

src/entities/transaction/ui/section/payment-info-section.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
 import { NumericFormat } from 'react-number-format';
@@ -12,45 +13,46 @@ export const PaymentInfoSection = ({
   isOpen,
   onClickToOpenInfo
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
 
   const subItems: Record<string, Record<string, string>> = {
-    approvalPurchase: {name: '승인매입', type: 'string'},
-    approvalRejectCount: {name: '승인반송(횟수)', type: 'number', addString: '건'},
-    approvalRepurchaseCount: {name: '승인재매입(횟수)', type: 'number', addString: '건'},
-    approvalVAN: {name: '승인VAN', type: 'string'},
-    cancelPurchase: {name: '취소매입', type: 'string'},
-    cancelRejectCount: {name: '취소반송', type: 'number', addString: '건'},
-    cancelRepurchaseCount: {name: '취소재매입', type: 'number', addString: '건'},
-    purchaseVan: {name: '매입VAN', type: 'string'},
-    purchaseCompany: {name: '매입사(발급사)', type: 'string'},
-    cardNo: {name: '카드번호', type: 'string'},
-    approvalNo: {name: '승인번호', type: 'string'},
-    installmentMonth: {name: '할부기간', type: 'string', addString: '개월'},
-    authentication: {name: '인증', type: 'string'},
+    approvalPurchase: {name: t('transaction.fields.approvalPurchase'), type: 'string'},
+    approvalRejectCount: {name: t('transaction.fields.approvalRejectCount'), type: 'number', addString: '건'},
+    approvalRepurchaseCount: {name: t('transaction.fields.approvalRepurchaseCount'), type: 'number', addString: '건'},
+    approvalVAN: {name: t('transaction.fields.approvalVAN'), type: 'string'},
+    cancelPurchase: {name: t('transaction.fields.cancelPurchase'), type: 'string'},
+    cancelRejectCount: {name: t('transaction.fields.cancelRejectCount'), type: 'number', addString: '건'},
+    cancelRepurchaseCount: {name: t('transaction.fields.cancelRepurchaseCount'), type: 'number', addString: '건'},
+    purchaseVan: {name: t('transaction.fields.purchaseVan'), type: 'string'},
+    purchaseCompany: {name: t('transaction.fields.purchaseCompany'), type: 'string'},
+    cardNo: {name: t('transaction.fields.cardNo'), type: 'string'},
+    approvalNo: {name: t('transaction.fields.approvalNo'), type: 'string'},
+    installmentMonth: {name: t('transaction.fields.installmentPeriod'), type: 'string', addString: '개월'},
+    authentication: {name: t('transaction.fields.authentication'), type: 'string'},
 
-    joinType: {name: '유형', type: 'string'},
-    bankName: {name: '은행명', type: 'string'},
-    accountNo: {name: '계좌번호', type: 'string'},
-    refundCompleteDate: {name: '환불완료일', type: 'string'},
-    customerId: {name: '고객ID', type: 'string'},
-    
-    culturelandId: {name: '컬처랜드ID', type: 'string'},
+    joinType: {name: t('transaction.fields.joinType'), type: 'string'},
+    bankName: {name: t('transaction.fields.bankName'), type: 'string'},
+    accountNo: {name: t('transaction.fields.accountNo'), type: 'string'},
+    refundCompleteDate: {name: t('transaction.fields.refundCompleteDate'), type: 'string'},
+    customerId: {name: t('transaction.fields.customerId'), type: 'string'},
 
-    partner: {name: '제휴사', type: 'string'},
-    cpid: {name: 'CPID', type: 'string'},
-    goodsCategory: {name: '상품구분', type: 'string'},
-    cellphoneNo: {name: '휴대폰번호', type: 'string'},
+    culturelandId: {name: t('transaction.fields.culturelandId'), type: 'string'},
 
-    giftCardNumber: {name: '상품권번호', type: 'string'},
+    partner: {name: t('transaction.fields.partner'), type: 'string'},
+    cpid: {name: t('transaction.fields.cpid'), type: 'string'},
+    goodsCategory: {name: t('transaction.fields.goodsCategory'), type: 'string'},
+    cellphoneNo: {name: t('transaction.fields.cellphoneNo'), type: 'string'},
 
-    depositBankName: {name: '입금금융기관명', type: 'string'},
-    depositorName: {name: '입금자명', type: 'string'},
-    depositDeadline: {name: '입금기한', type: 'date'},
-    depositDate: {name: '입금일', type: 'date'},
-    refundScheduleDate: {name: '환불예정일', type: 'date'},
-    refundBankName: {name: '환불은행명', type: 'string'},
-    refundAccountNo: {name: '환불계좌번호', type: 'string'},
-    accountHolder: {name: '예금주', type: 'string'},
+    giftCardNumber: {name: t('transaction.fields.giftCardNumber'), type: 'string'},
+
+    depositBankName: {name: t('transaction.fields.depositBankName'), type: 'string'},
+    depositorName: {name: t('transaction.fields.depositorName'), type: 'string'},
+    depositDeadline: {name: t('transaction.fields.depositDeadline'), type: 'date'},
+    depositDate: {name: t('transaction.fields.depositDate'), type: 'date'},
+    refundScheduleDate: {name: t('transaction.fields.refundScheduleDate'), type: 'date'},
+    refundBankName: {name: t('transaction.fields.refundBankName'), type: 'string'},
+    refundAccountNo: {name: t('transaction.fields.refundAccountNo'), type: 'string'},
+    accountHolder: {name: t('transaction.fields.accountHolder'), type: 'string'},
   };
 
   const openSubItems: Record<string, Array<string>> = {
@@ -99,7 +101,7 @@ export const PaymentInfoSection = ({
               <span className="v">
               { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
                 (k === 'installmentMonth' && newPaymentInfo[k] === '00') &&
-                  '일시불'
+                  t('transaction.fields.lumpSum')
               }
               { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
                 (k === 'installmentMonth' && newPaymentInfo[k] !== '00') &&
@@ -138,11 +140,11 @@ export const PaymentInfoSection = ({
   return (
     <>
       <div className="txn-section">
-        <div 
+        <div
           className="section-title with-toggle"
           onClick={ () => onClickToSetOpenInfo() }
         >
-          결제 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          {t('transaction.sections.paymentInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
         <SlideDown className={'my-dropdown-slidedown'}>
         { !!isOpen &&
@@ -152,82 +154,82 @@ export const PaymentInfoSection = ({
             }
             { (transactionCategory === TransactionCategory.Escrow) && 
               <>
-                { (serviceCode === '01') && 
+                { (serviceCode === '01') &&
                   <>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;승인매입일</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalPurchaseDate')}</span>
                       <span className="v">{ paymentInfo?.approvalPurchase? moment(paymentInfo?.approvalPurchase).format('YYYY-MM-DD'): '' }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;승인반송(횟수)</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalRejectCount')}</span>
                       <span className="v">
                         <NumericFormat
-                          value={ paymentInfo?.approvalRejectCount } 
+                          value={ paymentInfo?.approvalRejectCount }
                           thousandSeparator
                           displayType="text"
                         ></NumericFormat>
                       </span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;승인재매입(횟수)</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalRepurchaseCount')}</span>
                       <span className="v">
                         <NumericFormat
-                          value={ paymentInfo?.approvalRepurchaseCount } 
+                          value={ paymentInfo?.approvalRepurchaseCount }
                           thousandSeparator
                           displayType="text"
                         ></NumericFormat>
                       </span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;승인VAN</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalVAN')}</span>
                       <span className="v">{ paymentInfo?.approvalVAN }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;취소매입</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelPurchaseDate')}</span>
                       <span className="v">{ paymentInfo?.cancelPurchase? moment(paymentInfo?.cancelPurchase).format('YYYY-MM-DD'): '' }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;취소반송(횟수)</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRejectCount')}</span>
                       <span className="v">
                         <NumericFormat
-                          value={ paymentInfo?.cancelRejectCount } 
+                          value={ paymentInfo?.cancelRejectCount }
                           thousandSeparator
                           displayType="text"
                         ></NumericFormat>
                       </span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;취소재매입(횟수)</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRepurchaseCount')}</span>
                       <span className="v">
                         <NumericFormat
-                          value={ paymentInfo?.cancelRepurchaseCount } 
+                          value={ paymentInfo?.cancelRepurchaseCount }
                           thousandSeparator
                           displayType="text"
                         ></NumericFormat>
                       </span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;매입VAN</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseVan')}</span>
                       <span className="v">{ paymentInfo?.purchaseVan }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;매입사(발급사)</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseCompany')}</span>
                       <span className="v">{ paymentInfo?.purchaseCompany }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;카드번호</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cardNo')}</span>
                       <span className="v">{ paymentInfo?.cardNo }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;승인번호</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalNo')}</span>
                       <span className="v">{ paymentInfo?.approvalNo }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;할부기간</span>
-                      <span className="v">{ (paymentInfo?.installmentMonth === '00')? '일시불': paymentInfo?.installmentMonth }</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.installmentPeriod')}</span>
+                      <span className="v">{ (paymentInfo?.installmentMonth === '00')? t('transaction.fields.lumpSum'): paymentInfo?.installmentMonth }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;인증</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.authentication')}</span>
                       <span className="v">{ paymentInfo?.authentication }</span>
                     </li>
                   </>
@@ -235,7 +237,7 @@ export const PaymentInfoSection = ({
                 { (serviceCode === '02') &&
                   <>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;유형</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.joinType')}</span>
                       <span className="v">{ paymentInfo?.joinType  }</span>
                     </li>
                   </>
@@ -243,43 +245,43 @@ export const PaymentInfoSection = ({
                 { (serviceCode === '02' || serviceCode === '03') &&
                   <>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;은행명</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.bankName')}</span>
                       <span className="v">{ paymentInfo?.bankName || paymentInfo?.depositBankName }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;계좌번호</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.accountNo')}</span>
                       <span className="v">{ paymentInfo?.accountNo || paymentInfo?.virtualAccountNo }</span>
                     </li>
                   </>
                 }
-                { (serviceCode === '03') && 
+                { (serviceCode === '03') &&
                   <>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;입금자명</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositorName')}</span>
                       <span className="v">{ paymentInfo?.depositorName }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;입금기한</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositDeadline')}</span>
                       <span className="v">{ paymentInfo?.depositDeadline? moment(paymentInfo?.depositDeadline).format('YYYY-MM-DD'): '' }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;입금일</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositDate')}</span>
                       <span className="v">{ paymentInfo?.depositDate? moment(paymentInfo?.depositDate).format('YYYY-MM-DD'): '' }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;환불예정일</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundScheduleDate')}</span>
                       <span className="v">{ paymentInfo?.refundScheduleDate? moment(paymentInfo?.refundScheduleDate).format('YYYY-MM-DD'): '' }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;환불은행명</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundBankName')}</span>
                       <span className="v">{ paymentInfo?.refundBankName }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;환불계좌번호</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundAccountNo')}</span>
                       <span className="v">{ paymentInfo?.refundAccountNo }</span>
                     </li>
                     <li className="kv-row">
-                      <span className="k">·&nbsp;&nbsp;예금주</span>
+                      <span className="k">·&nbsp;&nbsp;{t('transaction.fields.accountHolder')}</span>
                       <span className="v">{ paymentInfo?.accountHolder }</span>
                     </li>
                   </>

src/entities/transaction/ui/section/settlement-info-section.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { NumericFormat } from 'react-number-format';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
@@ -12,12 +13,13 @@ export const SettlementInfoSection = ({
   isOpen,
   onClickToOpenInfo
 }: InfoSectionProps) => {
-  
+  const { t } = useTranslation();
+
   const subItems: Record<string, Record<string, string>> = {
-    approvalSettlementDate: {name: '승인정산일', type: 'date'},
-    approvalSettlementAmount: {name: '승인정산금액', type: 'number'},
-    cancelSettlementDate: {name: '취소정산일', type: 'date'},
-    cancelSettlementAmount: {name: '취소정산금액', type: 'number'},
+    approvalSettlementDate: {name: t('transaction.fields.approvalSettlementDate'), type: 'date'},
+    approvalSettlementAmount: {name: t('transaction.fields.approvalSettlementAmount'), type: 'number'},
+    cancelSettlementDate: {name: t('transaction.fields.cancelSettlementDate'), type: 'date'},
+    cancelSettlementAmount: {name: t('transaction.fields.cancelSettlementAmount'), type: 'number'},
   };
 
   const openSubItems: Record<string, Array<string>> = {
@@ -100,30 +102,30 @@ export const SettlementInfoSection = ({
   return (
     <>
       <div className="txn-section">
-        <div 
+        <div
           className="section-title with-toggle"
           onClick={ () => onClickToSetOpenInfo() }
         >
-          정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          {t('transaction.sections.settlementInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
-        
+
         <SlideDown className={'my-dropdown-slidedown'}>
         { !!isOpen &&
           <ul className="kv-list">
-          { (transactionCategory === TransactionCategory.AllTransaction) && 
+          { (transactionCategory === TransactionCategory.AllTransaction) &&
             subLi()
           }
-          { (transactionCategory === TransactionCategory.Escrow) && 
+          { (transactionCategory === TransactionCategory.Escrow) &&
             <>
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;승인정산일</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalSettlementDate')}</span>
                 <span className="v">{ settlementInfo?.approvalSettlementDate? moment(settlementInfo?.approvalSettlementDate).format('YYYY.MM.DD'): '' }</span>
               </li>
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;승인정산금액</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalSettlementAmount')}</span>
                 <span className="v">
                   <NumericFormat
-                    value={ settlementInfo?.approvalSettlementAmount } 
+                    value={ settlementInfo?.approvalSettlementAmount }
                     thousandSeparator
                     displayType="text"
                     suffix='원'
@@ -131,14 +133,14 @@ export const SettlementInfoSection = ({
                 </span>
               </li>
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;취소정산일</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelSettlementDate')}</span>
                 <span className="v">{ settlementInfo?.cancelSettlementDate? moment(settlementInfo?.cancelSettlementDate).format('YYYY.MM.DD'): '' }</span>
               </li>
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;취소정산금액</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelSettlementAmount')}</span>
                 <span className="v">
                   <NumericFormat
-                    value={ settlementInfo?.cancelSettlementAmount } 
+                    value={ settlementInfo?.cancelSettlementAmount }
                     thousandSeparator
                     displayType="text"
                     suffix='원'

src/entities/transaction/ui/section/transaction-info-section.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
 import { NumericFormat } from 'react-number-format';
@@ -12,15 +13,16 @@ export const TransactionInfoSection = ({
   isOpen,
   onClickToOpenInfo
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
 
   const subItems: Record<string, Record<string, string>> = {
-    buyerName: {name: '구매자명', type: 'string'},
-    buyerEmail: {name: '이메일', type: 'string'},
-    buyerTel: {name: '전화번호', type: 'string'},
-    cancelReason: {name: '취소사유', type: 'string'},
-    cancelRequestor: {name: '취소요청자', type: 'string'},
-    partialCancel: {name: '부분취소', type: 'string'},
-    cashReceiptIssue: {name: '현금영수증발행', type: 'string'},
+    buyerName: {name: t('transaction.fields.buyerName'), type: 'string'},
+    buyerEmail: {name: t('transaction.fields.buyerEmail'), type: 'string'},
+    buyerTel: {name: t('transaction.fields.buyerTel'), type: 'string'},
+    cancelReason: {name: t('transaction.fields.cancelReason'), type: 'string'},
+    cancelRequestor: {name: t('transaction.fields.cancelRequestor'), type: 'string'},
+    partialCancel: {name: t('transaction.fields.partialCancel'), type: 'string'},
+    cashReceiptIssue: {name: t('transaction.fields.cashReceiptIssue'), type: 'string'},
   };
 
   const openSubItems: Record<string, Array<string>> = {
@@ -106,47 +108,47 @@ export const TransactionInfoSection = ({
   return (
     <>
       <div className="txn-section">
-        <div 
+        <div
           className="section-title with-toggle"
           onClick={ () => onClickToSetOpenInfo() }
         >
-          거래 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          {t('transaction.sections.transactionInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
         <SlideDown className={'my-dropdown-slidedown'}>
-        { !!isOpen &&  
+        { !!isOpen &&
           <ul className="kv-list">
-          { (transactionCategory === TransactionCategory.AllTransaction) && 
+          { (transactionCategory === TransactionCategory.AllTransaction) &&
             subLi()
           }
-          { (transactionCategory === TransactionCategory.Escrow) && 
+          { (transactionCategory === TransactionCategory.Escrow) &&
             <>
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;구매자명</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerName')}</span>
                 <span className="v">{ transactionInfo?.buyerName }</span>
               </li>
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;이메일</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerEmail')}</span>
                 <span className="v">{ transactionInfo?.buyerEmail }</span>
               </li>
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;전화번호</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerTel')}</span>
                 <span className="v">{ transactionInfo?.buyerTel }</span>
               </li>
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;취소사유</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelReason')}</span>
                 <span className="v">{ transactionInfo?.cancelReason }</span>
               </li>
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;취소요청자</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRequestor')}</span>
                 <span className="v">{ transactionInfo?.cancelRequestor }</span>
               </li>
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;부분취소</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.partialCancel')}</span>
                 <span className="v">{ transactionInfo?.partialCancel }</span>
               </li>
               { (serviceCode === '02' || serviceCode === '03') &&
               <li className="kv-row">
-                <span className="k">·&nbsp;&nbsp;현금영수증발행</span>
+                <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cashReceiptIssue')}</span>
                 <span className="v">{ transactionInfo?.cashReceiptIssue }</span>
               </li>
               }