close 버튼 공통화

src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx

@@ -8,6 +8,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
 import { useNavigate } from '@/shared/lib/hooks';
 import { PATHS } from '@/shared/constants/paths';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 export interface AllTransactionCancelPreventBondProps {
   cancelPreventBondOn: boolean;
   setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void;
@@ -52,16 +53,10 @@ export const AllTransactionCancelPreventBond = ({
           <div className="full-menu-header">
             <div className="full-menu-title center">{t('transaction.cancel.afterDeposit.title')}</div>
             <div className="full-menu-actions">
-              <button
-                id="closeFullMenu"
-                className="full-menu-close"
-              >
-                <img
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt={t('common.close')}
-                  onClick={ onClickToClose }
-                />
-              </button>
+              <FullMenuClose
+                addClass='full-menu-close'
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
             </div>
           </div>
           <div className="option-list-nopadding pw-26">

src/entities/transaction/ui/filter/all-transaction-filter.tsx

@@ -24,6 +24,7 @@ import {
 } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export const AllTransactionFilter = ({
   filterOn,
@@ -219,16 +220,10 @@ export const AllTransactionFilter = ({
           <div className="full-menu-header">
             <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button
-                id="closeFullMenu"
-                className="full-menu-close"
-              >
-                <img
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt={t('filter.close')}
-                  onClick={ () => onClickToClose() }
-                />
-              </button>
+              <FullMenuClose
+                addClass='full-menu-close'
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
             </div>
           </div>
 

src/entities/transaction/ui/filter/billing-filter.tsx

@@ -28,6 +28,7 @@ import {
 } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export const BillingFilter = ({
   filterOn,
@@ -113,16 +114,10 @@ export const BillingFilter = ({
           <div className="full-menu-header">
             <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button
-                id="closeFullMenu"
-                className="full-menu-close"
-              >
-                <img
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt={t('filter.close')}
-                  onClick={ () => onClickToClose() }
-                />
-              </button>
+              <FullMenuClose
+                addClass='full-menu-close'
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
             </div>
           </div>
 

src/entities/transaction/ui/filter/cash-receipt-filter.tsx

@@ -26,6 +26,7 @@ import {
 } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export const CashReceiptFilter = ({
   filterOn,
@@ -104,16 +105,10 @@ export const CashReceiptFilter = ({
           <div className="full-menu-header">
             <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button
-                id="closeFullMenu"
-                className="full-menu-close"
-              >
-                <img
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt={t('filter.close')}
-                  onClick={ () => onClickToClose() }
-                />
-              </button>
+              <FullMenuClose
+                addClass='full-menu-close'
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
             </div>
           </div>
 

src/entities/transaction/ui/filter/escrow-filter.tsx

@@ -26,6 +26,7 @@ import {
 } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export const EscrowFilter = ({
   filterOn,
@@ -106,16 +107,10 @@ export const EscrowFilter = ({
           <div className="full-menu-header">
             <div className="full-menu-title center">{t('filter.filter')}</div>
             <div className="full-menu-actions">
-              <button
-                id="closeFullMenu"
-                className="full-menu-close"
-              >
-                <img
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
-                  alt={t('filter.close')}
-                  onClick={ () => onClickToClose() }
-                />
-              </button>
+              <FullMenuClose
+                addClass='full-menu-close'
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
             </div>
           </div>