close 버튼 공통화

This commit is contained in:
focp212@naver.com
2025-11-03 13:36:22 +09:00
parent b543719295
commit 6ff2209508
24 changed files with 145 additions and 208 deletions

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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">

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -0,0 +1,26 @@
import { IMAGE_ROOT } from "@/shared/constants/common";
import { useTranslation } from "react-i18next";
export interface FullMenuCloseProps {
addClass?: string;
onClickToCallback: () => void;
};
export const FullMenuClose = ({
addClass = 'full-menu-close',
onClickToCallback
}: FullMenuCloseProps) => {
const { t } = useTranslation();
return (
<>
<button className={ addClass }>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt={ t('filter.close') }
onClick={ onClickToCallback }
/>
</button>
</>
);
};

View File

@@ -17,6 +17,7 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { getSettlementPaymentMethodOptionsGroup, getSettlementPeriodTypeBtnGroup } from '../../model/constant';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
export interface ListFilterProps {
filterOn: boolean;
@@ -88,16 +89,10 @@ export const ListFilter = ({
<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('common.close')}
onClick={ () => onClickToClose() }
/>
</button>
<FullMenuClose
addClass='full-menu-close'
onClickToCallback={ onClickToClose }
></FullMenuClose>
</div>
</div>
<div className="option-list pt-16 pb-86">

View File

@@ -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">

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -10,6 +10,7 @@ import { getVatReturnReceiptTypeBtnGroup, getVatReturnTargetTypeBtnGroup } from
import { FilterCalendarMonth } from '@/shared/ui/filter/calendar-month';
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 ListFilterProps {
filterOn: boolean;
@@ -75,15 +76,10 @@ export const ListFilter = ({
<div className="full-menu-header">
<div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions">
<button
className="full-menu-close"
onClick={ () => onClickToClose() }
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt={t('common.close')}
/>
</button>
<FullMenuClose
addClass='full-menu-close'
onClickToCallback={ onClickToClose }
></FullMenuClose>
</div>
</div>

View File

@@ -19,10 +19,6 @@
padding: 0;
}
.calendar-style .react-calendar .react-calendar__navigation {
/* background-color: white;*/
}
.calendar-style .react-calendar .react-calendar__navigation button {
color: #2D3436;
padding: 0;
@@ -101,6 +97,11 @@ abbr[title] {
.tile-sunday{
color: #FF0000 !important;
}
.filter-calendar-close{
position: absolute;
right: 0.4rem;
top: 0.6rem;
}
@media (max-width: 768px) {

View File

@@ -6,6 +6,7 @@ import 'react-calendar/dist/Calendar.css';
import { useEffect } from 'react';
import { CalendarType } from '@/entities/common/model/types';
import { useTranslation } from 'react-i18next';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
interface NiceCalendarProps {
calendarOpen: boolean;
@@ -131,6 +132,10 @@ const NiceCalendarMonth = ({
<>
<div className="bg-dim"></div>
<CalendarWrapper onClick={ () => onClickToClose() }>
<FullMenuClose
addClass='filter-calendar-close'
onClickToCallback={ onClickToClose }
></FullMenuClose>
<Calendar
locale={currentLocale}
minDate={ minMonth }

View File

@@ -6,6 +6,8 @@ import 'react-calendar/dist/Calendar.css';
import { useEffect } from 'react';
import { CalendarType } from '@/entities/common/model/types';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
interface NiceCalendarProps {
calendarOpen: boolean;
@@ -36,7 +38,7 @@ const NiceCalendar = ({
minDate: propMinDate,
maxDate: propMaxDate
}: NiceCalendarProps) => {
const { i18n } = useTranslation();
const { i18n, t } = useTranslation();
const currentLocale = i18n.language || 'en';
const [valueDate, setValueDate] = useState<Date | undefined>();
@@ -48,7 +50,7 @@ const NiceCalendar = ({
};
const onClickToClose = () => {
// setCalendarOpen(false);
setCalendarOpen(false);
};
const setMinMaxValueDate = () => {
if(calendarType === CalendarType.Start){
@@ -136,10 +138,11 @@ const NiceCalendar = ({
{ (calendarOpen) &&
<>
<div className="bg-dim"></div>
<CalendarWrapper
className="calendar-container calendar-style"
onClick={ () => onClickToClose() }
>
<CalendarWrapper className="calendar-container calendar-style">
<FullMenuClose
addClass='filter-calendar-close'
onClickToCallback={ onClickToClose }
></FullMenuClose>
<Calendar
locale={currentLocale}
minDate={ minDate }

View File

@@ -12,6 +12,7 @@ import { setHomeReloadKey } from '@/pages/home/home-page';
import { useShortcutSaveMutation } from '@/entities/user/api/use-shortcut-save-mutation';
import { ShortcutSaveParams, ShortcutSaveResponse } from '@/entities/user/model/types';
import { useTranslation } from 'react-i18next';
import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
// 상수 정의
const SCROLL_ANIMATION_DURATION = 800;
@@ -281,15 +282,10 @@ export const Menu = ({
/>
</button>
}
<button
className="full-menu-close"
onClick={ () => onClickToMenuClose() }
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
/>
</button>
<FullMenuClose
addClass='full-menu-close'
onClickToCallback={ onClickToMenuClose }
></FullMenuClose>
</div>
</div>