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

- 정산 페이지 다국어화 (정산조회, 정산내역 상세)
- 거래 페이지 다국어화 (거래내역 조회, 거래 취소, 거래내역 상세)
- 정산 엔티티 컴포넌트 다국어화 (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>

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>

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>

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>

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>

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>

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>
     </>
   );

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

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": "거래를 취소하시겠습니까?"
     }
 }

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(() => {

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>

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(() => {

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>

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>

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='총 '
+                      prefix={t('transaction.total') + ' '}
-                      suffix=' 건'
+                      suffix={' ' + t('home.count')}
                     ></NumericFormat>
                   </span>
 								</div>