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

src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx

@@ -47,13 +47,7 @@ export const TitleInfoWrap = ({
         <>
           <div className="num-amount">
             <span className="amount-text">
-              <NumericFormat
-                value={titleInfo?.amount}
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(titleInfo?.amount || 0) })}
             </span>
           </div>
           <div className="num-store">{titleInfo?.corpName}</div>
@@ -65,13 +59,7 @@ export const TitleInfoWrap = ({
         <>
           <div className="num-amount">
             <span className="amount-text">
-              <NumericFormat
-                value={titleInfo?.amount}
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(titleInfo?.amount || 0) })}
             </span>
           </div>
           <div className="num-store">{titleInfo?.corpName}</div>

src/entities/additional-service/ui/list-item.tsx

@@ -557,13 +557,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
       rs.push(
         <div className="transaction-amount">
-          <NumericFormat
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-          ></NumericFormat>
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
         </div>
       );
     }
@@ -572,13 +566,7 @@ export const ListItem = ({
     ) {
       rs.push(
         <div className="transaction-amount">
-          <NumericFormat
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-          ></NumericFormat>
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
         </div>
       );
     }
@@ -588,13 +576,7 @@ export const ListItem = ({
           key="payout-item-amount"
           className="transaction-amount"
         >
-          <NumericFormat
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-          ></NumericFormat>
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
         </div>
       );
     }
@@ -606,13 +588,7 @@ export const ListItem = ({
           key="fund-account-transfer-amount"
           className="transaction-amount"
         >
-          <NumericFormat
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-          ></NumericFormat>
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
         </div>
       );
     }
@@ -622,13 +598,7 @@ export const ListItem = ({
           key="payout-item-amount"
           className="transaction-amount"
         >
-          <NumericFormat
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-          ></NumericFormat>
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
         </div>
       );
     }

src/entities/home/ui/day-status-box-container1.tsx

@@ -71,13 +71,7 @@ export const BoxContainer1 = () => {
         <h3>{t('home.todaySales')}</h3>
         <div className="today-sales">
           <span className="won01">
-            <NumericFormat
-              value={ sales?.todayTotalAmount }
-              thousandSeparator
-              displayType="text"
-              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-            ></NumericFormat>
+            {t('home.money', { value: new Intl.NumberFormat('en-US').format(sales?.todayTotalAmount || 0) })}
           </span>
           <span className={ `per ${(increaseRate && increaseRate >= 0)? 'plus': 'minus'}` }>
             <NumericFormat
@@ -125,13 +119,7 @@ export const BoxContainer1 = () => {
         <h3>{t('home.todaySettlement')}</h3>
         <div className="today-sales">
           <span className="won02">
-            <NumericFormat
-              value={ settlement?.todaySettlementAmount }
-              thousandSeparator
-              displayType="text"
-              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-            ></NumericFormat>
+            {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.todaySettlementAmount || 0) })}
           </span>
           <span className="per">{t('home.depositCompleted')}</span>
           <a className="arrow">
@@ -162,13 +150,7 @@ export const BoxContainer1 = () => {
           <div className="remain-limit">
             <span>{t('home.remainingSettlementLimit')}</span>
             <strong style={{marginLeft: '4px'}}>
-              <NumericFormat
-                value={ settlement?.availableCredit }
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.availableCredit || 0) })}
             </strong>
           </div>
         </div>

src/entities/home/ui/day-status-box-container2.tsx

@@ -112,13 +112,7 @@ export const BoxContainer2 = () => {
           <h4>{t('home.totalSales')}</h4>
           <div className="today-sales mt-sty">
             <span className="won01">
-              <NumericFormat
-                value={ sales?.currentMonthAmount }
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(sales?.currentMonthAmount || 0) })}
             </span>
             <span className={ `per ${(salesIncrease && salesIncrease >= 0)? 'plus': 'minus'}` }>
               <NumericFormat
