Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

src/entities/additional-service/lib/payment-status-utils.ts

@@ -1,55 +1,57 @@
-export const getPaymentStatusText = (status?: string): string => {
+import { TFunction } from 'i18next';
+
+export const getPaymentStatusText = (t: TFunction) => (status?: string): string => {
   if (!status) return '';
 
   const statusMap: Record<string, string> = {
-    // 숫자 문자열 매핑
-    '0': '미완료/활성화',
-    '1': '입금요청',
-    '2': '결제완료',
-    '3': '결제실패',
-    '4': '결제중단',
-    // 문자열 키 매핑 (하위 호환성)
-    'ALL': '전체',
-    'ACTIVE': '미완료/활성화',
-    'DEPOSIT_REQUEST': '입금요청',
-    'PAYMENT_COMPLETE': '결제완료',
-    'PAYMENT_FAIL': '결제실패',
-    'INACTIVE': '결제중단/비활성화'
+    // Numeric string mapping
+    '0': t('additionalService.linkPay.incompleteActive'),
+    '1': t('additionalService.linkPay.depositRequest'),
+    '2': t('additionalService.linkPay.paymentComplete'),
+    '3': t('additionalService.linkPay.paymentFail'),
+    '4': t('additionalService.linkPay.paymentStopped'),
+    // String key mapping (backward compatibility)
+    'ALL': t('transaction.constants.all'),
+    'ACTIVE': t('additionalService.linkPay.incompleteActive'),
+    'DEPOSIT_REQUEST': t('additionalService.linkPay.depositRequest'),
+    'PAYMENT_COMPLETE': t('additionalService.linkPay.paymentComplete'),
+    'PAYMENT_FAIL': t('additionalService.linkPay.paymentFail'),
+    'INACTIVE': t('additionalService.linkPay.paymentStoppedInactive')
   };
 
   return statusMap[status] || status;
 };
 
-export const getProcessStatusText = (status?: string): string => {
+export const getProcessStatusText = (t: TFunction) => (status?: string): string => {
   if (!status) return '';
 
   const processStatusMap: Record<string, string> = {
-    'SEND_REQUEST': '발송요청',
-    'SEND_CANCEL': '발송취소',
-    'PENDING': '대기중'
+    'SEND_REQUEST': t('additionalService.linkPay.sendRequest'),
+    'SEND_CANCEL': t('additionalService.linkPay.sendCancel'),
+    'PENDING': t('additionalService.linkPay.pending')
   };
 
   return processStatusMap[status] || status;
 };
 
-export const getSendMethodText = (method?: string): string => {
+export const getSendMethodText = (t: TFunction) => (method?: string): string => {
   if (!method) return '';
 
   const sendMethodMap: Record<string, string> = {
     'SMS': 'SMS',
-    'EMAIL': '이메일',
-    'KAKAO': '알림톡'
+    'EMAIL': t('additionalService.linkPay.email'),
+    'KAKAO': t('additionalService.linkPay.alimtalk')
   };
 
   return sendMethodMap[method] || method;
 };
 
-export const getResultStatusText = (status?: string): string => {
+export const getResultStatusText = (t: TFunction) => (status?: string): string => {
   if (!status) return '';
 
   const resultStatusMap: Record<string, string> = {
-    'SUCCESS': '성공',
-    'FAIL': '실패'
+    'SUCCESS': t('additionalService.common.success'),
+    'FAIL': t('additionalService.common.fail')
   };
 
   return resultStatusMap[status] || status;

src/entities/additional-service/model/account-holder-auth/constant.ts

@@ -1,31 +1,32 @@
+import { TFunction } from 'i18next';
 import { AccountHolderAuthStatus } from "./types";
 
-export const authStatusBtnGroup = [
-    { name: '전체', value: AccountHolderAuthStatus.ALL },
-    { name: '요청', value: AccountHolderAuthStatus.REQUEST},
-    { name: '성공', value: AccountHolderAuthStatus.SUCCESS},
-    { name: '실패', value: AccountHolderAuthStatus.FAIL}
+export const getAuthStatusBtnGroup = (t: TFunction) => [
+    { name: t('transaction.constants.all'), value: AccountHolderAuthStatus.ALL },
+    { name: t('additionalService.common.request'), value: AccountHolderAuthStatus.REQUEST},
+    { name: t('additionalService.common.success'), value: AccountHolderAuthStatus.SUCCESS},
+    { name: t('additionalService.common.fail'), value: AccountHolderAuthStatus.FAIL}
 ]
 
-export const getAuthStatusText = (status?: string): string => {
+export const getAuthStatusText = (t: TFunction) => (status?: string): string => {
     if (!status) return '';
 
     const AuthStatusMap: Record<string, string> = {
-        'REQUEST' : '요청',
-        'SUCCESS' : '성공',
-        'FAIL' : '실패'
+        'REQUEST' : t('additionalService.common.request'),
+        'SUCCESS' : t('additionalService.common.success'),
+        'FAIL' : t('additionalService.common.fail')
     }
 
     return AuthStatusMap[status] || status;
 }
 
-export const getAuthResultText = (status?: string): string => {
+export const getAuthResultText = (t: TFunction) => (status?: string): string => {
     if (!status) return '';
 
     const AuthResultMap: Record<string, string> = {
-        'MATCHED' : '예금주명 일치',
-        'NOT_MATCHED' : '예금주명 불일치',
-        'FAILED' : '인증실패 (계좌 오류 등)'
+        'MATCHED' : t('additionalService.accountHolderAuth.accountHolderNameMatch'),
+        'NOT_MATCHED' : t('additionalService.accountHolderAuth.accountHolderNameMismatch'),
+        'FAILED' : t('additionalService.accountHolderAuth.authFailedAccountError')
     }
 
     return AuthResultMap[status] || status;

src/entities/additional-service/model/account-holder-search/constant.ts

@@ -1,25 +1,26 @@
+import { TFunction } from 'i18next';
 import { ProcessResult } from "../types";
 import { AccountHolderResultStatus, AccountHolderSearchCl } from "./types";
 
 
-export const resultStatusBtnGroup = [
-  { name: '전체', value: AccountHolderResultStatus.ALL },
-  { name: '성공', value: AccountHolderResultStatus.SUCCESS },
-  { name: '실패', value: AccountHolderResultStatus.FAIL },
+export const getResultStatusBtnGroup = (t: TFunction) => [
+  { name: t('transaction.constants.all'), value: AccountHolderResultStatus.ALL },
+  { name: t('additionalService.common.success'), value: AccountHolderResultStatus.SUCCESS },
+  { name: t('additionalService.common.fail'), value: AccountHolderResultStatus.FAIL },
 ]
 
-export const SearchTypeOption = [
-  { name: '예금주', value: AccountHolderSearchCl.ACCOUNT_NAME },
-  { name: '계좌번호', value: AccountHolderSearchCl.ACCOUNT_NO },
+export const getSearchTypeOption = (t: TFunction) => [
+  { name: t('additionalService.accountHolderSearch.accountHolder'), value: AccountHolderSearchCl.ACCOUNT_NAME },
+  { name: t('additionalService.accountHolderSearch.accountNumber'), value: AccountHolderSearchCl.ACCOUNT_NO },
 ];
 
 
-export const getAccountHolderStatusText = (status?: string): string => {
+export const getAccountHolderStatusText = (t: TFunction) => (status?: string): string => {
   if (!status) return '';
 
   const resultStatusMap: Record<string, string> = {
-    'SUCCESS': '성공',
-    'FAIL': '실패'
+    'SUCCESS': t('additionalService.common.success'),
+    'FAIL': t('additionalService.common.fail')
   };
   return resultStatusMap[status] || status;
 }

src/entities/additional-service/model/alimtalk/constant.ts

@@ -1,90 +1,91 @@
+import { TFunction } from 'i18next';
 import { AlimtalkAlimCl, AlimtalkSearchCl, AlimTalkSendCl, AlimtalkSendType, ServiceCode } from "./types";
 
-export const AlimtalkSearchClOptionGroup = [
-    { name: '주문자', value: AlimtalkSearchCl.BUYER_NAME },
-    { name: 'TID', value: AlimtalkSearchCl.TID },
+export const getAlimtalkSearchClOptionGroup = (t: TFunction) => [
+    { name: t('additionalService.alimtalk.buyer'), value: AlimtalkSearchCl.BUYER_NAME },
+    { name: t('transaction.constants.tid'), value: AlimtalkSearchCl.TID },
 ];
 
-export const AlimtalkServiceCodeOptionGroup = [
-    { name: '전체', value: '' },
-    { name: '카드', value: ServiceCode.CARD },
-    { name: '계좌이체', value: ServiceCode.BANK },
-    { name: '가상계좌', value: ServiceCode.VBANK },
-    { name: '휴대폰', value: ServiceCode.PHONE }
+export const getAlimtalkServiceCodeOptionGroup = (t: TFunction) => [
+    { name: t('transaction.constants.all'), value: '' },
+    { name: t('transaction.constants.card'), value: ServiceCode.CARD },
+    { name: t('transaction.constants.accountTransfer'), value: ServiceCode.BANK },
+    { name: t('transaction.constants.virtualAccount'), value: ServiceCode.VBANK },
+    { name: t('transaction.constants.mobilePhone'), value: ServiceCode.PHONE }
 ]
 
-// 알림구분 - 카드/계좌이체/휴대폰용
-export const AlimtalkAlimClBtnGroupForGeneral = [
-    { name: '전체', value: '' },
-    { name: '승인', value: AlimtalkAlimCl.APPROVAL },
-    { name: '취소', value: AlimtalkAlimCl.CANCEL }
+// Notification type - For Card/Account Transfer/Mobile
+export const getAlimtalkAlimClBtnGroupForGeneral = (t: TFunction) => [
+    { name: t('transaction.constants.all'), value: '' },
+    { name: t('transaction.constants.approval'), value: AlimtalkAlimCl.APPROVAL },
+    { name: t('transaction.constants.cancel'), value: AlimtalkAlimCl.CANCEL }
 ]
 
-// 알림구분 - 가상계좌용
-export const AlimtalkAlimClBtnGroupForVBank = [
-    { name: '전체', value: '' },
-    { name: '입금요청', value: AlimtalkAlimCl.DEPOSIT_REQUEST },
-    { name: '입금완료', value: AlimtalkAlimCl.DEPOSIT_COMPLETE },
-    { name: '환불', value: AlimtalkAlimCl.REFUND }
+// Notification type - For Virtual Account
+export const getAlimtalkAlimClBtnGroupForVBank = (t: TFunction) => [
+    { name: t('transaction.constants.all'), value: '' },
+    { name: t('additionalService.alimtalk.depositRequest'), value: AlimtalkAlimCl.DEPOSIT_REQUEST },
+    { name: t('additionalService.alimtalk.depositComplete'), value: AlimtalkAlimCl.DEPOSIT_COMPLETE },
+    { name: t('transaction.constants.refund'), value: AlimtalkAlimCl.REFUND }
 ]
 
-export const AlimtalkSendTypeBtnGroup = [
-    { name: '전체', value: AlimtalkSendType.ALL },
-    { name: '카카오톡', value: AlimtalkSendType.KAKAOTALK },
-    { name: 'FB SMS', value: AlimtalkSendType.FB_SMS }
+export const getAlimtalkSendTypeBtnGroup = (t: TFunction) => [
+    { name: t('transaction.constants.all'), value: AlimtalkSendType.ALL },
+    { name: t('additionalService.alimtalk.kakaotalk'), value: AlimtalkSendType.KAKAOTALK },
+    { name: t('additionalService.alimtalk.fbSms'), value: AlimtalkSendType.FB_SMS }
 ]
 
-export const AlimtalkSendClBtnGroup = [
-    { name: '전체', value: AlimTalkSendCl.ALL },
-    { name: '요청', value: AlimTalkSendCl.REQUEST },
-    { name: '성공', value: AlimTalkSendCl.SUCCESS },
-    { name: '실패', value: AlimTalkSendCl.FAIL }
+export const getAlimtalkSendClBtnGroup = (t: TFunction) => [
+    { name: t('transaction.constants.all'), value: AlimTalkSendCl.ALL },
+    { name: t('additionalService.common.request'), value: AlimTalkSendCl.REQUEST },
+    { name: t('additionalService.common.success'), value: AlimTalkSendCl.SUCCESS },
+    { name: t('additionalService.common.fail'), value: AlimTalkSendCl.FAIL }
 ]
 
-export const getAlimtalkAlimClText = (status?: string): string => {
+export const getAlimtalkAlimClText = (t: TFunction) => (status?: string): string => {
     if (!status) return '';
 
     const alimClMap: Record<string, string> = {
-        'APPROVAL' : '승인',
-        'CANCEL' : '취소',
-        'DEPOSIT_REQUEST' : '입금요청',
-        'DEPOSIT_COMPLETE' : '입금완료',
-        'REFUND' : '환불'
+        'APPROVAL' : t('transaction.constants.approval'),
+        'CANCEL' : t('transaction.constants.cancel'),
+        'DEPOSIT_REQUEST' : t('additionalService.alimtalk.depositRequest'),
+        'DEPOSIT_COMPLETE' : t('additionalService.alimtalk.depositComplete'),
+        'REFUND' : t('transaction.constants.refund')
     }
     return alimClMap[status] || status;
 
 }
 
-export const getAlimtalkSendTypeText = (status?: string): string => {
+export const getAlimtalkSendTypeText = (t: TFunction) => (status?: string): string => {
     if (!status) return '';
 
     const sendTypeMap: Record<string, string> = {
-        "KAKAOTALK": '카카오톡',
-        'FB SMS': '페이스북',
+        "KAKAOTALK": t('additionalService.alimtalk.kakaotalk'),
+        'FB SMS': t('additionalService.alimtalk.fbSms'),
     };
 
     return sendTypeMap[status] || status;
 }
 
-export const getAlimtalkSendClTypeText = (status?: string): string => {
+export const getAlimtalkSendClTypeText = (t: TFunction) => (status?: string): string => {
     if (!status) return '';
 
     const sendClMap: Record<string, string> = {
-        'REQUEST': '요청',
-        'SUCCESS': '성공',
-        'FAIL': '실패'
+        'REQUEST': t('additionalService.common.request'),
+        'SUCCESS': t('additionalService.common.success'),
+        'FAIL': t('additionalService.common.fail')
     };
     return sendClMap[status] || status;
 }
 
-export const getAlimtalkServiceCodeText = (status?: string): string => {
+export const getAlimtalkServiceCodeText = (t: TFunction) => (status?: string): string => {
     if (!status) return '';
 
     const serviceCodeMap: Record<string, string> = {
-        'CARD': '신용카드',
-        'BANK': '계좌이체',
-        'VBANK': '가상계좌',
-        'PHONE': '휴대폰'
+        'CARD': t('transaction.constants.creditCard'),
+        'BANK': t('transaction.constants.accountTransfer'),
+        'VBANK': t('transaction.constants.virtualAccount'),
+        'PHONE': t('transaction.constants.mobilePhone')
     }
 
     return serviceCodeMap[status] || status;

src/entities/additional-service/model/ars/constant.ts

@@ -1,30 +1,33 @@
+import { TFunction } from 'i18next';
 import { ArsPaymentMethod, OrderStatus, PaymentStatus } from './types';
 
-export const ArsPaymentStatusBtnGroup = [
-  {name: '전체', value: PaymentStatus.ALL },
-  {name: '결제완료', value: PaymentStatus.COMPLETE },
-  {name: '미결제', value: PaymentStatus.UNPAID }
+export const getArsPaymentStatusBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: PaymentStatus.ALL },
+  {name: t('additionalService.ars.paymentComplete'), value: PaymentStatus.COMPLETE },
+  {name: t('additionalService.ars.unpaid'), value: PaymentStatus.UNPAID }
 ];
-export const ArsOrderStatusBtnGroup = [
-  {name: '전체', value: OrderStatus.ALL },
-  {name: '결제대기', value: OrderStatus.PENDING },
-  {name: '결제성공', value: OrderStatus.SUCCESS },
-  {name: '기간만료', value: OrderStatus.EXPIRED },
-  {name: '취소완료', value: OrderStatus.CANCELED },
+
+export const getArsOrderStatusBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: OrderStatus.ALL },
+  {name: t('additionalService.ars.pendingPayment'), value: OrderStatus.PENDING },
+  {name: t('additionalService.ars.paymentSuccess'), value: OrderStatus.SUCCESS },
+  {name: t('additionalService.ars.expired'), value: OrderStatus.EXPIRED },
+  {name: t('additionalService.ars.canceled'), value: OrderStatus.CANCELED },
 ];
-export const ArsPaymentMethodBtnGroup = [
+
+export const getArsPaymentMethodBtnGroup = (t: TFunction) => [
   {name: 'SMS', value: ArsPaymentMethod.SMS },
   {name: 'ARS', value: ArsPaymentMethod.ARS },
 ];
 
-export const getArsPaymentStatusName = (status?: string): string => {
+export const getArsPaymentStatusName = (t: TFunction) => (status?: string): string => {
   if (!status) return '';
-  const found = ArsPaymentStatusBtnGroup.find(item => item.value === status);
+  const found = getArsPaymentStatusBtnGroup(t).find(item => item.value === status);
   return found ? found.name : status;
 }
 
-export const getArsOrderStatusName = (status?: string): string => {
+export const getArsOrderStatusName = (t: TFunction) => (status?: string): string => {
   if (!status) return '';
-  const found = ArsOrderStatusBtnGroup.find(item => item.value === status);
+  const found = getArsOrderStatusBtnGroup(t).find(item => item.value === status);
   return found ? found.name : status;
 }

src/entities/additional-service/model/face-auth/constant.ts

@@ -1,35 +1,36 @@
+import { TFunction } from 'i18next';
 import { FaceAuthResult, FaceAuthTransType } from "./types";
 
-export const AuthResultBtnGroup = [
-    { name: '전체', value: FaceAuthResult.ALL },
-    { name: '성공', value: FaceAuthResult.SUCCESS },
-    { name: '실패', value: FaceAuthResult.FAIL },
+export const getAuthResultBtnGroup = (t: TFunction) => [
+    { name: t('transaction.constants.all'), value: FaceAuthResult.ALL },
+    { name: t('additionalService.common.success'), value: FaceAuthResult.SUCCESS },
+    { name: t('additionalService.common.fail'), value: FaceAuthResult.FAIL },
 ];
 
-export const TransactionTypeBtnGroup = [
-    { name: '전체', value: FaceAuthTransType.ALL },
-    { name: '인증', value: FaceAuthTransType.AUTH },
-    { name: '등록', value: FaceAuthTransType.REGISTER },
+export const getTransactionTypeBtnGroup = (t: TFunction) => [
+    { name: t('transaction.constants.all'), value: FaceAuthTransType.ALL },
+    { name: t('additionalService.faceAuth.authentication'), value: FaceAuthTransType.AUTH },
+    { name: t('additionalService.faceAuth.registration'), value: FaceAuthTransType.REGISTER },
 ];
 
 
-export const getAuthResultStatusText = (status?: string): string => {
+export const getAuthResultStatusText = (t: TFunction) => (status?: string): string => {
     if (!status) return '';
 
     const authResultMap: Record<string, string> = {
-        'SUCCESS': '성공',
-        'FAIL': '실패'
+        'SUCCESS': t('additionalService.common.success'),
+        'FAIL': t('additionalService.common.fail')
     }
 
     return authResultMap[status] || status;
 }
 
-export const getTransTypeText = (transType?: string): string => {
+export const getTransTypeText = (t: TFunction) => (transType?: string): string => {
     if (!transType) return '';
 
     const transTypeMap: Record<string, string> = {
-        'REGISTER': '등록',
-        'AUTH': '인증'
+        'REGISTER': t('additionalService.faceAuth.registration'),
+        'AUTH': t('additionalService.faceAuth.authentication')
     }
 
     return transTypeMap[transType] || transType;

src/entities/additional-service/model/fund-account/constant.ts

@@ -1,3 +1,4 @@
+import { TFunction } from 'i18next';
 import {
   FundAccountReceiveAccountNameNo,
   FundAccountResultStatus,
@@ -6,41 +7,41 @@ import {
   FundAccountStatus
 } from './types';
 
-export const FundAccountStatusBtnGroup = [
-  { name: '전체', value: FundAccountStatus.ALL },
-  { name: '등록완료', value: FundAccountStatus.REGIST_COMPLETE },
-  { name: '이체요청', value: FundAccountStatus.TRANSFER_REQUEST },
-  { name: '요청성공', value: FundAccountStatus.REQUEST_SUCCESS },
-  { name: '요청실패', value: FundAccountStatus.REQUEST_FAIL }
+export const getFundAccountStatusBtnGroup = (t: TFunction) => [
+  { name: t('transaction.constants.all'), value: FundAccountStatus.ALL },
+  { name: t('additionalService.fundAccount.registrationComplete'), value: FundAccountStatus.REGIST_COMPLETE },
+  { name: t('additionalService.fundAccount.transferRequest'), value: FundAccountStatus.TRANSFER_REQUEST },
+  { name: t('additionalService.fundAccount.requestSuccess'), value: FundAccountStatus.REQUEST_SUCCESS },
+  { name: t('additionalService.fundAccount.requestFail'), value: FundAccountStatus.REQUEST_FAIL }
 ];
 
-export const FundAccountResultStatusBtnGroup = [
-  { name: '전체', value: FundAccountResultStatus.ALL },
-  { name: '요청', value: FundAccountResultStatus.REQUEST },
-  { name: '성공', value: FundAccountResultStatus.SUCCESS },
-  { name: '실패', value: FundAccountResultStatus.FAIL },
+export const getFundAccountResultStatusBtnGroup = (t: TFunction) => [
+  { name: t('transaction.constants.all'), value: FundAccountResultStatus.ALL },
+  { name: t('additionalService.common.request'), value: FundAccountResultStatus.REQUEST },
+  { name: t('additionalService.common.success'), value: FundAccountResultStatus.SUCCESS },
+  { name: t('additionalService.common.fail'), value: FundAccountResultStatus.FAIL },
 
 ]
 
-export const getFundAccountStatusName = (status?: string): string => {
+export const getFundAccountStatusName = (t: TFunction) => (status?: string): string => {
   if (!status) return '';
-  const found = FundAccountStatusBtnGroup.find(item => item.value === status);
+  const found = getFundAccountStatusBtnGroup(t).find(item => item.value === status);
   return found ? found.name : status;
 };
 
-export const getFundAccountResultStatusName = (status?: string): string => {
-  
+export const getFundAccountResultStatusName = (t: TFunction) => (status?: string): string => {
+
   if (!status) return '';
-  const found = FundAccountResultStatusBtnGroup.find(item => item.value === status);
+  const found = getFundAccountResultStatusBtnGroup(t).find(item => item.value === status);
   return found ? found.name : status;
 }
 
-export const FundAccountResultSearchDateTypeBtnGroup = [
-  { name: '요청일자', value: FundAccountSearchDateType.REQUEST_DATE },
-  { name: '이체일자', value: FundAccountSearchDateType.APPLICATION_DATE }
+export const getFundAccountResultSearchDateTypeBtnGroup = (t: TFunction) => [
+  { name: t('additionalService.fundAccount.requestDate'), value: FundAccountSearchDateType.REQUEST_DATE },
+  { name: t('additionalService.fundAccount.transferDate'), value: FundAccountSearchDateType.APPLICATION_DATE }
 ];
 
-export const FundAccountSearchClOptionsGroup = [
-  { name: '수취인', value: FundAccountSearchCl.ACCOUNT_NAME },
-  { name: '계좌번호', value: FundAccountSearchCl.ACCOUNT_NO },
+export const getFundAccountSearchClOptionsGroup = (t: TFunction) => [
+  { name: t('additionalService.fundAccount.recipient'), value: FundAccountSearchCl.ACCOUNT_NAME },
+  { name: t('additionalService.fundAccount.accountNumber'), value: FundAccountSearchCl.ACCOUNT_NO },
 ];

src/entities/additional-service/model/key-in/constant.ts

@@ -1,15 +1,15 @@
+import { TFunction } from 'i18next';
 import { KeyInPaymentTansactionType } from "./types";
 
-// contant로 옮기기
-export const keyInPaymentPaymentStatusBtnGroup = [
-  { name: '전체', value: KeyInPaymentTansactionType.ALL },
-  { name: '승인', value: KeyInPaymentTansactionType.APPROVAL },
-  { name: '전취소', value: KeyInPaymentTansactionType.FULL_CANCEL },
-  { name: '후취소', value: KeyInPaymentTansactionType.PARTIAL_CANCEL }
+export const getKeyInPaymentPaymentStatusBtnGroup = (t: TFunction) => [
+  { name: t('transaction.constants.all'), value: KeyInPaymentTansactionType.ALL },
+  { name: t('transaction.constants.approval'), value: KeyInPaymentTansactionType.APPROVAL },
+  { name: t('additionalService.keyIn.fullCancel'), value: KeyInPaymentTansactionType.FULL_CANCEL },
+  { name: t('additionalService.keyIn.partialCancel'), value: KeyInPaymentTansactionType.PARTIAL_CANCEL }
 ];
 
-export const getKeyInPaymentPaymentStatusName = (status?: string): string => {
+export const getKeyInPaymentPaymentStatusName = (t: TFunction) => (status?: string): string => {
     if (!status) return '';
-    const found = keyInPaymentPaymentStatusBtnGroup.find(item => item.value === status);
+    const found = getKeyInPaymentPaymentStatusBtnGroup(t).find(item => item.value === status);
     return found ? found.name : status;
 }

src/entities/additional-service/model/link-pay/constant.ts

@@ -1,7 +1,8 @@
+import { TFunction } from 'i18next';
 import { LinkPaymentProcessStatus } from "./types";
 
-export const ProcessStatusBtnGrouup = [
-  { name: '전체', value: LinkPaymentProcessStatus.ALL },
-  { name: '발송요청', value: LinkPaymentProcessStatus.SEND_REQUEST },
-  { name: '발송취소', value: LinkPaymentProcessStatus.SEND_CANCEL }
+export const getProcessStatusBtnGroup = (t: TFunction) => [
+  { name: t('transaction.constants.all'), value: LinkPaymentProcessStatus.ALL },
+  { name: t('additionalService.linkPay.sendRequest'), value: LinkPaymentProcessStatus.SEND_REQUEST },
+  { name: t('additionalService.linkPay.sendCancel'), value: LinkPaymentProcessStatus.SEND_CANCEL }
 ]

src/entities/additional-service/model/payout/constant.ts

@@ -1,23 +1,25 @@
+import { TFunction } from 'i18next';
 import { PayoutSearchDateType, PayoutDisbursementStatus } from './types';
 
-export const PayoutSearchClBtnGroup = [
-  {name: '요청일자', value: PayoutSearchDateType.REQUEST_DATE },
-  {name: '지급일자', value: PayoutSearchDateType.SETTLEMENT_DATE }
-];
-export const PayoutDisbursementStatusBtnGroup = [
-  {name: '전체', value: PayoutDisbursementStatus.ALL},
-  {name: '요청', value: PayoutDisbursementStatus.REQUEST},
-  {name: '성공', value: PayoutDisbursementStatus.SUCCESS},
-  {name: '실패', value: PayoutDisbursementStatus.FAIL},
+export const getPayoutSearchClBtnGroup = (t: TFunction) => [
+  {name: t('additionalService.payout.requestDate'), value: PayoutSearchDateType.REQUEST_DATE },
+  {name: t('additionalService.payout.disbursementDate'), value: PayoutSearchDateType.SETTLEMENT_DATE }
 ];
 
-export const getPayoutStatusText = (status?: string): string => {
+export const getPayoutDisbursementStatusBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: PayoutDisbursementStatus.ALL},
+  {name: t('additionalService.common.request'), value: PayoutDisbursementStatus.REQUEST},
+  {name: t('additionalService.common.success'), value: PayoutDisbursementStatus.SUCCESS},
+  {name: t('additionalService.common.fail'), value: PayoutDisbursementStatus.FAIL},
+];
+
+export const getPayoutStatusText = (t: TFunction) => (status?: string): string => {
   if (!status) return '';
 
   const statusMap: Record<string, string> = {
-    "REQUEST" : "요청",
-    "SUCCESS" : "성공",
-    "FAIL" : "실패"
+    "REQUEST" : t('additionalService.common.request'),
+    "SUCCESS" : t('additionalService.common.success'),
+    "FAIL" : t('additionalService.common.fail')
   }
 
   return statusMap[status] || status;

src/entities/additional-service/model/sms-payment/constant.ts

@@ -1,13 +1,14 @@
+import { TFunction } from 'i18next';
 import { SmsCl } from './types';
 
-export const SmsClBtnGroup = [
+export const getSmsClBtnGroup = (t: TFunction) => [
   { name: '', value: SmsCl.ALL },
-  { name: '가상계좌 요청', value: SmsCl.VACCOUNT_REQ },
-  { name: '가상계좌 요청 + 입금', value: SmsCl.VACCOUNT_REQ_DEPOSIT }
+  { name: t('additionalService.sms.virtualAccountRequest'), value: SmsCl.VACCOUNT_REQ },
+  { name: t('additionalService.sms.virtualAccountRequestDeposit'), value: SmsCl.VACCOUNT_REQ_DEPOSIT }
 ];
 
-export const getSmsClName = (smsCl?: string): string => {
+export const getSmsClName = (t: TFunction) => (smsCl?: string): string => {
   if (!smsCl) return '';
-  const found = SmsClBtnGroup.find(item => item.value === smsCl);
+  const found = getSmsClBtnGroup(t).find(item => item.value === smsCl);
   return found ? found.name : smsCl;
 };

src/entities/additional-service/ui/ars/resend-sms-bottom-sheet.tsx

@@ -1,6 +1,8 @@
 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 ArsResendSmsBottomSheetProps {
   bottomSheetOn: boolean;
   setBottomSheetOn: (bottomSheetOn: boolean) => void;
@@ -14,6 +16,7 @@ export const ArsResendSmsBottomSheet = ({
   phoneNumber,
   callResendSms
 }: ArsResendSmsBottomSheetProps) => {
+  const { t } = useTranslation();
 
   const onClickToClose = () => {
     setBottomSheetOn(false);
@@ -40,14 +43,14 @@ export const ArsResendSmsBottomSheet = ({
       >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
-            <h2>SMS 재전송</h2>
+            <h2>{t('additionalService.common.resend')} SMS</h2>
             <button
               className="close-btn"
               type="button"
             >
-              <img 
+              <img
                 src={ IMAGE_ROOT + '/ico_close.svg' }
-                alt="닫기"
+                alt={t('common.close')}
                 onClick={ () => onClickToClose() }
               />
             </button>
@@ -55,7 +58,7 @@ export const ArsResendSmsBottomSheet = ({
         </div>
         <div className="bottomsheet-content">
           <div className="bottom-section">
-            <p>[01095800212] 번호로 SMS를 재발송 하시겠습니까?</p>
+            <p>[{phoneNumber}] {t('transaction.sms.resendConfirmMessage')}</p>
           </div>
         </div>
         <div className="bottomsheet-footer">
@@ -63,7 +66,7 @@ export const ArsResendSmsBottomSheet = ({
             className="btn-50 btn-blue flex-1"
             type="button"
             onClick={ () => onCliickToResendSms() }
-          >신청</button>
+          >{t('transaction.apply')}</button>
         </div>
       </motion.div>
     </>

src/entities/additional-service/ui/filter/ars-filter.tsx

@@ -1,19 +1,20 @@
 import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
-import { 
-  FilterMotionDuration, 
-  FilterMotionStyle, 
+import {
+  FilterMotionDuration,
+  FilterMotionStyle,
   FilterMotionVariants
 } from '@/entities/common/model/constant';
 import moment from 'moment';
 import { FilterInput } from '@/shared/ui/filter/input';
 import { OrderStatus, PaymentStatus } from '../../model/ars/types';
-import { ArsOrderStatusBtnGroup, ArsPaymentStatusBtnGroup } from '../../model/ars/constant';
+import { getArsOrderStatusBtnGroup, getArsPaymentStatusBtnGroup } from '../../model/ars/constant';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 
@@ -67,7 +68,9 @@ export const ArsFilter = ({
   const [filterOrderStatus, setFilterOrderStatus] = useState<OrderStatus>(orderStatus);
   const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
-  
+
+  const { t } = useTranslation();
+
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -100,15 +103,15 @@ export const ArsFilter = ({
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
-            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button 
+              <button
                 id="closeFullMenu"
                 className="full-menu-close"
               >
-                <img 
+                <img
                   src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt="닫기"
+                  alt={t('filter.close')}
                   onClick={ () => onClickToClose() }
                 />
               </button>
@@ -116,36 +119,36 @@ export const ArsFilter = ({
           </div>
           <div className="option-list pt-16">
             <FilterSelectMid
-              title='가맹점'
+              title={t('filter.merchant')}
               selectSetter={ setFilterMid }
               showType={ 'GID'}
             ></FilterSelectMid>
             <FilterInput
-              title='주문번호'
+              title={t('transaction.constants.orderNumber')}
               inputValue={ filterMoid }
               inputSetter={ setFilterMoid }
             ></FilterInput>
             <FilterCalendar
-              title='조회기간'
+              title={t('filter.period')}
               startDate={ filterFromDate }
               endDate={ filterToDate }
               setStartDate={ setFilterFromDate }
               setEndDate={ setFilterToDate }
             ></FilterCalendar>
             <FilterButtonGroups
-              title='결제상태'
+              title={t('transaction.filter.paymentStatus')}
               activeValue={ filterPaymentStatus }
-              btnGroups={ ArsPaymentStatusBtnGroup }
+              btnGroups={ getArsPaymentStatusBtnGroup(t) }
               setter={ setFilterPaymentStatus }
             ></FilterButtonGroups>
             <FilterButtonGroups
-              title='주문상태'
+              title={t('transaction.filter.orderStatus')}
               activeValue={ filterOrderStatus }
-              btnGroups={ ArsOrderStatusBtnGroup }
+              btnGroups={ getArsOrderStatusBtnGroup(t) }
               setter={ setFilterOrderStatus }
             ></FilterButtonGroups>
             <FilterRangeAmount
-              title='거래금액'
+              title={t('filter.transactionAmount')}
               minAmount={ filterMinAmount }
               maxAmount={ filterMaxAmount }
               setMinAmount={ setFilterMinAmount }
@@ -153,10 +156,10 @@ export const ArsFilter = ({
             ></FilterRangeAmount>
           </div>
           <div className="apply-row">
-            <button 
+            <button
               className="btn-50 btn-blue flex-1"
               onClick={ () => onClickToSetFilter() }
-            >적용</button>
+            >{t('filter.apply')}</button>
           </div>
         </div>
       </motion.div>

src/entities/common/ui/sort-type-box.tsx

@@ -1,17 +1,24 @@
 import { SortTypeKeys, SortTypeBoxProps } from '../model/types';
+import { useTranslation } from 'react-i18next';
+
 export const SortTypeBox = ({
   sortType,
   onClickToSort,
-  sortOptions = [
-    { key: SortTypeKeys.LATEST, label: '최신순' },
-    { key: SortTypeKeys.HIGH_AMOUNT, label: '고액순' }
-  ]
+  sortOptions
 }: SortTypeBoxProps) => {
+  const { t } = useTranslation();
+
+  const defaultSortOptions = [
+    { key: SortTypeKeys.LATEST, label: t('filter.sortOrders.latest') },
+    { key: SortTypeKeys.HIGH_AMOUNT, label: t('filter.sortOrders.highest') }
+  ];
+
+  const options = sortOptions || defaultSortOptions;
 
   return (
     <>
       <div className="sort-options">
-        { sortOptions.map((option: Record<string, any>, index: number) => (
+        { options.map((option: Record<string, any>, index: number) => (
           <>
           { (index > 0) && 
             <span 

src/entities/home/ui/auth-reguster.tsx

@@ -3,12 +3,14 @@ import { AuthRegisterProps } from '../model/types';
 import { motion } from 'framer-motion';
 import { useAppBridge } from '@/hooks/useAppBridge';
 import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
+import { useTranslation } from 'react-i18next';
 
 export const AuthRegister = ({
   setAuthRegisterOn,
   authRegisterOn,
 }: AuthRegisterProps) => {
   const { registerBiometric, closeBiometricRegistrationPopup } = useAppBridge();
+  const { t } = useTranslation();
 
   const onClickToClose = () => {
     closeBiometricRegistrationPopup();
@@ -33,14 +35,14 @@ export const AuthRegister = ({
       >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
-            <h2>간편 인증 등록</h2>
-            <button 
-              className="close-btn" 
+            <h2>{t('home.biometricRegistration.title')}</h2>
+            <button
+              className="close-btn"
               type="button"
             >
-              <img 
+              <img
                 src={ IMAGE_ROOT + '/ico_close.svg' }
-                alt="닫기"
+                alt={t('common.close')}
                 onClick={ () => onClickToClose() }
               />
             </button>
@@ -49,22 +51,26 @@ export const AuthRegister = ({
         <div className="bottomsheet-content">
           <div className="text-section">
             <div>
-              간편 인증 등록 한번으로,<br/>
-              비밀번호 없이 편리하게 로그인하세요.
+              {t('home.biometricRegistration.description').split('\n').map((line, index) => (
+                <span key={index}>
+                  {line}
+                  {index === 0 && <br />}
+                </span>
+              ))}
             </div>
           </div>
         </div>
         <div className="bottomsheet-footer">
-          <button 
-            className="btn-50 btn-darkgray flex-1" 
+          <button
+            className="btn-50 btn-darkgray flex-1"
             type="button"
             onClick={ () => onClickToClose() }
-          >다음에</button>
-          <button 
-            className="btn-50 btn-blue flex-2" 
+          >{t('home.biometricRegistration.later')}</button>
+          <button
+            className="btn-50 btn-blue flex-2"
             type="button"
             onClick={ () => onClickToRegister() }
-          >지금 등록하기</button>
+          >{t('home.biometricRegistration.registerNow')}</button>
         </div>
       </motion.div>
     </>

src/entities/home/ui/home-bottom-banner.tsx

@@ -11,6 +11,7 @@ import { useEffect, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import { Autoplay, Pagination } from 'swiper/modules';
+import { useTranslation } from 'react-i18next';
 
 export const HomeBottomBanner = ({
   setBottomBannerOn,
@@ -18,7 +19,8 @@ export const HomeBottomBanner = ({
   bannerList
 }: HomeBottomBannerProps) => {
   const { navigate } = useNavigate();
-  
+  const { t } = useTranslation();
+
   const [isFirstOpen, setIsFirstOpen] = useState<boolean>(false);
   const [currentSlide, setCurrentSlide] = useState<number>(1);
 
@@ -109,8 +111,8 @@ export const HomeBottomBanner = ({
           </div>
         </div>
         <div className="bottom-btn">
-          <span onClick={ () => onClickToCloseDay() }>오늘 하루 보지 않기</span>
-          <span onClick={ () => onClickToClose() }>닫기</span>
+          <span onClick={ () => onClickToCloseDay() }>{t('home.banner.doNotShowToday')}</span>
+          <span onClick={ () => onClickToClose() }>{t('home.banner.close')}</span>
         </div>
       </motion.div>
     </>

src/entities/home/ui/home-notice-item.tsx

@@ -34,9 +34,9 @@ export const HomeNoticeItem = ({
           <div className="notice-meta">{ t(`support.notice.categories.${informCl}`) }<span>{ moment(regDt).format('YY년 MM월 DD일') }</span></div>
         </div>
         <div className="notice-arrow">
-          <img 
-            src={ IMAGE_ROOT + '/Forward.svg' } 
-            alt="공지사항 바로가기" 
+          <img
+            src={ IMAGE_ROOT + '/Forward.svg' }
+            alt={t('home.notice.goTo')}
           />
         </div>
       </div>

src/entities/payment/ui/info-wrap.tsx

@@ -48,7 +48,7 @@ export const InfoWrap = () => {
   const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false);
   const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState<boolean>(false);
 
-  const [cardCompany, setCardCompany] = useState<string>('비씨');
+  const [cardCompany, setCardCompany] = useState<string>(t('payment.paymentMethods.bcCard'));
   const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
   const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
   
@@ -76,37 +76,37 @@ export const InfoWrap = () => {
   const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();
 
   const list1 = [
-    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: '', payType: 2},
-    {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: '', payType: 3},
-    {payName: '네이버페이', payImage: 'pay_03.svg', infoLink: '', payType: 3},
-    {payName: '삼성페이', payImage: 'pay_04.svg', infoLink: '', payType: 2},
-    {payName: '계좌이체', payImage: 'pay_05.svg', infoLink: '', payType: 1},
-    {payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: '', payType: 1},
-    {payName: '문화상품권', payImage: 'pay_07.svg', infoLink: '', payType: 1},
-    {payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: '', payType: 1},
-    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: '', payType: 1},
-    {payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: '', payType: 2},
-    {payName: '애플페이', payImage: 'pay_11.svg', infoLink: '', payType: 2},
-    {payName: '토스페이', payImage: 'pay_12.svg', infoLink: '', payType: 3},
-    {payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: '', payType: 2},
-    {payName: '리브페이', payImage: 'pay_14.svg', infoLink: '', payType: 2},
-    {payName: '대만결제', payImage: 'pay_15.svg', infoLink: '', payType: 1},
-    {payName: '티머니페이', payImage: 'pay_16.svg', infoLink: '', payType: 1},
-    {payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: '', payType: 2},
-    {payName: 'PAYU', payImage: 'pay_18.svg', infoLink: '', payType: 2},
-    {payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: '', payType: 2},
-    {payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: '', payType: 3},
-    {payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: '', payType: 2},
-    {payName: '가상계좌', payImage: 'pay_23.svg', infoLink: '', payType: 1},
-    {payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: '', payType: 1},
-    {payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: '', payType: 2},
+    {payName: t('payment.paymentMethods.kakaoPay'), payImage: 'pay_02.svg', infoLink: '', payType: 3},
+    {payName: t('payment.paymentMethods.naverPay'), payImage: 'pay_03.svg', infoLink: '', payType: 3},
+    {payName: t('payment.paymentMethods.samsungPay'), payImage: 'pay_04.svg', infoLink: '', payType: 2},
+    {payName: t('payment.paymentMethods.accountTransfer'), payImage: 'pay_05.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.mobilePaymentFull'), payImage: 'pay_06.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.cultureLandGiftCard'), payImage: 'pay_07.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.ssgMoney'), payImage: 'pay_08.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_10.svg', infoLink: '', payType: 2},
+    {payName: t('payment.paymentMethods.applePay'), payImage: 'pay_11.svg', infoLink: '', payType: 2},
+    {payName: t('payment.paymentMethods.tossPay'), payImage: 'pay_12.svg', infoLink: '', payType: 3},
+    {payName: t('payment.paymentMethods.payco'), payImage: 'pay_13.svg', infoLink: '', payType: 2},
+    {payName: t('payment.paymentMethods.livePay'), payImage: 'pay_14.svg', infoLink: '', payType: 2},
+    {payName: t('payment.paymentMethods.taiwanPayment'), payImage: 'pay_15.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.tmoneyPay'), payImage: 'pay_16.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.lPay'), payImage: 'pay_17.svg', infoLink: '', payType: 2},
+    {payName: t('payment.paymentMethods.payU'), payImage: 'pay_18.svg', infoLink: '', payType: 2},
+    {payName: t('payment.paymentMethods.twLinePay'), payImage: 'pay_19.svg', infoLink: '', payType: 2},
+    {payName: t('payment.paymentMethods.ssgPay'), payImage: 'pay_21.svg', infoLink: '', payType: 3},
+    {payName: t('payment.paymentMethods.kBankPay'), payImage: 'pay_22.svg', infoLink: '', payType: 2},
+    {payName: t('payment.paymentMethods.virtualAccount'), payImage: 'pay_23.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.ssgBankAccount'), payImage: 'pay_21.svg', infoLink: '', payType: 1},
+    {payName: t('payment.paymentMethods.accountSimplePayment'), payImage: 'pay_24.svg', infoLink: '', payType: 1},
   ];
 
   const list2 = [
-    {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''},
-    {payName: 'SK PAY', payImage: 'pay_20.svg', infoLink: ''},
-    {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''},
-    {payName: '삼성페이(카드)', payImage: 'pay_04.svg', infoLink: ''},
+    {payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: ''},
+    {payName: t('payment.paymentMethods.skPay'), payImage: 'pay_20.svg', infoLink: ''},
+    {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: ''},
+    {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_04.svg', infoLink: ''},
   ];
 
   const getList = (type: PaymentInfoItemType) => {

src/entities/settlement/model/constant.ts

@@ -1,18 +1,20 @@
+import { TFunction } from 'i18next';
 import { SettlementPaymentMethod, SettlementPeriodType } from './types';
 
-export const SettlementPeriodTypeBtnGroup = [
-  {name: '정산일자', value: SettlementPeriodType.SETTLEMENT_DATE },
-  {name: '거래일자', value: SettlementPeriodType.TRANSACTION_DATE }
+export const getSettlementPeriodTypeBtnGroup = (t: TFunction) => [
+  {name: t('settlement.periodType.settlementDate'), value: SettlementPeriodType.SETTLEMENT_DATE },
+  {name: t('settlement.periodType.transactionDate'), value: SettlementPeriodType.TRANSACTION_DATE }
 ];
-export const SettlementPaymentMethodOptionsGroup = [
-  {name: '전체', value: SettlementPaymentMethod.ALL},
-  {name: '신용카드', value: SettlementPaymentMethod.CREDIT_CARD},
-  {name: '가상계좌', value: SettlementPaymentMethod.VIRTUAL_ACCOUNT},
-  {name: '계좌이체', value: SettlementPaymentMethod.ACCOUNT_TRANSFER},
-  {name: '계좌간편결제', value: SettlementPaymentMethod.ACCOUNT_EASY_PAY},
-  {name: '휴대폰', value: SettlementPaymentMethod.MOBILE_PAYMENT},
-  {name: 'SSG 머니', value: SettlementPaymentMethod.SSG_MONEY},
-  {name: 'SSG 은행계좌', value: SettlementPaymentMethod.SSG_BANK_ACCOUNT},
-  {name: '문화상품권', value: SettlementPaymentMethod.CULTURE_VOUCHER},
-  {name: '티머니페이', value: SettlementPaymentMethod.TMONEY_PAY},
+
+export const getSettlementPaymentMethodOptionsGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: SettlementPaymentMethod.ALL},
+  {name: t('transaction.constants.creditCard'), value: SettlementPaymentMethod.CREDIT_CARD},
+  {name: t('transaction.constants.virtualAccount'), value: SettlementPaymentMethod.VIRTUAL_ACCOUNT},
+  {name: t('transaction.constants.accountTransfer'), value: SettlementPaymentMethod.ACCOUNT_TRANSFER},
+  {name: t('transaction.constants.accountSimpleTransfer'), value: SettlementPaymentMethod.ACCOUNT_EASY_PAY},
+  {name: t('transaction.constants.mobilePayment'), value: SettlementPaymentMethod.MOBILE_PAYMENT},
+  {name: t('transaction.constants.ssgMoney'), value: SettlementPaymentMethod.SSG_MONEY},
+  {name: t('transaction.constants.ssgBank'), value: SettlementPaymentMethod.SSG_BANK_ACCOUNT},
+  {name: t('transaction.constants.cultureLand'), value: SettlementPaymentMethod.CULTURE_VOUCHER},
+  {name: t('transaction.constants.tmoneyPay'), value: SettlementPaymentMethod.TMONEY_PAY},
 ];

src/entities/settlement/ui/calandar-amount-row.tsx

@@ -1,4 +1,5 @@
 import { NumericFormat } from 'react-number-format';
+import { useTranslation } from 'react-i18next';
 import { SettlementStatus } from '../model/types';
 
 export interface CalendarAmountRowProps {
@@ -10,23 +11,24 @@ export const CalendarAmountRow = ({
   amount,
   settlementStatus
 }: CalendarAmountRowProps) => {
+  const { t } = useTranslation();
 
   const makeTitle = () => {
     let rs = [];
     if(settlementStatus === SettlementStatus.SCHEDULED){
       rs.push(
-        <span 
+        <span
           key='amount-label-scheduled'
           className="scheduled"
-        >예정</span>
+        >{t('settlement.scheduled')}</span>
       );
     }
     else if(settlementStatus === SettlementStatus.COMPLETED){
       rs.push(
-        <span 
+        <span
           key='amount-label-complete'
           className="complete"
-        >완료</span>
+        >{t('settlement.completed')}</span>
       );
     }
     return rs;
@@ -35,13 +37,13 @@ export const CalendarAmountRow = ({
   return (
     <>
       <div className="amount-row">
-        <div className="amount-label">정산 { makeTitle() } 금액</div>
+        <div className="amount-label">{t('settlement.settlementShort')} { makeTitle() } {t('filter.amount')}</div>
         <div className="amount-value">
           <NumericFormat
-            value={ amount } 
+            value={ amount }
             thousandSeparator
             displayType="text"
-            suffix='원'
+            suffix={t('common.currencyUnit')}
           ></NumericFormat>
         </div>
       </div>

src/entities/settlement/ui/calandar-wrap.tsx

@@ -1,11 +1,12 @@
 import moment from 'moment';
 import { ChangeEvent, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useSettlementsCalendarMutation } from '../api/use-settlements-calendar-mutation';
 import { CalendarAmountRow } from './calandar-amount-row';
-import { CalendarSettlementItem } from './calendar-settlement-item'; 
+import { CalendarSettlementItem } from './calendar-settlement-item';
 import { CalendarGrid } from './calendar-grid';
-import { 
+import {
   SettlementDays,
   SettlementsCalendarParams,
   SettlementsCalendarResponse,
@@ -14,7 +15,8 @@ import {
 import { useStore } from '@/shared/model/store';
 
 export const CalendarWrap = () => {
-  moment.locale('ko');
+  const { t, i18n } = useTranslation();
+  moment.locale(i18n.language);
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
   const userMid = useStore.getState().UserStore.mid;
 
@@ -135,25 +137,25 @@ export const CalendarWrap = () => {
         </div>
         
         <div className="month-group">
-          <button 
+          <button
             className={ `month-btn ${(!onActionCalendar)? 'disabled': ''}` }
-            aria-label="이전 달"
+            aria-label={t('settlement.previousMonth')}
             onClick={ onClickToMoveMonthPrev }
           >
-            <img 
+            <img
               src={ IMAGE_ROOT + '/ico_date_prev.svg' }
-              alt="이전"
+              alt={t('settlement.previous')}
             />
           </button>
           <div className="month-title">{ moment(yearMonth).format('YYYY년 MM월') }</div>
-          <button 
+          <button
             className={ `month-btn ${(lastMonth || !onActionCalendar)? 'disabled': ''}` }
-            aria-label="다음 달"
+            aria-label={t('settlement.nextMonth')}
             onClick={ onClickToMoveMonthNext }
           >
-            <img 
+            <img
               src={ IMAGE_ROOT + '/ico_date_next.svg' }
-              alt="다음"
+              alt={t('settlement.next')}
             />
           </button>
         </div>
@@ -172,11 +174,11 @@ export const CalendarWrap = () => {
         <div className="legend-group">
           <div className="legend-item">
             <div className="legend-dot complete"></div>
-            <div className="legend-text">정산 완료</div>
+            <div className="legend-text">{t('settlement.settlementCompleted')}</div>
           </div>
           <div className="legend-item">
             <div className="legend-dot scheduled"></div>
-            <div className="legend-text">입금 예정</div>
+            <div className="legend-text">{t('settlement.depositScheduled')}</div>
           </div>
         </div>
 

src/entities/settlement/ui/calendar-grid.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { SettlementDays, SettlementStatus } from '../model/types';
 import { useEffect, useState } from 'react';
 
@@ -13,7 +14,8 @@ export const CalendarGrid = ({
   scheduledDateList,
   completedDateList
 }: CalendarGridProps) => {
-  
+  const { t } = useTranslation();
+
   const makeCalendarDate = () => {
     let startDay = moment(yearMonth).startOf('month').day();
     let lastDate = moment(yearMonth).endOf('month').date();
@@ -73,13 +75,13 @@ export const CalendarGrid = ({
     <>
       <div className="calendar-grid">
         <div className="weekdays">
-          <div className="weekday sun">일</div>
-          <div className="weekday">월</div>
-          <div className="weekday">화</div>
-          <div className="weekday">수</div>
-          <div className="weekday">목</div>
-          <div className="weekday">금</div>
-          <div className="weekday sat">토</div>
+          <div className="weekday sun">{t('common.weekdays.sun')}</div>
+          <div className="weekday">{t('common.weekdays.mon')}</div>
+          <div className="weekday">{t('common.weekdays.tue')}</div>
+          <div className="weekday">{t('common.weekdays.wed')}</div>
+          <div className="weekday">{t('common.weekdays.thu')}</div>
+          <div className="weekday">{t('common.weekdays.fri')}</div>
+          <div className="weekday sat">{t('common.weekdays.sat')}</div>
         </div>
         <div className="days">
         {  makeCalendarDate() }

src/entities/settlement/ui/calendar-settlement-item.tsx

@@ -1,5 +1,6 @@
 import moment from 'moment';
 import { NumericFormat } from 'react-number-format';
+import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { SettlementDays, SettlementStatus } from '../model/types';
@@ -14,6 +15,7 @@ export const CalendarSettlementItem = ({
   settlementStatus
 }: CalendarSettlementItemProps) => {
   const { navigate } = useNavigate();
+  const { t } = useTranslation();
 
   const getAmount = (
     scheduledAmount: number | undefined, 
@@ -65,10 +67,10 @@ export const CalendarSettlementItem = ({
           </div>
           <div className="settlement-amount">
             <NumericFormat
-              value={ getAmount(value?.scheduledAmount, value?.completedAmount) } 
+              value={ getAmount(value?.scheduledAmount, value?.completedAmount) }
               thousandSeparator
               displayType="text"
-              suffix='원'
+              suffix={t('common.currencyUnit')}
             ></NumericFormat>
           </div>
         </div>

src/entities/settlement/ui/filter/list-filter.tsx

@@ -1,19 +1,20 @@
 import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useStore } from '@/shared/model/store';
-import { 
+import {
   SettlementPaymentMethod,
   SettlementPeriodType
 } from '../../model/types';
-import { 
-  FilterMotionDuration, 
-  FilterMotionStyle, 
+import {
+  FilterMotionDuration,
+  FilterMotionStyle,
   FilterMotionVariants
 } from '@/entities/common/model/constant';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
-import { SettlementPaymentMethodOptionsGroup, SettlementPeriodTypeBtnGroup } from '../../model/constant';
+import { getSettlementPaymentMethodOptionsGroup, getSettlementPeriodTypeBtnGroup } from '../../model/constant';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 
@@ -46,13 +47,14 @@ export const ListFilter = ({
   setEndDate,
   setPaymentMethod
 }: ListFilterProps) => {
+  const { t } = useTranslation();
 
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterPeriodType, setFilterPeriodType] = useState<SettlementPeriodType>(periodType);
   const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
   const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
   const [filterPaymentMethod, setFilterPaymentMethod] = useState<SettlementPaymentMethod>(paymentMethod);
-  
+
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
   
   const onClickToClose = () => {
@@ -84,15 +86,15 @@ export const ListFilter = ({
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
-            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button 
+              <button
                 id="closeFullMenu"
                 className="full-menu-close"
               >
-                <img 
+                <img
                   src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt="닫기"
+                  alt={t('common.close')}
                   onClick={ () => onClickToClose() }
                 />
               </button>
@@ -100,35 +102,35 @@ export const ListFilter = ({
           </div>
           <div className="option-list pt-16">
             <FilterSelectMid
-              title='가맹점'
+              title={t('filter.merchant')}
               selectSetter={ setMid }
               showType={ 'GID' }
             ></FilterSelectMid>
             <FilterButtonGroups
-              title='조회기준'
+              title={t('settlement.searchCriteria')}
               activeValue={ filterPeriodType }
-              btnGroups={ SettlementPeriodTypeBtnGroup }
+              btnGroups={ getSettlementPeriodTypeBtnGroup(t) }
               setter={ setFilterPeriodType }
             ></FilterButtonGroups>
             <FilterCalendar
-              title='조회기간'
+              title={t('settlement.searchPeriod')}
               startDate={ filterStartDate }
               endDate={ filterEndDate }
               setStartDate={ setFilterStartDate }
               setEndDate={ setFilterEndDate }
             ></FilterCalendar>
             <FilterSelect
-              title='결제수단'
+              title={t('filter.paymentMethod')}
               selectValue={ filterPaymentMethod }
               selectSetter={ setFilterPaymentMethod }
-              selectOptions={ SettlementPaymentMethodOptionsGroup }
+              selectOptions={ getSettlementPaymentMethodOptionsGroup(t) }
             ></FilterSelect>
           </div>
           <div className="apply-row">
-            <button 
+            <button
               className="btn-50 btn-blue flex-1"
 							onClick={ () => onClickToSetFilter() }
-            >적용</button>
+            >{t('filter.apply')}</button>
           </div>
         </div>
       </motion.div>

src/entities/settlement/ui/info-wrap/settlement-info-wrap.tsx

@@ -1,11 +1,12 @@
 import moment from 'moment';
 import { NumericFormat } from 'react-number-format';
-import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; 
+import { useTranslation } from 'react-i18next';
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import SlideDown from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
-import { 
-  InfoWrapKeys, 
-  SettlementInfoWrapProps, 
+import {
+  InfoWrapKeys,
+  SettlementInfoWrapProps,
   SettlementPeriodType
 } from '../../model/types';
 
@@ -14,6 +15,7 @@ export const SettlementInfoWrap = ({
   isOpen,
   onClickToShowInfo
 }: SettlementInfoWrapProps) => {
+  const { t } = useTranslation();
 
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
@@ -24,59 +26,59 @@ export const SettlementInfoWrap = ({
   return (
     <>
       <div className="txn-section">
-        <div 
+        <div
           className="section-title"
           onClick={ () => onClickToSetShowInfo() }
         >
-          정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          {t('settlement.settlementInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
         <SlideDown className={'my-dropdown-slidedown'}>
         { isOpen &&
           <ul className="kv-list">
             <li className="kv-row">
-              <span className="k">MID</span>
+              <span className="k">{t('transaction.fields.mid')}</span>
               <span className="v">{ settlementInfo?.mid }</span>
             </li>
             <li className="kv-row">
-              <span className="k">이체상태</span>
+              <span className="k">{t('settlement.transferStatus')}</span>
               <span className="v">{ settlementInfo?.transferStatus }</span>
             </li>
             <li className="kv-row">
-              <span className="k">이체ID</span>
+              <span className="k">{t('settlement.transferId')}</span>
               <span className="v">{ settlementInfo?.transferId }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">이체시간</span>
+              <span className="k">{t('settlement.transferTime')}</span>
               <span className="v">
-                { settlementInfo?.transferTime && 
-                  moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss') 
+                { settlementInfo?.transferTime &&
+                  moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss')
                 }
               </span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">은행명</span>
+              <span className="k">{t('settlement.bankName')}</span>
               <span className="v">{ settlementInfo?.bankName }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">계좌번호</span>
+              <span className="k">{t('settlement.accountNumber')}</span>
               <span className="v">{ settlementInfo?.accountNumber }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">입금인자</span>
+              <span className="k">{t('settlement.depositorName')}</span>
               <span className="v">{ settlementInfo?.depositorName }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">정상입금액</span>
+              <span className="k">{t('settlement.settlementDepositAmount')}</span>
               <span className="v">
                 <NumericFormat
-                  value={ settlementInfo?.settlementDepositAmount } 
+                  value={ settlementInfo?.settlementDepositAmount }
                   thousandSeparator
                   displayType="text"
                 ></NumericFormat>
               </span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">오류사유</span>
+              <span className="k">{t('settlement.errorReason')}</span>
               <span className="v">{ settlementInfo?.errorReason }</span>
             </li>
           </ul>

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

@@ -1,10 +1,11 @@
 import moment from 'moment';
-import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; 
+import { useTranslation } from 'react-i18next';
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import SlideDown from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
-import { 
-  InfoWrapKeys, 
-  TransactionInfoWrapProps, 
+import {
+  InfoWrapKeys,
+  TransactionInfoWrapProps,
 } from '@/entities/settlement/model/types';
 
 export const TransactionInfoWrap = ({
@@ -12,6 +13,7 @@ export const TransactionInfoWrap = ({
   isOpen,
   onClickToShowInfo
 }: TransactionInfoWrapProps) => {
+  const { t } = useTranslation();
 
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
@@ -22,61 +24,61 @@ export const TransactionInfoWrap = ({
   return (
     <>
       <div className="txn-section">
-        <div 
+        <div
           className="section-title"
           onClick={ () => onClickToSetShowInfo() }
         >
-          거래 상세 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+          {t('settlement.transactionDetailInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
         <SlideDown className={'my-dropdown-slidedown'}>
-        { isOpen && 
+        { isOpen &&
           <ul className="kv-list">
             <li className="kv-row">
-              <span className="k">주문번호</span>
+              <span className="k">{t('transaction.fields.orderNumber')}</span>
               <span className="v">{ transactionInfo?.orderNumber }</span>
             </li>
             <li className="kv-row">
-              <span className="k">TID</span>
+              <span className="k">{t('transaction.fields.tid')}</span>
               <span className="v">{ transactionInfo?.tid }</span>
             </li>
             <li className="kv-row">
-              <span className="k">원거래 TID</span>
+              <span className="k">{t('transaction.fields.originalTid')}</span>
               <span className="v">{ transactionInfo?.originalTid }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">거래상태</span>
+              <span className="k">{t('transaction.fields.transactionStatus')}</span>
               <span className="v">{ transactionInfo?.transactionStatus }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">결제수단</span>
+              <span className="k">{t('transaction.fields.paymentMethod')}</span>
               <span className="v">{ transactionInfo?.paymentMethod }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">정산일</span>
+              <span className="k">{t('additionalService.settlementAgency.settlementDate')}</span>
               <span className="v">{ moment(transactionInfo?.settlementDate).format('YYYY.MM.DD') }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">승인일</span>
+              <span className="k">{t('transaction.fields.approvalDay')}</span>
               <span className="v">{ moment(transactionInfo?.approvalDate).format('YYYY.MM.DD') }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">취소일</span>
+              <span className="k">{t('transaction.fields.cancelDate')}</span>
               <span className="v">{ moment(transactionInfo?.cancelDate).format('YYYY.MM.DD') }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">카드/은행/이통사</span>
+              <span className="k">{t('settlement.cardBankTelecom')}</span>
               <span className="v">{ transactionInfo?.cardCompany }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">승인번호/계좌번호/휴대번호</span>
+              <span className="k">{t('settlement.approvalAccountPhone')}</span>
               <span className="v">{ transactionInfo?.approvalNumber }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">상품명</span>
+              <span className="k">{t('transaction.fields.productName')}</span>
               <span className="v">{ transactionInfo?.productName }</span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">구매자</span>
+              <span className="k">{t('transaction.fields.buyer')}</span>
               <span className="v">{ transactionInfo?.buyerName }</span>
             </li>
           </ul>

src/entities/settlement/ui/list-summary-extend-settlement.tsx

@@ -1,4 +1,5 @@
 import { NumericFormat } from 'react-number-format';
+import { useTranslation } from 'react-i18next';
 import { SettlementsHistorySummaryResponse } from '../model/types';
 
 export interface ListSummaryExtendSettlementProps extends SettlementsHistorySummaryResponse {};
@@ -11,59 +12,60 @@ export const ListSummaryExtendSettlement = ({
   releaseAmount,
   offsetAmount
 }: ListSummaryExtendSettlementProps) => {
-  
+  const { t } = useTranslation();
+
   return (
     <>
       <div className="summary-extend">
         <ul className="summary-amount-list">
           <li className="summary-amount-item">
-            <span className="label">거래금액</span>
+            <span className="label">{t('settlement.transactionAmount')}</span>
             <span className="value">
               <NumericFormat
-                value={ transactionAmount } 
+                value={ transactionAmount }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
           <li className="summary-amount-item">
-            <span className="label">PG 수수료</span>
+            <span className="label">{t('settlement.totalPgFee')}</span>
             <span className="value minus">
               <NumericFormat
-                value={ pgFeeAmount } 
+                value={ pgFeeAmount }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
           <li className="summary-amount-item">
-            <span className="label">보류</span>
+            <span className="label">{t('settlement.hold')}</span>
             <span className="value">
               <NumericFormat
-                value={ holdAmount } 
+                value={ holdAmount }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
           <li className="summary-amount-item">
-            <span className="label">해제</span>
+            <span className="label">{t('settlement.release')}</span>
             <span className="value link">
               <NumericFormat
-                value={ releaseAmount } 
+                value={ releaseAmount }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
           <li className="summary-amount-item">
-            <span className="label">상계</span>
+            <span className="label">{t('settlement.offset')}</span>
             <span className="value minus">
               <NumericFormat
-                value={ offsetAmount } 
+                value={ offsetAmount }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
         </ul>

src/entities/settlement/ui/list-summary-extend-transaction.tsx

@@ -1,4 +1,5 @@
 import { NumericFormat } from 'react-number-format';
+import { useTranslation } from 'react-i18next';
 import { SettlementsTransactionSummaryResponse } from '../model/types';
 
 export interface ListSummaryExtendTransactionProps extends SettlementsTransactionSummaryResponse {};
@@ -12,69 +13,70 @@ export const ListSummaryExtendTransaction = ({
   vatAmount,
   preSettlementCancelOffset
 }: ListSummaryExtendTransactionProps) => {
-  
+  const { t } = useTranslation();
+
   return (
     <>
       <div className="summary-extend">
         <ul className="summary-amount-list">
           <li className="summary-amount-item">
-            <span className="label">거래금액</span>
+            <span className="label">{t('settlement.transactionAmount')}</span>
             <span className="value">
               <NumericFormat
-                value={ transactionAmount } 
+                value={ transactionAmount }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
           <li className="summary-amount-item">
-            <span className="label">결제 수수료</span>
+            <span className="label">{t('settlement.paymentFee')}</span>
             <span className="value minus">
               <NumericFormat
-                value={ paymentFeeAmount } 
+                value={ paymentFeeAmount }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
           <li className="summary-amount-item">
-            <span className="label">에스크로 수수료</span>
+            <span className="label">{t('settlement.escrowFee')}</span>
             <span className="value">
               <NumericFormat
-                value={ escrowFeeAmount } 
+                value={ escrowFeeAmount }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
           <li className="summary-amount-item">
-            <span className="label">인증 수수료</span>
+            <span className="label">{t('settlement.authFee')}</span>
             <span className="value link">
               <NumericFormat
-                value={ authFeeAmount } 
+                value={ authFeeAmount }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
           <li className="summary-amount-item">
             <span className="label">VAT</span>
             <span className="value minus">
               <NumericFormat
-                value={ vatAmount } 
+                value={ vatAmount }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
           <li className="summary-amount-item">
-            <span className="label">정산전 취소상계</span>
+            <span className="label">{t('settlement.preSettlementCancelOffset')}</span>
             <span className="value minus">
               <NumericFormat
-                value={ preSettlementCancelOffset } 
+                value={ preSettlementCancelOffset }
                 thousandSeparator
                 displayType="text"
-              ></NumericFormat> <span className="unit">원</span>
+              ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
             </span>
           </li>
         </ul>

src/entities/support/ui/qna-item.tsx

@@ -48,8 +48,8 @@ export const SupportQnaItem = ({
         <div className="inq-line">
           <div className="inq-title-text">{ title }</div>
           <div className="inq-meta">
-            등록일<span>{ moment(requestDate).format('YYYY.MM.DD') }</span>
-            <span className="sai">ㅣ</span>상태 <span>[{t(`support.qna.statusCode.${statusCode}`)}]</span>
+            {t('support.qna.registrationDate')}<span>{ moment(requestDate).format('YYYY.MM.DD') }</span>
+            <span className="sai">ㅣ</span>{t('support.qna.status')} <span>[{t(`support.qna.statusCode.${statusCode}`)}]</span>
           </div>
           <span className={`dot ${(statusCode === '03')? 'blue': 'gray'}`}></span>
         </div>

src/entities/transaction/model/contant.ts

@@ -1,4 +1,5 @@
-import { 
+import { TFunction } from 'i18next';
+import {
   AllTransactionMoidTid,
   AllTransactionSearchCl,
   AllTransactionServiceCode,
@@ -6,7 +7,7 @@ import {
   CashReceiptPurposeType,
   CashReceiptTransactionType,
   CashReceiptProcessResult,
-  BillingPaymentMethod, 
+  BillingPaymentMethod,
   BillingProcessResult,
   BillingRequestStatus,
   BillingSearchType,
@@ -15,121 +16,121 @@ import {
   EscrowSettlementStatus
 } from '@/entities/transaction/model/types';
 
-export const AllTransactionMoidTidOptionsGroup = [
-  {name: '주문번호', value: AllTransactionMoidTid.MOID},
-  {name: 'TID', value: AllTransactionMoidTid.TID},
+export const getAllTransactionMoidTidOptionsGroup = (t: TFunction) => [
+  {name: t('transaction.constants.orderNumber'), value: AllTransactionMoidTid.MOID},
+  {name: t('transaction.constants.tid'), value: AllTransactionMoidTid.TID},
 ];
 
-export const AllTransactionStatusCodeBtnGroup = [
-  {name: '전체', value: AllTransactionStatusCode.ALL},
-  {name: '승인/입금완료', value: AllTransactionStatusCode.APPROVAL},
-  {name: '전취소/취소', value: AllTransactionStatusCode.CANCEL},
-  {name: '후취소/환불', value: AllTransactionStatusCode.REFUND}
-];
-export const AllTransactionServiceCodeOptionsGroup = [
-  {name: '전체', value: AllTransactionServiceCode.ALL},
-  {name: '신용카드', value: AllTransactionServiceCode.CREDIT_CARD},
-  {name: '가상계좌', value: AllTransactionServiceCode.VIRTUAL_ACCOUNT},
-  {name: '계좌이체', value: AllTransactionServiceCode.ACCOUNT_TRANSFER},
-  {name: '계좌간편결제', value: AllTransactionServiceCode.ACCOUNT_SIMPLE_TRANSFER},
-  {name: '휴대폰', value: AllTransactionServiceCode.MOBILE_PAYMENT},
-  {name: 'SSG 머니', value: AllTransactionServiceCode.SSGMONEY},
-  {name: 'SSG 은행계좌', value: AllTransactionServiceCode.SSGBANK},
-  {name: '문화상품권', value: AllTransactionServiceCode.CULT},
-  {name: '티머니페이', value: AllTransactionServiceCode.TMONEY},
-
+export const getAllTransactionStatusCodeBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: AllTransactionStatusCode.ALL},
+  {name: t('transaction.constants.approvalComplete'), value: AllTransactionStatusCode.APPROVAL},
+  {name: t('transaction.constants.totalCancel'), value: AllTransactionStatusCode.CANCEL},
+  {name: t('transaction.constants.refund'), value: AllTransactionStatusCode.REFUND}
 ];
 
-export const AllTracsactionStatusCode = [
+export const getAllTransactionServiceCodeOptionsGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: AllTransactionServiceCode.ALL},
+  {name: t('transaction.constants.creditCard'), value: AllTransactionServiceCode.CREDIT_CARD},
+  {name: t('transaction.constants.virtualAccount'), value: AllTransactionServiceCode.VIRTUAL_ACCOUNT},
+  {name: t('transaction.constants.accountTransfer'), value: AllTransactionServiceCode.ACCOUNT_TRANSFER},
+  {name: t('transaction.constants.accountSimpleTransfer'), value: AllTransactionServiceCode.ACCOUNT_SIMPLE_TRANSFER},
+  {name: t('transaction.constants.mobilePayment'), value: AllTransactionServiceCode.MOBILE_PAYMENT},
+  {name: t('transaction.constants.ssgMoney'), value: AllTransactionServiceCode.SSGMONEY},
+  {name: t('transaction.constants.ssgBank'), value: AllTransactionServiceCode.SSGBANK},
+  {name: t('transaction.constants.cultureLand'), value: AllTransactionServiceCode.CULT},
+  {name: t('transaction.constants.tmoneyPay'), value: AllTransactionServiceCode.TMONEY},
+];
+
+export const getAllTransactionStatusCode = (t: TFunction) => [
   {
-    serviceCode: '', 
+    serviceCode: '',
     list: [
-      {code: '', ko: '전체', en: 'All'},
-      {code: '0', ko: '승인/입금완료', en: 'Approval'},
-      {code: '1', ko: '전취소/취소', en: 'Total Cancellation'},
-      {code: '2', ko: '후취소/환불', en: 'Cancellation'}
+      {code: '', name: t('transaction.constants.all')},
+      {code: '0', name: t('transaction.constants.approvalComplete')},
+      {code: '1', name: t('transaction.constants.totalCancel')},
+      {code: '2', name: t('transaction.constants.refund')}
     ]
   },
   {
-    serviceCode: '01', 
+    serviceCode: '01',
     list: [
-      {code: '', ko: '전체', en: 'All'},
-      {code: '0', ko: '승인', en: 'Approval'},
-      {code: '1', ko: '전취소', en: 'Total Cancellation'},
-      {code: '2', ko: '후취소', en: 'Cancellation'}
+      {code: '', name: t('transaction.constants.all')},
+      {code: '0', name: t('transaction.constants.approval')},
+      {code: '1', name: t('transaction.constants.totalCancelShort')},
+      {code: '2', name: t('transaction.constants.cancelShort')}
     ]
   },
   {
     serviceCode: '02',
     list: [
-      {code: '', ko: '전체', en: 'All'},
-      {code: '0', ko: '승인', en: 'Approval'},
-      {code: '1', ko: '취소', en: 'Cancellation'},
-      {code: '2', ko: '환불', en: 'Refund'},
+      {code: '', name: t('transaction.constants.all')},
+      {code: '0', name: t('transaction.constants.approval')},
+      {code: '1', name: t('transaction.constants.cancel')},
+      {code: '2', name: t('transaction.constants.refund')},
     ]
   },
   {
     serviceCode: '03',
     list: [
-      {code: '', ko: '전체', en: 'All'},
-      {code: '0', ko: '입금', en: 'Payment Complete'},
-      {code: '2', ko: '환불', en: 'Refund'},
-      {code: '3', ko: '입금대기', en: 'Waiting Payment'},
-      {code: '4', ko: '채번취소', en: 'Cancellation Issue'},
+      {code: '', name: t('transaction.constants.all')},
+      {code: '0', name: t('transaction.constants.deposit')},
+      {code: '2', name: t('transaction.constants.refund')},
+      {code: '3', name: t('transaction.constants.waitingDeposit')},
+      {code: '4', name: t('transaction.constants.issueCancel')},
     ]
   },
   {
     serviceCode: '05',
     list: [
-      {code: '', ko: '전체', en: 'All'},
-      {code: '0', ko: '승인', en: 'Approval'},
-      {code: '1', ko: '취소', en: 'Cancellation'},
-      {code: '2', ko: '환불', en: 'Refund'},
+      {code: '', name: t('transaction.constants.all')},
+      {code: '0', name: t('transaction.constants.approval')},
+      {code: '1', name: t('transaction.constants.cancel')},
+      {code: '2', name: t('transaction.constants.refund')},
     ]
   },
   {
     serviceCode: '14',
     list: [
-      {code: '', ko: '전체', en: 'All'},
-      {code: '0', ko: '승인', en: 'Approval'},
-      {code: '1', ko: '취소', en: 'Cancellation'},
-      {code: '2', ko: '환불', en: 'Refund'},
+      {code: '', name: t('transaction.constants.all')},
+      {code: '0', name: t('transaction.constants.approval')},
+      {code: '1', name: t('transaction.constants.cancel')},
+      {code: '2', name: t('transaction.constants.refund')},
     ]
   },
   {
     serviceCode: '21',
     list: [
-      {code: '', ko: '전체', en: 'All'},
-      {code: '0', ko: '승인', en: 'Approval'},
-      {code: '1', ko: '취소', en: 'Cancellation'},
-      {code: '2', ko: '환불', en: 'Refund'},
+      {code: '', name: t('transaction.constants.all')},
+      {code: '0', name: t('transaction.constants.approval')},
+      {code: '1', name: t('transaction.constants.cancel')},
+      {code: '2', name: t('transaction.constants.refund')},
     ]
   },
   {
     serviceCode: '24',
     list: [
-      {code: '', ko: '전체', en: 'All'},
-      {code: '0', ko: '승인', en: 'Approval'},
-      {code: '1', ko: '취소', en: 'Cancellation'},
-      {code: '2', ko: '환불', en: 'Refund'},
+      {code: '', name: t('transaction.constants.all')},
+      {code: '0', name: t('transaction.constants.approval')},
+      {code: '1', name: t('transaction.constants.cancel')},
+      {code: '2', name: t('transaction.constants.refund')},
     ]
   },
   {
     serviceCode: '26',
     list: [
-      {code: '', ko: '전체', en: 'All'},
-      {code: '0', ko: '승인', en: 'Approval'},
-      {code: '1', ko: '취소', en: 'Cancellation'},
-      {code: '2', ko: '환불', en: 'Refund'},
+      {code: '', name: t('transaction.constants.all')},
+      {code: '0', name: t('transaction.constants.approval')},
+      {code: '1', name: t('transaction.constants.cancel')},
+      {code: '2', name: t('transaction.constants.refund')},
     ]
   },
   {
     serviceCode: '31',
     list: [
-      {code: '', ko: '전체', en: 'All'},
-      {code: '0', ko: '승인', en: 'Approval'},
-      {code: '1', ko: '전취소', en: 'Total Cancellation'},
-      {code: '2', ko: '후취소', en: 'Cancellation'},
+      {code: '', name: t('transaction.constants.all')},
+      {code: '0', name: t('transaction.constants.approval')},
+      {code: '1', name: t('transaction.constants.totalCancelShort')},
+      {code: '2', name: t('transaction.constants.cancelShort')},
     ]
   },
 ];
@@ -140,63 +141,72 @@ export const AllTransactionCardBankCodeOptionsGroup = {
 
 
 
-export const CashReceiptPurposeTypeBtnGroup = [
-  {name: '전체', value: CashReceiptPurposeType.ALL},
-  {name: '소득공제', value: CashReceiptPurposeType.INCOME_DEDUCTION},
-  {name: '지출증빙', value: CashReceiptPurposeType.EXPENSE_PROOF},
+export const getCashReceiptPurposeTypeBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: CashReceiptPurposeType.ALL},
+  {name: t('transaction.handWrittenIssuance.incomeDeduction'), value: CashReceiptPurposeType.INCOME_DEDUCTION},
+  {name: t('transaction.handWrittenIssuance.expenseProof'), value: CashReceiptPurposeType.EXPENSE_PROOF},
 ];
-export const CashReceiptTransactionTypeBtnGroup = [
-  {name: '전체', value: CashReceiptTransactionType.ALL},
-  {name: '승인', value: CashReceiptTransactionType.APPROVAL},
-  {name: '취소', value: CashReceiptTransactionType.CANCEL},
+
+export const getCashReceiptTransactionTypeBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: CashReceiptTransactionType.ALL},
+  {name: t('transaction.constants.approval'), value: CashReceiptTransactionType.APPROVAL},
+  {name: t('transaction.constants.cancel'), value: CashReceiptTransactionType.CANCEL},
 ];
-export const CashReceiptProcessResultBtnGroup = [
-  {name: '전체', value: CashReceiptProcessResult.ALL},
-  {name: '요청', value: CashReceiptProcessResult.REQUEST},
-  {name: '요청취소', value: CashReceiptProcessResult.REQUEST_CANCEL},
-  {name: '요청완료', value: CashReceiptProcessResult.REQUEST_COMPLETE},
-  {name: '발급완료', value: CashReceiptProcessResult.ISSUE_COMPLETE},
-  {name: '요청실패', value: CashReceiptProcessResult.REQUEST_FAIL},
-  {name: '발급실패', value: CashReceiptProcessResult.ISSUE_FAIL},
+
+export const getCashReceiptProcessResultBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: CashReceiptProcessResult.ALL},
+  {name: t('transaction.constants.request'), value: CashReceiptProcessResult.REQUEST},
+  {name: t('transaction.constants.requestCancel'), value: CashReceiptProcessResult.REQUEST_CANCEL},
+  {name: t('transaction.constants.requestComplete'), value: CashReceiptProcessResult.REQUEST_COMPLETE},
+  {name: t('transaction.constants.issueComplete'), value: CashReceiptProcessResult.ISSUE_COMPLETE},
+  {name: t('transaction.constants.requestFail'), value: CashReceiptProcessResult.REQUEST_FAIL},
+  {name: t('transaction.constants.issueFail'), value: CashReceiptProcessResult.ISSUE_FAIL},
 ];
-export const EscrowSearchTypeOptionsGroup = [
-  {name: '주문번호', value: EscrowSearchType.ORDER_NUMBER },
-  {name: 'TID', value: EscrowSearchType.TID }
+
+export const getEscrowSearchTypeOptionsGroup = (t: TFunction) => [
+  {name: t('transaction.constants.orderNumber'), value: EscrowSearchType.ORDER_NUMBER },
+  {name: t('transaction.constants.tid'), value: EscrowSearchType.TID }
 ];
-export const EscrowDeliveryStatusBtnGroup = [
-  {name: '전체', value: EscrowDeliveryStatus.ALL},
-  {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
-  {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
-  {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
-  {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
-  {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT},
-  {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
-  {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
+
+export const getEscrowDeliveryStatusBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: EscrowDeliveryStatus.ALL},
+  {name: t('transaction.constants.paymentComplete'), value: EscrowDeliveryStatus.PAY_COMPLETE},
+  {name: t('transaction.constants.deliveryRegistration'), value: EscrowDeliveryStatus.DELIVERY_INSERT},
+  {name: t('transaction.constants.deliveryComplete'), value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
+  {name: t('transaction.constants.purchaseConfirm'), value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
+  {name: t('transaction.constants.purchaseReject'), value: EscrowDeliveryStatus.PURCHASE_REJECT},
+  {name: t('transaction.constants.refundProcessing'), value: EscrowDeliveryStatus.RETURN_PROCESSING},
+  {name: t('transaction.constants.depositComplete'), value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
 ];
-export const EscrowSettlementStatusBtnGroup = [
-  {name: '전체', value: EscrowSettlementStatus.ALL},
-  {name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD},
-  {name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT},
-  {name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER},
+
+export const getEscrowSettlementStatusBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: EscrowSettlementStatus.ALL},
+  {name: t('transaction.constants.creditCard'), value: EscrowSettlementStatus.CREDIT_CARD},
+  {name: t('transaction.constants.virtualAccount'), value: EscrowSettlementStatus.REAL_ACCOUNT},
+  {name: t('transaction.constants.accountTransfer'), value: EscrowSettlementStatus.ACCOUNT_TRANSFER},
 ];
-export const BillingSearchTypeOptionsGroup = [
-  {name: '주문번호', value: BillingSearchType.ORDER_NUMBER },
-  {name: 'TID', value: BillingSearchType.TID }
+
+export const getBillingSearchTypeOptionsGroup = (t: TFunction) => [
+  {name: t('transaction.constants.orderNumber'), value: BillingSearchType.ORDER_NUMBER },
+  {name: t('transaction.constants.tid'), value: BillingSearchType.TID }
 ];
-export const BillingRequestStatusBtnGroup = [
-  {name: '전체', value: BillingRequestStatus.ALL},
-  {name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
-  {name: '성공', value: BillingRequestStatus.SUCCESS},
-  {name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL},
+
+export const getBillingRequestStatusBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: BillingRequestStatus.ALL},
+  {name: t('transaction.constants.inProgress'), value: BillingRequestStatus.IN_PROGRESS},
+  {name: t('transaction.constants.success'), value: BillingRequestStatus.SUCCESS},
+  {name: t('transaction.constants.requestCancel'), value: BillingRequestStatus.REQUEST_CANCEL},
 ];
-export const BillingProcessResultBtnGroup = [
-  {name: '전체', value: BillingProcessResult.ALL},
-  {name: '성공', value: BillingProcessResult.SUCCESS},
-  {name: '실패', value: BillingProcessResult.FAILURE},
+
+export const getBillingProcessResultBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: BillingProcessResult.ALL},
+  {name: t('transaction.constants.success'), value: BillingProcessResult.SUCCESS},
+  {name: t('transaction.constants.failure'), value: BillingProcessResult.FAILURE},
 ];
-export const BillingPaymentMethodBtnGroup = [
-  {name: '전체', value: BillingPaymentMethod.ALL},
-  {name: '신용카드', value: BillingPaymentMethod.CREDIT_CARD},
-  {name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
-  {name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT},
+
+export const getBillingPaymentMethodBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: BillingPaymentMethod.ALL},
+  {name: t('transaction.constants.creditCard'), value: BillingPaymentMethod.CREDIT_CARD},
+  {name: t('transaction.constants.virtualAccount'), value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
+  {name: t('transaction.constants.mobilePayment'), value: BillingPaymentMethod.MOBILE_PAYMENT},
 ];

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

@@ -9,8 +9,8 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import {
-  AllTransactionMoidTidOptionsGroup,
-  AllTracsactionStatusCode,
+  getAllTransactionMoidTidOptionsGroup,
+  getAllTransactionStatusCode,
 } from '@/entities/transaction/model/contant';
 import {
   AllTransactionFilterProps,
@@ -80,6 +80,9 @@ export const AllTransactionFilter = ({
 
   const [statusCodeBtns, setStatusCodeBtns] = useState<Array<Record<string, string>>>();
 
+  const moidTidOptionsGroup = getAllTransactionMoidTidOptionsGroup(t);
+  const allTransactionStatusCode = getAllTransactionStatusCode(t);
+
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -155,12 +158,12 @@ export const AllTransactionFilter = ({
   };
   
   const onChangeServiceCode = (val: string) => {
-    let list = AllTracsactionStatusCode.filter((value, index) => {
+    let list = allTransactionStatusCode.filter((value, index) => {
       return val === value.serviceCode;
     })[0]?.list;
     let btns = list?.map((value, index) => {
       return {
-        name: value.ko,
+        name: value.name,
         value: value.code
       }
     });
@@ -211,7 +214,7 @@ export const AllTransactionFilter = ({
               title={t('filter.orderNumberTid')}
               selectValue={ filterMoidTidType }
               selectSetter={ setFilterMoidTidType }
-              selectOptions={ AllTransactionMoidTidOptionsGroup }
+              selectOptions={ moidTidOptionsGroup }
               inputValue={ filterMoidTidValue }
               inputSetter={ setFilterMoidTidValue }
             ></FilterSelectInput>

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

@@ -9,10 +9,10 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import {
-  BillingSearchTypeOptionsGroup,
-  BillingRequestStatusBtnGroup,
-  BillingProcessResultBtnGroup,
-  BillingPaymentMethodBtnGroup
+  getBillingSearchTypeOptionsGroup,
+  getBillingRequestStatusBtnGroup,
+  getBillingProcessResultBtnGroup,
+  getBillingPaymentMethodBtnGroup
 } from '@/entities/transaction/model/contant';
 import {
   BillingFilterProps,
@@ -68,6 +68,11 @@ export const BillingFilter = ({
 
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
+  const searchTypeOptionsGroup = getBillingSearchTypeOptionsGroup(t);
+  const requestStatusBtnGroup = getBillingRequestStatusBtnGroup(t);
+  const processResultBtnGroup = getBillingProcessResultBtnGroup(t);
+  const paymentMethodBtnGroup = getBillingPaymentMethodBtnGroup(t);
+
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -131,7 +136,7 @@ export const BillingFilter = ({
               title={t('filter.orderNumberTid')}
               selectValue={ filterSearchType }
               selectSetter={ setFilterSearchType }
-              selectOptions={ BillingSearchTypeOptionsGroup }
+              selectOptions={ searchTypeOptionsGroup }
               inputValue={ searchKeyword }
               inputSetter={ setFilterSearchKeyword }
             ></FilterSelectInput>
@@ -146,19 +151,19 @@ export const BillingFilter = ({
             <FilterButtonGroups
               title={t('filter.requestStatus')}
               activeValue={ filterRequestStatus }
-              btnGroups={ BillingRequestStatusBtnGroup }
+              btnGroups={ requestStatusBtnGroup }
               setter={ setFilterRequestStatus }
             ></FilterButtonGroups>
             <FilterButtonGroups
               title={t('filter.processingResult')}
               activeValue={ filterProcessResult }
-              btnGroups={ BillingProcessResultBtnGroup }
+              btnGroups={ processResultBtnGroup }
               setter={ setFilterProcessResult }
             ></FilterButtonGroups>
             <FilterButtonGroups
               title={t('filter.paymentMethod')}
               activeValue={ filterPaymentMethod }
-              btnGroups={ BillingPaymentMethodBtnGroup }
+              btnGroups={ paymentMethodBtnGroup }
               setter={ setFilterPaymentMethod }
             ></FilterButtonGroups>
 

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

@@ -8,9 +8,9 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import {
-  CashReceiptPurposeTypeBtnGroup,
-  CashReceiptTransactionTypeBtnGroup,
-  CashReceiptProcessResultBtnGroup
+  getCashReceiptPurposeTypeBtnGroup,
+  getCashReceiptTransactionTypeBtnGroup,
+  getCashReceiptProcessResultBtnGroup
 } from '@/entities/transaction/model/contant';
 import {
   CashReceiptFilterProps,
@@ -64,6 +64,10 @@ export const CashReceiptFilter = ({
 
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
+  const purposeTypeBtnGroup = getCashReceiptPurposeTypeBtnGroup(t);
+  const transactionTypeBtnGroup = getCashReceiptTransactionTypeBtnGroup(t);
+  const processResultBtnGroup = getCashReceiptProcessResultBtnGroup(t);
+
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -130,19 +134,19 @@ export const CashReceiptFilter = ({
             <FilterButtonGroups
               title={t('filter.purpose')}
               activeValue={ filterPurposeType }
-              btnGroups={ CashReceiptPurposeTypeBtnGroup }
+              btnGroups={ purposeTypeBtnGroup }
               setter={ setFilterPurposeType }
             ></FilterButtonGroups>
             <FilterButtonGroups
               title={t('filter.transactionCategory')}
               activeValue={ filterTransactionType }
-              btnGroups={ CashReceiptTransactionTypeBtnGroup }
+              btnGroups={ transactionTypeBtnGroup }
               setter={ setFilterTransactionType }
             ></FilterButtonGroups>
             <FilterButtonGroups
               title={t('filter.progressStatus')}
               activeValue={ filterProcessResult }
-              btnGroups={ CashReceiptProcessResultBtnGroup }
+              btnGroups={ processResultBtnGroup }
               setter={ setFilterProcessResult }
             ></FilterButtonGroups>
             <FilterSelectInput

src/entities/transaction/ui/filter/escrow-filter.tsx

@@ -9,9 +9,9 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import {
-  EscrowDeliveryStatusBtnGroup,
-  EscrowSettlementStatusBtnGroup,
-  EscrowSearchTypeOptionsGroup
+  getEscrowDeliveryStatusBtnGroup,
+  getEscrowSettlementStatusBtnGroup,
+  getEscrowSearchTypeOptionsGroup
 } from '@/entities/transaction/model/contant';
 import {
   EscrowFilterProps,
@@ -62,7 +62,11 @@ export const EscrowFilter = ({
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
 
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
-  
+
+  const searchTypeOptionsGroup = getEscrowSearchTypeOptionsGroup(t);
+  const deliveryStatusBtnGroup = getEscrowDeliveryStatusBtnGroup(t);
+  const settlementStatusBtnGroup = getEscrowSettlementStatusBtnGroup(t);
+
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -125,7 +129,7 @@ export const EscrowFilter = ({
               title={t('filter.orderNumberTid')}
               selectValue={ filterSearchType }
               selectSetter={ setSearchType }
-              selectOptions={ EscrowSearchTypeOptionsGroup }
+              selectOptions={ searchTypeOptionsGroup }
               inputValue={ searchKeyword }
               inputSetter={ setSearchKeyword }
             ></FilterSelectInput>
@@ -140,13 +144,13 @@ export const EscrowFilter = ({
             <FilterButtonGroups
               title={t('filter.deliveryStatus')}
               activeValue={ filterDeliveryStatus }
-              btnGroups={ EscrowDeliveryStatusBtnGroup }
+              btnGroups={ deliveryStatusBtnGroup }
               setter={ setFilterDeliveryStatus }
             ></FilterButtonGroups>
             <FilterButtonGroups
               title={t('filter.paymentMethod')}
               activeValue={ filterSettlementStatus }
-              btnGroups={ EscrowSettlementStatusBtnGroup }
+              btnGroups={ settlementStatusBtnGroup }
               setter={ setFilterSettlementStatus }
             ></FilterButtonGroups>
 

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

@@ -4,7 +4,8 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps, TransactionCategory } from '../model/types';
 import moment from 'moment';
 import { useStore } from '@/shared/model/store';
-import { AllTracsactionStatusCode } from '../model/contant';
+import { getAllTransactionStatusCode } 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'));
     }
   };
   
@@ -127,15 +129,16 @@ export const ListItem = ({
   const getStatusName = () => {
     let str;
     if(transactionCategory === TransactionCategory.AllTransaction){
-      Loop1: 
-      for(let i=0;i<AllTracsactionStatusCode.length;i++){
-        if(serviceCode === AllTracsactionStatusCode[i]?.serviceCode){
-          let list = AllTracsactionStatusCode[i]?.list;
+      const allTransactionStatusCode = getAllTransactionStatusCode(t);
+      Loop1:
+      for(let i=0;i<allTransactionStatusCode.length;i++){
+        if(serviceCode === allTransactionStatusCode[i]?.serviceCode){
+          let list = allTransactionStatusCode[i]?.list;
           if(!!list){
             Loop2:
             for(let j=0;j<list.length;j++){
               if(list[j]?.code === statusCode){
-                str = list[j]?.ko;
+                str = list[j]?.name;
                 break Loop1;
               }
             }
@@ -163,7 +166,7 @@ export const ListItem = ({
             (!!installmentMonth && parseInt(installmentMonth) > 1) && 
               <>
                 <span className="separator">|</span>
-                <span>{ installmentMonth }개월 할부</span>
+                <span>{ t('transaction.fields.installmentMonthly', { count: parseInt(installmentMonth) }) }</span>
               </>
           }
         </div>
@@ -196,7 +199,7 @@ export const ListItem = ({
             (!!installmentMonth && parseInt(installmentMonth) > 1) && 
               <>
                 <span className="separator">|</span>
-                <span>{ installmentMonth }개월 할부</span>
+                <span>{ t('transaction.fields.installmentMonthly', { count: parseInt(installmentMonth) }) }</span>
               </>
           }
         </div>
@@ -231,11 +234,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: parseInt(billingInfo?.installmentMonth || '0') }) }</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,14 +1,16 @@
 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';
-import { AllTracsactionStatusCode } from '../../model/contant';
+import { getAllTransactionStatusCode } from '../../model/contant';
 
 export const ImportantInfoSection = ({
   transactionCategory,
   importantInfo,
   serviceCode
 }: InfoSectionProps) => {
+  const { t } = useTranslation();
   let serviceCodes = useStore.getState().CommonStore.serviceCodes;
   let serviceName = '';
   let statusName = '';
@@ -27,15 +29,16 @@ export const ImportantInfoSection = ({
   const getStatusName = (serviceCode: string, statusCode: string) => {
     let str;
     if(transactionCategory === TransactionCategory.AllTransaction){
-      Loop1: 
-      for(let i=0;i<AllTracsactionStatusCode.length;i++){
-        if(serviceCode === AllTracsactionStatusCode[i]?.serviceCode){
-          let list = AllTracsactionStatusCode[i]?.list;
+      const allTransactionStatusCode = getAllTransactionStatusCode(t);
+      Loop1:
+      for(let i=0;i<allTransactionStatusCode.length;i++){
+        if(serviceCode === allTransactionStatusCode[i]?.serviceCode){
+          let list = allTransactionStatusCode[i]?.list;
           if(!!list){
             Loop2:
             for(let j=0;j<list.length;j++){
               if(list[j]?.code === statusCode){
-                str = list[j]?.ko;
+                str = list[j]?.name;
                 break Loop1;
               }
             }
@@ -60,15 +63,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 +149,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>
               }

src/entities/vat-return/model/contant.ts

@@ -1,19 +1,20 @@
+import { TFunction } from 'i18next';
 import { VatReturnPayTax, VatReturnReceiptType, VatReturnTargetType } from './types';
 
-export const VatReturnReceiptTypeBtnGroup = [
-  {name: '전체', value: VatReturnReceiptType.ALL },
-  {name: '영수', value: VatReturnReceiptType.RECEIPT },
-  {name: '청구', value: VatReturnReceiptType.BILL }
+export const getVatReturnReceiptTypeBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: VatReturnReceiptType.ALL },
+  {name: t('vatReturn.receipt'), value: VatReturnReceiptType.RECEIPT },
+  {name: t('vatReturn.bill'), value: VatReturnReceiptType.BILL }
 ];
 
-export const VatReturnTargetTypeBtnGroup = [
-  {name: '전체', value: VatReturnTargetType.ALL },
-  {name: '일반', value: VatReturnTargetType.GENERAL },
-  {name: '차액정산', value: VatReturnTargetType.DIFFERENCE_COLLECTION },
-  {name: '환급정산', value: VatReturnTargetType.REFUND_SETTLEMENT }
+export const getVatReturnTargetTypeBtnGroup = (t: TFunction) => [
+  {name: t('transaction.constants.all'), value: VatReturnTargetType.ALL },
+  {name: t('vatReturn.general'), value: VatReturnTargetType.GENERAL },
+  {name: t('vatReturn.differenceSettlement'), value: VatReturnTargetType.DIFFERENCE_COLLECTION },
+  {name: t('vatReturn.refundSettlement'), value: VatReturnTargetType.REFUND_SETTLEMENT }
 ];
 
-export const VatReturnTaxBtnGroups = [
-  {name: '과세', value: VatReturnPayTax.TAX },
-  {name: '면세', value: VatReturnPayTax.NOTAX },
+export const getVatReturnTaxBtnGroups = (t: TFunction) => [
+  {name: t('vatReturn.taxable'), value: VatReturnPayTax.TAX },
+  {name: t('vatReturn.taxExempt'), value: VatReturnPayTax.NOTAX },
 ];

src/entities/vat-return/ui/filter/list-filter.tsx

@@ -1,11 +1,12 @@
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { VatReturnReceiptType, VatReturnTargetType } from '../../model/types';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { useState } from 'react';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
-import { VatReturnReceiptTypeBtnGroup, VatReturnTargetTypeBtnGroup } from '../../model/contant';
+import { getVatReturnReceiptTypeBtnGroup, getVatReturnTargetTypeBtnGroup } from '../../model/contant';
 import { FilterCalendarMonth } from '@/shared/ui/filter/calendar-month';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
@@ -39,13 +40,14 @@ export const ListFilter = ({
   setReceiptType,
   setTargetType
 }: ListFilterProps) => {
+  const { t } = useTranslation();
 
   const [filterMid, setFilterMid] = useState<string>(mid);
   const [filterStartMonth, setFilterStartMonth] = useState<string>(startMonth);
   const [filterEndMonth, setFilterEndMonth] = useState<string>(endMonth);
   const [filterReceiptType, setFIlterReceiptType] = useState<VatReturnReceiptType>(receiptType);
   const [filterTargetType, setFilterTargetType] = useState<VatReturnTargetType>(targetType);
-  
+
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
   const onClickToClose = () => {
@@ -73,51 +75,51 @@ export const ListFilter = ({
       >
         <div className="full-menu-container">
           <div className="full-menu-header">
-            <div className="full-menu-title center">필터</div>
+            <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button 
+              <button
                 className="full-menu-close"
                 onClick={ () => onClickToClose() }
               >
-                <img 
+                <img
                   src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt="닫기"
+                  alt={t('common.close')}
                 />
               </button>
             </div>
           </div>
-    
+
           <div className="option-list pt-16">
             <FilterSelectMid
-              title='가맹점'
+              title={t('merchant.title')}
               selectSetter={ setMid }
               showType={ 'GID' }
             ></FilterSelectMid>
             <FilterCalendarMonth
-              title='발행월'
+              title={t('vatReturn.issuanceMonth')}
               startMonth={ filterStartMonth }
               endMonth={ filterEndMonth }
               setStartMonth={ setFilterStartMonth }
               setEndMonth={ setFilterEndMonth }
             ></FilterCalendarMonth>
             <FilterButtonGroups
-              title='영수구분'
+              title={t('vatReturn.receiptType')}
               activeValue={ filterReceiptType }
-              btnGroups={ VatReturnReceiptTypeBtnGroup }
+              btnGroups={ getVatReturnReceiptTypeBtnGroup(t) }
               setter={ setFIlterReceiptType }
             ></FilterButtonGroups>
             <FilterButtonGroups
-              title='발행대상'
+              title={t('vatReturn.issueTarget')}
               activeValue={ filterTargetType }
-              btnGroups={ VatReturnTargetTypeBtnGroup }
+              btnGroups={ getVatReturnTargetTypeBtnGroup(t) }
               setter={ setFilterTargetType }
             ></FilterButtonGroups>
           </div>
           <div className="apply-row">
-            <button 
+            <button
               className="btn-50 btn-blue flex-1"
               onClick={ onClickToSetFilter }
-            >적용</button>
+            >{t('filter.apply')}</button>
           </div>
         </div>
       </motion.div>

src/entities/vat-return/ui/reference-wrap.tsx

@@ -6,7 +6,7 @@ import { FilterSelect } from '@/shared/ui/filter/select';
 import { ReferenceRequestSuccess } from './reference-request-success';
 import { ReferenceRequestFail } from './reference-request-fail';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
-import { VatReturnTaxBtnGroups } from '../model/contant';
+import { getVatReturnTaxBtnGroups } from '../model/contant';
 import { VatReturnPayTax, VatReturnReferenceRequestParams, VatReturnReferenceRequestResponse } from '../model/types';
 import { useStore } from '@/shared/model/store';
 import { useVatReturnReferenceRequestMutation } from '../api/use-vat-return-reference-request-mutation';
@@ -41,7 +41,7 @@ export const ReferenceWrap = () => {
     vatReturnReferenceRequest(params).then((rs: VatReturnReferenceRequestResponse) => {
       setSuccessPageOn(true);
     }).catch((error) => {
-      setErrorMsg("[9997] 키인가맹점이 아닙니다.<br/>NICEPAY로 문의하세요.");
+      setErrorMsg(t('vatReturn.keyInMerchantError'));
       setFailPageOn(true);
     }); 
   };
@@ -58,7 +58,7 @@ export const ReferenceWrap = () => {
         <FilterButtonGroups
           title={t('vatReturn.taxExemptionType')}
           activeValue={ payTax }
-          btnGroups={ VatReturnTaxBtnGroups }
+          btnGroups={ getVatReturnTaxBtnGroups(t) }
           setter={ setPayTax }
           addClassName='horizon'
           maxBtn={ 2 }