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

- 정산 페이지 다국어화 (정산조회, 정산내역 상세)
- 거래 페이지 다국어화 (거래내역 조회, 거래 취소, 거래내역 상세)
- 정산 엔티티 컴포넌트 다국어화 (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,7 +1,8 @@
 import { NumericFormat } from 'react-number-format';
-import { 
+import { useTranslation } from 'react-i18next';
-  InfoWrapKeys, 
+import {
-  AmountInfoWrapProps, 
+  InfoWrapKeys,
+  AmountInfoWrapProps,
   SettlementPeriodType
 } from '@/entities/settlement/model/types';
 
@@ -10,24 +11,26 @@ 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 } 
+                  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 } 
+                  value={ amountInfo?.totalTransactionCount }
                   thousandSeparator
                   displayType="text"
                   prefix=' ('
@@ -36,16 +39,17 @@ 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 } 
+                      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 } 
+                      value={ amountInfo?.creditCardCount }
                       thousandSeparator
                       displayType="text"
                       prefix=' ('
@@ -54,16 +58,17 @@ 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 } 
+                      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 } 
+                      value={ amountInfo?.accountTransferCount }
                       thousandSeparator
                       displayType="text"
                       prefix=' ('
@@ -74,40 +79,40 @@ 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 } 
+                  value={ amountInfo?.totalPgFee }
                   thousandSeparator
                   displayType="text"
                 ></NumericFormat>
               </span>
               <ul className="txn-amount-detail">
                 <li>
-                  <span>·&nbsp;&nbsp;결제수수료</span>
+                  <span>·&nbsp;&nbsp;{t('settlement.paymentFee')}</span>
                   <span>
                     <NumericFormat
-                      value={ amountInfo?.paymentFee } 
+                      value={ amountInfo?.paymentFee }
                       thousandSeparator
                       displayType="text"
                     ></NumericFormat>
                   </span>
                 </li>
                 <li>
-                  <span>·&nbsp;&nbsp;에스크로 수수료</span>
+                  <span>·&nbsp;&nbsp;{t('settlement.escrowFee')}</span>
                   <span>
                     <NumericFormat
-                      value={ amountInfo?.escrowFee } 
+                      value={ amountInfo?.escrowFee }
                       thousandSeparator
                       displayType="text"
                     ></NumericFormat>
                   </span>
                 </li>
                 <li>
-                  <span>·&nbsp;&nbsp;인증 수수료</span>
+                  <span>·&nbsp;&nbsp;{t('settlement.authFee')}</span>
                   <span>
                     <NumericFormat
-                      value={ amountInfo?.authFee } 
+                      value={ amountInfo?.authFee }
                       thousandSeparator
                       displayType="text"
                     ></NumericFormat>
@@ -117,7 +122,7 @@ export const AmountInfoWrap = ({
                   <span>·&nbsp;&nbsp;VAT</span>
                   <span>
                     <NumericFormat
-                      value={ amountInfo?.vatFee } 
+                      value={ amountInfo?.vatFee }
                       thousandSeparator
                       displayType="text"
                     ></NumericFormat>
@@ -126,40 +131,40 @@ 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 } 
+                  value={ amountInfo?.holdAmount }
                   thousandSeparator
                   displayType="text"
                 ></NumericFormat>
               </span>
             </li>
             <li className="kv-row">
-              <span className="k">해제</span>
+              <span className="k">{t('settlement.release')}</span>
               <span className="v">
                 <NumericFormat
-                  value={ amountInfo?.releaseAmount } 
+                  value={ amountInfo?.releaseAmount }
                   thousandSeparator
                   displayType="text"
                 ></NumericFormat>
               </span>
             </li>
             <li className="kv-row">
-              <span className="k">상계</span>
+              <span className="k">{t('settlement.offset')}</span>
               <span className="v">
                 <NumericFormat
-                  value={ amountInfo?.offsetAmount } 
+                  value={ amountInfo?.offsetAmount }
                   thousandSeparator
                   displayType="text"
                 ></NumericFormat>
               </span>
             </li>
             <li className="kv-row bolder">
-              <span className="k">정산금액</span>
+              <span className="k">{t('settlement.settlementAmount')}</span>
               <span className="v">
                 <NumericFormat
-                  value={ settlementAmount } 
+                  value={ settlementAmount }
                   thousandSeparator
                   displayType="text"
                 ></NumericFormat>
@@ -167,49 +172,53 @@ export const AmountInfoWrap = ({
             </li>
           </ul>
         }
-        { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
+        { (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 } 
+                  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 } 
+                  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 } 
+                  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 } 
+                  value={ amountInfo?.authFee }
                   thousandSeparator
                   displayType="text"
-                  suffix='원'
+                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
                 ></NumericFormat>
               </span>
             </li>
@@ -217,43 +226,47 @@ export const AmountInfoWrap = ({
               <span className="k">VAT</span>
               <span className="v">
                 <NumericFormat
-                  value={ amountInfo?.vatFee } 
+                  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 } 
+                  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 } 
+                  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 } 
+                  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,23 +55,24 @@ 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>
             </>
           }
         </div>
         <div className="transaction-amount">