@@ -142,13 +136,7 @@ export const BoxContainer2 = () => {
           <h4>{t('home.totalSettlement')}</h4>
           <div className="today-sales mt-sty">
             <span className="won02">
-              <NumericFormat
-                value={ settlement?.currentMonthSettlementAmount }
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.currentMonthSettlementAmount || 0) })}
             </span>
             <span className={ `per ${(settlementIncrease && settlementIncrease >= 0)? 'plus': 'minus'}` }>
               <NumericFormat
@@ -178,13 +166,7 @@ export const BoxContainer2 = () => {
           <h4>{t('home.averageTransactionAmount')}</h4>
           <div className="two-account">
             <span>
-              <NumericFormat
-                value={ averageTransactionAmount }
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(averageTransactionAmount || 0) })}
             </span>
           </div>
         </div>
@@ -192,13 +174,7 @@ export const BoxContainer2 = () => {
           <h4>{t('home.dailyAverageSalesAndCount')}</h4>
           <div className="two-account">
             <span>
-              <NumericFormat
-                value={ dailyAverageSales }
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(dailyAverageSales || 0) })}
               (<NumericFormat
                 value={ dailyAverageCount }
                 thousandSeparator

src/entities/payment/ui/no-interest-info-bottom-sheet.tsx

@@ -103,13 +103,7 @@ export const NoInterestInfoBottomSheet = ({
               <div className="desc dot">
                 <span>{t('payment.applicationAmount')} : </span>
                 <span>
-                  <NumericFormat
-                    value={ value.applicationAmount }
-                    thousandSeparator
-                    displayType="text"
-                    prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                    suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                  ></NumericFormat>
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.applicationAmount || 0) })}
                 </span>
               </div>
             </>

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

@@ -22,13 +22,7 @@ export const AmountInfoWrap = ({
             <li className="kv-row">
               <span className="k">{t('settlement.totalTransactionAmount')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.totalTransactionAmount }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.totalTransactionAmount || 0) })}
                 <NumericFormat
                   value={ amountInfo?.totalTransactionCount }
                   thousandSeparator
@@ -41,13 +35,7 @@ export const AmountInfoWrap = ({
                 <li>
                   <span>·&nbsp;&nbsp;{t('settlement.creditCard')}</span>
                   <span className="unset-child-span">
-                    <NumericFormat
-                      value={ amountInfo?.creditCardAmount }
-                      thousandSeparator
-                      displayType="text"
-                      prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                      suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                    ></NumericFormat>
+                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.creditCardAmount || 0) })}
                     <NumericFormat
                       value={ amountInfo?.creditCardCount }
                       thousandSeparator
@@ -60,13 +48,7 @@ export const AmountInfoWrap = ({
                 <li>
                   <span>·&nbsp;&nbsp;{t('settlement.accountTransfer')}</span>
                   <span className="unset-child-span">
-                    <NumericFormat
-                      value={ amountInfo?.accountTransferAmount }
-                      thousandSeparator
-                      displayType="text"
-                      prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                      suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                    ></NumericFormat>
+                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.accountTransferAmount || 0) })}
                     <NumericFormat
                       value={ amountInfo?.accountTransferCount }
                       thousandSeparator
@@ -177,97 +159,49 @@ export const AmountInfoWrap = ({
             <li className="kv-row">
               <span className="k">{t('settlement.transactionAmount')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.transactionAmount }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })}
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.paymentFee')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.paymentFee }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.paymentFee || 0) })}
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.escrowFee')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.escrowFee }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.escrowFee || 0) })}
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.authFee')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.authFee }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.authFee || 0) })}
               </span>
             </li>
             <li className="kv-row">
               <span className="k">VAT</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.vatFee }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.vatFee || 0) })}
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.expectedSettlementAmount')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.settlementAmount }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.settlementAmount || 0) })}
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.preSettlementCancelOffset')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.preSettlementCancelOffset }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.preSettlementCancelOffset || 0) })}
               </span>
             </li>
             <li className="kv-row bolder">
               <span className="k">{t('settlement.settlementAmount')}</span>
               <span className="v">
