close 버튼 공통화

src/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter.tsx

@@ -11,6 +11,7 @@ import { useStore } from '@/shared/model/store';
 import { AccountHolderAuthFilterProps, AccountHolderAuthStatus } from '@/entities/additional-service/model/account-holder-auth/types';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export const AccountHolderAuthFilter = ({
 	filterOn,
@@ -60,16 +61,10 @@ export const AccountHolderAuthFilter = ({
 					<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/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx

@@ -12,6 +12,7 @@ import { AccountHolderSearchFilterProps, AccountHolderSearchCl, AccountHolderRes
 import { getResultStatusBtnGroup, getSearchTypeOption } from '@/entities/additional-service/model/account-holder-search/constant';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export const AccountHolderSearchFilter = ({
 	filterOn,
@@ -82,16 +83,10 @@ export const AccountHolderSearchFilter = ({
 					<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/additional-service/ui/face-auth/filter/face-auth-filter.tsx

@@ -12,6 +12,7 @@ import { FaceAuthFilterProps, FaceAuthResult, FaceAuthTransType } from '@/entiti
 import { getAuthResultBtnGroup, getTransactionTypeBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export const FaceAuthFilter = ({
 	filterOn,
@@ -70,16 +71,10 @@ export const FaceAuthFilter = ({
 					<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/additional-service/ui/filter/alimtalk-filter.tsx

@@ -17,6 +17,7 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { getAlimtalkAlimClBtnGroupForGeneral, getAlimtalkAlimClBtnGroupForVBank, getAlimtalkSearchClOptionGroup, getAlimtalkSendClBtnGroup, getAlimtalkSendTypeBtnGroup, getAlimtalkServiceCodeOptionGroup } from '../../model/alimtalk/constant';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export interface AlimtalkFilterProps {
   filterOn: boolean;
@@ -123,16 +124,10 @@ export const AlimtalkFilter = ({
           <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>
           <div className="option-list pt-16 pb-86">

src/entities/additional-service/ui/filter/ars-filter.tsx

@@ -17,6 +17,7 @@ import { OrderStatus, PaymentStatus } from '../../model/ars/types';
 import { getArsOrderStatusBtnGroup, getArsPaymentStatusBtnGroup } from '../../model/ars/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 interface ArsFilterProps {
   filterOn: boolean;
@@ -105,16 +106,10 @@ export const ArsFilter = ({
           <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>
           <div className="option-list pt-16 pb-86">

src/entities/additional-service/ui/filter/fund-account-result-filter.tsx

@@ -12,6 +12,7 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export interface FundAccountResultFilterProps {
   filterOn: boolean;
@@ -112,16 +113,10 @@ export const FundAccountResultFilter = ({
           <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>
           <div className="option-list pt-16 pb-86">

src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx

@@ -12,6 +12,7 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export interface FundAccountTransactionFilterProps {
   filterOn: boolean;
@@ -106,16 +107,10 @@ export const FundAccountTransactionFilter = ({
           <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>
           <div className="option-list pt-16 pb-86">

src/entities/additional-service/ui/filter/payout-filter.tsx

@@ -22,6 +22,7 @@ import moment from 'moment';
 import { useStore } from '@/shared/model/store';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export interface PayoutFilterProps {
   filterOn: boolean;
@@ -103,16 +104,10 @@ export const PayoutFilter = ({
           <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>
           <div className="option-list pt-16 pb-86">

src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx

@@ -12,6 +12,7 @@ import { KeyInPaymentFilterProps, KeyInPaymentTansactionType } from '@/entities/
 import { getKeyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export const KeyInPaymentFilter = ({
 	filterOn,
@@ -66,16 +67,10 @@ export const KeyInPaymentFilter = ({
 					<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/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx

@@ -16,6 +16,7 @@ import { useStore } from '@/shared/model/store';
 import { LinkPaymentHistoryFilterProps, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '@/entities/additional-service/model/link-pay/types';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export const LinkPaymentHistoryFilter = ({
 	filterOn,
@@ -108,16 +109,10 @@ export const LinkPaymentHistoryFilter = ({
 					<div className="full-menu-header">
 						<div className="full-menu-title center">{t('common.filter')}</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>
 

src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx

@@ -12,6 +12,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
 import { useStore } from '@/shared/model/store';
 import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitFilterProps } from '@/entities/additional-service/model/link-pay/types';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 export const LinkPaymentWaitSendFilter = ({
 	filterOn,
@@ -91,16 +92,10 @@ export const LinkPaymentWaitSendFilter = ({
 					<div className="full-menu-header">
 						<div className="full-menu-title center">필터</div>
 						<div className="full-menu-actions">
-							<button
-								id="closeFullMenu"
-								className="full-menu-close"
-							>
-								<img
-									src={IMAGE_ROOT + '/ico_close.svg'}
-									alt="닫기"
-									onClick={() => onClickToClose()}
-								/>
-							</button>
+							<FullMenuClose
+								addClass='full-menu-close'
+								onClickToCallback={ onClickToClose }
+							></FullMenuClose>
 						</div>
 					</div>
 

src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx

@@ -11,6 +11,7 @@ import { SmsPaymentFilterProps, SmsPaymentSearchCl, SmsCl } from '../../model/sm
 import { useStore } from '@/shared/model/store';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 export const SmsPaymentFilter = ({
   filterOn,
   setFilterOn,
@@ -79,16 +80,10 @@ export const SmsPaymentFilter = ({
           <div className="full-menu-header">
             <div className="full-menu-title center">필터</div>
             <div className="full-menu-actions">
-              <button
-                id="closeFullMenu"
-                className="full-menu-close"
-              >
-                <img
-                  src={IMAGE_ROOT + '/ico_close.svg'}
-                  alt="닫기"
-                  onClick={() => onClickToClose()}
-                />
-              </button>
+              <FullMenuClose
+                addClass='full-menu-close'
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
             </div>
           </div>