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
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(titleInfo?.amount || 0) })}
-                value={titleInfo?.amount}
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
             </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
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(titleInfo?.amount || 0) })}
-                value={titleInfo?.amount}
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
             </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
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-          ></NumericFormat>
         </div>
       );
     }
@@ -572,13 +566,7 @@ export const ListItem = ({
     ) {
       rs.push(
         <div className="transaction-amount">
-          <NumericFormat
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-          ></NumericFormat>
         </div>
       );
     }
@@ -588,13 +576,7 @@ export const ListItem = ({
           key="payout-item-amount"
           className="transaction-amount"
         >
-          <NumericFormat
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-          ></NumericFormat>
         </div>
       );
     }
@@ -606,13 +588,7 @@ export const ListItem = ({
           key="fund-account-transfer-amount"
           className="transaction-amount"
         >
-          <NumericFormat
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-          ></NumericFormat>
         </div>
       );
     }
@@ -622,13 +598,7 @@ export const ListItem = ({
           key="payout-item-amount"
           className="transaction-amount"
         >
-          <NumericFormat
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-            suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-          ></NumericFormat>
         </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
+            {t('home.money', { value: new Intl.NumberFormat('en-US').format(sales?.todayTotalAmount || 0) })}
-              value={ sales?.todayTotalAmount }
-              thousandSeparator
-              displayType="text"
-              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-            ></NumericFormat>
           </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
+            {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.todaySettlementAmount || 0) })}
-              value={ settlement?.todaySettlementAmount }
-              thousandSeparator
-              displayType="text"
-              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-            ></NumericFormat>
           </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
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.availableCredit || 0) })}
-                value={ settlement?.availableCredit }
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
             </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
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(sales?.currentMonthAmount || 0) })}
-                value={ sales?.currentMonthAmount }
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
             </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
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlement?.currentMonthSettlementAmount || 0) })}
-                value={ settlement?.currentMonthSettlementAmount }
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
             </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
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(averageTransactionAmount || 0) })}
-                value={ averageTransactionAmount }
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
             </span>
           </div>
         </div>
@@ -192,13 +174,7 @@ export const BoxContainer2 = () => {
           <h4>{t('home.dailyAverageSalesAndCount')}</h4>
           <div className="two-account">
             <span>
-              <NumericFormat
+              {t('home.money', { value: new Intl.NumberFormat('en-US').format(dailyAverageSales || 0) })}
-                value={ dailyAverageSales }
-                thousandSeparator
-                displayType="text"
-                prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-              ></NumericFormat>
               (<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
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.applicationAmount || 0) })}
-                    value={ value.applicationAmount }
-                    thousandSeparator
-                    displayType="text"
-                    prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                    suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                  ></NumericFormat>
                 </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
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.totalTransactionAmount || 0) })}
-                  value={ amountInfo?.totalTransactionAmount }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
                 <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
+                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.creditCardAmount || 0) })}
-                      value={ amountInfo?.creditCardAmount }
-                      thousandSeparator
-                      displayType="text"
-                      prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                      suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                    ></NumericFormat>
                     <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
+                    {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.accountTransferAmount || 0) })}
-                      value={ amountInfo?.accountTransferAmount }
-                      thousandSeparator
-                      displayType="text"
-                      prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                      suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                    ></NumericFormat>
                     <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
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.transactionAmount || 0) })}
-                  value={ amountInfo?.transactionAmount }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.paymentFee')}</span>
               <span className="v">
-                <NumericFormat
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.paymentFee || 0) })}
-                  value={ amountInfo?.paymentFee }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.escrowFee')}</span>
               <span className="v">
-                <NumericFormat
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.escrowFee || 0) })}
-                  value={ amountInfo?.escrowFee }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.authFee')}</span>
               <span className="v">
-                <NumericFormat
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.authFee || 0) })}
-                  value={ amountInfo?.authFee }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
               </span>
             </li>
             <li className="kv-row">
               <span className="k">VAT</span>
               <span className="v">
-                <NumericFormat
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.vatFee || 0) })}
-                  value={ amountInfo?.vatFee }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.expectedSettlementAmount')}</span>
               <span className="v">
-                <NumericFormat
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.settlementAmount || 0) })}
-                  value={ amountInfo?.settlementAmount }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
               </span>
             </li>
             <li className="kv-row">
               <span className="k">{t('settlement.preSettlementCancelOffset')}</span>
               <span className="v">
-                <NumericFormat
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.preSettlementCancelOffset || 0) })}
-                  value={ amountInfo?.preSettlementCancelOffset }
-                  thousandSeparator
-                  displayType="text"
-                  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">{t('settlement.settlementAmount')}</span>
               <span className="v">
-                <NumericFormat
+                {t('home.money', { value: new Intl.NumberFormat('en-US').format(amountInfo?.finalSettlementAmount || 0) })}
-                  value={ amountInfo?.finalSettlementAmount }
-                  thousandSeparator
-                  displayType="text"
-                  prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                  suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                ></NumericFormat>
               </span>
             </li>
           </ul>

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

