부가세 참고 및 컴포넌트 전체적 일부 수정

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

@@ -7,108 +7,100 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { AccountHolderAuthFilterProps, AuthAndTransferStatus } from '@/entities/additional-service/model/types';
 import { authStatusBtnGroup } from '@/entities/additional-service/model/account-holder-auth/constant';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 
 export const AccountHolderAuthFilter = ({
-    filterOn,
-    setFilterOn,
-    mid,
-    startDate,
-    endDate,
-    authStatus,
-    setMid,
-    setStartDate,
-    setEndDate,
-    setAuthStatus
+	filterOn,
+	setFilterOn,
+	mid,
+	startDate,
+	endDate,
+	authStatus,
+	setMid,
+	setStartDate,
+	setEndDate,
+	setAuthStatus
 }: AccountHolderAuthFilterProps) => {
 
-    const [filterMid, setFilterMid] = useState<string>(mid);
-    const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
-    const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
-    const [filterAuthStatus, setFilterAuthStatus] = useState<AuthAndTransferStatus>(authStatus);
+	const [filterMid, setFilterMid] = useState<string>(mid);
+	const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
+	const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
+	const [filterAuthStatus, setFilterAuthStatus] = useState<AuthAndTransferStatus>(authStatus);
 
-    const variants = {
-        hidden: { x: '100%' },
-        visible: { x: '0%' },
-    };
+	let MidOptions = [
+		{ name: 'nictest001m', value: 'nictest001m' },
+		{ name: 'nictest002m', value: 'nictest002m' }
+	];
 
-    let MidOptions = [
-        { name: 'nictest001m', value: 'nictest001m' },
-        { name: 'nictest002m', value: 'nictest002m' }
-    ];
+	const onClickToClose = () => {
+		setFilterOn(false);
+	};
 
-    const onClickToClose = () => {
-        setFilterOn(false);
-    };
+	const onClickToSetFilter = () => {
+		setMid(filterMid);
+		setStartDate(filterStartDate);
+		setEndDate(filterEndDate);
+		setAuthStatus(filterAuthStatus);
+		onClickToClose();
+	};
 
-    const onClickToSetFilter = () => {
-        setMid(filterMid);
-        setStartDate(filterStartDate);
-        setEndDate(filterEndDate);
-        setAuthStatus(filterAuthStatus);
-        onClickToClose();
-    };
+	return (
+		<>
+			<motion.div
+				className="full-menu-modal"
+				initial="hidden"
+				animate={(filterOn) ? 'visible' : 'hidden'}
+				variants={ FilterMotionVariants }
+				transition={ FilterMotionDuration }
+				style={ FilterMotionStyle }
+			>
+				<div className="full-menu-container">
+					<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>
+						</div>
+					</div>
 
-    return (
-        <>
-            <motion.div
-                id="fullMenuModal"
-                className="full-menu-modal"
-                initial="hidden"
-                animate={(filterOn) ? 'visible' : 'hidden'}
-                variants={variants}
-                transition={{ duration: 0.3 }}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                }}
-            >
-                <div className="full-menu-container">
-                    <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>
-                        </div>
-                    </div>
+					<div className="option-list pt-16">
+						<FilterSelect
+							title='가맹점'
+							selectValue={mid}
+							selectSetter={setMid}
+							selectOptions={MidOptions}
+						></FilterSelect>
 
-                    <div className="option-list pt-16">
-                        <FilterSelect
-                            title='가맹점'
-                            selectValue={mid}
-                            selectSetter={setMid}
-                            selectOptions={MidOptions}
-                        ></FilterSelect>
+						<FilterCalendar
+							startDate={filterStartDate}
+							endDate={filterEndDate}
+							setStartDate={setFilterStartDate}
+							setEndDate={setFilterEndDate}
+						></FilterCalendar>
 
-                        <FilterCalendar
-                            startDate={filterStartDate}
-                            endDate={filterEndDate}
-                            setStartDate={setFilterStartDate}
-                            setEndDate={setFilterEndDate}
-                        ></FilterCalendar>
-
-                        <FilterButtonGroups
-                            title='지급상태'
-                            activeValue={filterAuthStatus}
-                            btnGroups={authStatusBtnGroup}
-                            setter={setFilterAuthStatus}
-                        ></FilterButtonGroups>
-                    </div>
-                    <div className="apply-row">
-                        <button
-                            className="btn-50 btn-blue flex-1"
-                            onClick={() => onClickToSetFilter()}
-                        >적용</button>
-                    </div>
-                </div>
-            </motion.div>
-        </>
-    )
+						<FilterButtonGroups
+							title='지급상태'
+							activeValue={filterAuthStatus}
+							btnGroups={authStatusBtnGroup}
+							setter={setFilterAuthStatus}
+						></FilterButtonGroups>
+					</div>
+					<div className="apply-row">
+						<button
+							className="btn-50 btn-blue flex-1"
+							onClick={() => onClickToSetFilter()}
+						>적용</button>
+					</div>
+				</div>
+			</motion.div>
+		</>
+	);
 }

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