-                <NumericFormat
-                  value={ amountInfo?.finalSettlementAmount }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.finalSettlementAmount || 0) })}
               </span>
             </li>
           </ul>

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

@@ -65,15 +65,7 @@ export const ListItem = ({
           }
         </div>
         <div className="transaction-amount">
-          {
-            <NumericFormat
-              value={ settlementAmount || transactionAmount }
-              thousandSeparator
-              displayType="text"
-              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-            ></NumericFormat>
-          }
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || transactionAmount || 0) })}
         </div>
       </div>
     </>

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

@@ -391,13 +391,7 @@ export const ListWrap = ({
         <div className="summary-label label">{t('settlement.settlementAmount')}</div>
         <div className="summary-amount divTop">
           <span className="amount-text">
-            <NumericFormat
-              value={ settlementAmount }
-              thousandSeparator
-              displayType="text"
-              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-            ></NumericFormat>
+            {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || 0) })}
           </span>
           <button
             onClick={ () => setIsOpenSummary(!isOpenSummary) }

src/entities/vat-return/ui/list-detail-bottom-sheet.tsx

@@ -5,6 +5,7 @@ import { NumericFormat } from "react-number-format";
 import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 import { useEffect, useState } from "react";
+import { useTranslation } from 'react-i18next';
 
 export interface VatReturnListDetailBottomSheetProps {
   bottomSheetOn: boolean;
@@ -25,7 +26,7 @@ export const VatReturnListDetailBottomSheet = ({
   vatAmount,
   totalAmount
 }: VatReturnListDetailBottomSheetProps) => {
-
+  const { t, i18n } = useTranslation();
   const [isOpenDetail, setIsOpenDetail] = useState<Array<boolean>>([]);
 
   const onClickToClose = () => {
@@ -48,14 +49,14 @@ export const VatReturnListDetailBottomSheet = ({
       <div className="bottomsheet">
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
-            <h2>세부내역 조회</h2>
-            <button 
-              className="close-btn" 
+            <h2>{t('vatReturn.viewDetails')}</h2>
+            <button
+              className="close-btn"
               type="button"
             >
-              <img 
+              <img
                 src={ IMAGE_ROOT +'/ico_close.svg' }
-                alt="닫기"
+                alt={t('common.close')}
                 onClick={ onClickToClose }
               />
             </button>
@@ -66,55 +67,35 @@ export const VatReturnListDetailBottomSheet = ({
           <div className="tax-detail-accordion">
             <div className="summary">
               <div className="row">
-                <div className="label desc dot">거래금액 :</div>
+                <div className="label desc dot">{t('vatReturn.transactionAmount')} :</div>
                 <div className="value">
-                  <NumericFormat
-                    value={ transactionAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(transactionAmount || 0) })}
                 </div>
               </div>
               <div className="row">
-                <div className="label desc dot">공급가액 :</div>
+                <div className="label desc dot">{t('vatReturn.supplyAmount')} :</div>
                 <div className="value">
-                  <NumericFormat
-                    value={ supplyAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(supplyAmount || 0) })}
                 </div>
               </div>
               <div className="row">
-                <div className="label desc dot">VAT :</div>
+                <div className="label desc dot">{t('vatReturn.vat')} :</div>
                 <div className="value">
-                  <NumericFormat
-                    value={ vatAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(vatAmount || 0) })}
                 </div>
               </div>
               <div className="row">
-                <div className="label desc dot">합계금액 :</div>
+                <div className="label desc dot">{t('vatReturn.totalAmount')} :</div>
                 <div className="value">
-                  <NumericFormat
-                    value={ totalAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(totalAmount || 0) })}
                 </div>
               </div>
             </div>
             { breakdown && breakdown.length > 0 &&
               <div className="list">
                 <div className="list-header">
-                  <div className="head-date">거래일</div>
-                  <div className="head-amount">합계금액</div>
+                  <div className="head-date">{t('vatReturn.transactionDate')}</div>
+                  <div className="head-amount">{t('vatReturn.totalAmount')}</div>
                 </div>
                 { 
                   breakdown.map((value, index) => (
@@ -124,15 +105,10 @@ export const VatReturnListDetailBottomSheet = ({
                         <span className="date">{ value.transactionDate? moment(value.transactionDate).format('YYYY-MM-DD'): '' }</span>
                         <div className="amount">
                           <span className="text">
-                            <NumericFormat
-                              value={ value.totalAmount } 
-                              thousandSeparator
-                              displayType="text"
-                              suffix='원'
-                            ></NumericFormat>
+                            {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.totalAmount || 0) })}
                           </span>
-                          <img 
-                            className="arrow down" 
+                          <img
+                            className="arrow down"
                             src={ IMAGE_ROOT + '/ico_arrow.svg' }
                             onClick={ () => openDetail(index) }
                           />
@@ -142,34 +118,19 @@ export const VatReturnListDetailBottomSheet = ({
                         { isOpenDetail[index] &&
                           <div className="item item-detail">
                             <div className="labels">
-                              <span>거래금액</span>
-                              <span>공급가액</span>
-                              <span>VAT</span>
+                              <span>{t('vatReturn.transactionAmount')}</span>
+                              <span>{t('vatReturn.supplyAmount')}</span>
+                              <span>{t('vatReturn.vat')}</span>
                             </div>
                             <div className="values">
                               <span>
-                                <NumericFormat
-                                  value={ value.transactionAmount } 
-                                  thousandSeparator
-                                  displayType="text"
-                                  suffix='원'
-                                ></NumericFormat>
+                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.transactionAmount || 0) })}
                               </span>
                               <span>
-                                <NumericFormat
-                                  value={ value.supplyAmount } 
-                                  thousandSeparator
-                                  displayType="text"
-                                  suffix='원'
-                                ></NumericFormat>
+                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.supplyAmount || 0) })}
                               </span>
                               <span>