@@ -65,15 +65,7 @@ export const ListItem = ({
           }
         </div>
         <div className="transaction-amount">
-          {
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || transactionAmount || 0) })}
-            <NumericFormat
-              value={ settlementAmount || transactionAmount }
-              thousandSeparator
-              displayType="text"
-              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-            ></NumericFormat>
-          }
         </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
+            {t('home.money', { value: new Intl.NumberFormat('en-US').format(settlementAmount || 0) })}
-              value={ settlementAmount }
-              thousandSeparator
-              displayType="text"
-              prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-              suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-            ></NumericFormat>
           </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>
+            <h2>{t('vatReturn.viewDetails')}</h2>
             <button
               className="close-btn"
               type="button"
             >
               <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
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(transactionAmount || 0) })}
-                    value={ transactionAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
                 </div>
               </div>
               <div className="row">
-                <div className="label desc dot">공급가액 :</div>
+                <div className="label desc dot">{t('vatReturn.supplyAmount')} :</div>
                 <div className="value">
-                  <NumericFormat
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(supplyAmount || 0) })}
-                    value={ supplyAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
                 </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
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(vatAmount || 0) })}
-                    value={ vatAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
                 </div>
               </div>
               <div className="row">
-                <div className="label desc dot">합계금액 :</div>
+                <div className="label desc dot">{t('vatReturn.totalAmount')} :</div>
                 <div className="value">
-                  <NumericFormat
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(totalAmount || 0) })}
-                    value={ totalAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
                 </div>
               </div>
             </div>
             { breakdown && breakdown.length > 0 &&
               <div className="list">
                 <div className="list-header">
-                  <div className="head-date">거래일</div>
+                  <div className="head-date">{t('vatReturn.transactionDate')}</div>
-                  <div className="head-amount">합계금액</div>
+                  <div className="head-amount">{t('vatReturn.totalAmount')}</div>
                 </div>
                 { 
                   breakdown.map((value, index) => (
@@ -124,12 +105,7 @@ export const VatReturnListDetailBottomSheet = ({
                         <span className="date">{ value.transactionDate? moment(value.transactionDate).format('YYYY-MM-DD'): '' }</span>
                         <div className="amount">
                           <span className="text">
-                            <NumericFormat
+                            {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.totalAmount || 0) })}
-                              value={ value.totalAmount } 
-                              thousandSeparator
-                              displayType="text"
-                              suffix='원'
-                            ></NumericFormat>
                           </span>
                           <img
                             className="arrow down"
@@ -142,34 +118,19 @@ export const VatReturnListDetailBottomSheet = ({
                         { isOpenDetail[index] &&
                           <div className="item item-detail">
                             <div className="labels">
-                              <span>거래금액</span>
+                              <span>{t('vatReturn.transactionAmount')}</span>
-                              <span>공급가액</span>
+                              <span>{t('vatReturn.supplyAmount')}</span>
-                              <span>VAT</span>
+                              <span>{t('vatReturn.vat')}</span>
                             </div>
                             <div className="values">
                               <span>
-                                <NumericFormat
+                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.transactionAmount || 0) })}
-                                  value={ value.transactionAmount } 
-                                  thousandSeparator
-                                  displayType="text"
-                                  suffix='원'
-                                ></NumericFormat>
                               </span>
                               <span>
-                                <NumericFormat
+                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.supplyAmount || 0) })}
-                                  value={ value.supplyAmount } 
-                                  thousandSeparator
-                                  displayType="text"
-                                  suffix='원'
-                                ></NumericFormat>
                               </span>
                               <span>
-                                <NumericFormat
+                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.vatAmount || 0) })}
-                                  value={ value.vatAmount } 
-                                  thousandSeparator
-                                  displayType="text"
-                                  suffix='원'
-                                ></NumericFormat>
                               </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
+          {t('home.money', { value: new Intl.NumberFormat('en-US').format(amount || 0) })}
-            value={ amount } 
-            thousandSeparator
-            displayType="text"
-            suffix='원'
-          ></NumericFormat> 
         </div>
       </div>
     </>

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

@@ -1,5 +1,6 @@
 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';
