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

- 정산 페이지 다국어화 (정산조회, 정산내역 상세) - 거래 페이지 다국어화 (거래내역 조회, 거래 취소, 거래내역 상세) - 정산 엔티티 컴포넌트 다국어화 (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/pages/transaction/all-transaction/cancel-page.tsx
+++ b/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>
--- a/src/pages/transaction/all-transaction/detail-page.tsx
+++ b/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 = '거래를 취소하시겠습니까?';
-    
-    overlay.open(({ 
+    let msg = t('transaction.confirmCancel');
+
+    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>
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/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='원'
-                  ></NumericFormat> 
+                    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="검색옵션"
+										<img
+                      src={ IMAGE_ROOT + '/ico_setting.svg' }
+                      alt={t('transaction.searchOptions')}
                      onClick={ () => onClickToOpenFilter() }
                    />
 									</button>
 									<button className="download-btn">
-										<img 
-                      src={ IMAGE_ROOT + '/ico_download.svg' } 
-                      alt="다운로드"
+										<img
+                      src={ IMAGE_ROOT + '/ico_download.svg' }
+                      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='총 '
-                      suffix=' 건'
+                      prefix={t('transaction.total') + ' '}
+                      suffix={' ' + t('home.count')}
                    ></NumericFormat>
                  </span>
 								</div>