@@ -3,165 +3,156 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import {
-    AccountHolderSearchType,
-    AccountHolderSearchFilterProps,
-    ProcessResult
+	AccountHolderSearchType,
+	AccountHolderSearchFilterProps,
+	ProcessResult
 } from '../../../model/types';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterDateOptions } from '@/entities/common/model/types';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 
 export const AccountHolderSearchFilter = ({
-    filterOn,
-    setFilterOn,
-    mid,
-    searchType,
-    searchKeyword,
-    startDate,
-    endDate,
-    bank,
-    processResult,
-    setMid,
-    setSearchType,
-    setSearchKeyword,
-    setStartDate,
-    setEndDate,
-    setBank,
-    setProcessResult
+	filterOn,
+	setFilterOn,
+	mid,
+	searchType,
+	searchKeyword,
+	startDate,
+	endDate,
+	bank,
+	processResult,
+	setMid,
+	setSearchType,
+	setSearchKeyword,
+	setStartDate,
+	setEndDate,
+	setBank,
+	setProcessResult
 }: AccountHolderSearchFilterProps) => {
 
-    const [filterMid, setFilterMid] = useState<string>(mid);
-    const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchType>(searchType);
-    const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
-    const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
-    const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
-    const [filterBank, setFilterBank] = useState<string>(bank)
-    const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
+	const [filterMid, setFilterMid] = useState<string>(mid);
+	const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchType>(searchType);
+	const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
+	const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
+	const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
+	const [filterBank, setFilterBank] = useState<string>(bank)
+	const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
 
-    const variants = {
-        hidden: { x: '100%' },
-        visible: { x: '0%' },
-    };
+	const onClickToClose = () => {
+		setFilterOn(false);
+	};
 
-    const onClickToClose = () => {
-        setFilterOn(false);
-    };
+	const setNewDate = (newDate: any) => {
+		console.log(newDate)
+	};
 
-    const setNewDate = (newDate: any) => {
-        console.log(newDate)
-    };
+	const onClickToSetFilter = () => {
+		setMid(filterMid);
+		setSearchType(filterSearchType);
+		setSearchKeyword(filterSearchKeyword);
+		setStartDate(filterStartDate);
+		setEndDate(filterEndDate);
+		setBank(filterBank);
+		setProcessResult(filterProcessResult);
+		onClickToClose();
+	};
 
-    const onClickToSetFilter = () => {
-        setMid(filterMid);
-        setSearchType(filterSearchType);
-        setSearchKeyword(filterSearchKeyword);
-        setStartDate(filterStartDate);
-        setEndDate(filterEndDate);
-        setBank(filterBank);
-        setProcessResult(filterProcessResult);
-        onClickToClose();
-    };
+	let MidOptions = [
+		{ name: 'nictest001m', value: 'nictest001m' },
+		{ name: 'nictest002m', value: 'nictest002m' }
+	];
 
-    let MidOptions = [
-        { name: 'nictest001m', value: 'nictest001m' },
-        { name: 'nictest002m', value: 'nictest002m' }
-    ];
+	let bankOptions = [
+		{ name: '우리은행', value: '우리은행' },
+		{ name: '토스뱅킹', value: '토스뱅킹' }
+	];
 
-    let bankOptions = [
-        { name: '우리은행', value: '우리은행' },
-        { name: '토스뱅킹', value: '토스뱅킹' }
-    ]
+	let searchTypeOption = [
+		{ name: '예금주', value: AccountHolderSearchType.ACCOUNT_NAME },
+		{ name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NO },
+	];
 
-    let searchTypeOption = [
-        { name: '예금주', value: AccountHolderSearchType.ACCOUNT_NAME },
-        { name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NO },
-    ]
+	let processResultBtnGroup = [
+		{ name: '전체', value: ProcessResult.ALL },
+		{ name: '성공', value: ProcessResult.SUCCESS },
+		{ name: '실패', value: ProcessResult.FAIL },
+	];
 
-    let processResultBtnGroup = [
-        { name: '전체', value: ProcessResult.ALL },
-        { name: '성공', value: ProcessResult.SUCCESS },
-        { name: '실패', value: ProcessResult.FAIL },
-    ];
+	return (
+		<>
+			<motion.div
+				className="full-menu-modal"
+				initial="hidden"
+				animate={(filterOn) ? 'visible' : 'hidden'}
+				variants={ FilterMotionVariants }
+				transition={ FilterMotionDuration }
+				style={ FilterMotionStyle }
+			>
+				<div className="full-menu-container">
+					<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>
+						</div>
+					</div>
 
-    return (
-        <>
-            <motion.div
-                id="fullMenuModal"
-                className="full-menu-modal"
-                initial="hidden"
-                animate={(filterOn) ? 'visible' : 'hidden'}
-                variants={variants}
-                transition={{ duration: 0.3 }}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                }}
-            >
-                <div className="full-menu-container">
-                    <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>
-                        </div>
-                    </div>
+					<div className="option-list pt-16">
+						<FilterSelect
+							title='가맹점'
+							selectValue={mid}
+							selectSetter={setMid}
+							selectOptions={MidOptions}
+						></FilterSelect>
 
-                    <div className="option-list pt-16">
-                        <FilterSelect
-                            title='가맹점'
-                            selectValue={mid}
-                            selectSetter={setMid}
-                            selectOptions={MidOptions}
-                        ></FilterSelect>
+						<FilterSelectInput
+							title='예금주/계좌번호'
+							selectValue={searchType}
+							selectSetter={setSearchType}
+							selectOptions={searchTypeOption}
+							inputValue={searchKeyword}
+							inputSetter={setSearchKeyword}
+						></FilterSelectInput>
+						<FilterCalendar
+							startDate={filterStartDate}
+							endDate={filterEndDate}
+							setStartDate={setFilterStartDate}
+							setEndDate={setFilterEndDate}
+						></FilterCalendar>
 
-                        <FilterSelectInput
-                            title='예금주/계좌번호'
-                            selectValue={searchType}
-                            selectSetter={setSearchType}
-                            selectOptions={searchTypeOption}
-                            inputValue={searchKeyword}
-                            inputSetter={setSearchKeyword}
-                        ></FilterSelectInput>
-                        <FilterCalendar
-                            startDate={filterStartDate}
-                            endDate={filterEndDate}
-                            setStartDate={setFilterStartDate}
-                            setEndDate={setFilterEndDate}
-                        ></FilterCalendar>
-
-                        <FilterSelect
-                            title='은행'
-                            selectValue={bank}
-                            selectSetter={setBank}
-                            selectOptions={bankOptions}
-                        ></FilterSelect>
-
-                        <FilterButtonGroups
-                            title='조회결과'
-                            activeValue={filterProcessResult}
-                            btnGroups={processResultBtnGroup}
-                            setter={setFilterProcessResult}
-                        ></FilterButtonGroups>
-                    </div>
-                    <div className="apply-row">
-                        <button
-                            className="btn-50 btn-blue flex-1"
-                            onClick={() => onClickToSetFilter()}
-                        >적용</button>
-                    </div>
-                </div>
-            </motion.div>
-        </>
-    )
+						<FilterSelect
+							title='은행'
+							selectValue={bank}
+							selectSetter={setBank}
+							selectOptions={bankOptions}
+						></FilterSelect>
 