-          { 
+          {
             <NumericFormat
-              value={ settlementAmount || transactionAmount } 
+              value={ settlementAmount || transactionAmount }
               thousandSeparator
               displayType="text"
-              suffix='원'
+              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            ></NumericFormat> 
+              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
+            ></NumericFormat>
           }
         </div>
       </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);
@@ -371,38 +373,39 @@ export const ListWrap = ({
               readOnly={ true }
             />
             <button className="filter-btn">
-              <img 
+              <img
-                src={ IMAGE_ROOT + '/ico_setting.svg' } 
+                src={ IMAGE_ROOT + '/ico_setting.svg' }
-                alt="검색옵션"
+                alt={t('transaction.searchOptions')}
                 onClick={ () => onClickToOpenFilter() }
               />
             </button>
           </div>
           <button className="download-btn">
-            <img 
+            <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 } 
+              value={ settlementAmount }
               thousandSeparator
               displayType="text"
-              suffix={ '원' }
+              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
+              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
             ></NumericFormat>
           </span>
           <button
             onClick={ () => setIsOpenSummary(!isOpenSummary) }
           >
-            <img 
+            <img
               className={`ic20 ${(isOpenSummary)? '': 'rot-180'}`}
-              src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' } 
+              src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' }
-              alt="화살표"
+              alt={t('settlement.arrow')}
             />
           </button>
         </div>
@@ -445,14 +448,14 @@ export const ListWrap = ({
         ></SortTypeBox>
         <div>
           <div className="full-menu-keywords no-padding">
-            <span 
+            <span
               className={ `keyword-tag ${(periodType === SettlementPeriodType.SETTLEMENT_DATE)? 'active': ''}` }
               onClick={ () => changePeriodType(SettlementPeriodType.SETTLEMENT_DATE) }
-            >가맹점 기준</span>
+            >{t('settlement.merchantBasis')}</span>
-            <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

@@ -1,14 +1,16 @@
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { 
+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){
@@ -23,14 +25,14 @@ export const SettlementTab = ({
   return(
     <>
       <div className="subTab">
-        <button 
+        <button
           className={`subtab-btn ${(activeTab === SettlementTabKeys.Calendar)? 'active': ''}` }
-          onClick={ () => onClickToNavigation(SettlementTabKeys.Calendar) } 
+          onClick={ () => onClickToNavigation(SettlementTabKeys.Calendar) }
-        >정산달력</button>
+        >{t('settlement.calendar')}</button>
-        <button 
+        <button
           className={`subtab-btn ${(activeTab === SettlementTabKeys.List)? 'active': ''}` }
-          onClick={ () => onClickToNavigation(SettlementTabKeys.List) } 
+          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

@@ -5,19 +5,21 @@ import { SettlementTab } from '@/entities/settlement/ui/settlement-tab';
 import { CalendarWrap } from '@/entities/settlement/ui/calandar-wrap';
 import { SettlementTabKeys } from '@/entities/settlement/model/types';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
+import {
 	useSetHeaderTitle,
 	useSetHeaderType,
 	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

@@ -18,7 +18,7 @@ import {
   TransactionInfo
 } from '@/entities/settlement/model/types';
 import {
-  useSetOnBack, 
+  useSetOnBack,
   useSetHeaderTitle,
   useSetHeaderType,
   useSetFooterMode
@@ -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>();
@@ -50,9 +52,9 @@ export const DetailPage = () => {
   const approvalNumber = location.state.approvalNumber;
   const periodType = location.state.periodType;
   const tid = location.state.tid;
-  
 
-  useSetHeaderTitle('정산내역 상세');
+
+  useSetHeaderTitle(t('settlement.detailTitle'));
   useSetHeaderType(HeaderType.RightClose);
   useSetOnBack(() => {
     navigate(PATHS.settlement.list);
@@ -109,29 +111,33 @@ export const DetailPage = () => {
           <div className="tab-pane sub active">
             <div className="option-list">
               <div className="txn-detail">
-                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
+                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
                   <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 } 
+                          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>
                   </div>
                 }
-                { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
+                { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
                   <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 } 
+                          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

@@ -7,15 +7,17 @@ import { ListWrap } from '@/entities/settlement/ui/list-wrap';
 import { SettlementTabKeys } from '@/entities/settlement/model/types'; 
 import { FooterItemActiveKey } from '@/entities/common/model/types';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
+import {
 	useSetHeaderTitle,
 	useSetHeaderType,
 	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

@@ -13,7 +13,7 @@ import {
   DebtPreventionCancelDisplayInfo,
   DebtPreventionCancelRequestInfo
 } from '@/entities/transaction/model/types';
-import { 
+import {
   useSetHeaderTitle,
   useSetHeaderType,
   useSetFooterMode
@@ -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);
 
@@ -156,15 +158,15 @@ export const AllTransactionCancelPage = () => {
         <div className="tab-content">
           <div className="tab-pane pt-46 active">
             <div className="subTab">
-              <button 
+              <button
                 className={ `subtab-btn ${(tabAction === CancelTabKeys.All)? 'active': ''}` }
                 onClick={ () => onClickToChangeTab(CancelTabKeys.All) }
-              >전체 취소</button>
+              >{t('transaction.fullCancel')}</button>
               { !!partCancelCl &&
-                <button 
+                <button
                   className={ `subtab-btn ${(tabAction === CancelTabKeys.Part)? 'active': ''}` }
                   onClick={ () => onClickToChangeTab(CancelTabKeys.Part) }
-                >부분 취소</button>
+                >{t('transaction.partialCancel')}</button>
               }
             </div>
             <div className="cancel-list pt-30">
@@ -237,10 +239,10 @@ export const AllTransactionCancelPage = () => {
               }
             </div>
             <div className="apply-row">
-              <button 
+              <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

@@ -25,14 +25,16 @@ import {
   InfoSectionKeys
 } from '@/entities/transaction/model/types';
 import {
-  useSetOnBack, 
+  useSetOnBack,
   useSetHeaderTitle,
   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,9 +91,9 @@ export const AllTransactionDetailPage = () => {
   };
 
   const onClickToCancel = () => {
-    let msg = '거래를 취소하시겠습니까?';
+    let msg = t('transaction.confirmCancel');
-    
+
-    overlay.open(({ 
+    overlay.open(({
       isOpen,
       close,
       unmount
@@ -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')]}
         />
       );
     });
@@ -198,10 +200,10 @@ export const AllTransactionDetailPage = () => {
               </div>
             </div>
             <div className="apply-row">
-              <button 
+              <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

@@ -22,7 +22,7 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { AllTransactionFilter } from '@/entities/transaction/ui/filter/all-transaction-filter';
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { SortTypeKeys, HeaderType, DefaultRequestPagination } from '@/entities/common/model/types';
-import { 
+import {
 	useSetOnBack,
 	useSetHeaderTitle,
 	useSetHeaderType,
@@ -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 } 
+                    value={ totalAmount }
                     thousandSeparator
                     displayType="text"
-                    suffix='원'
+                    prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  ></NumericFormat> 
+                    suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
+                  ></NumericFormat>
                 </span>
 								<div className="summary-actions">
 									<button className="filter-btn">
-										<img 
+										<img
-                      src={ IMAGE_ROOT + '/ico_setting.svg' } 
+                      src={ IMAGE_ROOT + '/ico_setting.svg' }
-                      alt="검색옵션"
+                      alt={t('transaction.searchOptions')}
                       onClick={ () => onClickToOpenFilter() }
                     />
 									</button>
 									<button className="download-btn">
-										<img 
+										<img
-                      src={ IMAGE_ROOT + '/ico_download.svg' } 
+                      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 } 
+                      value={ totalCount }
                       thousandSeparator
                       displayType="text"
-                      prefix='총 '
+                      prefix={t('transaction.total') + ' '}
-                      suffix=' 건'
+                      suffix={' ' + t('home.count')}
                     ></NumericFormat>
                   </span>
 								</div>