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

2025-09-15 10:33:27 +09:00
parent 9b8378ccad
commit 601f92369c
18 changed files with 569 additions and 322 deletions
--- a/src/entities/additional-service/model/types.ts
+++ b/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 {
-  ALL = 'ALL',
-  SUCCESS = 'SUCCESS',
-  FAILURE = 'FAILURE'
+export enum LinkPaymentSearchType {
+  ALL = "ALL",
+  PHONE = "PHONE",
+  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 {
--- a/src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx
+++ b/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 = [
-        { name: '전체', value: AccountHolderSearchProcessResult.ALL },
-        { name: '성공', value: AccountHolderSearchProcessResult.SUCCESS },
-        { name: '실패', value: AccountHolderSearchProcessResult.FAILURE },
+    let MidOptions = [
+        { name: 'nictest001m', value: 'nictest001m' },
+        { name: 'nictest002m', value: 'nictest002m' }
    ];
+
+    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">
-                            <div className="opt-label">가맹점</div>
-                            <div className="opt-controls">
-                                <select
-                                    className="flex-1"
-                                    value={filterMid}
-                                    onChange={(e: any) => setFilterMid(e.target.value)}
-                                >
-                                    <option>nictest001m</option>
-                                    <option>nictest002m</option>
-                                </select>
-                            </div>
-                        </div>
+                        <FilterSelect
+                            title='가맹점'
+                            selectValue={mid}
+                            selectSetter={setMid}
+                            selectOptions={MidOptions}
+                        ></FilterSelect>

-                        <div className="opt-field">
-                            <div className="opt-label">예금주/계좌번호</div>
-                            <div className="opt-controls">
-                                <select
-                                    className="w-110"
-                                    value={filterSearchType}
-                                    onChange={(e: any) => setFilterSearchType(e.target.value)}
-                                >
-                                    <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>
+                        <FilterSelectInput
+                            title='예금주/계좌번호'
+                            selectValue={searchType}
+                            selectSetter={setSearchType}
+                            selectOptions={searchTypeOption}
+                            inputValue={searchKeyword}
+                            inputSetter={setSearchKeyword}
+                        ></FilterSelectInput>
                        <FilterCalendar
                            startDate={filterStartDate}
                            endDate={filterEndDate}
@@ -175,19 +143,12 @@ export const AccountHolderSearchFilter = ({
                            setEndDate={setFilterEndDate}
                        ></FilterCalendar>

-                        <div className="opt-field">
-                            <div className="opt-label">은행</div>
-                            <div className="opt-controls">
-                                <select
-                                    className="flex-1"
-                                    value={filterBank}
-                                    onChange={(e: any) => setFilterBank(e.target.value)}
-                                >
-                                    <option>선택</option>
-                                    <option>우리은행</option>
-                                </select>
-                            </div>
-                        </div>
+                        <FilterSelect
+                            title='은행'
+                            selectValue={bank}
+                            selectSetter={setBank}
+                            selectOptions={bankOptions}
+                        ></FilterSelect>

                        <FilterButtonGroups
                            title='조회결과'
--- a/src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx
+++ b/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>
+        </>
+    )
+}
--- a/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx
+++ b/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>
+        </>
+    )
+}
--- a/src/entities/additional-service/ui/link-payment/link-payment-filter.tsx
+++ b/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>
-        </>
-    )
-}
--- a/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx
@@ -1,22 +1,33 @@
+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 = () => {
        setFilterOn(!filterOn);
    };
    const onClickToNavigate = () => {
        navigate(PATHS.additionalService.linkPayment.request)
    }
-    
+
    const callList = () => {
        setListItems({
            '20250608': [
@@ -28,7 +39,7 @@ export const LinkPaymentPendingSendWrap = () => {
                    amount: 5254000
                },
                {
-                    transactionId: 'pending2', 
+                    transactionId: 'pending2',
                    customerName: '김*환(7000)',
                    status: '발송요청',
                    channel: 'SMS',
@@ -111,7 +122,7 @@ export const LinkPaymentPendingSendWrap = () => {
                </div>
            </section>

-            <LinkPaymentPendingList 
+            <LinkPaymentPendingList
                listItems={listItems}
            />
            <div className="apply-row">
@@ -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>
        </>
    )
 }
--- a/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx
+++ b/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>
        </>
    )
 }
--- a/src/entities/additional-service/ui/link-payment/link-payment-tab.tsx
+++ b/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){
-            navigate(PATHS.additionalService.linkPayment.dispatchList);
+          if(tab === LinkPaymentTabKeys.ShippingHistory){
+            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': ''}` }
-          onClick={ () => onClickToNavigation(LinkPaymentTabKeys.DispatchList) } 
+          className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.ShippingHistory)? 'active': ''}` }
+          onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) } 
        >발송내역</button>
        <button 
          className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }
--- a/src/entities/transaction/ui/filter/billing-filter.tsx
+++ b/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 }