-                                <NumericFormat
-                                  value={ value.vatAmount } 
-                                  thousandSeparator
-                                  displayType="text"
-                                  suffix='원'
-                                ></NumericFormat>
+                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.vatAmount || 0) })}
                               </span>
                             </div>
                           </div>

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

@@ -1,4 +1,5 @@
 import { NumericFormat } from 'react-number-format';
+import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps } from '../model/types';
@@ -12,6 +13,7 @@ export const ListItem = ({
   paymentMethod,
   amount
 }: ListItemProps) => {
+  const { t, i18n } = useTranslation();
   const { navigate } = useNavigate();
   
   const onClickToNavigate = () => {
@@ -40,12 +42,7 @@ export const ListItem = ({
           </div>
         </div>
         <div className="transaction-amount">
-          <NumericFormat
-            value={ amount } 
-            thousandSeparator
-            displayType="text"
-            suffix='원'
-          ></NumericFormat> 
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
         </div>
       </div>
     </>

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

@@ -1,16 +1,17 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { ListFilter } from './filter/list-filter';
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { 
-  VatReturnListContent, 
-  VatReturnListParams, 
-  VatReturnListResponse, 
-  VatReturnReceiptType, 
-  VatReturnTargetType 
+import {
+  VatReturnListContent,
+  VatReturnListParams,
+  VatReturnListResponse,
+  VatReturnReceiptType,
+  VatReturnTargetType
 } from '../model/types';
 import { useVatReturnListMutation } from '../api/use-vat-return-list-mutation';
 import { ListDateGroup } from './list-date-group';
@@ -19,6 +20,7 @@ import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 
 export const ListWrap = () => {
+  const { t } = useTranslation();
   const userMid = useStore.getState().UserStore.mid;
 
   const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
@@ -175,20 +177,20 @@ export const ListWrap = () => {
               value={ moment(startMonth+'01').format('YYYY.MM') + '-' + moment(endMonth+'01').format('YYYY.MM')} 
               readOnly={ true }
             />
-            <button 
+            <button
               className="filter-btn"
               onClick={ () => onClickToOpenFIlter() }
             >
-              <img 
+              <img
                 src={ IMAGE_ROOT + '/ico_setting.svg' }
-                alt="검색옵션"
+                alt={t('transaction.searchOptions')}
               />
             </button>
           </div>
           <button className="download-btn">
-            <img 
+            <img
               src={ IMAGE_ROOT + '/ico_download.svg' }
-              alt="다운로드"
+              alt={t('transaction.download')}
               onClick={ onClickToDownloadExcel }
             />
           </button>

src/entities/vat-return/ui/reference-request-fail.tsx

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
-import { 
+import { useTranslation } from 'react-i18next';
+import {
   FilterMotionDuration,
   FilterMotionStyle,
   FilterMotionVariants
@@ -16,6 +17,7 @@ export const ReferenceRequestFail = ({
   setPageOn,
   errorMsg
 }: ReferenceRequestFailProps) => {
+  const { t } = useTranslation();
   const onClickToClose = () => {
     setPageOn(false);
   };
@@ -35,27 +37,27 @@ export const ReferenceRequestFail = ({
             style={{ margin: '0 auto' }}
           >
             <div className="success-body">
-              <div 
-                className="error-icon" 
+              <div
+                className="error-icon"
                 aria-hidden="true"
               ></div>
               <h1 className="success-title">
-                <span>부가세 참고 자료</span>
+                <span>{t('vatReturn.vatReferenceData')}</span>
                 <br/>
-                <span>신청 실패하였습니다</span>
+                <span>{t('vatReturn.requestFailed')}</span>
               </h1>
               <div className="success-result">
                 <p className="result-text align-left position_label">
-                  <span>결과 :</span> 
+                  <span>{t('vatReturn.result')} :</span>
                   <span>{ errorMsg }</span>
                 </p>
               </div>
             </div>
             <div className="apply-row">
-              <button 
+              <button
                 className="btn-50 btn-blue flex-1"
                 onClick={ onClickToClose }
-              >확인</button>
+              >{t('common.confirm')}</button>
             </div>
           </div>
         </div>

src/entities/vat-return/ui/reference-request-success.tsx

@@ -1,5 +1,6 @@
 import { motion } from 'framer-motion';
-import { 
+import { useTranslation } from 'react-i18next';
+import {
   FilterMotionDuration,
   FilterMotionStyle,
   FilterMotionVariants
@@ -19,6 +20,7 @@ export const ReferenceRequestSuccess = ({
   email,
   startDate
 }: ReferenceRequestSuccessProps) => {
+  const { t } = useTranslation();
   const onClickToClose = () => {
     setPageOn(false);
   };
@@ -33,31 +35,31 @@ export const ReferenceRequestSuccess = ({
         style={ FilterMotionStyle }
       >
         <div className="full-menu-container">
-          <div 
+          <div
             className="success-body"
             style={{ margin: '0 auto' }}
           >
             <div className="success-icon" aria-hidden="true"></div>
             <h1 className="success-title">
-              <span>부가세 참고 자료</span>
+              <span>{t('vatReturn.vatReferenceData')}</span>
               <br/>
-              <span>신청이 완료되었습니다.</span>
+              <span>{t('vatReturn.requestCompleted')}</span>
             </h1>
-            <p className="success-subtitle">파일은 선택한 수령 방법으로 제공됩니다.</p>
+            <p className="success-subtitle">{t('vatReturn.fileProvidedBySelectedMethod')}</p>
             <div className="success-result">
               <p className="result-text">
-                <span>신청일 :</span> <span>{ moment(startDate).format('YYYY.MM.DD') }</span>
+                <span>{t('vatReturn.applicationDate')} :</span> <span>{ moment(startDate).format('YYYY.MM.DD') }</span>
                 <br/>
-                <span>메일주소 :</span> <span>{ email }</span>
+                <span>{t('vatReturn.emailAddress')} :</span> <span>{ email }</span>
               </p>
             </div>
-            <p className="success-note dot">참고용 자료이므로 반드시 내부 회계자료 등과<br/>비교 후 사용해 주세요.</p>
+            <p className="success-note dot">{t('vatReturn.referenceDataNote')}</p>
           </div>
           <div className="apply-row">
-            <button 
+            <button
               className="btn-50 btn-blue flex-1"
               onClick={ onClickToClose }
-            >확인</button>
+            >{t('common.confirm')}</button>
           </div>
         </div>
       </motion.div>

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

@@ -1,5 +1,6 @@
 import moment from 'moment';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { ReferenceRequestSuccess } from './reference-request-success';
@@ -11,6 +12,7 @@ import { useStore } from '@/shared/model/store';
 import { useVatReturnReferenceRequestMutation } from '../api/use-vat-return-reference-request-mutation';
 
 export const ReferenceWrap = () => {
+  const { t } = useTranslation();
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
   const emailOptions = useStore.getState().UserStore.selectOptionsEmails;
   const userMid = useStore.getState().UserStore.mid;
@@ -48,13 +50,13 @@ export const ReferenceWrap = () => {
     <>
       <div className="option-list no-padding pt-30">
         <FilterSelect
-          title='가맹점'
+          title={t('merchant.title')}
           selectValue={ mid }
           selectSetter={ setMid }
           selectOptions={ midOptions }
         ></FilterSelect>
         <FilterButtonGroups
-          title='거래 과세/면세 구분'
+          title={t('vatReturn.taxExemptionType')}
           activeValue={ payTax }
           btnGroups={ VatReturnTaxBtnGroups }
           setter={ setPayTax }
@@ -62,24 +64,24 @@ export const ReferenceWrap = () => {
           maxBtn={ 2 }
         ></FilterButtonGroups>
         <FilterCalendar
-          title='거래기간'
+          title={t('vatReturn.transactionPeriod')}
           startDate={ startDate }
           endDate={ endDate }
           setStartDate={ setStartDate }
           setEndDate={ setEndDate }
         ></FilterCalendar>
         <FilterSelect
-          title='수령메일주소'
+          title={t('vatReturn.receivingEmail')}
           selectValue={ email }
           selectSetter={ setEmail }
           selectOptions={ emailOptions }
         ></FilterSelect>
       </div>
       <div className="apply-row">
-        <button 
+        <button
           className="btn-50 btn-blue flex-1"
           onClick={ onClickToResquest }
-        >자료신청</button>
+        >{t('vatReturn.requestData')}</button>
       </div>
       <ReferenceRequestSuccess
         pageOn={ successPageOn }

src/entities/vat-return/ui/section/amount-section.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { VatReturnDetailResponse } from '../../model/types';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { NumericFormat } from 'react-number-format';
@@ -14,6 +15,7 @@ export interface AmountSectionProps {
 export const AmountSection = ({
   detail
 }: AmountSectionProps) => {
+  const { t, i18n } = useTranslation();
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
 
@@ -35,45 +37,30 @@ export const AmountSection = ({
       <div className="txn-num-group">
         <div className="txn-amount">
           <div className="value">
-            <NumericFormat
-              value={ detail.totalAmount } 
-              thousandSeparator
-              displayType="text"
-            ></NumericFormat>
-            <span className="unit">원</span>
+            {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.totalAmount || 0) })}
           </div>
-          <button 
-            className="chip-btn" 
+          <button
+            className="chip-btn"
             type="button"
             onClick={ () => openSection() }
           >
-            <span>금액상세</span> <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+            <span>{t('vatReturn.amountDetail')}</span> <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
           </button>
         </div>
         <SlideDown className={'my-dropdown-slidedown'}>
-        { isOpen &&  
+        { isOpen &&
           <div className="amount-expand">
             <ul className="amount-list">
               <li className="amount-item">
-                <span className="label">·&nbsp;&nbsp;공급가액</span>
+                <span className="label">·&nbsp;&nbsp;{t('vatReturn.supplyAmount')}</span>
                 <span className="value">
-                  <NumericFormat
-                    value={ detail.supplyAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.supplyAmount || 0) })}
                 </span>
               </li>
               <li className="amount-item">
-                <span className="label">·&nbsp;&nbsp;VAT</span>
+                <span className="label">·&nbsp;&nbsp;{t('vatReturn.vat')}</span>
                 <span className="value">
-                  <NumericFormat
-                    value={ detail.vatAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.vatAmount || 0) })}
                 </span>
               </li>
             </ul>
@@ -85,17 +72,17 @@ export const AmountSection = ({
         </div>
         <div className="txn-mid">
           <span className="value">
-            { !!detail.issueDate && 
-              moment(detail.issueDate).format('YYYY.MM.DD') 
+            { !!detail.issueDate &&
+              moment(detail.issueDate).format('YYYY.MM.DD')
             }
           </span>
         </div>
         <div className="txn-doc">
-          <button 
-            className="doc-btn" 
+          <button
+            className="doc-btn"
             type="button"
             onClick={ onClickToOpenDownloadBottomSheet }
-          >세금계산서</button>
+          >{t('vatReturn.taxInvoice')}</button>
         </div>
       </div>
       { !!downloadBottomSheetOn &&

src/entities/vat-return/ui/section/issue-section.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { VatReturnDetailResponse } from '../../model/types';
 
 export interface IssueSectionProps {
@@ -8,46 +9,47 @@ export interface IssueSectionProps {
 export const IssueSection = ({
   detail
 }: IssueSectionProps) => {
+  const { t } = useTranslation();
 
   return (
     <>
       <div className="txn-section">
-        <div className="section-title">발행 정보</div>
+        <div className="section-title">{t('vatReturn.issueInfo')}</div>
         <ul className="kv-list">
           <li className="kv-row">
             <span className="k">MID</span>
             <span className="v">{ detail.mid }</span>
           </li>
           <li className="kv-row">
-            <span className="k">발행대상일자</span>
+            <span className="k">{t('vatReturn.issueTargetDate')}</span>
             <span className="v">
               { !!detail.targetBusinessStartDate && !!detail.targetBusinessEndDate &&
-                moment(detail.targetBusinessStartDate).format('YYYY.MM.DD') 
-                + 
-                ' ~ ' 
-                + 
-                moment(detail.targetBusinessEndDate).format('YYYY.MM.DD') 
+                moment(detail.targetBusinessStartDate).format('YYYY.MM.DD')
+                +
+                ' ~ '
+                +
+                moment(detail.targetBusinessEndDate).format('YYYY.MM.DD')
               }
             </span>
           </li>
           <li className="kv-row">
-            <span className="k">발행일자</span>
+            <span className="k">{t('vatReturn.issueDate')}</span>
             <span className="v">
               { !!detail.issueDate &&
-                moment(detail.issueDate).format('YYYY.MM.DD') 
+                moment(detail.issueDate).format('YYYY.MM.DD')
               }
             </span>
           </li>
           <li className="kv-row">
-            <span className="k">적요</span>
+            <span className="k">{t('vatReturn.subject')}</span>
             <span className="v">{ detail.subject }</span>
           </li>
           <li className="kv-row">
-            <span className="k">발행대상</span>
+            <span className="k">{t('vatReturn.issueTarget')}</span>
             <span className="v">{ detail.targetType }</span>
           </li>
           <li className="kv-row">
-            <span className="k">영수구분</span>
+            <span className="k">{t('vatReturn.receiptType')}</span>
             <span className="v">{ detail.receiptType }</span>
           </li>
           <li className="kv-row">

src/entities/vat-return/ui/section/receiver-section.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { VatReturnDetailResponse } from '../../model/types';
 
 export interface ReceiverSectionProps {
@@ -7,23 +8,24 @@ export interface ReceiverSectionProps {
 export const ReceiverSection = ({
   detail
 }: ReceiverSectionProps) => {
+  const { t } = useTranslation();
 
   return (
     <>
       <div className="txn-section">
-        <div className="section-title">공급받는 자 정보</div>
+        <div className="section-title">{t('vatReturn.receiverInfo')}</div>
       </div>
       <ul className="kv-list">
         <li className="kv-row">
-          <span className="k">사업자등록번호</span>
+          <span className="k">{t('merchant.businessRegistrationNumber')}</span>
           <span className="v">{ detail.receiverBusinessRegistrationNumber }</span>
         </li>
         <li className="kv-row">
-          <span className="k">상호명</span>
+          <span className="k">{t('merchant.companyName')}</span>
           <span className="v">{ detail.receiverCompanyName }</span>
         </li>
         <li className="kv-row">
-          <span className="k">대표자명</span>
+          <span className="k">{t('merchant.representativeName')}</span>
           <span className="v">{ detail.receiverCeoName }</span>
         </li>
       </ul>

src/entities/vat-return/ui/section/supplier-section.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { VatReturnDetailResponse } from '../../model/types';
 
 export interface SupplierSectionProps {
@@ -7,23 +8,24 @@ export interface SupplierSectionProps {
 export const SupplierSection = ({
   detail
 }: SupplierSectionProps) => {
+  const { t } = useTranslation();
 
   return (
     <>
       <div className="txn-section">
-        <div className="section-title">공급자 정보</div>
+        <div className="section-title">{t('vatReturn.supplierInfo')}</div>
       </div>
       <ul className="kv-list">
         <li className="kv-row">
-          <span className="k">사업자등록번호</span>
+          <span className="k">{t('merchant.businessRegistrationNumber')}</span>
           <span className="v">{ detail.supplierBusinessRegistrationNumber }</span>
         </li>
         <li className="kv-row">
-          <span className="k">상호명</span>
+          <span className="k">{t('merchant.companyName')}</span>
           <span className="v">{ detail.supplierCompanyName }</span>
         </li>
         <li className="kv-row">
-          <span className="k">대표자명</span>
+          <span className="k">{t('merchant.representativeName')}</span>
           <span className="v">{ detail.supplierCeoName }</span>
         </li>
       </ul>

src/entities/vat-return/ui/vat-return-tab.tsx

@@ -1,13 +1,15 @@
+import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { 
-  VatReturnTabKeys, 
-  VatReturnTabProps 
+import {
+  VatReturnTabKeys,
+  VatReturnTabProps
 } from '../model/types';
 
 export const VatReturnTab = ({
   activeTab
 }: VatReturnTabProps) => {
+  const { t } = useTranslation();
   const { navigate } = useNavigate();
 
   const onClickToNavigation = (tab: VatReturnTabKeys) => {
@@ -23,14 +25,14 @@ export const VatReturnTab = ({
   return(
     <>
       <div className="subTab">
-        <button 
+        <button
           className={`subtab-btn ${(activeTab === VatReturnTabKeys.List)? 'active': ''}` }
-          onClick={ () => onClickToNavigation(VatReturnTabKeys.List) } 
-        >세금 계산서</button>
-        <button 
+          onClick={ () => onClickToNavigation(VatReturnTabKeys.List) }
+        >{t('vatReturn.taxInvoice')}</button>
+        <button
           className={`subtab-btn ${(activeTab === VatReturnTabKeys.VatReference)? 'active': ''}` }
-          onClick={ () => onClickToNavigation(VatReturnTabKeys.VatReference) } 
-        >부가세 참고</button>
+          onClick={ () => onClickToNavigation(VatReturnTabKeys.VatReference) }
+        >{t('vatReturn.vatReference')}</button>
       </div>
     </>
   );