+						<FilterButtonGroups
+							title='조회결과'
+							activeValue={filterProcessResult}
+							btnGroups={processResultBtnGroup}
+							setter={setFilterProcessResult}
+						></FilterButtonGroups>
+					</div>
+					<div className="apply-row">
+						<button
+							className="btn-50 btn-blue flex-1"
+							onClick={() => onClickToSetFilter()}
+						>적용</button>
+					</div>
+				</div>
+			</motion.div>
+		</>
+	);
 }

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

@@ -93,7 +93,6 @@ export const AlimtalkFilter = ({
   return (
     <>
       <motion.div 
-        id="fullMenuModal" 
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }

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

@@ -93,7 +93,6 @@ export const ArsFilter = ({
   return (
     <>
       <motion.div 
-        id="fullMenuModal" 
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }

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

@@ -101,7 +101,6 @@ export const FundAccountResultFilter = ({
   return (
     <>
       <motion.div 
-        id="fullMenuModal" 
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }

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

@@ -96,7 +96,6 @@ export const FundAccountTransactionFilter = ({
   return (
     <>
       <motion.div 
-        id="fullMenuModal" 
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }

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

@@ -92,7 +92,6 @@ export const PayoutFilter = ({
   return (
     <>
       <motion.div 
-        id="fullMenuModal" 
         className="full-menu-modal" 
         initial="hidden"
         animate={ (filterOn)? 'visible': 'hidden' }

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

@@ -9,137 +9,128 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import {
-    KeyInPaymentFilterProps,
-    KeyInPaymentTransactionStatus
+	KeyInPaymentFilterProps,
+	KeyInPaymentTransactionStatus
 } from '../../../model/types';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 
 export const KeyInPaymentFilter = ({
-    filterOn,
-    setFilterOn,
-    mid,
-    startDate,
-    endDate,
-    transactionStatus,
-    minAmount,
-    maxAmount,
-    setMid,
-    setStartDate,
-    setEndDate,
-    setTransactionStatus,
-    setMinAmount,
-    setMaxAmount
+	filterOn,
+	setFilterOn,
+	mid,
+	startDate,
+	endDate,
+	transactionStatus,
+	minAmount,
+	maxAmount,
+	setMid,
+	setStartDate,
+	setEndDate,
+	setTransactionStatus,
+	setMinAmount,
+	setMaxAmount
 }: KeyInPaymentFilterProps) => {
 
-    const [filterMid, setFilterMid] = useState<string>(mid);
-    const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
-    const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
-    const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
-    const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
-    const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
+	const [filterMid, setFilterMid] = useState<string>(mid);
+	const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+	const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+	const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
+	const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
+	const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
 
-    const variants = {
-        hidden: { x: '100%' },
-        visible: { x: '0%' },
-    };
+	const onClickToClose = () => {
+		setFilterOn(false);
+	};
 
-    const onClickToClose = () => {
-        setFilterOn(false);
-    };
+	const setNewDate = (newDate: any) => {
+		console.log(newDate)
+	};
 
-    const setNewDate = (newDate: any) => {
-        console.log(newDate)
-    };
+	const onClickToSetFilter = () => {
+		setMid(filterMid);
+		setStartDate(filterStartDate);
+		setEndDate(filterEndDate);
+		setTransactionStatus(filterTransactionStatus);
+		setMinAmount(filterMinAmount);
+		setMaxAmount(filterMaxAmount);
+		onClickToClose();
+	};
+	let MidOptions = [
+		{ name: 'nictest001m', value: 'nictest001m' }
+	];
 
-    const onClickToSetFilter = () => {
-        setMid(filterMid);
-        setStartDate(filterStartDate);
-        setEndDate(filterEndDate);
-        setTransactionStatus(filterTransactionStatus);
-        setMinAmount(filterMinAmount);
-        setMaxAmount(filterMaxAmount);
-        onClickToClose();
-    };
-    let MidOptions = [
-        { name: 'nictest001m', value: 'nictest001m' }
-    ];
+	let transactionStatusOption = [
+		{ name: '전체', value: KeyInPaymentTransactionStatus.ALL },
+		{ name: '승인', value: KeyInPaymentTransactionStatus.APPROVAL },
+		{ name: '전취소', value: KeyInPaymentTransactionStatus.PRE_CANCEL },
+		{ name: '후취소', value: KeyInPaymentTransactionStatus.POST_CANCEL },
+	];
 
-    let transactionStatusOption = [
-        { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
-        { name: '승인', value: KeyInPaymentTransactionStatus.APPROVAL },
-        { name: '전취소', value: KeyInPaymentTransactionStatus.PRE_CANCEL },
-        { name: '후취소', value: KeyInPaymentTransactionStatus.POST_CANCEL },
-    ]
+	return (
+		<>
+			<motion.div
+				className="full-menu-modal"
+				initial="hidden"
+				animate={(filterOn) ? 'visible' : 'hidden'}
+				variants={ FilterMotionVariants }
+				transition={ FilterMotionDuration }
+				style={ FilterMotionStyle }
+			>
+				<div className="full-menu-container">
+					<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>
+						</div>
+					</div>
 
-    return (
-        <>
-            <motion.div
-                id="fullMenuModal"
-                className="full-menu-modal"
-                initial="hidden"
-                animate={(filterOn) ? 'visible' : 'hidden'}
-                variants={variants}
-                transition={{ duration: 0.3 }}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                }}
-            >
-                <div className="full-menu-container">
-                    <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>
-                        </div>
-                    </div>
+					<div className="option-list pt-16">
+						<FilterSelect
+							title='가맹점'
+							selectValue={filterMid}
+							selectSetter={setMid}
+							selectOptions={MidOptions}
+						></FilterSelect>
+						<FilterCalendar
+							title='조회기간'
+							startDate={filterStartDate}
+							endDate={filterEndDate}
+							setStartDate={setFilterStartDate}
+							setEndDate={setFilterEndDate}
+						></FilterCalendar>
 
-                    <div className="option-list pt-16">
-                        <FilterSelect
-                            title='가맹점'
-                            selectValue={filterMid}
-                            selectSetter={setMid}
-                            selectOptions={MidOptions}
-                        ></FilterSelect>
-                        <FilterCalendar
-                            title='조회기간'
-                            startDate={filterStartDate}
-                            endDate={filterEndDate}
-                            setStartDate={setFilterStartDate}
-                            setEndDate={setFilterEndDate}
-                        ></FilterCalendar>
+						<FilterButtonGroups
+							title='거래상태'
+							activeValue={filterTransactionStatus}
+							btnGroups={transactionStatusOption}
+							setter={setFilterTransactionStatus}
+						></FilterButtonGroups>
 
-                        <FilterButtonGroups
-                            title='거래상태'
-                            activeValue={filterTransactionStatus}
-                            btnGroups={transactionStatusOption}
-                            setter={setFilterTransactionStatus}
-                        ></FilterButtonGroups>
-
-                        <FilterRangeAmount
-                            title='상품가격'
-                            minAmount={filterMinAmount}
-                            maxAmount={filterMaxAmount}
-                            setMinAmount={setFilterMinAmount}
-                            setMaxAmount={setFilterMaxAmount}
-                        ></FilterRangeAmount>
-
-                    </div>
-                    <div className="apply-row">
-                        <button
-                            className="btn-50 btn-blue flex-1"
-                            onClick={() => onClickToSetFilter()}
-                        >적용</button>
-                    </div>
-                </div>
-            </motion.div>
-        </>
-    );
+						<FilterRangeAmount
+							title='상품가격'
+							minAmount={filterMinAmount}
+							maxAmount={filterMaxAmount}
+							setMinAmount={setFilterMinAmount}
+							setMaxAmount={setFilterMaxAmount}
+						></FilterRangeAmount>
+					</div>
+					<div className="apply-row">
+						<button
+							className="btn-50 btn-blue flex-1"
+							onClick={() => onClickToSetFilter()}
+						>적용</button>
+					</div>
+				</div>
+			</motion.div>
+		</>
+	);
 };

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

@@ -4,193 +4,185 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
 import { ChangeEvent, useState } from 'react';
 import {
-    LinkPaymentSearchType,
-    LinkPaymentSendMethod,
-    LinkPaymentHistoryFilterProps,
-    LinkPaymentTransactionStatus,
-    ProcessResult
+	LinkPaymentSearchType,
+	LinkPaymentSendMethod,
+	LinkPaymentHistoryFilterProps,
+	LinkPaymentTransactionStatus,
+	ProcessResult
 } from "../../../model/types";
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterDateOptions } from '@/entities/common/model/types';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 
 export const LinkPaymentHistoryFilter = ({
-    filterOn,
-    setFilterOn,
-    mid,
-    searchType,
-    searchKeyword,
-    startDate,
-    endDate,
-    transactionStatus,
-    processResult,
-    sendMethod,
-    setMid,
-    setSearchType,
-    setSearchKeyword,
-    setStartDate,
-    setEndDate,
-    setTransactionStatus,
-    setProcessResult,
-    setSendMethod
+	filterOn,
+	setFilterOn,
+	mid,
+	searchType,
+	searchKeyword,
+	startDate,
+	endDate,
+	transactionStatus,
+	processResult,
+	sendMethod,
+	setMid,
+	setSearchType,
+	setSearchKeyword,
+	setStartDate,
+	setEndDate,
+	setTransactionStatus,
+	setProcessResult,
+	setSendMethod
 }: LinkPaymentHistoryFilterProps) => {
 
 
-    const [filterMid, setFilterMid] = useState<string>(mid);
-    const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
-    const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
-    const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
-    const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
-    const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentTransactionStatus>(transactionStatus)
-    const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
-    const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod);
-    const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
-    const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
+	const [filterMid, setFilterMid] = useState<string>(mid);
+	const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
+	const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
+	const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+	const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+	const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentTransactionStatus>(transactionStatus)
+	const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
+	const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod);
+	const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
+	const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
 
-    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
+	const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
+	
+	const onClickToClose = () => {
+		setFilterOn(false);
+	};
 
-    const variants = {
-        hidden: { x: '100%' },
-        visible: { x: '0%' },
-    };
+	const setNewDate = (newDate: any) => {
+		console.log(newDate)
+	};
 
-    const onClickToClose = () => {
-        setFilterOn(false);
-    };
+	const onClickToSetFilter = () => {
+		setMid(filterMid);
+		setSearchType(filterSearchType);
+		setSearchKeyword(filterSearchKeyword);
+		setStartDate(filterStartDate);
+		setEndDate(filterEndDate);
+		setTransactionStatus(filterTransactionStatus);
+		setProcessResult(filterProcessResult);
+		setSendMethod(filterSendMethod);
+		onClickToClose();
+	};
 
-    const setNewDate = (newDate: any) => {
-        console.log(newDate)
-    };
+	let MidOptions = [
+		{ name: 'nictest001m', value: 'nictest001m' },
+		{ name: 'nictest002m', value: 'nictest002m' }
+	];
 
-    const onClickToSetFilter = () => {
-        setMid(filterMid);
-        setSearchType(filterSearchType);
-        setSearchKeyword(filterSearchKeyword);
-        setStartDate(filterStartDate);
-        setEndDate(filterEndDate);
-        setTransactionStatus(filterTransactionStatus);
-        setProcessResult(filterProcessResult);
-        setSendMethod(filterSendMethod);
-        onClickToClose();
-    };
+	let searchTypeOption = [
+		{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
+		{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
+	];
 
-    let MidOptions = [
-        { name: 'nictest001m', value: 'nictest001m' },
-        { name: 'nictest002m', value: 'nictest002m' }
-    ];
+	let transactionStatusOption = [
+		{ name: '전체', value: LinkPaymentTransactionStatus.ALL },
+		{ name: '미완료/활성화', value: LinkPaymentTransactionStatus.ACTIVATE },
+		{ name: '입금요청', value: LinkPaymentTransactionStatus.DEPOSIT_REQUEST },
+		{ name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE },
+		{ name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL },
+		{ name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE },
+	];
 
-    let searchTypeOption = [
-        { name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
-        { name: '이메일', value: LinkPaymentSearchType.EMAIL },
-    ]
+	let processResultOption = [
+		{ name: '전체', value: ProcessResult.ALL },
+		{ name: '성공', value: ProcessResult.SUCCESS },
+		{ name: '실패', value: ProcessResult.FAIL },
+	];
 
-    let transactionStatusOption = [
-        { name: '전체', value: LinkPaymentTransactionStatus.ALL },
-        { name: '미완료/활성화', value: LinkPaymentTransactionStatus.ACTIVATE },
-        { name: '입금요청', value: LinkPaymentTransactionStatus.DEPOSIT_REQUEST },
-        { name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE },
-        { name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL },
-        { name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE },
-    ]
+	let sendMethodOption = [
+		{ name: '전체', value: LinkPaymentSendMethod.ALL },
+		{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
+		{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
+		{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
+	];
 
-    let processResultOption = [
-        { name: '전체', value: ProcessResult.ALL },
-        { name: '성공', value: ProcessResult.SUCCESS },
-        { name: '실패', value: ProcessResult.FAIL },
-    ]
+	return (
+		<>
+			<motion.div
+				className="full-menu-modal"
+				initial="hidden"
+				animate={(filterOn) ? 'visible' : 'hidden'}
+				variants={ FilterMotionVariants }
+				transition={ FilterMotionDuration }
+				style={ FilterMotionStyle }
+			>
+				<div className="full-menu-container">
+					<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>
+						</div>
+					</div>
 
-        let sendMethodOption = [
-        { name: '전체', value: LinkPaymentSendMethod.ALL },
-        { name: 'SMS', value: LinkPaymentSendMethod.SMS },
-        { name: '이메일', value: LinkPaymentSendMethod.EMAIL },
-        { name: '카카오', value: LinkPaymentSendMethod.KAKAO },
-    ]
+					<div className="option-list pt-16">
+						<FilterSelect
+							title='가맹점'
+							selectValue={filterMid}
+							selectSetter={setFilterMid}
+							selectOptions={MidOptions}
+						></FilterSelect>
 
-    return (
-        <>
-            <motion.div
-                id="fullMenuModal"
-                className="full-menu-modal"
-                initial="hidden"
-                animate={(filterOn) ? 'visible' : 'hidden'}
-                variants={variants}
-                transition={{ duration: 0.3 }}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                }}
-            >
-                <div className="full-menu-container">
-                    <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>
-                        </div>
-                    </div>
+						<FilterSelectInput
+							title='휴대폰번호/이메일'
+							selectValue={filterSearchType}
+							selectSetter={setFilterSearchType}
+							selectOptions={searchTypeOption}
+							inputValue={searchKeyword}
+							inputSetter={setSearchKeyword}
+						></FilterSelectInput>
+						<FilterCalendar
+							startDate={filterStartDate}
+							endDate={filterEndDate}
+							setStartDate={setFilterStartDate}
+							setEndDate={setFilterEndDate}
+						></FilterCalendar>
 
-                    <div className="option-list pt-16">
-                        <FilterSelect
-                            title='가맹점'
-                            selectValue={filterMid}
-                            selectSetter={setFilterMid}
-                            selectOptions={MidOptions}
-                        ></FilterSelect>
+						<FilterButtonGroups
+							title='거래상태'
+							activeValue={filterTransactionStatus}
+							btnGroups={transactionStatusOption}
+							setter={setFilterTransactionStatus}
+						></FilterButtonGroups>
 
-                        <FilterSelectInput
-                            title='휴대폰번호/이메일'
-                            selectValue={filterSearchType}
-                            selectSetter={setFilterSearchType}
-                            selectOptions={searchTypeOption}
-                            inputValue={searchKeyword}
-                            inputSetter={setSearchKeyword}
-                        ></FilterSelectInput>
-                        <FilterCalendar
-                            startDate={filterStartDate}
-                            endDate={filterEndDate}
-                            setStartDate={setFilterStartDate}
-                            setEndDate={setFilterEndDate}
-                        ></FilterCalendar>
+						<FilterButtonGroups
+							title='전송결과'
+							activeValue={filterProcessResult}
+							btnGroups={processResultOption}
+							setter={setFilterProcessResult}
+						></FilterButtonGroups>
 
-                        <FilterButtonGroups
-                            title='거래상태'
-                            activeValue={filterTransactionStatus}
-                            btnGroups={transactionStatusOption}
-                            setter={setFilterTransactionStatus}
-                        ></FilterButtonGroups>
-
-                        <FilterButtonGroups
-                            title='전송결과'
-                            activeValue={filterProcessResult}
-                            btnGroups={processResultOption}
-                            setter={setFilterProcessResult}
-                        ></FilterButtonGroups>
-
-                        <FilterButtonGroups
-                            title='발송수단'
-                            activeValue={filterSendMethod}
-                            btnGroups={sendMethodOption}
-                            setter={setFilterSendMethod}
-                        ></FilterButtonGroups>
-                    </div>
-                    <div className="apply-row">
-                        <button
-                            className="btn-50 btn-blue flex-1"
-                            onClick={() => onClickToSetFilter()}
-                        >적용</button>
-                    </div>
-                </div>
-            </motion.div>
-        </>
-    )
+						<FilterButtonGroups
+							title='발송수단'
+							activeValue={filterSendMethod}
+							btnGroups={sendMethodOption}
+							setter={setFilterSendMethod}
+						></FilterButtonGroups>
+					</div>
+					<div className="apply-row">
+						<button
+							className="btn-50 btn-blue flex-1"
+							onClick={() => onClickToSetFilter()}
+						>적용</button>
+					</div>
+				</div>
+			</motion.div>
+		</>
+	)
 }

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

@@ -4,172 +4,164 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
 import { ChangeEvent, useState } from 'react';
 import {
-    LinkPaymentWaitFilterProps,
-    LinkPaymentSearchType,
-    LinkPaymentSendMethod,
-    LinkPaymentSendingStatus,
+	LinkPaymentWaitFilterProps,
+	LinkPaymentSearchType,
+	LinkPaymentSendMethod,
+	LinkPaymentSendingStatus,
 } from "../../../model/types";
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { FilterDateOptions } from '@/entities/common/model/types';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 
 export const LinkPaymentWaitSendFilter = ({
-    filterOn,
-    setFilterOn,
-    mid,
-    searchType,
-    searchKeyword,
-    startDate,
-    endDate,
-    sendMethod,
-    sendingStatus,
-    setMid,
-    setSearchType,
-    setSearchKeyword,
-    setStartDate,
-    setEndDate,
-    setSendMethod,
-    setSendingStatus
+	filterOn,
+	setFilterOn,
+	mid,
+	searchType,
+	searchKeyword,
+	startDate,
+	endDate,
+	sendMethod,
+	sendingStatus,
+	setMid,
+	setSearchType,
+	setSearchKeyword,
+	setStartDate,
+	setEndDate,
+	setSendMethod,
+	setSendingStatus
 }: LinkPaymentWaitFilterProps) => {
 
 
-    const [filterMid, setFilterMid] = useState<string>(mid);
-    const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
-    const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
-    const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
-    const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
-    const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod)
-    const [filterSendingStatus, setFilterSendingStatus] = useState<LinkPaymentSendingStatus>(sendingStatus);
-    const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
-    const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
+	const [filterMid, setFilterMid] = useState<string>(mid);
+	const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
+	const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
+	const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+	const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+	const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod)
+	const [filterSendingStatus, setFilterSendingStatus] = useState<LinkPaymentSendingStatus>(sendingStatus);
+	const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
+	const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
 
-    const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
+	const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
 
-    const variants = {
-        hidden: { x: '100%' },
-        visible: { x: '0%' },
-    };
+	const onClickToClose = () => {
+		setFilterOn(false);
+	};
 
-    const onClickToClose = () => {
-        setFilterOn(false);
-    };
+	const setNewDate = (newDate: any) => {
+		console.log(newDate)
+	};
 
-    const setNewDate = (newDate: any) => {
-        console.log(newDate)
-    };
+	const onClickToSetFilter = () => {
+		setMid(filterMid);
+		setSearchType(filterSearchType);
+		setSearchKeyword(filterSearchKeyword);
+		setStartDate(filterStartDate);
+		setEndDate(filterEndDate);
+		setSendMethod(filterSendMethod);
+		setSendingStatus(filterSendingStatus);
+		onClickToClose();
+	};
 
-    const onClickToSetFilter = () => {
-        setMid(filterMid);
-        setSearchType(filterSearchType);
-        setSearchKeyword(filterSearchKeyword);
-        setStartDate(filterStartDate);
-        setEndDate(filterEndDate);
-        setSendMethod(filterSendMethod);
-        setSendingStatus(filterSendingStatus);
-        onClickToClose();
-    };
+	let MidOptions = [
+		{ name: 'nictest001m', value: 'nictest001m' },
+		{ name: 'nictest002m', value: 'nictest002m' }
+	];
 
-    let MidOptions = [
-        { name: 'nictest001m', value: 'nictest001m' },
-        { name: 'nictest002m', value: 'nictest002m' }
-    ];
+	let searchTypeOption = [
+		{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
+		{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
+	];
 
-    let searchTypeOption = [
-        { name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
-        { name: '이메일', value: LinkPaymentSearchType.EMAIL },
-    ]
+	let sendMethodOption = [
+		{ name: '전체', value: LinkPaymentSendMethod.ALL },
+		{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
+		{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
+		{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
+	];
 
-    let sendMethodOption = [
-        { name: '전체', value: LinkPaymentSendMethod.ALL },
-        { name: 'SMS', value: LinkPaymentSendMethod.SMS },
-        { name: '이메일', value: LinkPaymentSendMethod.EMAIL },
-        { name: '카카오', value: LinkPaymentSendMethod.KAKAO },
-    ]
+	let sendingStatusOption = [
+		{ name: '전체', value: LinkPaymentSendingStatus.ALL },
+		{ name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
+		{ name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL },
+	];
 
-    let sendingStatusOption = [
-        { name: '전체', value: LinkPaymentSendingStatus.ALL },
-        { name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
-        { name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL },
-    ]
+	return (
+		<>
+			<motion.div
+				className="full-menu-modal"
+				initial="hidden"
+				animate={(filterOn) ? 'visible' : 'hidden'}
+				variants={ FilterMotionVariants }
+				transition={ FilterMotionDuration }
+				style={ FilterMotionStyle }
+			>
+				<div className="full-menu-container">
+					<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>
+						</div>
+					</div>
 
-    return (
-        <>
-            <motion.div
-                id="fullMenuModal"
-                className="full-menu-modal"
-                initial="hidden"
-                animate={(filterOn) ? 'visible' : 'hidden'}
-                variants={variants}
-                transition={{ duration: 0.3 }}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                }}
-            >
-                <div className="full-menu-container">
-                    <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>
-                        </div>
-                    </div>
+					<div className="option-list pt-16">
+						<FilterSelect
+							title='가맹점'
+							selectValue={mid}
+							selectSetter={setFilterMid}
+							selectOptions={MidOptions}
+						></FilterSelect>
 
-                    <div className="option-list pt-16">
-                        <FilterSelect
-                            title='가맹점'
-                            selectValue={mid}
-                            selectSetter={setFilterMid}
-                            selectOptions={MidOptions}
-                        ></FilterSelect>
+						<FilterSelectInput
+							title='휴대폰번호/이메일'
+							selectValue={searchType}
+							selectSetter={setFilterSearchType}
+							selectOptions={searchTypeOption}
+							inputValue={searchKeyword}
+							inputSetter={setSearchKeyword}
+						></FilterSelectInput>
+						<FilterCalendar
+							startDate={filterStartDate}
+							endDate={filterEndDate}
+							setStartDate={setFilterStartDate}
+							setEndDate={setFilterEndDate}
+						></FilterCalendar>
 
-                        <FilterSelectInput
-                            title='휴대폰번호/이메일'
-                            selectValue={searchType}
-                            selectSetter={setFilterSearchType}
-                            selectOptions={searchTypeOption}
-                            inputValue={searchKeyword}
-                            inputSetter={setSearchKeyword}
-                        ></FilterSelectInput>
-                        <FilterCalendar
-                            startDate={filterStartDate}
-                            endDate={filterEndDate}
-                            setStartDate={setFilterStartDate}
-                            setEndDate={setFilterEndDate}
-                        ></FilterCalendar>
+						<FilterButtonGroups
+							title='발송수단'
+							activeValue={filterSendMethod}
+							btnGroups={sendMethodOption}
+							setter={setFilterSendMethod}
+						></FilterButtonGroups>
 
-                        <FilterButtonGroups
-                            title='발송수단'
-                            activeValue={filterSendMethod}
-                            btnGroups={sendMethodOption}
-                            setter={setFilterSendMethod}
-                        ></FilterButtonGroups>
-
-                        <FilterButtonGroups
-                            title='진행상태'
-                            activeValue={filterSendingStatus}
-                            btnGroups={sendingStatusOption}
-                            setter={setFilterSendingStatus}
-                        ></FilterButtonGroups>
-                    </div>
-                    <div className="apply-row">
-                        <button
-                            className="btn-50 btn-blue flex-1"
-                            onClick={() => onClickToSetFilter()}
-                        >적용</button>
-                    </div>
-                </div>
-            </motion.div>
-        </>
-    )
+						<FilterButtonGroups
+							title='진행상태'
+							activeValue={filterSendingStatus}
+							btnGroups={sendingStatusOption}
+							setter={setFilterSendingStatus}
+						></FilterButtonGroups>
+					</div>
+					<div className="apply-row">
+						<button
+							className="btn-50 btn-blue flex-1"
+							onClick={() => onClickToSetFilter()}
+						>적용</button>
+					</div>
+				</div>
+			</motion.div>
+		</>
+	)
 }

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

@@ -70,7 +70,6 @@ export const SmsPaymentFilter = ({
   return (
     <>
       <motion.div
-        id="fullMenuModal"
         className="full-menu-modal"
         initial="hidden"
         animate={(filterOn) ? 'visible' : 'hidden'}