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/all-transaction-all-cancel.tsx

@@ -3,6 +3,7 @@ import { AllTransactionCancelInfoResponse } from '../model/types';
 import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
 import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
 import { NumericFormat } from 'react-number-format';
+import { useTranslation } from 'react-i18next';
 
 export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse {
   serviceCode: string;
@@ -45,25 +46,27 @@ export const AllTransactionAllCancel = ({
   requestSuccess,
   totalCancelAmount
 }: AllTransactionAllCancelProps) => {
+  const { t } = useTranslation();
+
   return (
     <>
       <div className="amount-info">
         <ul className="amount-list">
           <li className="amount-item">
-            <span className="label">·&nbsp;&nbsp;총 잔액</span>
+            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalBalance')}</span>
             <span className="value">
               <NumericFormat
-                value={ remainAmount } 
+                value={ remainAmount }
                 thousandSeparator
                 displayType="text"
               ></NumericFormat>
             </span>
           </li>
           <li className="amount-item">
-            <span className="label">·&nbsp;&nbsp;총 취소금액</span>
+            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalCancelAmount')}</span>
             <span className="value">
               <NumericFormat
-                value={ totalCancelAmount } 
+                value={ totalCancelAmount }
                 thousandSeparator
                 displayType="text"
               ></NumericFormat>

src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx

@@ -7,6 +7,7 @@ import { NumericFormat } from 'react-number-format';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { useNavigate } from '@/shared/lib/hooks';
 import { PATHS } from '@/shared/constants/paths';
+import { useTranslation } from 'react-i18next';
 export interface AllTransactionCancelPreventBondProps {
   cancelPreventBondOn: boolean;
   setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void;
@@ -22,6 +23,7 @@ export const AllTransactionCancelPreventBond = ({
   serviceCode,
   tid
 }: AllTransactionCancelPreventBondProps) => {
+  const { t } = useTranslation();
   const { navigate } = useNavigate();
   const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo);
   const onClickToClose = () => {
@@ -48,15 +50,15 @@ export const AllTransactionCancelPreventBond = ({
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
-            <div className="full-menu-title center">거래취소(입금 후 취소)</div>
+            <div className="full-menu-title center">{t('transaction.cancel.afterDeposit.title')}</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>
@@ -64,43 +66,43 @@ export const AllTransactionCancelPreventBond = ({
           </div>
           <div className="option-list-nopadding pw-26">
             <div className="after-deposit-cancel pb-120">
-              <div className="notice-text">요청하신 거래취소는 입금 후 취소처리 가능합니다.</div>
-              <div className="section-title">취소거래내역</div>
+              <div className="notice-text">{t('transaction.cancel.afterDeposit.notice')}</div>
+              <div className="section-title">{t('transaction.cancel.afterDeposit.cancelTransactionTitle')}</div>
               <div className="amount-info">
                 <ul className="kv-list">
                   <li className="kv-row">
-                    <div className="k">· 승인일</div>
+                    <div className="k">· {t('transaction.fields.approvalDay')}</div>
                     <div className="v">{ item?.approvalDate? moment(item?.approvalDate).format('YYYY.MM.DD'): '' }</div>
                   </li>
                   <li className="kv-row">
-                    <div className="k">· 승인번호</div>
+                    <div className="k">· {t('transaction.fields.approvalNumber')}</div>
                     <div className="v">{ item?.approvalNo }</div>
                   </li>
                   <li className="kv-row">
-                    <div className="k">· 승인금액</div>
+                    <div className="k">· {t('transaction.cancel.afterDeposit.approvalAmount')}</div>
                     <div className="v">
                       <NumericFormat
-                        value={ item?.amount } 
+                        value={ item?.amount }
                         thousandSeparator
                         displayType="text"
                       ></NumericFormat>
                     </div>
                   </li>
                   <li className="kv-row">
-                    <div className="k">· 총 취소금액</div>
+                    <div className="k">· {t('transaction.fields.totalCancelAmount')}</div>
                     <div className="v">
                       <NumericFormat
-                        value={ item?.totalCancelAmount } 
+                        value={ item?.totalCancelAmount }
                         thousandSeparator
                         displayType="text"
                       ></NumericFormat>
                     </div>
                   </li>
                   <li className="kv-row">
-                    <div className="k red">· 입금요청금액 :</div>
+                    <div className="k red">· {t('transaction.cancel.afterDeposit.depositRequestAmount')} :</div>
                     <div className="v red">
                       <NumericFormat
-                        value={ item?.depositRequestAmount } 
+                        value={ item?.depositRequestAmount }
                         thousandSeparator
                         displayType="text"
                       ></NumericFormat>
@@ -109,40 +111,40 @@ export const AllTransactionCancelPreventBond = ({
                 </ul>
               </div>
 
-              <div className="section-title">입금 정보</div>
+              <div className="section-title">{t('transaction.cancel.afterDeposit.depositInfoTitle')}</div>
               <div className="amount-info">
                 <ul className="kv-list">
                   <li className="kv-row">
-                    <div className="k">· 은행</div>
+                    <div className="k">· {t('transaction.fields.bank')}</div>
                     <div className="v">{ item?.bankName }</div>
                   </li>
                   <li className="kv-row">
-                    <div className="k">· 계좌번호</div>
+                    <div className="k">· {t('transaction.fields.accountNo')}</div>
                     <div className="v">{ item?.accountNo }</div>
                   </li>
                   <li className="kv-row">
-                    <div className="k">· 예금주</div>
+                    <div className="k">· {t('transaction.fields.accountHolder')}</div>
                     <div className="v">{ item?.accountName }</div>
                   </li>
                 </ul>
               </div>
 
               <div className="guide-list mt-26">
-                <div className="desc dot">[취소요청] 버튼을 통해 취소 요청을 진행해야 접수됩니다.</div>
-                <div className="desc dot">입금자명은 가맹점 상호로 입력해 주세요.</div>
-                <div className="desc dot">입금요청금액과 동일한 금액을 입금해야 취소가 진행됩니다.</div>
-                <div className="desc dot">취소내역은 최대 3일 이후 확인 가능합니다.</div>
-                <div className="desc dot">입금 후 취소 프로세스 :<br />가맹점의 취소요청 -&gt; 가맹점의입금 -&gt; 입금 확인 -&gt; 취소 처리</div>
-                <div className="desc dot">정산받지 않은 거래인 경우 <span className="link-blue">service@nicepay.co.kr</span>로 거래내역을 발송바랍니다. (단. 정산예정일이 2일 이상 남은 거래에 한함)</div>
+                <div className="desc dot">{t('transaction.cancel.afterDeposit.guide1')}</div>
+                <div className="desc dot">{t('transaction.cancel.afterDeposit.guide2')}</div>
+                <div className="desc dot">{t('transaction.cancel.afterDeposit.guide3')}</div>
+                <div className="desc dot">{t('transaction.cancel.afterDeposit.guide4')}</div>
+                <div className="desc dot" dangerouslySetInnerHTML={{ __html: t('transaction.cancel.afterDeposit.guide5') }}></div>
+                <div className="desc dot" dangerouslySetInnerHTML={{ __html: t('transaction.cancel.afterDeposit.guide6') }}></div>
               </div>
             </div>
           </div>
         </div>
         <div className="apply-row">
-          <button 
+          <button
             className="btn-50 btn-blue flex-1"
             onClick={ () => callTransactionCancel() }
-          >신청</button>
+          >{t('transaction.submit')}</button>
         </div>
       </motion.div>
     </>

src/entities/transaction/ui/all-transaction-part-cancel.tsx

@@ -3,6 +3,7 @@ import { AllTransactionCancelInfoResponse } from '../model/types';
 import { NumericFormat } from 'react-number-format';
 import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
 import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
+import { useTranslation } from 'react-i18next';
 
 export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse {
   serviceCode: string;
@@ -63,6 +64,7 @@ export const AllTransactionPartCancel = ({
   totalCancelAmount,
   setTotalCancelAmount
 }: AllTransactionPartCancelProps) => {
+  const { t } = useTranslation();
   const [cancelTotalCancelAmountReadonly, setCancelTotalCancelAmountReadonly] = useState<boolean>(true);
   const [cancelSupplyAmountDisabled, setCancelSupplyAmountDisabled] = useState<boolean>(false);
   const [cancelGoodsVatDisabled, setCancelGoodsVatDisabled] = useState<boolean>(false);
@@ -180,20 +182,20 @@ export const AllTransactionPartCancel = ({
       <div className="amount-info">
         <ul className="amount-list">
           <li className="amount-item">
-            <span className="label">·&nbsp;&nbsp;총 잔액</span>
+            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalBalance')}</span>
             <span className="value">
               <NumericFormat
-                value={ remainAmount } 
+                value={ remainAmount }
                 thousandSeparator
                 displayType="text"
               ></NumericFormat>
             </span>
           </li>
           <li className="amount-item">
-            <span className="label">·&nbsp;&nbsp;총 취소금액</span>
+            <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalCancelAmount')}</span>
             <span className="value">
               <NumericFormat
-                value={ totalCancelAmount } 
+                value={ totalCancelAmount }
                 displayType="input"
                 allowNegative={ false }
                 max={ remainAmount }
@@ -215,19 +217,19 @@ export const AllTransactionPartCancel = ({
             <thead>
               <tr>
                 <th className="header-empty"></th>
-                <th className="header-balance">잔액</th>
-                <th className="header-cancel">취소금액</th>
+                <th className="header-balance">{t('transaction.cancel.partCancel.balance')}</th>
+                <th className="header-cancel">{t('transaction.cancel.partCancel.cancelAmount')}</th>
               </tr>
             </thead>
             <tbody>
               <tr>
-                <td className="row-label">과세액</td>
+                <td className="row-label">{t('transaction.cancel.partCancel.taxableAmount')}</td>
                 <td className="row-balance">
                   <NumericFormat
-                    value={ supplyAmount } 
+                    value={ supplyAmount }
                     thousandSeparator
                     displayType="text"
-                  ></NumericFormat> 
+                  ></NumericFormat>
                 </td>
                 <td className="row-cancel">
                   <NumericFormat
@@ -241,13 +243,13 @@ export const AllTransactionPartCancel = ({
                 </td>
               </tr>
                 <tr>
-                  <td className="row-label">부가세</td>
+                  <td className="row-label">{t('transaction.cancel.partCancel.taxAmount')}</td>
                   <td className="row-balance">
                     <NumericFormat
-                      value={ goodsVat } 
+                      value={ goodsVat }
                       thousandSeparator
                       displayType="text"
-                    ></NumericFormat> 
+                    ></NumericFormat>
                   </td>
                   <td className="row-cancel">
                     <NumericFormat
@@ -261,10 +263,10 @@ export const AllTransactionPartCancel = ({
                   </td>
                 </tr>
                 <tr>
-                  <td className="row-label">면세</td>
+                  <td className="row-label">{t('transaction.cancel.partCancel.taxFree')}</td>
                   <td className="row-balance">
                     <NumericFormat
-                      value={ taxFreeAmount } 
+                      value={ taxFreeAmount }
                       thousandSeparator
                       displayType="text"
                     ></NumericFormat>
@@ -281,10 +283,10 @@ export const AllTransactionPartCancel = ({
                   </td>
                 </tr>
                 <tr>
-                  <td className="row-label">봉사료</td>
+                  <td className="row-label">{t('transaction.cancel.partCancel.serviceFee')}</td>
                   <td className="row-balance">
                     <NumericFormat
-                      value={ serviceAmount } 
+                      value={ serviceAmount }
                       thousandSeparator
                       displayType="text"
                     ></NumericFormat>

src/entities/transaction/ui/billing-list.tsx

@@ -2,12 +2,14 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { BillingListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';
+import { useTranslation } from 'react-i18next';
 
-export const BillingList = ({ 
+export const BillingList = ({
   transactionCategory,
-  listItems 
+  listItems
 }: BillingListProps) => {
   const { navigate } = useNavigate();
+  const { t } = useTranslation();
   
   const getListDateGroup = () => {
     let rs = [];
@@ -62,10 +64,10 @@ export const BillingList = ({
       { getListDateGroup() }
       </div>  
       <div className="apply-row">
-        <button 
+        <button
           className="btn-50 btn-blue flex-1"
-          onClick={ () => onClickToNavigate() }          
-        >결제신청</button>
+          onClick={ () => onClickToNavigate() }
+        >{ t('transaction.list.paymentRequest') }</button>
       </div>
     </>
   );

src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { CashReceiptPurposeType } from '../model/types';
 import { PatternFormat } from 'react-number-format';
+import { useTranslation } from 'react-i18next';
 
 export interface CashReceiptHandWrittenIssuanceStep1Props {
   businessNumber?: string;
@@ -38,19 +39,20 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
   setEmail,
   setPhoneNumber
 }: CashReceiptHandWrittenIssuanceStep1Props) => {
+  const { t } = useTranslation();
   const { navigate } = useNavigate();
-  
+
   useSetOnBack(() => {
     navigate(PATHS.transaction.cashReceipt.list);
   });
   return (
     <>
-      <h2 className="issue-title">발행 정보 입력</h2>
+      <h2 className="issue-title">{t('transaction.handWrittenIssuance.step1Title')}</h2>
       <div className="issue-form">
         <div className="issue-row">
-          <div className="issue-label">사업자 번호</div>
+          <div className="issue-label">{t('transaction.handWrittenIssuance.businessNumber')}</div>
           <div className="issue-field">
-            <input 
+            <input
               className="error"
               type="text"
               value={ businessNumber }
@@ -60,49 +62,49 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
         </div>
 
         <div className="issue-row">
-          <div className="issue-label">용도</div>
+          <div className="issue-label">{t('transaction.fields.purpose')}</div>
           <div className="issue-field">
             <div className="seg-buttons">
               <button
                 className={ `btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` }
                 type="button"
                 onClick={ () => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION) }
-              >소득공제</button>
+              >{t('transaction.handWrittenIssuance.incomeDeduction')}</button>
               <button
                 className={ `btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` }
                 type="button"
                 onClick={ () => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF) }
-              >지출증빙</button>
+              >{t('transaction.handWrittenIssuance.expenseProof')}</button>
             </div>
           </div>
         </div>
         <div className="issue-row">
-          <div className="issue-label">상품명</div>
+          <div className="issue-label">{t('transaction.fields.productName')}</div>
           <div className="issue-field">
-            <input 
-              type="text" 
-              placeholder="상품명"
+            <input
+              type="text"
+              placeholder={t('transaction.handWrittenIssuance.productNamePlaceholder')}
               value={ productName }
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
             />
           </div>
         </div>
         <div className="issue-row">
-          <div className="issue-label">구매자</div>
+          <div className="issue-label">{t('transaction.fields.buyer')}</div>
           <div className="issue-field">
-            <input 
-              type="text" 
-              placeholder="구매자명"
+            <input
+              type="text"
+              placeholder={t('transaction.handWrittenIssuance.buyerNamePlaceholder')}
               value={ buyerName }
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
             />
           </div>
         </div>
         <div className="issue-row">
-          <div className="issue-label">발행번호</div>
+          <div className="issue-label">{t('transaction.fields.issueNumber')}</div>
           <div className="issue-field">
             <PatternFormat
-              placeholder="사업자번호 OR 휴대폰번호"
+              placeholder={t('transaction.handWrittenIssuance.issueNumberPlaceholder')}
               value={ issueNumber }
               valueIsNumericString
               format="###########"
@@ -111,21 +113,21 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
           </div>
         </div>
         <div className="issue-row">
-          <div className="issue-label">이메일 주소</div>
+          <div className="issue-label">{t('account.emailAddress')}</div>
           <div className="issue-field">
             <input
               type="email"
-              placeholder="TEST123@nicepay.com"
+              placeholder={t('transaction.handWrittenIssuance.emailPlaceholder')}
               value={ email }
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value) }
             />
           </div>
         </div>
         <div className="issue-row">
-          <div className="issue-label">전화번호</div>
+          <div className="issue-label">{t('account.phoneNumber')}</div>
           <div className="issue-field">
             <PatternFormat
-              placeholder="01012345678"
+              placeholder={t('transaction.handWrittenIssuance.phoneNumberPlaceholder')}
               value={ phoneNumber }
               valueIsNumericString
               format="###########"

src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx

@@ -2,6 +2,7 @@ import { ChangeEvent } from 'react';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { ProcessStep } from '../model/types';
 import { NumericFormat } from 'react-number-format';
+import { useTranslation } from 'react-i18next';
 
 export interface CashReceiptHandWrittenIssuanceStep2Props {
   setProcessStep: (processStep: ProcessStep) => void;
@@ -31,17 +32,19 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
   setServiceCharge,
   onClickToVatCalculate
 }: CashReceiptHandWrittenIssuanceStep2Props) => {
+  const { t } = useTranslation();
+
   useSetOnBack(() => {
     setProcessStep(ProcessStep.One);
   });
-  
+
   return (
     <>
-      <h2 className="issue-title">발행 금액 입력</h2>
+      <h2 className="issue-title">{t('transaction.handWrittenIssuance.step2Title')}</h2>
 
       <div className="issue-form">
         <div className="issue-row">
-          <div className="issue-label">발행금액</div>
+          <div className="issue-label">{t('transaction.handWrittenIssuance.issueAmount')}</div>
           <div className="issue-field">
             <div className="seg-buttons">
               <NumericFormat
@@ -54,13 +57,13 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
                 className="btn-40 btn-white"
                 type="button"
                 onClick={ onClickToVatCalculate }
-              >VAT자동계산</button>
+              >{t('transaction.handWrittenIssuance.vatAutoCalc')}</button>
             </div>
           </div>
         </div>
 
         <div className="issue-row">
-          <div className="issue-label">공급가액</div>
+          <div className="issue-label">{t('transaction.fields.supplyAmount')}</div>
           <div className="issue-field">
             <NumericFormat
               value={ supplyAmount }
@@ -71,7 +74,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
           </div>
         </div>
         <div className="issue-row">
-          <div className="issue-label">VAT</div>
+          <div className="issue-label">{t('transaction.fields.vat')}</div>
           <div className="issue-field">
             <NumericFormat
               value={ vatAmount }
@@ -82,7 +85,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
           </div>
         </div>
         <div className="issue-row">
-          <div className="issue-label">면세금액</div>
+          <div className="issue-label">{t('transaction.fields.taxFreeAmount')}</div>
           <div className="issue-field">
             <NumericFormat
               value={ taxFreeAmount }
@@ -93,7 +96,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
           </div>
         </div>
         <div className="issue-row">
-          <div className="issue-label">봉사료</div>
+          <div className="issue-label">{t('transaction.fields.serviceAmount')}</div>
           <div className="issue-field">
             <NumericFormat
               value={ serviceCharge }
@@ -104,7 +107,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
           </div>
         </div>
         <div className="issue-note error">
-          발행금액은 공급가액 VAT,면세금액, 봉사료의 총합과 같아야 합니다.
+          {t('transaction.handWrittenIssuance.errorMessage')}
         </div>
       </div>
     </>

src/entities/transaction/ui/cash-receipt-list.tsx

@@ -2,12 +2,14 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { CashReceiptListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';
+import { useTranslation } from 'react-i18next';
 
-export const CashReceiptList = ({ 
+export const CashReceiptList = ({
   transactionCategory,
-  listItems 
+  listItems
 }: CashReceiptListProps) => {
   const { navigate } = useNavigate();
+  const { t } = useTranslation();
   
   const getListDateGroup = () => {
     let rs = [];
@@ -62,10 +64,10 @@ export const CashReceiptList = ({
       { getListDateGroup() }
       </div>
       <div className="apply-row">
-        <button 
+        <button
           className="btn-50 btn-blue flex-1"
-          onClick={ () => onClickToNavigate() }          
-        >수기발행</button>
+          onClick={ () => onClickToNavigate() }
+        >{ t('transaction.list.manualIssuance') }</button>
       </div>  
     </>
   );

src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx

@@ -1,6 +1,7 @@
 import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 
 export interface CashReceitPurposeUpdateBottomSheetProps {
   bottomSheetOn: boolean;
@@ -13,20 +14,21 @@ export const CashReceitPurposeUpdateBottomSheet = ({
   setBottomSheetOn,
   callPurposeUpdate
 }: CashReceitPurposeUpdateBottomSheetProps) => {
-  
+  const { t } = useTranslation();
+
   const onClickToClose = () => {
     setBottomSheetOn(false);
   };
   const onCliickToPurposeUpdate = () => {
     callPurposeUpdate();
   };
-  
+
   return (
     <>
       { (bottomSheetOn) &&
         <div className="bg-dim"></div>
       }
-      <motion.div 
+      <motion.div
         className="bottomsheet"
         initial="hidden"
         animate={ (bottomSheetOn)? 'visible': 'hidden' }
@@ -35,14 +37,14 @@ export const CashReceitPurposeUpdateBottomSheet = ({
       >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
-            <h2>현금영수증 용도 변경 안내</h2>
+            <h2>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.title') }</h2>
             <button
               className="close-btn"
               type="button"
             >
-              <img 
+              <img
                 src={ IMAGE_ROOT + '/ico_close.svg' }
-                alt="닫기"
+                alt={ t('common.close') }
                 onClick={ () => onClickToClose() }
               />
             </button>
@@ -51,10 +53,10 @@ export const CashReceitPurposeUpdateBottomSheet = ({
 
         <div className="bottomsheet-content">
           <div className="bottom-section">
-            <p>현금영수증의 용도 변경 시 기존 발급 내역이 취소되며, 선택한 용도에 맞게 새로 발급됩니다. </p>
+            <p>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.description') } </p>
             <ul className="list-style-circle">
-              <li>지출증빙용 → 소득공제용</li>
-              <li>소득공제용 → 지출증빙용</li>
+              <li>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.expenseToIncome') }</li>
+              <li>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.incomeToExpense') }</li>
             </ul>
           </div>
         </div>
@@ -64,7 +66,7 @@ export const CashReceitPurposeUpdateBottomSheet = ({
             className="btn-50 btn-blue flex-1"
             type="button"
             onClick={ () => onCliickToPurposeUpdate() }
-          >신청</button>
+          >{ t('transaction.submit') }</button>
         </div>
       </motion.div>
     </>

src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx

@@ -1,5 +1,6 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 
 export interface EscrowMailResendBottomSheetProps {
   setBottomSheetOn: (bottomSheetOn: boolean) => void;
@@ -12,6 +13,7 @@ export const EscrowMailResendBottomSheet = ({
   bottomSheetOn,
   callMailResend
 }: EscrowMailResendBottomSheetProps) => {
+  const { t } = useTranslation();
 
   const onClickToClose = () => {
     setBottomSheetOn(false);
@@ -30,7 +32,7 @@ export const EscrowMailResendBottomSheet = ({
       { (bottomSheetOn) &&
         <div className="bg-dim"></div>
       }
-      <motion.div 
+      <motion.div
         className="bottomsheet"
         initial="hidden"
         animate={ (bottomSheetOn)? 'visible': 'hidden' }
@@ -39,14 +41,14 @@ export const EscrowMailResendBottomSheet = ({
       >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
-            <h2>이메일 주소를 선택하세요</h2>
+            <h2>{ t('transaction.bottomSheet.escrowMailResend.title') }</h2>
             <button
               className="close-btn"
               type="button"
             >
               <img
                 src={ IMAGE_ROOT + '/ico_close.svg' }
-                alt="닫기"
+                alt={ t('transaction.bottomSheet.escrowMailResend.close') }
                 onClick={ () => onClickToClose() }
               />
             </button>
@@ -60,24 +62,24 @@ export const EscrowMailResendBottomSheet = ({
                 <div className="mail-icon-bg"></div>
                 <img
                   src={ IMAGE_ROOT +'/ico_email.svg' }
-                  alt="메일"
+                  alt={ t('transaction.bottomSheet.escrowMailResend.mail') }
                 />
               </div>
-              <span className="label-text">메일로 받기</span>
+              <span className="label-text">{ t('transaction.bottomSheet.escrowMailResend.mailLabel') }</span>
             </div>
-              
+
             <div className="email-select">
               <div className="select-wrapper">
                 <select>
-                  <option>선택</option>
-                  <option>선택1</option>
-                  <option>선택2</option>
+                  <option>{ t('transaction.bottomSheet.escrowMailResend.select') }</option>
+                  <option>{ t('transaction.bottomSheet.escrowMailResend.select') }1</option>
+                  <option>{ t('transaction.bottomSheet.escrowMailResend.select') }2</option>
                 </select>
               </div>
             </div>
-              
+
             <div className="error-message">
-              <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
+              <p>{ t('transaction.bottomSheet.escrowMailResend.errorNoEmail') }</p>
             </div>
           </div>
         </div>
@@ -87,7 +89,7 @@ export const EscrowMailResendBottomSheet = ({
             className="btn-50 btn-blue flex-1"
             type="button"
             onClick={ () => onClickToMailResend() }
-          >신청</button>
+          >{ t('transaction.submit') }</button>
         </div>
       </motion.div>
     </>

src/entities/transaction/ui/list-item.tsx

@@ -5,6 +5,7 @@ import { ListItemProps, TransactionCategory } from '../model/types';
 import moment from 'moment';
 import { useStore } from '@/shared/model/store';
 import { AllTracsactionStatusCode } from '../model/contant';
+import { useTranslation } from 'react-i18next';
 
 export const ListItem = ({
   transactionCategory,
@@ -12,12 +13,13 @@ export const ListItem = ({
   installmentMonth, serviceName, serviceCode,
   serviceDetailName, goodsAmount,
   amount, customerName, issueNumber, approvalNumber,
-  paymentMethod, processResult, transactionType, 
+  paymentMethod, processResult, transactionType,
   transactionDateTime, transactionAmount,
-  deliveryStatus, settlementStatus, 
+  deliveryStatus, settlementStatus,
   cancelStatus, billKey, orderNumber
 }: ListItemProps) => {
   const { navigate } = useNavigate();
+  const { t } = useTranslation();
   const getItemClass = () => {
     let rs = '';
     if(statusCode === '0'){
@@ -78,7 +80,7 @@ export const ListItem = ({
       });
     }
     else{
-      alert('pageType 이 존재하지 않습니다.');
+      alert(t('common.error'));
     }
   };
   
@@ -163,7 +165,7 @@ export const ListItem = ({
             (!!installmentMonth && parseInt(installmentMonth) > 1) && 
               <>
                 <span className="separator">|</span>
-                <span>{ installmentMonth }개월 할부</span>
+                <span>{ t('transaction.fields.installmentMonthly', { count: installmentMonth }) }</span>
               </>
           }
         </div>
@@ -196,7 +198,7 @@ export const ListItem = ({
             (!!installmentMonth && parseInt(installmentMonth) > 1) && 
               <>
                 <span className="separator">|</span>
-                <span>{ installmentMonth }개월 할부</span>
+                <span>{ t('transaction.fields.installmentMonthly', { count: installmentMonth }) }</span>
               </>
           }
         </div>
@@ -231,11 +233,11 @@ export const ListItem = ({
         </div>
         <div className="transaction-amount">
           <NumericFormat
-            value={ goodsAmount || amount || transactionAmount } 
+            value={ goodsAmount || amount || transactionAmount }
             thousandSeparator
             displayType="text"
-            suffix={ '원' }
-          ></NumericFormat> 
+            suffix={ t('home.currencyWon') }
+          ></NumericFormat>
         </div>
       </div>
     </>

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