@@ -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);
@@ -181,14 +183,14 @@ export const ListWrap = () => {
             >
               <img
                 src={ IMAGE_ROOT + '/ico_setting.svg' }
-                alt="검색옵션"
+                alt={t('transaction.searchOptions')}
               />
             </button>
           </div>
           <button className="download-btn">
             <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,4 +1,5 @@
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import {
   FilterMotionDuration,
   FilterMotionStyle,
@@ -16,6 +17,7 @@ export const ReferenceRequestFail = ({
   setPageOn,
   errorMsg
 }: ReferenceRequestFailProps) => {
+  const { t } = useTranslation();
   const onClickToClose = () => {
     setPageOn(false);
   };
@@ -40,13 +42,13 @@ export const ReferenceRequestFail = ({
                 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>
@@ -55,7 +57,7 @@ export const ReferenceRequestFail = ({
               <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,4 +1,5 @@
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import {
   FilterMotionDuration,
   FilterMotionStyle,
@@ -19,6 +20,7 @@ export const ReferenceRequestSuccess = ({
   email,
   startDate
 }: ReferenceRequestSuccessProps) => {
+  const { t } = useTranslation();
   const onClickToClose = () => {
     setPageOn(false);
   };
@@ -39,25 +41,25 @@ export const ReferenceRequestSuccess = ({
           >
             <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
               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,14 +64,14 @@ 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 }
@@ -79,7 +81,7 @@ export const ReferenceWrap = () => {
         <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,19 +37,14 @@ export const AmountSection = ({
       <div className="txn-num-group">
         <div className="txn-amount">
           <div className="value">
-            <NumericFormat
+            {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.totalAmount || 0) })}
-              value={ detail.totalAmount } 
-              thousandSeparator
-              displayType="text"
-            ></NumericFormat>
-            <span className="unit">원</span>
           </div>
           <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'}>
@@ -55,25 +52,15 @@ export const AmountSection = ({
           <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
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.supplyAmount || 0) })}
-                    value={ detail.supplyAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
                 </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
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.vatAmount || 0) })}
-                    value={ detail.vatAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
                 </span>
               </li>
             </ul>
@@ -95,7 +82,7 @@ export const AmountSection = ({
             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,18 +9,19 @@ 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')
@@ -31,7 +33,7 @@ export const IssueSection = ({
             </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')
@@ -39,15 +41,15 @@ export const IssueSection = ({
             </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,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import {
@@ -8,6 +9,7 @@ import {
 export const VatReturnTab = ({
   activeTab
 }: VatReturnTabProps) => {
+  const { t } = useTranslation();
   const { navigate } = useNavigate();
 
   const onClickToNavigation = (tab: VatReturnTabKeys) => {
@@ -26,11 +28,11 @@ export const VatReturnTab = ({
         <button
           className={`subtab-btn ${(activeTab === VatReturnTabKeys.List)? 'active': ''}` }
           onClick={ () => onClickToNavigation(VatReturnTabKeys.List) }
-        >세금 계산서</button>
+        >{t('vatReturn.taxInvoice')}</button>
         <button
           className={`subtab-btn ${(activeTab === VatReturnTabKeys.VatReference)? 'active': ''}` }
           onClick={ () => onClickToNavigation(VatReturnTabKeys.VatReference) }
-        >부가세 참고</button>
+        >{t('vatReturn.vatReference')}</button>
       </div>
     </>
   );

src/locales/en.json

@@ -190,8 +190,8 @@
     },
     "account": {
         "title": "Account Management",
-        "userManagement": "User Management",
+        "userManagement": "Users",
-        "passwordManagement": "Password Management",
+        "passwordManagement": "Passwords",
         "userSettings": "User Settings",
         "addUser": "Add User",
         "addAccount": "Add Account",
@@ -273,6 +273,7 @@
         "totalSettlement": "Total Settlement",
         "currencyWon": "",
         "currencySymbol": "₩",
+        "money": "₩{{value}}",
         "goToSales": "Go to Sales",
         "transactionInsights": "Transaction Insights",
         "basedOnLastWeek": "Based on Last Week",
@@ -491,6 +492,39 @@
     "faceAuth": {
         "title": "Face Authentication"
     },
+    "vatReturn": {
+        "title": "VAT Return Data",
+        "taxInvoice": "Tax Invoice",
+        "vatReference": "VAT Reference",
+        "taxInvoiceDetail": "Tax Invoice Details",
+        "viewDetails": "View Details",
+        "transactionAmount": "Transaction Amount",
+        "supplyAmount": "Supply Amount",
+        "vat": "VAT",
+        "totalAmount": "Total Amount",
+        "transactionDate": "Transaction Date",
+        "amountDetail": "Amount Details",
+        "issueInfo": "Issue Information",
+        "issueTargetDate": "Issue Target Date",
+        "issueDate": "Issue Date",
+        "subject": "Subject",
+        "issueTarget": "Issue Target",
+        "receiptType": "Receipt Type",
+        "supplierInfo": "Supplier Information",
+        "receiverInfo": "Receiver Information",
+        "taxExemptionType": "Tax/Exemption Type",
+        "transactionPeriod": "Transaction Period",
+        "receivingEmail": "Receiving Email",
+        "requestData": "Request Data",
+        "vatReferenceData": "VAT Reference Data",
+        "requestCompleted": "Request completed.",
+        "requestFailed": "Request failed",
+        "fileProvidedBySelectedMethod": "The file will be provided by the selected method.",
+        "applicationDate": "Application Date",
+        "emailAddress": "Email Address",
+        "referenceDataNote": "Please compare with internal accounting data\nbefore using this reference material.",
+        "result": "Result"
+    },
     "common": {
         "latest": "Latest",
         "oldest": "Oldest"

src/locales/ko.json

@@ -277,6 +277,7 @@
         "totalSales": "총 매출액",
         "totalSettlement": "총 정산액",
         "currencyWon": "원",
+        "money": "{{value}}원",
         "goToSales": "오늘 매출 바로가기",
         "transactionInsights": "거래 인사이트",
         "basedOnLastWeek": "최근 일주일 기준",
@@ -495,6 +496,39 @@
     "faceAuth": {
         "title": "안면인증"
     },
+    "vatReturn": {
+        "title": "부가세 신고 자료",
+        "taxInvoice": "세금 계산서",
+        "vatReference": "부가세 참고",
+        "taxInvoiceDetail": "세금계산서 상세",
+        "viewDetails": "세부내역 조회",
+        "transactionAmount": "거래금액",
+        "supplyAmount": "공급가액",
+        "vat": "VAT",
+        "totalAmount": "합계금액",
+        "transactionDate": "거래일",
+        "amountDetail": "금액상세",
+        "issueInfo": "발행 정보",
+        "issueTargetDate": "발행대상일자",
+        "issueDate": "발행일자",
+        "subject": "적요",
+        "issueTarget": "발행대상",
+        "receiptType": "영수구분",
+        "supplierInfo": "공급자 정보",
+        "receiverInfo": "공급받는 자 정보",
+        "taxExemptionType": "거래 과세/면세 구분",
+        "transactionPeriod": "거래기간",
+        "receivingEmail": "수령메일주소",
+        "requestData": "자료신청",
+        "vatReferenceData": "부가세 참고 자료",
+        "requestCompleted": "신청이 완료되었습니다.",
+        "requestFailed": "신청 실패하였습니다",
+        "fileProvidedBySelectedMethod": "파일은 선택한 수령 방법으로 제공됩니다.",
+        "applicationDate": "신청일",
+        "emailAddress": "메일주소",
+        "referenceDataNote": "참고용 자료이므로 반드시 내부 회계자료 등과\n비교 후 사용해 주세요.",
+        "result": "결과"
+    },
     "common": {
         "latest": "최신순",
         "oldest": "오래된순"

src/pages/additional-service/ars/detail-page.tsx

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

src/pages/additional-service/fund-account/result-detail-page.tsx

@@ -86,13 +86,7 @@ export const FundAccountResultDetailPage = () => {
             <div className="pay-top">
               <div className="num-amount">
                 <span className="amount">
-                  <NumericFormat
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.amount || 0) })}
-                    value={detail?.amount}
-                    thousandSeparator
-                    displayType="text"
-                    prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                    suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                  ></NumericFormat>
                 </span>
               </div>
               <div className="num-store">{detail?.accountName}({detail?.accountNo})</div>

src/pages/additional-service/fund-account/transfer-detail-page.tsx

@@ -79,13 +79,7 @@ export const FundAccountTransferDetailPage = () => {
             <div className="pay-top">
               <div className="num-amount">
                 <span className="amount">
-                  <NumericFormat
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.amount || 0) })}
-                    value={detail?.amount}
-                    thousandSeparator
-                    displayType="text"
-                    prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                    suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                  ></NumericFormat>
                 </span>
               </div>
               <div className="num-store">{detail?.accountName}({detail?.accountNo})</div>

src/pages/additional-service/link-payment/apply/link-payment-apply-confirm-page.tsx

@@ -52,17 +52,9 @@ export const LinkPaymentApplyConfirmPage = () => {
                 if (rs.status) {
                     navigate(PATHS.additionalService.linkPayment.confirmSuccess);
                 } else {
-                    // 응답은 성공했지만 status가 false인 경우
+                    // 일반 에러 메시지
-                    const validationErrors = rs.error?.details?.validationErrors;
+                    const errorMessage = rs.error?.message || '요청을 처리할 수 없습니다.';
-                    if (validationErrors) {
+                    snackBar(`[실패] ${errorMessage}`);
-                        // validation 에러 메시지들을 수집
-                        const errorMessages = Object.values(validationErrors).join('\n');
-                        snackBar(`[실패] ${errorMessages}`);
-                    } else {
-                        // 일반 에러 메시지
-                        const errorMessage = rs.error?.message || '요청을 처리할 수 없습니다.';
-                        snackBar(`[실패] ${errorMessage}`);
-                    }
                 }
             })
             .catch((error) => {

src/pages/additional-service/link-payment/link-payment-detail-page.tsx

@@ -157,7 +157,7 @@ export const LinkPaymentDetailPage = () => {
                 <button
                   className="btn-50 btn-blue flex-1"
                   onClick={() => onClickToSeparateApproval()}
-                  disabled={false}
+                  disabled={detailExposure}
                 >분리승인 상세</button>
               </div>
             </div>

src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx

@@ -52,11 +52,63 @@ export const LinkPaymentSeparateApprovalPage = () => {
 
     const handleCheckboxChange = (subRequestId: string) => {
         setSelectedItems(prev => {
-            if (prev.includes(subRequestId)) {
+            // 현재 클릭한 item 찾기
-                return prev.filter(id => id !== subRequestId);
+            const target = items.find(i => i.subRequestId === subRequestId)
-            } else {
+                || items.find((_, idx) => `item-${idx}` === subRequestId);
-                return [...prev, subRequestId];
+            if (!target) return prev;
+
+            // 동일한 requestId를 가진 MAIN, SUB 그룹 가져오기
+            const sameRequestIdItems = items.filter(i => i.requestId === target.requestId);
+            const mainItem = sameRequestIdItems.find(i => i.type === LinkPaymentSeparateType.MAIN);
+            // PENDING 상태인 SUB만 필터링
+            const subItems = sameRequestIdItems.filter(i =>
+                i.type === LinkPaymentSeparateType.SUB && i.paymentStatus === 'PENDING'
+            );
+
+            const mainId = mainItem?.subRequestId || (mainItem ? `item-${items.indexOf(mainItem)}` : '');
+            const subIds = subItems.map(i => i.subRequestId || `item-${items.indexOf(i)}`);
+
+            // -----------------------------
+            // MAIN 클릭 시
+            // -----------------------------
+            if (target.type === LinkPaymentSeparateType.MAIN) {
+                const isMainChecked = prev.includes(mainId);
+                if (isMainChecked) {
+                    // MAIN 해제 → PENDING인 SUB만 해제
+                    return prev.filter(id => ![mainId, ...subIds].includes(id));
+                } else {
+                    // MAIN 체크 → PENDING인 SUB만 추가
+                    return [...new Set([...prev, mainId, ...subIds])];
+                }
             }
+
+            // -----------------------------
+            // SUB 클릭 시
+            // -----------------------------
+            const isChecked = prev.includes(subRequestId);
+            let updated: string[] = [];
+
+            if (isChecked) {
+                // SUB 해제
+                updated = prev.filter(id => id !== subRequestId);
+
+                // 해제 후 남은 PENDING SUB 중 하나라도 빠져 있으면 MAIN도 해제
+                const allPendingSubsChecked = subIds.every(id => updated.includes(id));
+                if (!allPendingSubsChecked && mainId) {
+                    updated = updated.filter(id => id !== mainId);
+                }
+            } else {
+                // SUB 체크
+                updated = [...prev, subRequestId];
+
+                // 모든 PENDING SUB 체크되면 MAIN도 자동 체크
+                const allPendingSubsChecked = subIds.every(id => updated.includes(id));
+                if (allPendingSubsChecked && mainId) {
+                    updated = [...new Set([...updated, mainId])];
+                }
+            }
+
+            return updated;
         });
     };
 
@@ -67,12 +119,60 @@ export const LinkPaymentSeparateApprovalPage = () => {
         }));
     };
 
-    // 기간연장 버튼 활성화 조건: 선택된 항목이 있고, 모든 선택된 항목의 연장기간이 설정됨
+    // 각 SUB 항목이 연장기간 설정 가능한지 체크
-    const isExtendButtonEnabled = () => {
+    const canExtendPeriod = (item: ExtensionLinkPaySeparateDetailItem) => {
-        if (selectedItems.length === 0) return false;
+        const today = moment().format('YYYYMMDD');
-        return selectedItems.every(id => extendPeriods[id] && extendPeriods[id] !== '');
+        const paymentLimitDate = item.paymentLimitDate || '';
+        const paymentLimitCount = item.paymentLimitCount || 0;
+
+        // 연장횟수 < 3 이고 유효일자 >= 조회일자
+        return paymentLimitCount < 3 && paymentLimitDate >= today;
     };
 
+    // 각 SUB 항목이 링크중단 가능한지 체크
+    const canLinkBreak = (item: ExtensionLinkPaySeparateDetailItem) => {
+        const today = moment().format('YYYYMMDD');
+        const paymentLimitDate = item.paymentLimitDate || '';
+
+        // 유효일자 >= 조회일자
+        return paymentLimitDate >= today;
+    };
+
+    const isExtendButtonEnabled = () => {
+        // MAIN 제외, 체크된 SUB 중에서
+        const checkedSubs = items.filter((i, index) => {
+            const itemId = i.subRequestId || `item-${index}`;
+            return i.type === LinkPaymentSeparateType.SUB &&
+                   selectedItems.includes(itemId) &&
+                   i.paymentStatus === 'PENDING';
+        });
+
+        // 체크된 SUB가 없으면 비활성화
+        if (checkedSubs.length === 0) return false;
+
+        // 모든 체크된 SUB가 연장 가능하고, 연장기간이 설정되어 있어야 함
+        return checkedSubs.every((sub) => {
+            const itemId = sub.subRequestId || `item-${items.indexOf(sub)}`;
+            return canExtendPeriod(sub) && extendPeriods[itemId] && extendPeriods[itemId] !== '';
+        });
+    };
+
+    const isLinkBreadkEnabled = () => {
+        // MAIN 제외, 체크된 SUB 중에서
+        const checkedSubs = items.filter((i, index) => {
+            const itemId = i.subRequestId || `item-${index}`;
+            return i.type === LinkPaymentSeparateType.SUB &&
+                   selectedItems.includes(itemId) &&
+                   i.paymentStatus === 'PENDING';
+        });
+
+        // 체크된 SUB가 없으면 비활성화
+        if (checkedSubs.length === 0) return false;
+
+        // 모든 체크된 SUB가 링크중단 가능해야 함
+        return checkedSubs.every(sub => canLinkBreak(sub));
+    }
+
     const onClickToValidityPeriod = () => {
         // 기간연장 바텀시트 열기
         setExtendedPeriodBottomSheetOn(true);
@@ -94,8 +194,13 @@ export const LinkPaymentSeparateApprovalPage = () => {
             return;
         }
 
-        // 모든 선택된 항목들의 연장 기간이 설정되었는지 확인
+        // MAIN을 제외한 선택된 SUB 항목들의 연장 기간이 설정되었는지 확인
-        const allHaveExtendPeriod = selectedItems.every(id => extendPeriods[id]);
+        const selectedSubItems = selectedItems.filter(id => {
+            const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === id);
+            return item && item.type === LinkPaymentSeparateType.SUB;
+        });
+
+        const allHaveExtendPeriod = selectedSubItems.every(id => extendPeriods[id]);
 
         if (!allHaveExtendPeriod) {
             setErrorMessage('모든 선택된 항목의 연장 기간을 선택해주세요.');
@@ -103,15 +208,15 @@ export const LinkPaymentSeparateApprovalPage = () => {
             return;
         }
 
-        // 첫 번째 선택된 항목의 연장 기간 사용 (모든 항목이 같은 기간으로 연장)
+        // 첫 번째 선택된 SUB 항목의 연장 기간 사용 (모든 항목이 같은 기간으로 연장)
-        const firstSelectedId = selectedItems[0] as string;
+        const firstSelectedSubId = selectedSubItems[0] as string;
-        const extendDays = extendPeriods[firstSelectedId] as string;
+        const extendDays = extendPeriods[firstSelectedSubId] as string;
 
         // 연장 날짜 계산 (오늘 날짜 + 연장일수)
         const extendDate = moment().add(parseInt(extendDays), 'days').format('YYYYMMDD');
 
-        // selectedItems를 API 형식으로 변환
+        // MAIN을 제외한 SUB 항목만 API 형식으로 변환
-        const selectedItemsData = selectedItems.map(itemId => {
+        const selectedItemsData = selectedSubItems.map(itemId => {
             const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === itemId);
             return {
                 type: item?.type || '',
@@ -157,7 +262,13 @@ export const LinkPaymentSeparateApprovalPage = () => {
             return;
         }
 
-        const selectedItemsData = selectedItems.map(itemId => {
+        // MAIN을 제외한 SUB 항목만 필터링
+        const selectedSubItems = selectedItems.filter(id => {
+            const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === id);
+            return item && item.type === LinkPaymentSeparateType.SUB;
+        });
+
+        const selectedItemsData = selectedSubItems.map(itemId => {
             const item = items.find(i => (i.subRequestId || `item-${items.indexOf(i)}`) === itemId);
             return {
                 type: item?.type || '',
@@ -230,67 +341,75 @@ export const LinkPaymentSeparateApprovalPage = () => {
                             <div className="approval-cards-wrapper">
                                 {items.map((item, index) => {
                                     const itemId = item.subRequestId || `item-${index}`;
+                                    const isDisabled = item.paymentStatus !== 'PENDING';
                                     return (
-                                    <div key={itemId} className={`approval-card ${selectedItems.includes(itemId) ? 'selected' : ''}`}>
+                                        <div key={itemId} className={`approval-card ${selectedItems.includes(itemId) ? 'selected' : ''} ${isDisabled ? 'disabled' : ''}`}>
-                                        <div className="card-header">
+                                            <div className="card-header">
-                                            <input
+                                                <input
-                                                type="checkbox"
+                                                    type="checkbox"
-                                                id={`checkbox-${itemId}`}
+                                                    id={`checkbox-${itemId}`}
-                                                name={`checkbox-${itemId}`}
+                                                    name={`checkbox-${itemId}`}
-                                                checked={selectedItems.includes(itemId)}
+                                                    checked={selectedItems.includes(itemId)}
-                                                onChange={() => handleCheckboxChange(itemId)}
+                                                    onChange={() => handleCheckboxChange(itemId)}
-                                                className="card-checkbox"
+                                                    className="card-checkbox"
-                                            />
+                                                    disabled={item.paymentStatus !== 'PENDING'}
-                                            <span className="card-tag">[{item.type}]</span>
+                                                />
-                                            <span className="card-tid">{item.moid}</span>
+                                                <span className="card-tag">[{item.type}]</span>
-                                        </div>
+                                                <span className="card-tid">{item.moid}</span>
-                                        <div className="card-body">
+                                            </div>
-                                            <ul className="info-list">
+                                            <div className="card-body">
-                                                <li>
+                                                <ul className="info-list">
-                                                    <span className="label">• 거래금액:</span>
+                                                    <li>
-                                                    <span className="value">{item.amount.toLocaleString()}</span>
+                                                        <span className="label">• 거래금액:</span>
-                                                </li>
+                                                        <span className="value">{item.amount.toLocaleString()}</span>
-                                                <li>
+                                                    </li>
-                                                    <span className="label">• 결제상태:</span>
+                                                    <li>
-                                                    <span className="value">{item.paymentStatusName}</span>
+                                                        <span className="label">• 결제상태:</span>
-                                                </li>
+                                                        <span className="value">{item.paymentStatusName}</span>
-                                                {item.type !== LinkPaymentSeparateType.MAIN && (
+                                                    </li>
-                                                    <>
+                                                    {item.type !== LinkPaymentSeparateType.MAIN && (
-                                                        <li>
+                                                        <>
-                                                            <span className="label">• 유효기간:</span>
+                                                            <li>
-                                                            <span className="value">
+                                                                <span className="label">• 유효기간:</span>
-                                                                {item.paymentLimitDate
+                                                                <span className="value">
-                                                                    ? moment(item.paymentLimitDate, 'YYYYMMDD').format('YYYY/MM/DD')
+                                                                    {item.paymentLimitDate
-                                                                    : '-'
+                                                                        ? moment(item.paymentLimitDate, 'YYYYMMDD').format('YYYY/MM/DD')
-                                                                }
+                                                                        : '-'
-                                                            </span>
+                                                                    }
-                                                        </li>
+                                                                </span>
-                                                        <li>
+                                                            </li>
-                                                            <span className="label">• 연장횟수:</span>
+                                                            <li>
-                                                            <span className="value">{item.paymentLimitCount}</span>
+                                                                <span className="label">• 연장횟수:</span>
-                                                        </li>
+                                                                <span className="value">{item.paymentLimitCount}</span>
-                                                    </>
+                                                            </li>
-                                                )}
+                                                        </>
-                                            </ul>
+                                                    )}
-                                        </div>
+                                                </ul>
-                                        <div className="card-footer">
+                                            </div>
-                                            <div className="period-selector">
+                                            <div className="card-footer">
-                                                <label>연장기간</label>
+                                                <div className="period-selector">
-                                                <select
+                                                    <label>연장기간</label>
-                                                    value={extendPeriods[itemId] || ''}
+                                                    <select
-                                                    onChange={(e) => handleExtendPeriodChange(itemId, e.target.value)}
+                                                        value={extendPeriods[itemId] || ''}
-                                                    disabled={item.type === LinkPaymentSeparateType.MAIN}
+                                                        onChange={(e) => handleExtendPeriodChange(itemId, e.target.value)}
-                                                >
+                                                        disabled={item.type === LinkPaymentSeparateType.MAIN || item.paymentStatus !== "PENDING" || !canExtendPeriod(item)}
-                                                    <option value="">미설정</option>
+                                                    >
-                                                    {[1, 2, 3, 4, 5, 6, 7].map(days => {
+                                                        <option value="">
-                                                        const baseDate = moment(item.paymentLimitDate, 'YYYYMMDD');
+                                                            {item.type === LinkPaymentSeparateType.MAIN
-                                                        const targetDate = baseDate.clone().add(days, 'days').format('YYYY/MM/DD');
+                                                                ? '-'
-                                                        return <option key={days} value={days.toString()}>{targetDate}</option>;
+                                                                : !canExtendPeriod(item)
-                                                    })}
+                                                                ? '-'
-                                                </select>
+                                                                : '미설정'}
+                                                        </option>
+                                                        {canExtendPeriod(item) && [1, 2, 3, 4, 5, 6, 7].map(days => {
+                                                            const baseDate = moment(item.paymentLimitDate, 'YYYYMMDD');
+                                                            const targetDate = baseDate.clone().add(days, 'days').format('YYYY/MM/DD');
+                                                            return <option key={days} value={days.toString()}>{targetDate}</option>;
+                                                        })}
+                                                    </select>
+                                                </div>
                                             </div>
                                         </div>
-                                    </div>
                                     );
                                 })}
                             </div>
@@ -306,7 +425,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
                             <button
                                 className="btn-50 btn-blue flex-1"
                                 onClick={onClickToSendLink}
-                                disabled={selectedItems.length === 0}
+                                disabled={!isLinkBreadkEnabled()}
                             >링크중단
                             </button>
                         </div>

src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-success-page.tsx

@@ -1,6 +1,4 @@
 import { motion } from 'framer-motion';
-import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { PATHS } from "@/shared/constants/paths";
 import {
     FilterMotionDuration,
     FilterMotionStyle,

src/pages/additional-service/payout/detail-page.tsx

@@ -108,13 +108,7 @@ export const PayoutDetailPage = () => {
             <div className="pay-top">
               <div className="num-amount">
                 <span className="amount">
-                  <NumericFormat
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail?.disbursementAmount || 0) })}
-                    value={ detail?.disbursementAmount }
-                    thousandSeparator
-                    displayType="text"
-                    prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                    suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                  ></NumericFormat>
                 </span>
               </div>
               <div className="num-store">{detail?.companyName}</div>

src/pages/transaction/all-transaction/list-page.tsx

@@ -231,13 +231,7 @@ export const AllTransactionListPage = () => {
 							<div className="summary-label">{t('transaction.searchAmount')}</div>
 							<div className="summary-amount">
 								<span className="amount-text">
-                  <NumericFormat
+                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(totalAmount || 0) })}
-                    value={ totalAmount }
-                    thousandSeparator
-                    displayType="text"
-                    prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
-                    suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
-                  ></NumericFormat>
                 </span>
 								<div className="summary-actions">
 									<button className="filter-btn">

src/pages/transaction/cash-receipt/list-page.tsx

@@ -218,13 +218,7 @@ export const CashReceiptListPage = () => {
 								<div className="row">
 									<span className="label">{ t('cashReceipt.approval') }</span>
 									<strong className="amount22">
-										<NumericFormat
+										{t('home.money', { value: new Intl.NumberFormat('en-US').format(approvalAmount || 0) })}
-											value={ approvalAmount }
-											thousandSeparator
-											displayType="text"
-											prefix={ i18n.language === 'en' ? t('home.currencySymbol') : '' }
-											suffix={ i18n.language === 'en' ? '' : t('home.currencyWon') }
-										></NumericFormat>
 									</strong>
 									<span className="count">
 										<NumericFormat
@@ -239,13 +233,7 @@ export const CashReceiptListPage = () => {
 								<div className="row">
 									<span className="label">{ t('common.cancel') }</span>
 									<strong className="amount19">
-										<NumericFormat
+										{t('home.money', { value: new Intl.NumberFormat('en-US').format(cancelAmount || 0) })}
-											value={ cancelAmount }
-											thousandSeparator
-											displayType="text"
-											prefix={ i18n.language === 'en' ? t('home.currencySymbol') : '' }
-											suffix={ i18n.language === 'en' ? '' : t('home.currencyWon') }
-										></NumericFormat>
 									</strong>
 									<span className="count">
 										<NumericFormat

src/pages/vat-return/detail-page.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useLocation } from 'react-router';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
@@ -26,6 +27,7 @@ import { VatReturnListDetailBottomSheet } from '@/entities/vat-return/ui/list-de
 import { useVatReturnBreakdownMutation } from '@/entities/vat-return/api/use-vat-return-breakdown-mutation';
 
 export const DetailPage = () => {
+  const { t } = useTranslation();
   const { navigate } = useNavigate();
   const location = useLocation();
 
@@ -37,7 +39,7 @@ export const DetailPage = () => {
   const [detail, setDetail] = useState<VatReturnDetailResponse>({});
   const [breakdown, setBreakdown] = useState<Array<Breakdown>>([]);
    
-  useSetHeaderTitle('세금계산서 상세');
+  useSetHeaderTitle(t('vatReturn.taxInvoiceDetail'));
   useSetHeaderType(HeaderType.RightClose);
   useSetOnBack(() => {
     navigate(PATHS.vatReturn.list);
@@ -103,7 +105,7 @@ export const DetailPage = () => {
               <button
                 className="btn-50 btn-blue flex-1"
                 onClick={ onClickToOpenBottomSheet }
-              >세부내역 조회</button>
+              >{t('vatReturn.viewDetails')}</button>
             </div>
           </div>
         </div>

src/pages/vat-return/list-page.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { VatReturnTab } from '@/entities/vat-return/ui/vat-return-tab';
@@ -13,11 +14,12 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 
 export const ListPage = () => {
+  const { t } = useTranslation();
   const { navigate } = useNavigate();
 
   const [activeTab, setActiveTab] = useState<VatReturnTabKeys>(VatReturnTabKeys.List);
 
-  useSetHeaderTitle('부가세 신고 자료');
+  useSetHeaderTitle(t('vatReturn.title'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
   useSetOnBack(() => {

src/pages/vat-return/reference-page.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { VatReturnTab } from '@/entities/vat-return/ui/vat-return-tab';
@@ -13,11 +14,12 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 
 export const ReferencePage = () => {
+  const { t } = useTranslation();
   const { navigate } = useNavigate();
 
   const [activeTab, setActiveTab] = useState<VatReturnTabKeys>(VatReturnTabKeys.VatReference);
 
-  useSetHeaderTitle('부가세 신고 자료');
+  useSetHeaderTitle(t('vatReturn.title'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
   useSetOnBack(() => {

src/shared/ui/assets/css/style-fix.css

@@ -233,6 +233,29 @@ main.home-main{
     box-shadow: 0 4px 12px rgba(62, 106, 252, 0.2);
 }
 
+/* PENDING이 아닌 항목 비활성화 스타일 */
+.approval-card.disabled {
+    opacity: 0.5;
+    background: var(--color-F9F9F9);
+    pointer-events: none;
+}
+
+.approval-card.disabled .card-checkbox {
+    cursor: not-allowed;
+    background-color: var(--color-E6E6E6);
+    border-color: var(--color-CCCCCC);
+}
+
+.approval-card.disabled .card-tid,
+.approval-card.disabled .info-list .value {
+    color: var(--color-999999);
+}
+
+.approval-card.disabled .period-selector select {
+    background-color: var(--color-F3F3F3);
+    cursor: not-allowed;
+}
+
 .approval-card .card-checkbox {
     display: block !important;
     position: absolute;