정산 및 거래 페이지 다국어화 및 통화 표기 개선

- 정산 페이지 다국어화 (정산조회, 정산내역 상세) - 거래 페이지 다국어화 (거래내역 조회, 거래 취소, 거래내역 상세) - 정산 엔티티 컴포넌트 다국어화 (list-wrap, list-item, amount-info-wrap) - 정산 탭 컴포넌트 다국어화 (정산달력, 정산내역) - 홈 화면 통화 표기 개선 (한국어: 999,999원 / 영어: ₩999,999) - 정산 및 거래 페이지 통화 표기 개선 (prefix/suffix 동적 처리) - 요일 번역 기능 (월요일-일요일 → Monday-Sunday) - 번역 키 추가: settlement, transaction 네임스페이스 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-29 17:38:20 +09:00
parent f4963143aa
commit aedf5d3d8f
14 changed files with 278 additions and 144 deletions
--- a/src/entities/home/ui/day-status-box-container1.tsx
+++ b/src/entities/home/ui/day-status-box-container1.tsx
@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';

 export const BoxContainer1 = () => {
  const { navigate } = useNavigate();
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
  const userMid = useStore.getState().UserStore.mid;

  const [mid, setMid] = useState<string>(userMid);
@@ -75,7 +75,8 @@ export const BoxContainer1 = () => {
              value={ sales?.todayTotalAmount }
              thousandSeparator
              displayType="text"
-              suffix={t('home.currencyWon')}
+              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
            ></NumericFormat>
          </span>
          <span className={ `per ${(increaseRate && increaseRate >= 0)? 'plus': 'minus'}` }>
@@ -128,7 +129,8 @@ export const BoxContainer1 = () => {
              value={ settlement?.todaySettlementAmount }
              thousandSeparator
              displayType="text"
-              suffix={t('home.currencyWon')}
+              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
            ></NumericFormat>
          </span>
          <span className="per">{t('home.depositCompleted')}</span>
@@ -164,7 +166,8 @@ export const BoxContainer1 = () => {
                value={ settlement?.availableCredit }
                thousandSeparator
                displayType="text"
-                suffix={t('home.currencyWon')}
+                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
              ></NumericFormat>
            </strong>
          </div>
--- a/src/entities/home/ui/day-status-box-container2.tsx
+++ b/src/entities/home/ui/day-status-box-container2.tsx
@@ -116,7 +116,8 @@ export const BoxContainer2 = () => {
                value={ sales?.currentMonthAmount }
                thousandSeparator
                displayType="text"
-                suffix={t('home.currencyWon')}
+                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
              ></NumericFormat>
            </span>
            <span className={ `per ${(salesIncrease && salesIncrease >= 0)? 'plus': 'minus'}` }>
@@ -145,7 +146,8 @@ export const BoxContainer2 = () => {
                value={ settlement?.currentMonthSettlementAmount }
                thousandSeparator
                displayType="text"
-                suffix={t('home.currencyWon')}
+                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
              ></NumericFormat>
            </span>
            <span className={ `per ${(settlementIncrease && settlementIncrease >= 0)? 'plus': 'minus'}` }>
@@ -180,7 +182,8 @@ export const BoxContainer2 = () => {
                value={ averageTransactionAmount }
                thousandSeparator
                displayType="text"
-                suffix={t('home.currencyWon')}
+                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
              ></NumericFormat>
            </span>
          </div>
@@ -193,13 +196,14 @@ export const BoxContainer2 = () => {
                value={ dailyAverageSales }
                thousandSeparator
                displayType="text"
-                suffix={t('home.currencyWon')}
+                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
              ></NumericFormat>
              (<NumericFormat
                value={ dailyAverageCount }
                thousandSeparator
                displayType="text"
-                suffix={t('home.currencyWon')}
+                suffix={t('home.count')}
              ></NumericFormat>)
            </span>
          </div>
--- a/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
+++ b/src/entities/settlement/ui/info-wrap/amount-info-wrap.tsx
@@ -1,4 +1,5 @@
 import { NumericFormat } from 'react-number-format';
+import { useTranslation } from 'react-i18next';
 import {
  InfoWrapKeys,
  AmountInfoWrapProps,
@@ -10,21 +11,23 @@ export const AmountInfoWrap = ({
  amountInfo,
  settlementAmount
 }: AmountInfoWrapProps) => {
+  const { t, i18n } = useTranslation();

  return (
    <>
      <div className="txn-section">
-        <div className="section-title">금액 정보</div>
+        <div className="section-title">{t('settlement.amountInfo')}</div>
        { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
          <ul className="kv-list">
            <li className="kv-row">
-              <span className="k">거래금액 합계</span>
+              <span className="k">{t('settlement.totalTransactionAmount')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.totalTransactionAmount }
                  thousandSeparator
                  displayType="text"
-                  suffix='원'
+                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                ></NumericFormat>
                <NumericFormat
                  value={ amountInfo?.totalTransactionCount }
@@ -36,13 +39,14 @@ export const AmountInfoWrap = ({
              </span>
              <ul className="txn-amount-detail">
                <li>
-                  <span>·&nbsp;&nbsp;신용카드</span>
+                  <span>·&nbsp;&nbsp;{t('settlement.creditCard')}</span>
                  <span className="unset-child-span">
                    <NumericFormat
                      value={ amountInfo?.creditCardAmount }
                      thousandSeparator
                      displayType="text"
-                      suffix='원'
+                      prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                      suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                    ></NumericFormat>
                    <NumericFormat
                      value={ amountInfo?.creditCardCount }
@@ -54,13 +58,14 @@ export const AmountInfoWrap = ({
                  </span>
                </li>
                <li>
-                  <span>·&nbsp;&nbsp;계좌이체</span>
+                  <span>·&nbsp;&nbsp;{t('settlement.accountTransfer')}</span>
                  <span className="unset-child-span">
                    <NumericFormat
                      value={ amountInfo?.accountTransferAmount }
                      thousandSeparator
                      displayType="text"
-                      suffix='원'
+                      prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                      suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                    ></NumericFormat>
                    <NumericFormat
                      value={ amountInfo?.accountTransferCount }
@@ -74,7 +79,7 @@ export const AmountInfoWrap = ({
              </ul>
            </li>
            <li className="kv-row">
-              <span className="k">PG 수수료 합계</span>
+              <span className="k">{t('settlement.totalPgFee')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.totalPgFee }
@@ -84,7 +89,7 @@ export const AmountInfoWrap = ({
              </span>
              <ul className="txn-amount-detail">
                <li>
-                  <span>·&nbsp;&nbsp;결제수수료</span>
+                  <span>·&nbsp;&nbsp;{t('settlement.paymentFee')}</span>
                  <span>
                    <NumericFormat
                      value={ amountInfo?.paymentFee }
@@ -94,7 +99,7 @@ export const AmountInfoWrap = ({
                  </span>
                </li>
                <li>
-                  <span>·&nbsp;&nbsp;에스크로 수수료</span>
+                  <span>·&nbsp;&nbsp;{t('settlement.escrowFee')}</span>
                  <span>
                    <NumericFormat
                      value={ amountInfo?.escrowFee }
@@ -104,7 +109,7 @@ export const AmountInfoWrap = ({
                  </span>
                </li>
                <li>
-                  <span>·&nbsp;&nbsp;인증 수수료</span>
+                  <span>·&nbsp;&nbsp;{t('settlement.authFee')}</span>
                  <span>
                    <NumericFormat
                      value={ amountInfo?.authFee }
@@ -126,7 +131,7 @@ export const AmountInfoWrap = ({
              </ul>
            </li>
            <li className="kv-row">
-              <span className="k">보류</span>
+              <span className="k">{t('settlement.hold')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.holdAmount }
@@ -136,7 +141,7 @@ export const AmountInfoWrap = ({
              </span>
            </li>
            <li className="kv-row">
-              <span className="k">해제</span>
+              <span className="k">{t('settlement.release')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.releaseAmount }
@@ -146,7 +151,7 @@ export const AmountInfoWrap = ({
              </span>
            </li>
            <li className="kv-row">
-              <span className="k">상계</span>
+              <span className="k">{t('settlement.offset')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.offsetAmount }
@@ -156,7 +161,7 @@ export const AmountInfoWrap = ({
              </span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">정산금액</span>
+              <span className="k">{t('settlement.settlementAmount')}</span>
              <span className="v">
                <NumericFormat
                  value={ settlementAmount }
@@ -170,46 +175,50 @@ export const AmountInfoWrap = ({
        { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
          <ul className="kv-list">
            <li className="kv-row">
-              <span className="k">거래금액</span>
+              <span className="k">{t('settlement.transactionAmount')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.transactionAmount }
                  thousandSeparator
                  displayType="text"
-                  suffix='원'
+                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row">
-              <span className="k">결제 수수료</span>
+              <span className="k">{t('settlement.paymentFee')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.paymentFee }
                  thousandSeparator
                  displayType="text"
-                  suffix='원'
+                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row">
-              <span className="k">에스크로 수수료</span>
+              <span className="k">{t('settlement.escrowFee')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.escrowFee }
                  thousandSeparator
                  displayType="text"
-                  suffix='원'
+                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row">
-              <span className="k">인증 수수료</span>
+              <span className="k">{t('settlement.authFee')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.authFee }
                  thousandSeparator
                  displayType="text"
-                  suffix='원'
+                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                ></NumericFormat>
              </span>
            </li>
@@ -220,40 +229,44 @@ export const AmountInfoWrap = ({
                  value={ amountInfo?.vatFee }
                  thousandSeparator
                  displayType="text"
-                  suffix='원'
+                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row">
-              <span className="k">정산예정금액</span>
+              <span className="k">{t('settlement.expectedSettlementAmount')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.settlementAmount }
                  thousandSeparator
                  displayType="text"
-                  suffix='원'
+                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row">
-              <span className="k">정산전 취소상계</span>
+              <span className="k">{t('settlement.preSettlementCancelOffset')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.preSettlementCancelOffset }
                  thousandSeparator
                  displayType="text"
-                  suffix='원'
+                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                ></NumericFormat>
              </span>
            </li>
            <li className="kv-row bolder">
-              <span className="k">정산금액</span>
+              <span className="k">{t('settlement.settlementAmount')}</span>
              <span className="v">
                <NumericFormat
                  value={ amountInfo?.finalSettlementAmount }
                  thousandSeparator
                  displayType="text"
-                  suffix='원'
+                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                ></NumericFormat>
              </span>
            </li>
--- a/src/entities/settlement/ui/list-item.tsx
+++ b/src/entities/settlement/ui/list-item.tsx
@@ -3,6 +3,7 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps, SettlementPeriodType } from '../model/types';
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';

 export const ListItem = ({
  periodType,
@@ -17,6 +18,7 @@ export const ListItem = ({
  transactionAmount
 }: ListItemProps) => {
  const { navigate } = useNavigate();
+  const { t, i18n } = useTranslation();
  const onClickToNavigate = () => {
    let detailId;
    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
@@ -53,11 +55,11 @@ export const ListItem = ({
            <>
              <div className="transaction-title">{ `${approvalNumber}(${mid})` }</div>
              <div className="transaction-details">
-                <span>{ (!!settlementDate)? '정산': (!!approvalDate)? '승인' : '' }</span>
+                <span>{ (!!settlementDate)? t('settlement.settled'): (!!approvalDate)? t('settlement.approved') : '' }</span>
                <span className="separator">|</span>
-                <span>정산 { moment(settlementDate).format('MM.DD') }</span>
+                <span>{t('settlement.settlementShort')} { moment(settlementDate).format('MM.DD') }</span>
                <span className="separator">|</span>
-                <span>승인 { moment(approvalDate).format('MM.DD') }</span>
+                <span>{t('settlement.approvalShort')} { moment(approvalDate).format('MM.DD') }</span>
              </div>
            </>
          }
@@ -68,7 +70,8 @@ export const ListItem = ({
              value={ settlementAmount || transactionAmount }
              thousandSeparator
              displayType="text"
-              suffix='원'
+              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
            ></NumericFormat>
          }
        </div>
--- a/src/entities/settlement/ui/list-wrap.tsx
+++ b/src/entities/settlement/ui/list-wrap.tsx
@@ -33,6 +33,7 @@ import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { useTranslation } from 'react-i18next';

 export interface ListWrapProps {
  startDateFromCalendar?: string;
@@ -44,6 +45,7 @@ export const ListWrap = ({
  endDateFromCalendar
 }: ListWrapProps) => {
  const { navigate } = useNavigate();
+  const { t, i18n } = useTranslation();
  const userMid = useStore.getState().UserStore.mid;
  
  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
@@ -373,7 +375,7 @@ export const ListWrap = ({
            <button className="filter-btn">
              <img
                src={ IMAGE_ROOT + '/ico_setting.svg' }
-                alt="검색옵션"
+                alt={t('transaction.searchOptions')}
                onClick={ () => onClickToOpenFilter() }
              />
            </button>
@@ -381,19 +383,20 @@ export const ListWrap = ({
          <button className="download-btn">
            <img
              src={ IMAGE_ROOT + '/ico_download.svg' }
-              alt="다운로드"
+              alt={t('transaction.download')}
              onClick={ () => onClickToDownloadExcel() }
            />
          </button>
        </div>
-        <div className="summary-label label">정산금액</div>
+        <div className="summary-label label">{t('settlement.settlementAmount')}</div>
        <div className="summary-amount divTop">
          <span className="amount-text">
            <NumericFormat
              value={ settlementAmount }
              thousandSeparator
              displayType="text"
-              suffix={ '원' }
+              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
            ></NumericFormat>
          </span>
          <button
@@ -402,7 +405,7 @@ export const ListWrap = ({
            <img
              className={`ic20 ${(isOpenSummary)? '': 'rot-180'}`}
              src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' }
-              alt="화살표"
+              alt={t('settlement.arrow')}
            />
          </button>
        </div>
@@ -448,11 +451,11 @@ export const ListWrap = ({
            <span
              className={ `keyword-tag ${(periodType === SettlementPeriodType.SETTLEMENT_DATE)? 'active': ''}` }
              onClick={ () => changePeriodType(SettlementPeriodType.SETTLEMENT_DATE) }
-            >가맹점 기준</span>
+            >{t('settlement.merchantBasis')}</span>
            <span
              className={ `keyword-tag ${(periodType === SettlementPeriodType.TRANSACTION_DATE)? 'active': ''}` }
              onClick={ () => changePeriodType(SettlementPeriodType.TRANSACTION_DATE) }
-            >거래 기준</span>
+            >{t('settlement.transactionBasis')}</span>
          </div>
        </div>
      </div>
--- a/src/entities/settlement/ui/settlement-tab.tsx
+++ b/src/entities/settlement/ui/settlement-tab.tsx
@@ -4,11 +4,13 @@ import {
  SettlementTabKeys,
  SettlementTabProps
 } from '../model/types';
+import { useTranslation } from 'react-i18next';

 export const SettlementTab = ({
  activeTab
 }: SettlementTabProps) => {
  const { navigate } = useNavigate();
+  const { t } = useTranslation();

  const onClickToNavigation = (tab: SettlementTabKeys) => {
    if(activeTab !== tab){
@@ -26,11 +28,11 @@ export const SettlementTab = ({
        <button
          className={`subtab-btn ${(activeTab === SettlementTabKeys.Calendar)? 'active': ''}` }
          onClick={ () => onClickToNavigation(SettlementTabKeys.Calendar) }
-        >정산달력</button>
+        >{t('settlement.calendar')}</button>
        <button
          className={`subtab-btn ${(activeTab === SettlementTabKeys.List)? 'active': ''}` }
          onClick={ () => onClickToNavigation(SettlementTabKeys.List) }
-        >정산내역</button>
+        >{t('settlement.history')}</button>
      </div>
    </>
  );
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -220,7 +220,8 @@
        "comparedToPreviousMonth": "Compared to Previous Month",
        "totalSales": "Total Sales",
        "totalSettlement": "Total Settlement",
-        "currencyWon": "KRW",
+        "currencyWon": "",
+        "currencySymbol": "₩",
        "goToSales": "Go to Sales",
        "transactionInsights": "Transaction Insights",
        "basedOnLastWeek": "Based on Last Week",
@@ -230,5 +231,49 @@
        "topSalesHours": "Top Sales Hours",
        "topPaymentMethods": "Top Payment Methods",
        "noticesAndUpdates": "Notices & Updates"
+    },
+    "settlement": {
+        "title": "Settlement",
+        "calendar": "Calendar",
+        "history": "History",
+        "detailTitle": "Settlement Details",
+        "settlementAmount": "Settlement Amount",
+        "arrow": "Arrow",
+        "merchantBasis": "Merchant Basis",
+        "transactionBasis": "Transaction Basis",
+        "settled": "Settled",
+        "approved": "Approved",
+        "settlementShort": "Settlement",
+        "approvalShort": "Approval",
+        "amountInfo": "Amount Information",
+        "totalTransactionAmount": "Total Transaction Amount",
+        "creditCard": "Credit Card",
+        "accountTransfer": "Account Transfer",
+        "totalPgFee": "Total PG Fee",
+        "paymentFee": "Payment Fee",
+        "escrowFee": "Escrow Fee",
+        "authFee": "Auth Fee",
+        "hold": "Hold",
+        "release": "Release",
+        "offset": "Offset",
+        "transactionAmount": "Transaction Amount",
+        "expectedSettlementAmount": "Expected Settlement Amount",
+        "preSettlementCancelOffset": "Pre-Settlement Cancel Offset"
+    },
+    "transaction": {
+        "listTitle": "Transaction History",
+        "detailTitle": "Transaction Details",
+        "cancelTitle": "Cancel Transaction",
+        "fullCancel": "Full Cancel",
+        "partialCancel": "Partial Cancel",
+        "submit": "Submit",
+        "searchAmount": "Search Amount",
+        "searchDate": "Search Date",
+        "transactionCount": "Transaction Count",
+        "total": "Total",
+        "searchOptions": "Search Options",
+        "download": "Download",
+        "cancelTransaction": "Cancel Transaction",
+        "confirmCancel": "Do you want to cancel this transaction?"
    }
 }
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -235,5 +235,49 @@
        "topSalesHours": "매출이 가장 높은 시간",
        "topPaymentMethods": "가장 많이쓰인 결제 수단",
        "noticesAndUpdates": "공지 & 최신정보"
+    },
+    "settlement": {
+        "title": "정산조회",
+        "calendar": "정산달력",
+        "history": "정산내역",
+        "detailTitle": "정산내역 상세",
+        "settlementAmount": "정산금액",
+        "arrow": "화살표",
+        "merchantBasis": "가맹점 기준",
+        "transactionBasis": "거래 기준",
+        "settled": "정산",
+        "approved": "승인",
+        "settlementShort": "정산",
+        "approvalShort": "승인",
+        "amountInfo": "금액 정보",
+        "totalTransactionAmount": "거래금액 합계",
+        "creditCard": "신용카드",
+        "accountTransfer": "계좌이체",
+        "totalPgFee": "PG 수수료 합계",
+        "paymentFee": "결제 수수료",
+        "escrowFee": "에스크로 수수료",
+        "authFee": "인증 수수료",
+        "hold": "보류",
+        "release": "해제",
+        "offset": "상계",
+        "transactionAmount": "거래금액",
+        "expectedSettlementAmount": "정산예정금액",
+        "preSettlementCancelOffset": "정산전 취소상계"
+    },
+    "transaction": {
+        "listTitle": "거래내역 조회",
+        "detailTitle": "거래내역 상세",
+        "cancelTitle": "거래 취소",
+        "fullCancel": "전체 취소",
+        "partialCancel": "부분 취소",
+        "submit": "신청",
+        "searchAmount": "조회금액",
+        "searchDate": "조회일자",
+        "transactionCount": "거래건수",
+        "total": "총",
+        "searchOptions": "검색옵션",
+        "download": "다운로드",
+        "cancelTransaction": "거래 취소",
+        "confirmCancel": "거래를 취소하시겠습니까?"
    }
 }
--- a/src/pages/settlement/calendar/calendar-page.tsx
+++ b/src/pages/settlement/calendar/calendar-page.tsx
@@ -11,13 +11,15 @@ import {
 	useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useTranslation } from 'react-i18next';

 export const CalendarPage = () => {
  const { navigate } = useNavigate();
+  const { t } = useTranslation();

  const [activeTab, setActiveTab] = useState<SettlementTabKeys>(SettlementTabKeys.Calendar);

-  useSetHeaderTitle('정산조회');
+  useSetHeaderTitle(t('settlement.title'));
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
--- a/src/pages/settlement/list/detail-page.tsx
+++ b/src/pages/settlement/list/detail-page.tsx
@@ -27,9 +27,11 @@ import { useSettlementsHistoryDetailMutation } from '@/entities/settlement/api/u
 import { useSettlementsTransactionDetailMutation } from '@/entities/settlement/api/use-settlements-transaction-detail-mutation';
 import { NumericFormat } from 'react-number-format';
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';

 export const DetailPage = () => {
  const { navigate } = useNavigate();
+  const { t, i18n } = useTranslation();
  const location = useLocation();
  
  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
@@ -52,7 +54,7 @@ export const DetailPage = () => {
  const tid = location.state.tid;


-  useSetHeaderTitle('정산내역 상세');
+  useSetHeaderTitle(t('settlement.detailTitle'));
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
    navigate(PATHS.settlement.list);
@@ -113,11 +115,13 @@ export const DetailPage = () => {
                  <div className="txn-num-group">
                    <div className="txn-amount">
                      <div className="value">
+                        {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
                        <NumericFormat
                          value={ settlementAmount }
                          thousandSeparator
                          displayType="text"
-                        ></NumericFormat><span className="unit">원</span>
+                        ></NumericFormat>
+                        {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
                      </div>
                    </div>
                    <div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
@@ -127,11 +131,13 @@ export const DetailPage = () => {
                  <div className="txn-num-group">
                    <div className="txn-amount">
                      <div className="value">
+                        {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
                        <NumericFormat
                          value={ transactionAmount }
                          thousandSeparator
                          displayType="text"
-                        ></NumericFormat><span className="unit">원</span>
+                        ></NumericFormat>
+                        {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
                      </div>
                    </div>
                    <div className="txn-date">{ merchantName }</div>
--- a/src/pages/settlement/list/list-page.tsx
+++ b/src/pages/settlement/list/list-page.tsx
@@ -13,9 +13,11 @@ import {
 	useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useTranslation } from 'react-i18next';

 export const ListPage = () => {
  const { navigate } = useNavigate();
+  const { t } = useTranslation();
  const location = useLocation();

  const startDate: string | undefined  = location?.state?.startDate;
@@ -23,7 +25,7 @@ export const ListPage = () => {

  const [activeTab, setActiveTab] = useState<SettlementTabKeys>(SettlementTabKeys.List);

-  useSetHeaderTitle('정산조회');
+  useSetHeaderTitle(t('settlement.title'));
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
--- a/src/pages/transaction/all-transaction/cancel-page.tsx
+++ b/src/pages/transaction/all-transaction/cancel-page.tsx
@@ -23,14 +23,16 @@ import { NumericFormat } from 'react-number-format';
 import { useStore } from '@/shared/model/store';
 import { AllTransactionCancelPreventBond } from '@/entities/transaction/ui/all-transaction-cancel-prevent-bond';
 import { snackBar } from '@/shared/lib';
+import { useTranslation } from 'react-i18next';

 export const AllTransactionCancelPage = () => {
+  const { t } = useTranslation();
  const location = useLocation();
  const userInfo = useStore.getState().UserStore.userInfo;
  const tid = location.state.tid;
  const serviceCode = location.state.serviceCode;

-  useSetHeaderTitle('거래 취소');
+  useSetHeaderTitle(t('transaction.cancelTitle'));
  useSetHeaderType(HeaderType.RightClose);
  useSetFooterMode(false);

@@ -159,12 +161,12 @@ export const AllTransactionCancelPage = () => {
              <button
                className={ `subtab-btn ${(tabAction === CancelTabKeys.All)? 'active': ''}` }
                onClick={ () => onClickToChangeTab(CancelTabKeys.All) }
-              >전체 취소</button>
+              >{t('transaction.fullCancel')}</button>
              { !!partCancelCl &&
                <button
                  className={ `subtab-btn ${(tabAction === CancelTabKeys.Part)? 'active': ''}` }
                  onClick={ () => onClickToChangeTab(CancelTabKeys.Part) }
-                >부분 취소</button>
+                >{t('transaction.partialCancel')}</button>
              }
            </div>
            <div className="cancel-list pt-30">
@@ -240,7 +242,7 @@ export const AllTransactionCancelPage = () => {
              <button
                className="btn-50 btn-blue flex-1"
                onClick={ () => callTransactionCancel() }
-              >신청</button>
+              >{t('transaction.submit')}</button>
            </div>
          </div>
        </div>
--- a/src/pages/transaction/all-transaction/detail-page.tsx
+++ b/src/pages/transaction/all-transaction/detail-page.tsx
@@ -30,9 +30,11 @@ import {
  useSetHeaderType,
  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useTranslation } from 'react-i18next';

 export const AllTransactionDetailPage = () => {
  const { navigate } = useNavigate();
+  const { t } = useTranslation();
  const location = useLocation();
  const tid = location.state.tid;
  const serviceCode = location.state.serviceCode;
@@ -49,7 +51,7 @@ export const AllTransactionDetailPage = () => {
  const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
  const [showPartCancelInfo, setShowPartCancelInfo] = useState<boolean>(false);

-  useSetHeaderTitle('거래내역 상세');
+  useSetHeaderTitle(t('transaction.detailTitle'));
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
    navigate(PATHS.transaction.allTransaction.list);
@@ -89,7 +91,7 @@ export const AllTransactionDetailPage = () => {
  };

  const onClickToCancel = () => {
-    let msg = '거래를 취소하시겠습니까?';
+    let msg = t('transaction.confirmCancel');

    overlay.open(({
      isOpen,
@@ -104,7 +106,7 @@ export const AllTransactionDetailPage = () => {
          onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
          // onConfirmClick={ () => callCancelInfo() }
          message={ msg }
-          buttonLabel={['취소', '확인']}
+          buttonLabel={[t('common.cancel'), t('common.confirm')]}
        />
      );
    });
@@ -201,7 +203,7 @@ export const AllTransactionDetailPage = () => {
              <button
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToCancel() }
-              >거래 취소</button>
+              >{t('transaction.cancelTransaction')}</button>
            </div>
          </div>
        </div>
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/src/pages/transaction/all-transaction/list-page.tsx
@@ -30,9 +30,11 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { useTranslation } from 'react-i18next';

 export const AllTransactionListPage = () => {
  const { navigate } = useNavigate();
+  const { t, i18n } = useTranslation();
  const userMid = useStore.getState().UserStore.mid;

  const [serviceCodeOptions, setServiceCodeOptions] = useState<Array<Record<string, any>>>();
@@ -64,7 +66,7 @@ export const AllTransactionListPage = () => {

  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
      
-	useSetHeaderTitle('거래내역 조회');
+	useSetHeaderTitle(t('transaction.listTitle'));
 	useSetHeaderType(HeaderType.LeftArrow);
 	useSetOnBack(() => {
 		navigate(PATHS.home);
@@ -226,28 +228,29 @@ export const AllTransactionListPage = () => {
 				<div className="tab-content">
 					<div className="tab-pane sub active">
 						<div className="summary-section">
-							<div className="summary-label">조회금액</div>
+							<div className="summary-label">{t('transaction.searchAmount')}</div>
 							<div className="summary-amount">
 								<span className="amount-text">
                  <NumericFormat
                    value={ totalAmount }
                    thousandSeparator
                    displayType="text"
-                    suffix='원'
+                    prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                    suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                  ></NumericFormat>
                </span>
 								<div className="summary-actions">
 									<button className="filter-btn">
 										<img
                      src={ IMAGE_ROOT + '/ico_setting.svg' }
-                      alt="검색옵션"
+                      alt={t('transaction.searchOptions')}
                      onClick={ () => onClickToOpenFilter() }
                    />
 									</button>
 									<button className="download-btn">
 										<img
                      src={ IMAGE_ROOT + '/ico_download.svg' }
-                      alt="다운로드"
+                      alt={t('transaction.download')}
                      onClick={ () => onClickToDownloadExcel() }
                    />
 									</button>
@@ -255,18 +258,18 @@ export const AllTransactionListPage = () => {
 							</div>
 							<div className="summary-details">
 								<div className="detail-item">
-									<span className="detail-label">조회일자</span>
+									<span className="detail-label">{t('transaction.searchDate')}</span>
 									<span className="detail-value">{ moment(fromDate).format('YYYY.MM.DD') } ~ { moment(toDate).format('YYYY.MM.DD') }</span>
 								</div>
 								<div className="detail-item">
-									<span className="detail-label">거래건수</span>
+									<span className="detail-label">{t('transaction.transactionCount')}</span>
 									<span className="detail-value">
                    <NumericFormat
                      value={ totalCount }
                      thousandSeparator
                      displayType="text"
-                      prefix='총 '
-                      suffix=' 건'
+                      prefix={t('transaction.total') + ' '}
+                      suffix={' ' + t('home.count')}
                    ></NumericFormat>
                  </span>
 								</div>