링크결제[발송내역,발송대기] 필터 추가

src/entities/additional-service/model/types.ts

@@ -8,7 +8,7 @@ export interface FundTransferTabProps {
   activeTab: FundTransferTabKeys;
 };
 export enum LinkPaymentTabKeys {
-  DispatchList = 'DispatchList',
+  ShippingHistory = 'ShippingHistory',
   PendingSend = 'PendingSend'
 };
 export interface LinkPaymentTabProps {
@@ -23,16 +23,41 @@ export enum SortByKeys {
   New = 'New',
   Amount = 'Amount',
 };
+export enum ProcessResult {
+  ALL = 'ALL',
+  SUCCESS = 'SUCCESS',
+  FAILURE = 'FAILURE'
+};
 export enum AccountHolderSearchType {
   ALL = 'ALL',
   ACCOUNT_HOLDER = 'ACCOUNT_HOLDER',
   ACCOUNT_NUMBER = 'ACCOUNT_NUMBER'
 };
-export enum AccountHolderSearchProcessResult {
+export enum LinkPaymentSearchType {
-  ALL = 'ALL',
+  ALL = "ALL",
-  SUCCESS = 'SUCCESS',
+  PHONE = "PHONE",
-  FAILURE = 'FAILURE'
+  EMAIL = "EMAIL"
 };
+export enum LinkPaymentSendMethod {
+  ALL = "ALL",
+  SMS = "SMS",
+  EMAIL = "EMAIL",
+  KAKAO = "KAKAO"
+};
+export enum LinkPaymentTransactionStatus {
+  ALL = "ALL",
+  ACTIVATE = "ACTIVATE",
+  DEPOSIT_REQUEST = "DEPOSIT_REQUEST",
+  TRANSACTION_COMPLETE = "TRANSACTION_COMPLETE",
+  TRANSACTION_FAIL = "TRANSACTION_FAIL",
+  INACTIVE = "INACTIVE"
+}
+export enum LinkPaymentSendingStatus {
+  ALL = "ALL",
+  SEND_REQUEST = "SEND_REQUEST",
+  SEND_CANCEL = "SEND_CANCEL"
+}
+
 export interface SortOptionsBoxProps {
   sortBy: SortByKeys;
   onClickToSort: (sortBy: SortByKeys) => void;
@@ -328,7 +353,7 @@ export interface FilterProps {
   filterOn: boolean;
   setFilterOn: (filterOn: boolean) => void;
 };
-
+// 계좌성명 조회 필터
 export interface AccountHolderSearchFilterProps extends FilterProps {
   mid: string;
   searchType: AccountHolderSearchType;
@@ -336,17 +361,52 @@ export interface AccountHolderSearchFilterProps extends FilterProps {
   startDate: string;
   endDate: string;
   bank: string;
-  processResult: AccountHolderSearchProcessResult;
+  processResult: ProcessResult;
   setMid: (mid: string) => void;
   setSearchType: (searchType: AccountHolderSearchType) => void;
   setSearchKeyword: (searchKeyWorld: string) => void;
   setStartDate: (startDate: string) => void;
   setEndDate: (endDate: string) => void;
   setBank: (bank: string) => void;
-  setProcessResult: (processResult: AccountHolderSearchProcessResult) => void;
+  setProcessResult: (processResult: ProcessResult) => void;
 }
-export interface LinkPaymentFilterProps extends FilterProps {
 
+// 링크결제 - 발송내역 탭 필터
+export interface LinkPaymentShippingHistoryFilterProps extends FilterProps {
+  mid: string;
+  searchType: LinkPaymentSearchType;
+  searchKeyword: string;
+  startDate: string;
+  endDate: string;
+  transactionStatus: LinkPaymentTransactionStatus;
+  processResult: ProcessResult;
+  sendMethod: LinkPaymentSendMethod;
+  setMid: (mid: string) => void;
+  setSearchType: (searchType: LinkPaymentSearchType) => void;
+  setSearchKeyword: (searchKeyWorld: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setTransactionStatus: (transactionStatus: LinkPaymentTransactionStatus) => void;
+  setProcessResult: (processResult: ProcessResult) => void;
+  setSendMethod: (sendMethod: LinkPaymentSendMethod) => void;
+}
+
+// 링크결제 - 발송대기 탭 필터
+export interface LinkPaymentPendingSendFilterProps extends FilterProps {
+  mid: string;
+  searchType: LinkPaymentSearchType;
+  searchKeyword: string;
+  startDate: string;
+  endDate: string;
+  sendMethod: LinkPaymentSendMethod;
+  sendingStatus: LinkPaymentSendingStatus;
+  setMid: (mid: string) => void;
+  setSearchType: (searchType: LinkPaymentSearchType) => void;
+  setSearchKeyword: (searchKeyWorld: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setSendMethod: (sendMethod: LinkPaymentSendMethod) => void;
+  setSendingStatus: (sendingStatus: LinkPaymentSendingStatus) => void;
 };
 
 export enum DetailInfoSectionKeys {

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

@@ -1,12 +1,15 @@
 import moment from 'moment';
+import { useEffect } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { motion } from 'framer-motion';
 import { ChangeEvent, useState } from 'react';
 import {
     AccountHolderSearchType,
     AccountHolderSearchFilterProps,
-    AccountHolderSearchProcessResult
+    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/filter-calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
@@ -36,7 +39,7 @@ export const AccountHolderSearchFilter = ({
     const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
     const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
     const [filterBank, setFilterBank] = useState<string>(bank)
-    const [filterProcessResult, setFilterProcessResult] = useState<AccountHolderSearchProcessResult>(processResult);
+    const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
     const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
     const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
 
@@ -50,38 +53,6 @@ export const AccountHolderSearchFilter = ({
     const onClickToClose = () => {
         setFilterOn(false);
     };
-    const setFilterDate = (dateOptions: FilterDateOptions) => {
-        if (dateOptions === FilterDateOptions.Today) {
-            setFilterStartDate(moment().format('YYYY-MM-DD'));
-            setFilterEndDate(moment().format('YYYY-MM-DD'));
-            setDateReadyOnly(true);
-            setFilterDateOptionsBtn(FilterDateOptions.Today);
-        }
-        else if (dateOptions === FilterDateOptions.Week) {
-            setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
-            setFilterEndDate(moment().format('YYYY-MM-DD'));
-            setDateReadyOnly(true);
-            setFilterDateOptionsBtn(FilterDateOptions.Week);
-        }
-        else if (dateOptions === FilterDateOptions.Month) {
-            setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
-            setFilterEndDate(moment().format('YYYY-MM-DD'));
-            setDateReadyOnly(true);
-            setFilterDateOptionsBtn(FilterDateOptions.Month);
-        }
-        else if (dateOptions === FilterDateOptions.Input) {
-            setDateReadyOnly(false);
-            setFilterDateOptionsBtn(FilterDateOptions.Input);
-        }
-    };
-    const onClickToOpenCalendar = () => {
-        if (!dateReadOnly) {
-            setCalendarOpen(true);
-        }
-        else {
-            setCalendarOpen(false);
-        }
-    };
 
     const setNewDate = (newDate: any) => {
         console.log(newDate)
@@ -97,11 +68,27 @@ export const AccountHolderSearchFilter = ({
         setProcessResult(filterProcessResult);
     };
 
-    let processResultBtnGroup = [
+    let MidOptions = [
-        { name: '전체', value: AccountHolderSearchProcessResult.ALL },
+        { name: 'nictest001m', value: 'nictest001m' },
-        { name: '성공', value: AccountHolderSearchProcessResult.SUCCESS },
+        { name: 'nictest002m', value: 'nictest002m' }
-        { name: '실패', value: AccountHolderSearchProcessResult.FAILURE },
     ];
+
+    let bankOptions = [
+        { name: '우리은행', value: '우리은행'},
+        { name: '토스뱅킹', value: '토스뱅킹'}
+    ]
+
+    let searchTypeOption = [
+        { name: '예금주', value: AccountHolderSearchType.ACCOUNT_HOLDER },
+        { name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NUMBER },
+    ]
+
+    let processResultBtnGroup = [
+        { name: '전체', value: ProcessResult.ALL },
+        { name: '성공', value: ProcessResult.SUCCESS },
+        { name: '실패', value: ProcessResult.FAILURE },
+    ];
+
     return (
         <>
             <motion.div
@@ -134,40 +121,21 @@ export const AccountHolderSearchFilter = ({
                     </div>
 
                     <div className="option-list pt-16">
-                        <div className="opt-field">
+                        <FilterSelect
-                            <div className="opt-label">가맹점</div>
+                            title='가맹점'
-                            <div className="opt-controls">
+                            selectValue={mid}
-                                <select
+                            selectSetter={setMid}
-                                    className="flex-1"
+                            selectOptions={MidOptions}
-                                    value={filterMid}
+                        ></FilterSelect>
-                                    onChange={(e: any) => setFilterMid(e.target.value)}
-                                >
-                                    <option>nictest001m</option>
-                                    <option>nictest002m</option>
-                                </select>
-                            </div>
-                        </div>
 
-                        <div className="opt-field">
+                        <FilterSelectInput
-                            <div className="opt-label">예금주/계좌번호</div>
+                            title='예금주/계좌번호'
-                            <div className="opt-controls">
+                            selectValue={searchType}
-                                <select
+                            selectSetter={setSearchType}
-                                    className="w-110"
+                            selectOptions={searchTypeOption}
-                                    value={filterSearchType}
+                            inputValue={searchKeyword}
-                                    onChange={(e: any) => setFilterSearchType(e.target.value)}
+                            inputSetter={setSearchKeyword}
-                                >
+                        ></FilterSelectInput>
-                                    <option value={AccountHolderSearchType.ACCOUNT_HOLDER}>예금주</option>
-                                    <option value={AccountHolderSearchType.ACCOUNT_NUMBER}>계좌번호</option>
-                                </select>
-                                <input
-                                    className="flex-1"
-                                    type="text"
-                                    placeholder=""
-                                    value={filterSearchKeyword}
-                                    onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterSearchKeyword(e.target.value)}
-                                />
-                            </div>
-                        </div>
                         <FilterCalendar
                             startDate={filterStartDate}
                             endDate={filterEndDate}
@@ -175,19 +143,12 @@ export const AccountHolderSearchFilter = ({
                             setEndDate={setFilterEndDate}
                         ></FilterCalendar>
 
-                        <div className="opt-field">
+                        <FilterSelect
-                            <div className="opt-label">은행</div>
+                            title='은행'
-                            <div className="opt-controls">
+                            selectValue={bank}
-                                <select
+                            selectSetter={setBank}
-                                    className="flex-1"
+                            selectOptions={bankOptions}
-                                    value={filterBank}
+                        ></FilterSelect>
-                                    onChange={(e: any) => setFilterBank(e.target.value)}
-                                >
-                                    <option>선택</option>
-                                    <option>우리은행</option>
-                                </select>
-                            </div>
-                        </div>
 
                         <FilterButtonGroups
                             title='조회결과'

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

@@ -0,0 +1,174 @@
+import moment from 'moment';
+import { useEffect } from 'react';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+import { ChangeEvent, useState } from 'react';
+import {
+    LinkPaymentPendingSendFilterProps,
+    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/filter-calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+
+export const LinkPaymentPendingSendFilter = ({
+    filterOn,
+    setFilterOn,
+    mid,
+    searchType,
+    searchKeyword,
+    startDate,
+    endDate,
+    sendMethod,
+    sendingStatus,
+    setMid,
+    setSearchType,
+    setSearchKeyword,
+    setStartDate,
+    setEndDate,
+    setSendMethod,
+    setSendingStatus
+}: LinkPaymentPendingSendFilterProps) => {
+
+
+    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 variants = {
+        hidden: { x: '100%' },
+        visible: { x: '0%' },
+    };
+
+    const onClickToClose = () => {
+        setFilterOn(false);
+    };
+
+    const setNewDate = (newDate: any) => {
+        console.log(newDate)
+    };
+
+    const onClickToSetFilter = () => {
+        setMid(filterMid);
+        setSearchType(filterSearchType);
+        setSearchKeyword(filterSearchKeyword);
+        setStartDate(filterStartDate);
+        setEndDate(filterEndDate);
+        setSendMethod(filterSendMethod);
+        setSendingStatus(filterSendingStatus);
+    };
+
+    let MidOptions = [
+        { name: 'nictest001m', value: 'nictest001m' },
+        { name: 'nictest002m', value: 'nictest002m' }
+    ];
+
+    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 sendingStatusOption = [
+        { name: '전체', value: LinkPaymentSendingStatus.ALL },
+        { name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
+        { name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL },
+    ]
+
+    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>
+
+                        <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={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/link-payment/filter/link-payment-shipping-history-filter.tsx

@@ -0,0 +1,195 @@
+import moment from 'moment';
+import { useEffect } from 'react';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { motion } from 'framer-motion';
+import { ChangeEvent, useState } from 'react';
+import {
+    LinkPaymentSearchType,
+    LinkPaymentSendMethod,
+    LinkPaymentShippingHistoryFilterProps,
+    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/filter-calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+
+export const LinkPaymentShippingHistoryFilter = ({
+    filterOn,
+    setFilterOn,
+    mid,
+    searchType,
+    searchKeyword,
+    startDate,
+    endDate,
+    transactionStatus,
+    processResult,
+    sendMethod,
+    setMid,
+    setSearchType,
+    setSearchKeyword,
+    setStartDate,
+    setEndDate,
+    setTransactionStatus,
+    setProcessResult,
+    setSendMethod
+}: LinkPaymentShippingHistoryFilterProps) => {
+
+
+    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 variants = {
+        hidden: { x: '100%' },
+        visible: { x: '0%' },
+    };
+
+    const onClickToClose = () => {
+        setFilterOn(false);
+    };
+
+    const setNewDate = (newDate: any) => {
+        console.log(newDate)
+    };
+
+    const onClickToSetFilter = () => {
+        setMid(filterMid);
+        setSearchType(filterSearchType);
+        setSearchKeyword(filterSearchKeyword);
+        setStartDate(filterStartDate);
+        setEndDate(filterEndDate);
+        setTransactionStatus(filterTransactionStatus);
+        setProcessResult(filterProcessResult);
+        setSendMethod(filterSendMethod);
+    };
+
+    let MidOptions = [
+        { name: 'nictest001m', value: 'nictest001m' },
+        { name: 'nictest002m', value: 'nictest002m' }
+    ];
+
+    let searchTypeOption = [
+        { name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
+        { name: '이메일', value: LinkPaymentSearchType.EMAIL },
+    ]
+
+    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 processResultOption = [
+        { name: '전체', value: ProcessResult.ALL },
+        { name: '성공', value: ProcessResult.SUCCESS },
+        { name: '실패', value: ProcessResult.FAILURE },
+    ]
+
+        let sendMethodOption = [
+        { name: '전체', value: LinkPaymentSendMethod.ALL },
+        { name: 'SMS', value: LinkPaymentSendMethod.SMS },
+        { name: '이메일', value: LinkPaymentSendMethod.EMAIL },
+        { name: '카카오', value: LinkPaymentSendMethod.KAKAO },
+    ]
+
+    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={setFilterMid}
+                            selectOptions={MidOptions}
+                        ></FilterSelect>
+
+                        <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={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>
+        </>
+    )
+}

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

@@ -1,193 +0,0 @@
-import { motion } from 'framer-motion';
-import {IMAGE_ROOT} from "@/shared/constants/common";
-import {LinkPaymentFilterProps} from "@/entities/additional-service/model/types";
-
-export const LinkPaymentFilter = ({
-                                      filterOn,
-                                      setFilterOn
-}: LinkPaymentFilterProps) => {
-    const variants = {
-        hidden:{ x: '100%'},
-        visible: {x: '0%'}
-    };
-
-    const onClickToClose = () => {
-        setFilterOn(false);
-    };
-    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 pb-120">
-                        <div className="opt-field">
-                            <div className="opt-label">가맹점</div>
-                            <div className="opt-controls">
-                                <select className="flex-1">
-                                    <option>nictest001m</option>
-                                </select>
-                            </div>
-                        </div>
-
-                        <div className="opt-field">
-                            <div className="opt-label">휴대폰번호, 이메일</div>
-                            <div className="opt-controls">
-                                <select className="flex-1">
-                                    <option>휴대폰번호</option>
-                                    <option>이메일</option>
-                                </select>
-                                <input
-                                    type="text"/>
-                            </div>
-                        </div>
-
-                        <div className="opt-field">
-                            <div className="opt-label">결제수단</div>
-                            <div className="opt-controls">
-                                <select className="flex-1">
-                                    <option>nictext001m</option>
-                                </select>
-                            </div>
-                        </div>
-
-                        <div className="opt-field mt_top">
-                            <div className="opt-label">조회기간</div>
-                            <div className="opt-controls col below h36">
-                                <div className="chip-row">
-                                    <span className="keyword-tag">당일</span>
-                                    <span className="keyword-tag">일주일</span>
-                                    <span className="keyword-tag">1개월</span>
-                                    <span className="keyword-tag active">직접입력</span>
-                                </div>
-
-                                <div className="range-row">
-                                    <div className="input-wrapper date">
-                                        <input
-                                            className="date-input"
-                                            type="text"
-                                            placeholder="날짜 선택"
-                                            value="2025.06.08"
-                                            readOnly={ true }
-                                        />
-                                        <button
-                                            className="date-btn"
-                                            type="button"
-                                        >
-                                            <img
-                                                src={ IMAGE_ROOT + '/ico_date.svg' }
-                                                alt="날짜 선택"
-                                            />
-                                        </button>
-                                    </div>
-                                    <span className="beetween">~</span>
-                                    <div className="input-wrapper date">
-                                        <input
-                                            className="date-input"
-                                            type="text"
-                                            placeholder="날짜 선택"
-                                            value="2025.06.08"
-                                            readOnly={ true }
-                                        />
-                                        <button
-                                            className="date-btn"
-                                            type="button"
-                                        >
-                                            <img
-                                                src={ IMAGE_ROOT + '/ico_date.svg' }
-                                                alt="날짜 선택"
-                                            />
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="opt-field">
-                            <div className="opt-label">거래 구분</div>
-                            <div className="opt-controls col below h36">
-                                <div className="chip-row">
-                                    <span className="keyword-tag flex-1 active">전체</span>
-                                    <span className="keyword-tag flex-1">미완료/ <br/> 활성화</span>
-                                    <span className="keyword-tag flex-1">입금요청</span>
-                                    <span className="keyword-tag flex-1">결제완료</span>
-                                    <span
-                                        className="keyword-tag"
-                                        style={{ visibility: 'hidden' }}
-                                    ></span>
-                                </div>
-                            </div>
-                            <div className="opt-controls col below h50 mt-10">
-                                <div className="chip-row">
-                                    <span className="keyword-tag flex-1">결제실패</span>
-                                    <span className="keyword-tag flex-1">결제중단/ <br/> 비활성화</span>
-                                    <span
-                                        className="keyword-tag"
-                                        style={{ visibility: 'hidden' }}
-                                    ></span>
-                                    <span
-                                        className="keyword-tag"
-                                        style={{ visibility: 'hidden' }}
-                                    ></span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="opt-field">
-                            <div className="opt-label">전송결과</div>
-                            <div className="opt-controls col below h36">
-                                <div className="chip-row">
-                                    <span className="keyword-tag flex-1 active">전체</span>
-                                    <span className="keyword-tag flex-1">성공</span>
-                                    <span className="keyword-tag flex-1">실패</span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="opt-field">
-                            <div className="opt-label">발송수단</div>
-                            <div className="opt-controls col below h36">
-                                <div className="chip-row">
-                                    <span className="keyword-tag flex-1 active">전체</span>
-                                    <span className="keyword-tag flex-1">SMS</span>
-                                    <span className="keyword-tag flex-1">이메일</span>
-                                    <span className="keyword-tag flex-1">카카오</span>
-                                </div>
-                            </div>
-                        </div>
-
-                        <div className="apply-row">
-                            <button className="btn-50 btn-blue flex-1">적용</button>
-                        </div>
-
-                    </div>
-                </div>
-            </motion.div>
-        </>
-    )
-}

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

@@ -1,13 +1,24 @@
+import moment from 'moment';
 import { IMAGE_ROOT } from "@/shared/constants/common";
 import { useState, useEffect } from "react";
-import { LinkPaymentFilter } from "./link-payment-filter";
+import { LinkPaymentPendingSendFilter } from "./filter/link-payment-pending-send-filter";
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
 import { LinkPaymentPendingList } from "./link-payment-pending-list";
+import { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod } from "../../model/types";
 
 export const LinkPaymentPendingSendWrap = () => {
     const { navigate } = useNavigate();
+
     const [filterOn, setFilterOn] = useState<boolean>(false);
+    const [mid, setMid] = useState<string>('nictest001m');
+    const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.ALL)
+    const [searchKeyword, setSearchKeyword] = useState<string>('');
+    const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+    const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+    const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
+    const [sendingStatus, setSendingStatus] = useState<LinkPaymentSendingStatus>(LinkPaymentSendingStatus.ALL);
+
     const [listItems, setListItems] = useState({});
 
     const onClickToOpenFilter = () => {
@@ -120,10 +131,24 @@ export const LinkPaymentPendingSendWrap = () => {
                     onClick={() => onClickToNavigate()}
                 >결제 신청</button>
             </div>
-            <LinkPaymentFilter
+            <LinkPaymentPendingSendFilter
                 filterOn={filterOn}
                 setFilterOn={setFilterOn}
-            ></LinkPaymentFilter>
+                mid={mid}
+                searchType={searchType}
+                searchKeyword={searchKeyword}
+                startDate={startDate}
+                endDate={endDate}
+                sendMethod={sendMethod}
+                sendingStatus={sendingStatus}
+                setMid={setMid}
+                setSearchType={setSearchType}
+                setSearchKeyword={setSearchKeyword}
+                setStartDate={setStartDate}
+                setEndDate={setEndDate}
+                setSendMethod={setSendMethod}
+                setSendingStatus={setSendingStatus}
+            ></LinkPaymentPendingSendFilter>
         </>
     )
 }

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

@@ -1,18 +1,28 @@
+import moment from 'moment';
 import { IMAGE_ROOT } from "@/shared/constants/common";
 import { useState, useEffect } from "react";
-import { LinkPaymentFilter } from "./link-payment-filter";
+import { LinkPaymentShippingHistoryFilter } from "./filter/link-payment-shipping-history-filter";
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
 import { LinkPaymentList } from "./link-payment-list";
 import { SortOptionsBox } from "./sort-options-box";
-import { SortByKeys } from "../../model/types";
+import { LinkPaymentSendMethod, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
+import { LinkPaymentSearchType,  } from "../../model/types";
 
 
-export const LinkPaymentDispatchListWrap = () => {
+export const LinkPaymentShippingHistoryWrap = () => {
     const { navigate } = useNavigate();
     const [filterOn, setFilterOn] = useState<boolean>(false);
     const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
     const [listItems, setListItems] = useState({});
+    const [mid, setMid] = useState<string>('nictest001m');
+    const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.ALL)
+    const [searchKeyword, setSearchKeyword] = useState<string>('');
+    const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+    const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+    const [transactionStatus, setTransactionStatus] = useState<LinkPaymentTransactionStatus>(LinkPaymentTransactionStatus.ALL)
+    const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL)
+    const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL)
 
     const onClickToOpenFilter = () => {
         setFilterOn(!filterOn);
@@ -25,7 +35,7 @@ export const LinkPaymentDispatchListWrap = () => {
         callList({ sortBy: sort });
     };
 
-    const callList = (option?: {sortBy?: string, val?: string}) => {
+    const callList = (option?: { sortBy?: string, val?: string }) => {
         setListItems({
             '20250608': [
                 {
@@ -134,10 +144,26 @@ export const LinkPaymentDispatchListWrap = () => {
                     onClick={() => onClickToNavigate()}
                 >결제 신청</button>
             </div>
-            <LinkPaymentFilter
+            <LinkPaymentShippingHistoryFilter
                 filterOn={filterOn}
                 setFilterOn={setFilterOn}
-            ></LinkPaymentFilter>
+                mid={mid}
+                searchType={searchType}
+                searchKeyword={searchKeyword}
+                startDate={startDate}
+                endDate={endDate}
+                transactionStatus={transactionStatus}
+                processResult={processResult}
+                sendMethod={sendMethod}
+                setMid={setMid}
+                setSearchType={setSearchType}
+                setSearchKeyword={setSearchKeyword}
+                setStartDate={setStartDate}
+                setEndDate={setEndDate}
+                setTransactionStatus={setTransactionStatus}
+                setProcessResult={setProcessResult}
+                setSendMethod={setSendMethod}
+            ></LinkPaymentShippingHistoryFilter>
         </>
     )
 }

src/entities/additional-service/ui/link-payment/link-payment-tab.tsx

@@ -12,8 +12,8 @@ export const LinkPaymentTab = ({
 
       const onClickToNavigation = (tab: LinkPaymentTabKeys) => {
         if(activeTab !== tab){
-          if(tab === LinkPaymentTabKeys.DispatchList){
+          if(tab === LinkPaymentTabKeys.ShippingHistory){
-            navigate(PATHS.additionalService.linkPayment.dispatchList);
+            navigate(PATHS.additionalService.linkPayment.shippingHistory);
           }
           else if(tab === LinkPaymentTabKeys.PendingSend){
             navigate(PATHS.additionalService.linkPayment.pendingSend);
@@ -25,8 +25,8 @@ export const LinkPaymentTab = ({
           <>
       <div className="subTab">
         <button 
-          className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.DispatchList)? 'active': ''}` }
+          className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.ShippingHistory)? 'active': ''}` }
-          onClick={ () => onClickToNavigation(LinkPaymentTabKeys.DispatchList) } 
+          onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) } 
         >발송내역</button>
         <button 
           className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }

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

@@ -140,13 +140,13 @@ export const BillingFilter = ({
           <div className="option-list pt-16">
             <FilterSelect
               title='가맹점'
-              selectValue={ mid }
+              selectValue={ filterMid }
               selectSetter={ setMid }
               selectOptions={ MidOptions }
             ></FilterSelect>
             <FilterSelectInput
               title='주문번호/ID'
-              selectValue={ searchType }
+              selectValue={ filterSearchType }
               selectSetter={ setSearchType }
               selectOptions={ SearchTypeOptions }
               inputValue={ searchKeyword }

src/pages/additional-service/account-holder-search/account-holder-search-page.tsx

@@ -6,7 +6,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { HeaderType } from '@/entities/common/model/types';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-filter';
-import { AccountHolderSearchProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
+import { ProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
 import {
   useSetHeaderTitle,
   useSetHeaderType,
@@ -24,7 +24,7 @@ export const AccountHolderSearchPage = () => {
   const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
   const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
   const [bank, setBank] = useState<string>('');
-  const [processResult, setProcessResult] = useState<AccountHolderSearchProcessResult>(AccountHolderSearchProcessResult.ALL);
+  const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
 
   useSetHeaderTitle('계좌성명조회');
   useSetHeaderType(HeaderType.LeftArrow);

src/pages/additional-service/additional-service-pages.tsx

@@ -9,7 +9,7 @@ import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
 import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page';
 import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
 import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
-import { LinkPaymentDispatchListPage } from './link-payment/link-payment-dispatch-list-page';
+import { LinkPaymentShippingHistoryPage } from './link-payment/link-payment-shipping-history-page';
 import { LinkPaymentPendingSendPage } from './link-payment/link-payment-pending-send-page';
 import { KakaoPaymentNotificationListPage } from './kakao-payment-notification/list-page';
 import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notification/setting-page';
@@ -58,7 +58,7 @@ export const AdditionalServicePages = () => {
         </Route>
         <Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />
         <Route path={ROUTE_NAMES.additionalService.linkPayment.base}>
-          <Route path={ROUTE_NAMES.additionalService.linkPayment.dispatchList} element={<LinkPaymentDispatchListPage />} />
+          <Route path={ROUTE_NAMES.additionalService.linkPayment.shippingHistory} element={<LinkPaymentShippingHistoryPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.pendingSend} element={<LinkPaymentPendingSendPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.request} element={<LinkPaymentApplyPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.requestConfirm} element={<LinkPaymentApplyConfirmPage />} />

src/pages/additional-service/intro/intro-page.tsx

@@ -49,7 +49,7 @@ export const IntroPage = () => {
     },
     {
       className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스',
-      icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.dispatchList
+      icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.shippingHistory
     },
     {
       className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',

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

@@ -31,14 +31,14 @@ export const LinkPaymentDetailPage = () => {
   useSetHeaderTitle('링크결제 상세');
   useSetHeaderType(HeaderType.RightClose);
   useSetOnBack(() => {
-    navigate(PATHS.additionalService.linkPayment.dispatchList);
+    navigate(PATHS.additionalService.linkPayment.shippingHistory);
   });
   useSetFooterMode(false);
 
     const onClickToNavigate = (path: string) => {
     let timeout = setTimeout(() => {
       clearTimeout(timeout);
-      navigate(PATHS.additionalService.linkPayment.dispatchList, {
+      navigate(PATHS.additionalService.linkPayment.shippingHistory, {
       });
     }, 10)
   };
@@ -60,7 +60,7 @@ export const LinkPaymentDetailPage = () => {
           afterLeave={ unmount }
           open={ isOpen }
           onClose={ close }
-          onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.dispatchList) }
+          onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.shippingHistory) }
           message={ msg }
           buttonLabel={['취소', '확인']}
         />

src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx

@@ -12,7 +12,6 @@ import {
     useSetFooterMode,
     useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
-import { LinkPaymentFilter } from '@/entities/additional-service/ui/link-payment/link-payment-filter';
 
 /**
  * 발송대기 탭 화면

src/pages/additional-service/link-payment/link-payment-shipping-history-page.tsx

@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { HeaderType } from '@/entities/common/model/types';
 import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
 import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types';
-import { LinkPaymentDispatchListWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap';
+import { LinkPaymentShippingHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap';
 import {
     useSetHeaderTitle,
     useSetHeaderType,
@@ -17,10 +17,10 @@ import {
  * 발송내역 탭 화면
  */
 
-export const LinkPaymentDispatchListPage = () => {
+export const LinkPaymentShippingHistoryPage = () => {
     const { navigate } = useNavigate();
 
-    const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.DispatchList)
+    const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)
 
     useSetHeaderTitle('링크결제')
     useSetHeaderType(HeaderType.LeftArrow);
@@ -35,7 +35,7 @@ export const LinkPaymentDispatchListPage = () => {
                 <div className="tab-content">
                     <div className="tab-pane pt-46 active">
                         <LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
-                        <LinkPaymentDispatchListWrap></LinkPaymentDispatchListWrap>
+                        <LinkPaymentShippingHistoryWrap></LinkPaymentShippingHistoryWrap>
                     </div>
                 </div>
             </main>

src/shared/constants/paths.ts

@@ -191,9 +191,9 @@ export const PATHS: RouteNamesType = {
     accountHolderAuth: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderAuth),
     linkPayment: {
       base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`),
-      dispatchList: generatePath(
+      shippingHistory: generatePath(
         `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,
-        ROUTE_NAMES.additionalService.linkPayment.dispatchList,
+        ROUTE_NAMES.additionalService.linkPayment.shippingHistory,
       ),
       pendingSend: generatePath(
         `${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.linkPayment.base}`,

src/shared/constants/route-names.ts

@@ -92,7 +92,7 @@ export const ROUTE_NAMES = {
     accountHolderAuth: 'account-holder-auth',
     linkPayment: {
       base: '/link-payment/*',
-      dispatchList: 'dispatch-list',
+      shippingHistory: 'shipping-history',
       pendingSend: 'pending-send',
       request: 'request',
       requestConfirm: 'request-confirm',

src/shared/ui/menu/index.tsx

@@ -87,7 +87,7 @@ export const Menu = ({
         {title: 'SMS 결제 통보', path: PATHS.additionalService.smsPaymentNotification},
         {title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch.list},
         {title: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth},
-        {title: '링크결제', path: PATHS.additionalService.linkPayment.dispatchList},
+        {title: '링크결제', path: PATHS.additionalService.linkPayment.shippingHistory},
         {title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification.list},
         {title: '자금이체', path: PATHS.additionalService.fundTransfer.requestList},
         {title: '정산대행', path: PATHS.additionalService.settlementAgency.manage},