Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

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

@@ -0,0 +1,12 @@
+import { EscrowDeliveryStatus } from '@/entities/transaction/model/types';
+
+export const deliveryStatusBtnGroup = [
+  {name: '전체', value: EscrowDeliveryStatus.ALL},
+  {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
+  {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
+  {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
+  {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
+  {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT},
+  {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
+  {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
+];

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,47 @@ export enum SortByKeys {
   New = 'New',
   Amount = 'Amount',
 };
+export enum ProcessResult {
+  ALL = 'ALL',
+  SUCCESS = 'SUCCESS',
+  FAILURE = 'FAILURE'
+};
+export enum KeyInPaymentTransactionStatus {
+  ALL = 'ALL',
+  APPROVE = 'APPROVE',
+  BF_CANCEL = 'BF_CANCEL',
+  AF_CANCEL = 'AF_CANCEL'
+}
 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 +359,21 @@ export interface FilterProps {
   filterOn: boolean;
   setFilterOn: (filterOn: boolean) => void;
 };
-
+export interface KeyInPaymentFilterProps extends FilterProps {
+  mid: string,
+  startDate: string;
+  endDate: string;
+  transactionStatus: KeyInPaymentTransactionStatus;
+  minAmount?: number | string;
+  maxAmount?: number | string;
+  setMid: (mid: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => void;
+}
+// 계좌성명 조회 필터
 export interface AccountHolderSearchFilterProps extends FilterProps {
   mid: string;
   searchType: AccountHolderSearchType;
@@ -336,17 +381,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,14 +1,17 @@
 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 { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 
 export const AccountHolderSearchFilter = ({
@@ -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/key-in-payment/key-in-payment-filter.tsx

@@ -0,0 +1,145 @@
+import moment from 'moment';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterSelectInput } from '@/shared/ui/filter/select-input';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import {
+    KeyInPaymentFilterProps,
+    KeyInPaymentTransactionStatus
+} from '../../model/types';
+
+export const KeyInPaymentFilter = ({
+    filterOn,
+    setFilterOn,
+    mid,
+    startDate,
+    endDate,
+    transactionStatus,
+    minAmount,
+    maxAmount,
+    setMid,
+    setStartDate,
+    setEndDate,
+    setTransactionStatus,
+    setMinAmount,
+    setMaxAmount
+}: KeyInPaymentFilterProps) => {
+
+    const [filterMid, setFilterMid] = useState<string>(mid);
+    const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+    const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+    const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
+    const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+    const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+
+    const variants = {
+        hidden: { x: '100%' },
+        visible: { x: '0%' },
+    };
+
+    const onClickToClose = () => {
+        setFilterOn(false);
+    };
+
+    const setNewDate = (newDate: any) => {
+        console.log(newDate)
+    };
+
+    const onClickToSetFilter = () => {
+        setMid(filterMid);
+        setStartDate(filterStartDate);
+        setEndDate(filterEndDate);
+        setTransactionStatus(filterTransactionStatus);
+        setMinAmount(filterMinAmount);
+        setMaxAmount(filterMaxAmount);
+        onClickToClose();
+    };
+    let MidOptions = [
+        { name: 'nictest001m', value: 'nictest001m' }
+    ];
+
+    let transactionStatusOption = [
+        { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
+        { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
+        { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
+        { name: '후취소', value: KeyInPaymentTransactionStatus.AF_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={filterMid}
+                            selectSetter={setFilterMid}
+                            selectOptions={MidOptions}
+                        ></FilterSelect>
+                        <FilterCalendar
+                            title='조회기간'
+                            startDate={filterStartDate}
+                            endDate={filterEndDate}
+                            setStartDate={setFilterStartDate}
+                            setEndDate={setFilterEndDate}
+                        ></FilterCalendar>
+
+                        <FilterButtonGroups
+                            title='거래상태'
+                            activeValue={filterTransactionStatus}
+                            btnGroups={transactionStatusOption}
+                            setter={setFilterTransactionStatus}
+                        ></FilterButtonGroups>
+
+                        <FilterRangeAmount
+                            title='상품가격'
+                            minAmount={filterMinAmount}
+                            maxAmount={filterMaxAmount}
+                            setMinAmount={setFilterMinAmount}
+                            setMaxAmount={setFilterMaxAmount}
+                        ></FilterRangeAmount>
+
+                    </div>
+                    <div className="apply-row">
+                        <button
+                            className="btn-50 btn-blue flex-1"
+                            onClick={() => onClickToSetFilter()}
+                        >적용</button>
+                    </div>
+                </div>
+            </motion.div>
+        </>
+    );
+};

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/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/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,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>
         </>
     )
 }

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/common/model/types.ts

@@ -14,6 +14,10 @@ export enum FilterDateOptions {
   Month = 'Month',
   Input = 'Input'
 };
+export enum CalendarType {
+  Start = 'Start',
+  End = 'End'
+};
 export interface DefaultRequestPagination {
   cursor: string;
   size: number;

src/entities/transaction/model/types.ts

@@ -38,7 +38,27 @@ export enum CashReceiptPurpose {
   INCOME_DEDUCTION = 'INCOME_DEDUCTION',
   EXPENSE_PROOF = 'EXPENSE_PROOF',
 };
-
+export enum EscrowSearchType {
+  ALL = 'ALL',
+  ORDER_NUMBER = 'ORDER_NUMBER',
+  TID = 'TID'
+};
+export enum EscrowDeliveryStatus {
+  ALL = 'ALL',
+  PAY_COMPLETE = 'PAY_COMPLETE',
+  DELIVERY_INSERT = 'DELIVERY_INSERT',
+  DELIVERY_COMPLETE = 'DELIVERY_COMPLETE',
+  PURCHASE_CONFIRM = 'PURCHASE_CONFIRM',
+  PURCHASE_REJECT = 'PURCHASE_REJECT',
+  RETURN_PROCESSING = 'RETURN_PROCESSING',
+  DEPOSIT_COMPLETE = 'DEPOSIT_COMPLETE'
+};
+export enum EscrowSettlementStatus {
+  ALL = 'ALL',
+  CREDIT_CARD = 'CREDIT_CARD',
+  REAL_ACCOUNT = 'REAL_ACCOUNT',
+  ACCOUNT_TRANSFER = 'ACCOUNT_TRANSFER'
+};
 export enum BillingSearchType {
   ALL = 'ALL',
   ORDER_NUMBER = 'ORDER_NUMBER',
@@ -200,8 +220,8 @@ export interface EscrowListParams {
   endDate?: string;
   deliveryStatus?: string;
   settlementStatus?: string;
-  minAmount?: number;
+  minAmount?: number | string;
-  maxAmount?: number;
+  maxAmount?: number | string;
   pagination?: DefaultRequestPagination;
 };
 
@@ -214,6 +234,8 @@ export interface BillingListParams {
   requestStatus?: string;
   processResult?: string;
   paymentMethod?: string;
+  minAmount?: number | string;
+  maxAmount?: number | string;
   pagination?: DefaultRequestPagination
 };
 
@@ -452,7 +474,24 @@ export interface CashReceiptFilterProps extends FilterProps {
 
 };
 export interface EscrowFilterProps extends FilterProps {
-
+  mid: string;
+  searchType: EscrowSearchType;
+  searchKeyword: string;
+  startDate: string
+  endDate: string;
+  deliveryStatus: EscrowDeliveryStatus;
+  settlementStatus: EscrowSettlementStatus;
+  minAmount: number;
+  maxAmount: number;
+  setMid: (mid: string) => void;
+  setSearchType: (searchType: EscrowSearchType) => void;
+  setSearchKeyword: (searchKeyword: string) => void;
+  setStartDate: (startDate: string) => void;
+  setEndDate: (endDate: string) => void;
+  setDeliveryStatus: (deliveryStatus: EscrowDeliveryStatus) => void;
+  setSettlementStatus: (settlementStatus: EscrowSettlementStatus) => void;
+  setMinAmount: (minAmount: string | number) => void;
+  setMaxAmount: (maxAmount: string | number) => void;
 };
 export interface BillingFilterProps extends FilterProps {
   mid: string;

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

@@ -1,11 +1,10 @@
-import moment from 'moment';
 import { useEffect } from 'react';
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
-import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { 
@@ -74,6 +73,8 @@ export const BillingFilter = ({
     setRequestStatus(filterRequestStatus);
     setProcessResult(filterProcessResult);
     setPaymentMethod(filterPaymentMethod);
+    setMinAmount(filterMinAmount);
+    setMaxAmount(filterMaxAmount);
     onClickToClose();
 	};
   let MidOptions = [
@@ -140,17 +141,17 @@ export const BillingFilter = ({
           <div className="option-list pt-16">
             <FilterSelect
               title='가맹점'
-              selectValue={ mid }
+              selectValue={ filterMid }
-              selectSetter={ setMid }
+              selectSetter={ setFilterMid }
               selectOptions={ MidOptions }
             ></FilterSelect>
             <FilterSelectInput
               title='주문번호/ID'
-              selectValue={ searchType }
+              selectValue={ filterSearchType }
-              selectSetter={ setSearchType }
+              selectSetter={ setFilterSearchType }
               selectOptions={ SearchTypeOptions }
               inputValue={ searchKeyword }
-              inputSetter={ setSearchKeyword }
+              inputSetter={ setFilterSearchKeyword }
             ></FilterSelectInput>
             <FilterCalendar
               title='조회기간'

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

@@ -1,12 +1,52 @@
+import { useEffect } from 'react';
+import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { FilterProps } from '../../model/types';
+import { FilterSelect } from '@/shared/ui/filter/select';
+import { FilterSelectInput } from '@/shared/ui/filter/select-input';
+import { FilterCalendar } from '@/shared/ui/filter/calendar';
+import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
+import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
+import { 
+  EscrowFilterProps,
+  EscrowSearchType,
+  EscrowDeliveryStatus,
+  EscrowSettlementStatus
+} from '../../model/types';
 
 export const EscrowFilter = ({
   filterOn,
-  setFilterOn
+  setFilterOn,
-}: FilterProps) => {
+  mid,
+  searchType,
+  searchKeyword,
+  startDate,
+  endDate,
+  deliveryStatus,
+  settlementStatus,
+  minAmount,
+  maxAmount,
+  setMid,
+  setSearchType,
+  setSearchKeyword,
+  setStartDate,
+  setEndDate,
+  setDeliveryStatus,
+  setSettlementStatus,
+  setMinAmount,
+  setMaxAmount
+}: EscrowFilterProps) => {
 
+  const [filterMid, setFilterMid] = useState<string>(mid);
+  const [filterSearchType, setFilterSearchType] = useState<EscrowSearchType>(searchType);
+  const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
+  const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
+  const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
+  const [filterDeliveryStatus, setFilterDeliveryStatus] = useState<EscrowDeliveryStatus>(deliveryStatus);
+  const [filterSettlementStatus, setFilterSettlementStatus] = useState<EscrowSettlementStatus>(settlementStatus);
+  const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
+  const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
+  
   const variants = {
     hidden: { x: '100%' },
     visible: { x: '0%' },
@@ -15,6 +55,52 @@ export const EscrowFilter = ({
   const onClickToClose = () => {
     setFilterOn(false);
   };
+  
+  const setNewDate = (newDate: any) => {
+    console.log(newDate)
+  };
+
+  const onClickToSetFilter = () => {
+    setMid(filterMid);
+    setSearchType(filterSearchType);
+    setSearchKeyword(filterSearchKeyword);
+    setStartDate(filterStartDate);
+    setEndDate(filterEndDate);
+    setDeliveryStatus(filterDeliveryStatus);
+    setSettlementStatus(filterSettlementStatus);
+    setMinAmount(filterMinAmount);
+    setMaxAmount(filterMaxAmount);
+    onClickToClose();
+  };
+  let MidOptions = [
+    {name: 'nictest001m', value: 'nictest001m'}
+  ];
+  let SearchTypeOptions = [
+    {name: '주문번호', value: EscrowSearchType.ORDER_NUMBER },
+    {name: 'TID', value: EscrowSearchType.TID }
+  ];
+
+  let deliveryStatusBtnGroup = [
+    {name: '전체', value: EscrowDeliveryStatus.ALL},
+    {name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
+    {name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
+    {name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
+    {name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
+    {name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT},
+    {name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
+    {name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
+  ];
+  let settlementStatusBtnGroup = [
+    {name: '전체', value: EscrowSettlementStatus.ALL},
+    {name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD},
+    {name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT},
+    {name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER},
+  ];
+ 
+  useEffect(() => {
+    setFilterDeliveryStatus(deliveryStatus);
+  }, [deliveryStatus]);
+
   return (
     <>
       <motion.div 
@@ -46,139 +132,56 @@ export const EscrowFilter = ({
             </div>
           </div>
       
-          <div className="option-list pb-120">
+          <div className="option-list pt-16">
-            <div className="opt-field">
+            <FilterSelect
-              <div className="opt-label">가맹점</div>
+              title='가맹점'
-              <div className="opt-controls">
+              selectValue={ filterMid }
-                <select className="flex-1">
+              selectSetter={ setMid }
-                  <option>nictest001m</option>
+              selectOptions={ MidOptions }
-                </select>
+            ></FilterSelect>
-              </div>
+            <FilterSelectInput
-            </div>
+              title='주문번호/ID'
-
+              selectValue={ filterSearchType }
-            <div className="opt-field">
+              selectSetter={ setSearchType }
-              <div className="opt-label">주문번호/ID</div>
+              selectOptions={ SearchTypeOptions }
-              <div className="opt-controls">
+              inputValue={ searchKeyword }
-                <select className="w-110">
+              inputSetter={ setSearchKeyword }
-                  <option>주문번호</option>
+            ></FilterSelectInput>
-                  <option>ID</option>
+            <FilterCalendar
-                </select>
+              title='조회기간'
-                <input
+              startDate={ filterStartDate }
-                  className="flex-1"
+              endDate={ filterEndDate }
-                  type="text"
+              setStartDate={ setFilterStartDate }
-                  placeholder=""
+              setEndDate={ setFilterEndDate }
-                />
+            ></FilterCalendar>
-              </div>
+            
-            </div>
+            <FilterButtonGroups
-
+              title='배송상태'
-            <div className="opt-field">
+              activeValue={ filterDeliveryStatus }
-              <div className="opt-label">조회기간</div>
+              btnGroups={ deliveryStatusBtnGroup }
-              <div className="opt-controls col below h36">
+              setter={ setFilterDeliveryStatus }
-                <div className="chip-row">
+            ></FilterButtonGroups>
-                  <span className="keyword-tag active">당일</span>
+            <FilterButtonGroups
-                  <span className="keyword-tag">일주일</span>
+              title='결제수단'
-                  <span className="keyword-tag">1개월</span>
+              activeValue={ filterSettlementStatus }
-                  <span className="keyword-tag">직접입력</span>
+              btnGroups={ settlementStatusBtnGroup }
-                </div>
+              setter={ setFilterSettlementStatus }
-                <div className="range-row">
+            ></FilterButtonGroups>
-                  <div className="input-wrapper date">
+            
-                    <input
+            <FilterRangeAmount
-                      className="date-input"
+              title='거래금액'
-                      type="text"
+              minAmount={ filterMinAmount }
-                      placeholder="날짜 선택"
+              maxAmount={ filterMaxAmount }
-                      value="2025.06.08"
+              setMinAmount={ setFilterMinAmount }
-                      readOnly={ true }
+              setMaxAmount={ setFilterMaxAmount }
-                    />
+            ></FilterRangeAmount>
-                    <button
+            
-                      type="button"
-                      className="date-btn"
-                    >
-                      <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 
-                      type="button" 
-                      className="date-btn"
-                    >
-                      <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 active">전체</span>
-                  <span className="keyword-tag">진행중</span>
-                  <span className="keyword-tag">성공</span>
-                  <span className="keyword-tag">요청취소</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 active">전체</span>
-                  <span className="keyword-tag">성공</span>
-                  <span className="keyword-tag">실패</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">
-                <select className="flex-1">
-                  <option>전체</option>
-                </select>
-              </div>
-            </div>
-
-            <div className="opt-field">
-              <div className="opt-label">거래금액</div>
-              <div className="opt-controls">
-                <div className="input-wrapper ">
-                  <input
-                    type="text"
-                    placeholder=""
-                  />
-                </div>
-                <span> ~ </span>
-                <div className="input-wrapper date">
-                  <input
-                    type="text"
-                    placeholder=""
-                    />
-                </div>
-              </div>
-            </div>
           </div>
           <div className="apply-row">
-            <button className="btn-50 btn-blue flex-1">적용</button>
+            <button 
+              className="btn-50 btn-blue flex-1"
+              onClick={ () => onClickToSetFilter() }
+            >적용</button>
           </div>
         </div>
       </motion.div>

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/key-in-payment/key-in-payment-page.tsx

@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import moment from 'moment';
+import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
@@ -8,24 +9,84 @@ import {
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 import { PATHS } from '@/shared/constants/paths';
+import { useExtensionKeyinDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-keyin-download-excel-mutation';
+import { KeyInPaymentFilter } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-filter';
+import { KeyInPaymentTransactionStatus, SortByKeys } from '@/entities/additional-service/model/types';
+import { SortOptionsBox } from '@/entities/additional-service/ui/link-payment/sort-options-box';
+import { useExtensionKeyinListMutation } from '@/entities/additional-service/api/use-extension-keyin-list-mutation';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
+
+const requestStatusBtnGroup = [
+  { name: '전체', value: KeyInPaymentTransactionStatus.ALL },
+  { name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
+  { name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
+  { name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL }
+];
 
 export const KeyInPaymentPage = () => {
   const { navigate } = useNavigate();
 
+
+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState({});
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+  const [transactionStatus, setTransactionStatus] = useState<KeyInPaymentTransactionStatus>(KeyInPaymentTransactionStatus.ALL)
+  const [minAmount, setMinAmount] = useState<number | string>();
+  const [maxAmount, setMaxAmount] = useState<number | string>();
+
+
   useSetHeaderTitle('KEY-IN 결제');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
 
+  const { mutateAsync: keyinList } = useExtensionKeyinListMutation();
+  const { mutateAsync: downloadExcel } = useExtensionKeyinDownloadExcelMutation();
+
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+
+  const onClickToDownloadExcel = () => {
+    // downloadExcel({
+    //   mid,
+    //   fromDate: '',
+    //   toDate: '',
+    //   paymentStatus: '',
+    //   minAmount: 0,
+    //   maxAmount: 0
+    // }).then((rs) => {
+
+    // });
+  };
+
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    // TODO : callList 구현
+  };
+
+  const onClickToTransactionStatus = (val: KeyInPaymentTransactionStatus) => {
+    setTransactionStatus(val);
+    // TODO : callList 구현
+  };
+
   const onClickToNavigation = () => {
     navigate(PATHS.additionalService.keyInPayment.request)
   }
 
+  useEffect(() => {
+    // TODO : callList();
+  }, []);
+
   return (
     <>
       <main>
         <div className="tab-content">
           <div className="tab-pane sub active">
-            <section className="summary-section no-border">
+            <section className="summary-section">
               <div className="credit-controls">
                 <div>
                   <input
@@ -41,6 +102,7 @@ export const KeyInPaymentPage = () => {
                     <img
                       src={IMAGE_ROOT + '/ico_setting.svg'}
                       alt="검색옵션"
+                      onClick={() => onClickToOpenFilter()}
                     />
                   </button>
                 </div>
@@ -51,26 +113,31 @@ export const KeyInPaymentPage = () => {
                   <img
                     src={IMAGE_ROOT + '/ico_download.svg'}
                     alt="다운로드"
+                    onClick={() => onClickToDownloadExcel()}
                   />
                 </button>
               </div>
             </section>
 
-            <section className="filter-section">
+            <div className="filter-section">
-              <div className="sort-options">
+              <SortOptionsBox
-                <button className="sort-btn active">최신순</button>
+                sortBy={sortBy}
-                <span className="sort-divider">|</span>
+                onClickToSort={onClickToSort}
-                <button className="sort-btn">고액순</button>
+              ></SortOptionsBox>
-              </div>
               <div className="excrow">
                 <div className="full-menu-keywords no-padding">
-                  <span className="keyword-tag active">전체</span>
+                  {
-                  <span className="keyword-tag">승인</span>
+                    requestStatusBtnGroup.map((value, index) => (
-                  <span className="keyword-tag">전취소</span>
+                      <span
-                  <span className="keyword-tag">후취소</span>
+                        key={`key-service-code=${index}`}
+                        className={`keyword-tag ${(transactionStatus === value.value) ? 'active' : ''}`}
+                        onClick={() => onClickToTransactionStatus(value.value)}
+                      >{value.name}</span>
+                    ))
+                  }
                 </div>
               </div>
-            </section>
+            </div>
 
             <section className="transaction-list">
               <div className="date-group">
@@ -148,6 +215,22 @@ export const KeyInPaymentPage = () => {
                 onClick={() => onClickToNavigation()}
               >결제 신청</button>
             </div>
+            <KeyInPaymentFilter
+              filterOn={filterOn}
+              setFilterOn={setFilterOn}
+              mid={mid}
+              startDate={startDate}
+              endDate={endDate}
+              transactionStatus={transactionStatus}
+              minAmount={minAmount}
+              maxAmount={maxAmount}
+              setMid={setMid}
+              setStartDate={setStartDate}
+              setEndDate={setEndDate}
+              setTransactionStatus={setTransactionStatus}
+              setMinAmount={setMinAmount}
+              setMaxAmount={setMaxAmount}
+            ></KeyInPaymentFilter>
           </div>
         </div>
       </main>

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/pages/transaction/escrow/list-page.tsx

@@ -5,11 +5,12 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { EscrowList } from '@/entities/transaction/ui/escrow-list';
-import { EscrowListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { EscrowListItem, TransactionCategory, SortByKeys, EscrowDeliveryStatus, EscrowSearchType, EscrowSettlementStatus } from '@/entities/transaction/model/types';
 import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
 import { Filter } from '@/entities/transaction/ui/filter';
+import { deliveryStatusBtnGroup } from '@/entities/additional-service/model/contant';
 import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
@@ -19,23 +20,24 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 
-const serviceCodes = [
-	{name: '전체', key: 'all'},
-	{name: '결제완료', key: 'paid'},
-	{name: '배송등록', key: 'register'},
-];
-
 export const EscrowListPage = () => {
 	const { navigate } = useNavigate();
 	const userInfo = useStore((state) => state.UserStore.UserInfo);
 
-	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+	const [mid, setMid] = useState<string>('nictest001m');
+	const [searchType, setSearchType] = useState<EscrowSearchType>(EscrowSearchType.ALL);
+	const [searchKeyword, setSearchKeyword] = useState<string>('');
+	//const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+	const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
 	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+	const [deliveryStatus, setDeliveryStatus] = useState<EscrowDeliveryStatus>(EscrowDeliveryStatus.ALL);
+	const [settlementStatus, setSettlementStatus] = useState<EscrowSettlementStatus>(EscrowSettlementStatus.ALL);
+	const [minAmount, setMinAmount] = useState<number | string>();
+	const [maxAmount, setMaxAmount] = useState<number | string>();	
 		
 	useSetHeaderTitle('에스크로');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -51,24 +53,30 @@ export const EscrowListPage = () => {
     sortBy?: string, 
     val?: string
   }) => {
-		// pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
     setPageParam(pageParam);
+		let newMinAmount = minAmount;
+		if(!!minAmount && typeof(minAmount) === 'string'){
+			newMinAmount = parseInt(minAmount);
+		}
+		let newMaxAmount = maxAmount;
+		if(!!maxAmount && typeof(maxAmount) === 'string'){
+			newMaxAmount = parseInt(maxAmount);
+		}
     let listParams = {
-      mid: 'nictest001m',
+      mid: mid,
-  		searchType: 'ORDER_NUMBER',
+  		searchType: searchType,
-  		searchKeyword: '',
+  		searchKeyword: searchKeyword,
   		startDate: startDate,
   		endDate: endDate,
-  		deliveryStatus: 'ALL',
+  		deliveryStatus: deliveryStatus,
-  		settlementStatus: 'ALL',
+  		settlementStatus: settlementStatus,
-  		minAmount: 0,
+  		minAmount: newMinAmount,
-  		maxAmount: 999999999,
+  		maxAmount: newMaxAmount,
 			pagination: pageParam
     };
 
-		console.log(listParams)
+		escrowList(listParams).then((rs) => {
-    
-    escrowList(listParams).then((rs) => {
       setListItems(assembleData(rs.content));
     });
   };
@@ -105,8 +113,8 @@ export const EscrowListPage = () => {
     callList({sortBy: sort});
   };
 	
-	const onClickToServiceCode = (val: string) => {
+	const onClickToDeliveryStatus = (val: EscrowDeliveryStatus) => {
-    setSelectedServiceCode(val);
+    setDeliveryStatus(val);
     callList({val: val});
   };
 
@@ -154,11 +162,11 @@ export const EscrowListPage = () => {
 							<div className="excrow">
 								<div className="full-menu-keywords no-padding">
 								{
-									serviceCodes.map((value, index) => (
+									deliveryStatusBtnGroup.map((value, index) => (
 										<span 
 											key={ `key-service-code=${ index }` }
-											className={ `keyword-tag ${(selectedServiceCode === value.key)? 'active': ''}` }
+											className={ `keyword-tag ${(deliveryStatus === value.value)? 'active': ''}` }
-											onClick={ () => onClickToServiceCode(value.key) }
+											onClick={ () => onClickToDeliveryStatus(value.value) }
 										>{ value.name }</span>
 									))
 								}

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/calendar/nice-calendar.tsx

@@ -1,40 +1,101 @@
-import moment from 'moment';
+import moment, { locale } from 'moment';
 import styled from "styled-components";
 import { useState } from 'react';
 import Calendar from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
 import { useEffect } from 'react';
+import { CalendarType } from '@/entities/common/model/types';
 
 interface NiceCalendarProps {
   calendarOpen: boolean;
+  setCalendarOpen: (calendarOpen: boolean) => void;
+  startDate: string;
+  endDate: string;
+  calendarType: CalendarType;
   setNewDate: (date: string) => void;
 };
 
 const NiceCalendar = ({
   calendarOpen,
+  setCalendarOpen,
+  startDate,
+  endDate,
+  calendarType,
   setNewDate
 }: NiceCalendarProps) => {
-  const [calendarDate, setCalendarDate] = useState<string>(moment().format('YYYY-MM-DD'));
+  const [valueDate, setValueDate] = useState<string>();
-   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [minDate, setMinDate] = useState<Date | undefined>();
+  const [maxDate, setMaxDate] = useState<Date | undefined>();
   const onchangeToDate = (selectedDate: any) => {
     setNewDate(moment(selectedDate).format('YYYY-MM-DD'));
-    setIsOpen(false);
+    setCalendarOpen(false);
+  };
+    
+  const onClickToClose = () => {
+    setCalendarOpen(false);
+  };
+  const setMinMaxValueDate = () => {
+    if(calendarType === CalendarType.Start){
+      setMinDate(undefined);
+      setMaxDate(new Date(endDate));
+      setValueDate(startDate);
+    }            
+    else if(calendarType === CalendarType.End){
+      setMinDate(new Date(startDate));
+      setMaxDate(new Date());
+      setValueDate(endDate);
+    }
+  };
+  
+  const formatMonthYear = (locale: string | undefined, date: Date) => {
+    return date.toLocaleDateString('en', { 
+      month: 'long',
+      year: 'numeric'
+    });
+  };
+  const formatYear = (locale: string | undefined, date: Date) => {
+    return date.toLocaleDateString('en', { 
+      year: 'numeric'
+    });
+  };
+  const formmatMonth = (locale: string | undefined, date: Date) => {
+    return date.toLocaleDateString('en', { 
+      month: 'short'
+    });
+  };
+  const formatDay = (locale: string | undefined, date: Date) => {
+    return date.toLocaleString('en', { 
+      day: 'numeric'
+    });
+  };
+  const formatShortWeekday = (locale: string | undefined, date: Date) => {
+    return date.toLocaleString('en', { 
+      weekday: 'short'
+    });
   };
 
   useEffect(() => {
-    console.log(calendarOpen)
+    setMinMaxValueDate();
-    setIsOpen(calendarOpen);
+    
   }, [calendarOpen])
 
   return (
     <>
-      { (isOpen) && 
+      { (calendarOpen) && 
         <>
         <div className="bg-dim"></div>
-        <CalendarWrapper>
+        <CalendarWrapper onClick={ () => onClickToClose() }>
           <Calendar
+            minDate={ minDate }
+            maxDate={ maxDate }
             onChange={ onchangeToDate }
-            value={ calendarDate }
+            value={ valueDate }
+            formatMonthYear={ formatMonthYear }
+            formatYear= { formatYear }
+            formatMonth={ formmatMonth }
+            formatDay={ formatDay }
+            formatShortWeekday={ formatShortWeekday }
+            showNeighboringMonth={ true }
           ></Calendar>
         </CalendarWrapper>
         </>

src/shared/ui/filter/calendar.tsx

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { ChangeEvent, useState } from 'react';
-import { FilterDateOptions } from '@/entities/common/model/types';
+import { CalendarType, FilterDateOptions } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import NiceCalendar from '../calendar/nice-calendar';
 import { useEffect } from 'react';
@@ -24,7 +24,7 @@ export const FilterCalendar = ({
   const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false);
   const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
   const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
-  const [activceCalendar, setActiveCalendar] = useState<string>();
+  const [calendarType, setCalendarType] = useState<CalendarType>(CalendarType.Start);
   
   const setFilterDate = (dateOptions: FilterDateOptions) => {
     if(dateOptions === FilterDateOptions.Today){
@@ -52,22 +52,22 @@ export const FilterCalendar = ({
     
   };
 
-  const onClickToOpenCalendar = (key: string) => {
+  const onClickToOpenCalendar = (calendarType: CalendarType) => {
     if(!dateReadOnly){
       setCalendarOpen(true);
-      setActiveCalendar(key);
+      setCalendarType(calendarType);
     }
     else{
       setCalendarOpen(false);
-      setActiveCalendar('');
+      
     }
   };
 
   const setNewDate = (date: string) => {
-    if(activceCalendar === 'start'){
+    if(calendarType === CalendarType.Start){
       setStartDate(date);
     }
-    else if(activceCalendar === 'end'){
+    else if(calendarType === CalendarType.End){
       setEndDate(date);
     }
     setCalendarOpen(false);
@@ -107,12 +107,13 @@ export const FilterCalendar = ({
                 type="text"
                 placeholder="날짜 선택"
                 value={ startDate }
-                readOnly={ true }
+                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
+                readOnly={ dateReadOnly }
               />
               <button
                 type="button"
                 className="date-btn"
-                onClick={ () => onClickToOpenCalendar('start') }
+                onClick={ () => onClickToOpenCalendar(CalendarType.Start) }
               >
                 <img
                   src={ IMAGE_ROOT + '/ico_date.svg' }
@@ -128,12 +129,13 @@ export const FilterCalendar = ({
                 type="text"
                 placeholder="날짜 선택"
                 value={ endDate }
-                readOnly={ true }
+                onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
+                readOnly={ dateReadOnly }
               />
               <button 
                 type="button" 
                 className="date-btn"
-                onClick={ () => onClickToOpenCalendar('end') }
+                onClick={ () => onClickToOpenCalendar(CalendarType.End) }
               >
                 <img
                   src={ IMAGE_ROOT + '/ico_date.svg' }
@@ -146,6 +148,10 @@ export const FilterCalendar = ({
       </div>
       <NiceCalendar
         calendarOpen={ calendarOpen }
+        setCalendarOpen={ setCalendarOpen }
+        startDate={ startDate }
+        endDate={ endDate }
+        calendarType={ calendarType }
         setNewDate={ setNewDate }
       ></NiceCalendar>
     </>

src/shared/ui/filter/range-amount.tsx

@@ -22,7 +22,7 @@ export const FilterRangeAmount = ({
         <div className="opt-controls">
           <div className="input-wrapper ">
             <input
-              type="text"
+              type="number"
               placeholder=""
               value={ minAmount }
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setMinAmount(e.target.value) }
@@ -31,7 +31,7 @@ export const FilterRangeAmount = ({
           <span> ~ </span>
           <div className="input-wrapper date">
             <input
-              type="text"
+              type="number"
               placeholder=""
               value={ maxAmount }
               onChange={ (e: ChangeEvent<HTMLInputElement>) => setMaxAmount(e.target.value) }

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},