부가서비스

- 링크결제 발송내역/발송대기 엑셀다운로드 API 연결 - 링크결제 발송대기 상세 페이지 목업 API 연결 - 링크결제 발송대기 삭제 API 연결
2025-09-22 14:51:04 +09:00
parent 13474c4fca
commit 5d76f56ded
22 changed files with 406 additions and 129 deletions
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-history-detail-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-history-detail-mutation.ts
@@ -23,7 +23,7 @@ export const extensionLinkPayHistoryDetail = async (params: ExtensionLinkPayHist
        titleInfo: {
            amount: response.amount,
            corpName: response.corpName,
-            requestDate: response.paymentDate
+            requestDate: response.sendDate
        } as TitleInfo,
        paymentInfo: {
            buyerName: response.buyerName,
@@ -38,6 +38,7 @@ export const extensionLinkPayHistoryDetail = async (params: ExtensionLinkPayHist
        detailInfo: {
            email: response.email,
            phoneNumber: response.phoneNumber,
+            goodsName: response.goodsName,
            moid: response.moid
        } as DetailInfo
    }
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-history-download-excel-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-history-download-excel-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { 
+  ExtensionLinkPayHistoryDownloadExcelRespone,
+  ExtensionLinkPayHistoryDownloadExcelParams
+} from '../../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionLinkPayHistoryDownloadExcel = (params: ExtensionLinkPayHistoryDownloadExcelParams) => {
+  return resultify(
+    axios.post<ExtensionLinkPayHistoryDownloadExcelRespone>(API_URL_ADDITIONAL_SERVICE.extensionLinkPaymentHistoryDownloadExcel(), params),
+  );
+};
+
+export const useExtensionLinkPayHistoryDownloadExcelMutation = (options?: UseMutationOptions<ExtensionLinkPayHistoryDownloadExcelRespone, CBDCAxiosError, ExtensionLinkPayHistoryDownloadExcelParams>) => {
+  const mutation = useMutation<ExtensionLinkPayHistoryDownloadExcelRespone, CBDCAxiosError, ExtensionLinkPayHistoryDownloadExcelParams>({
+    ...options,
+    mutationFn: (params: ExtensionLinkPayHistoryDownloadExcelParams) => extensionLinkPayHistoryDownloadExcel(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-delete-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-delete-mutation.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import {
+    ExtensionLinkPayWaitDeleteRespone
+} from '../../model/types';
+import {
+    useMutation,
+    UseMutationOptions
+} from '@tanstack/react-query';
+import { ExtensionLinkPayWaitDeleteParams } from '../../model/types';
+
+export const extensionLinkPayWaitDelete = async (params: ExtensionLinkPayWaitDeleteParams)=> {
+    return resultify(
+        axios.post<ExtensionLinkPayWaitDeleteRespone>(API_URL_ADDITIONAL_SERVICE.extensionLinkPayMentWaitDelete(), params)
+    );
+};
+
+export const useExtensionLinkPayWaitDeleteMutation = (options?: UseMutationOptions<ExtensionLinkPayWaitDeleteRespone, CBDCAxiosError, ExtensionLinkPayWaitDeleteParams>) => {
+    const mutation = useMutation<ExtensionLinkPayWaitDeleteRespone, CBDCAxiosError, ExtensionLinkPayWaitDeleteParams>({
+        ...options,
+        mutationFn: (params: ExtensionLinkPayWaitDeleteParams) => extensionLinkPayWaitDelete(params),
+    });
+
+    return {
+        ...mutation,
+    };
+};
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-detail-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-detail-mutation.ts
@@ -0,0 +1,53 @@
+import axios from 'axios';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { resultify } from '@/shared/lib/resultify';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import {
+    DetailResponse,
+    TitleInfo,
+    PaymentInfo,
+    ExtensionLinkPayWaitDetailParams,
+    ExtensionLinkPayWaitDetailResponse
+} from '../../model/types';
+import {
+    useMutation,
+    UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionLinkPayWaitDetail = async (params: ExtensionLinkPayWaitDetailParams): Promise<DetailResponse> => {
+    const response = await resultify(
+        axios.post<ExtensionLinkPayWaitDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionLinkPaymentWaitDetail(), params),
+    );
+
+    const detailResponse: DetailResponse = {
+        titleInfo: {
+            amount: response.amount,
+            corpName: response.corpName,
+            scheduledSendDate: response.scheduledSendDate
+        } as TitleInfo,
+
+        paymentInfo: {
+            processStatus: response.processStatus,
+            requestDate: response.requestDate,
+            paymentLimitDate: response.paymentLimitDate,
+            sendMethod: response.sendMethod,
+            buyerName: response.buyerName,
+            email: response.email,
+            phoneNumber: response.phoneNumber,
+            goodsName: response.goodsName,
+            moid: response.moid
+        } as PaymentInfo
+    }
+
+    return detailResponse
+}
+
+export const useExtensionLinkPayWaitDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, ExtensionLinkPayWaitDetailParams>) => {
+    const mutation = useMutation<DetailResponse, CBDCAxiosError, ExtensionLinkPayWaitDetailParams>({
+        ...options,
+        mutationFn: (params: ExtensionLinkPayWaitDetailParams) => extensionLinkPayWaitDetail(params),
+    });
+    return {
+        ...mutation,
+    };
+};
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-download-excel-mutation
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-download-excel-mutation
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-download-excel-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-download-excel-mutation.ts
@@ -0,0 +1,31 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import {
+    ExtensionLinkPayHistoryDownloadExcelRespone,
+    ExtensionLinkPayHistoryDownloadExcelParams,
+    ExtensionLinkPayWaitDownloadExcelParams,
+    ExtensionLinkPayWaitDownloadExcelRespone
+} from '../../model/types';
+import {
+    useMutation,
+    UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionLinkPayWaitDownloadExcel = (params: ExtensionLinkPayWaitDownloadExcelParams) => {
+    return resultify(
+        axios.post<ExtensionLinkPayWaitDownloadExcelRespone>(API_URL_ADDITIONAL_SERVICE.extensionLinkPaymentHistoryDownloadExcel(), params),
+    );
+};
+
+export const useExtensionLinkPayWaitDownloadExcelMutation = (options?: UseMutationOptions<ExtensionLinkPayWaitDownloadExcelRespone, CBDCAxiosError, ExtensionLinkPayWaitDownloadExcelParams>) => {
+    const mutation = useMutation<ExtensionLinkPayWaitDownloadExcelRespone, CBDCAxiosError, ExtensionLinkPayWaitDownloadExcelParams>({
+        ...options,
+        mutationFn: (params: ExtensionLinkPayWaitDownloadExcelParams) => extensionLinkPayWaitDownloadExcel(params),
+    });
+
+    return {
+        ...mutation,
+    };
+};
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-list-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-list-mutation.ts
@@ -3,10 +3,6 @@ import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-serv
 import { resultify } from '@/shared/lib/resultify';
 import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
-  ExtensionKeyinListParams,
-  ExtensionKeyinListResponse,
-  ExtensionLinkPayHistoryListParams,
-  ExtensionLinkPayHistoryListResponse,
  ExtensionLinkPayWaitListParams,
  ExtensionLinkPayWaitListResponse
 } from '../../model/types';
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -1,5 +1,4 @@
 import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
-import { PayoutContent } from './payout/types';

 // ========================================
 // 공통 Enums 및 타입들
@@ -25,11 +24,10 @@ export interface SortOptionsBoxProps {
 export enum AdditionalServiceCategory {
  KeyInPayment = 'KeyInPayment',
  AccountHolderSearch = 'AccountHolderSearch',
-  LinkPaymentShipping = 'LinkPaymentShipping',
+  LinkPaymentHistory = 'LinkPaymentHistory',
  LinkPaymentPending = 'LinkPaymentPending',
  FundTransfer = 'FundTransfer',
  SettlementAgency = 'SettlementAgency',
-  Payout = 'Payout',
 }

 // ========================================
@@ -42,7 +40,8 @@ export interface TitleInfo {
  accountNo?: string,
  bankName?: string,
  requestDate?: string,
-  sendDate?: string
+  sendDate?: string,
+  scheduledSendDate?: string
 }

 export interface DetailInfo {
@@ -56,12 +55,18 @@ export interface DetailInfo {

  email: string;
  phoneNumber: string;
-  //상품명 필요
+  goodsName: string;
  moid: string;

 }

 export interface PaymentInfo {
+  processStatus?: string;
+  requestDate?: string;
+  email?: string;
+  phoneNumber?: string;
+  goodsName?: string;
+  moid?: string;
  buyerName?: string;
  sendMethod?: string;
  sendDate?: string;
@@ -208,7 +213,7 @@ export enum LinkPaymentSendingStatus {
  SEND_CANCEL = "SEND_CANCEL"
 }

-export interface LinkPaymentShippingListItem {
+export interface LinkPaymentHistoryListItem {
  tid?: string;
  // TODO : buyerName 필요
  paymentDate?: string;
@@ -228,7 +233,7 @@ export interface LinkPaymentWaitListItem {
  amount?: number;
 }

-export interface LinkPaymentShippingListProps {
+export interface LinkPaymentHistoryListProps {
  additionalServiceCategory: AdditionalServiceCategory;
  listItems: Record<string, Array<ListItemProps>>;
 }
@@ -238,7 +243,7 @@ export interface LinkPaymentWaitListProps {
  listItems: Record<string, Array<ListItemProps>>;
 }

-export interface LinkPaymentShippingHistoryFilterProps extends FilterProps {
+export interface LinkPaymentHistoryFilterProps extends FilterProps {
  mid: string;
  searchType: LinkPaymentSearchType;
  searchKeyword: string;
@@ -329,11 +334,9 @@ export interface SettlementAgencyBottomAgreeProps {
 // 공통 리스트 관련 타입들
 // ========================================

-export interface ListItemProps extends 
-KeyInPaymentListItem, AccountHolderSearchListItem, 
-LinkPaymentShippingListItem, LinkPaymentWaitListItem,
-PayoutContent
-{
+export interface ListItemProps extends
+  KeyInPaymentListItem, AccountHolderSearchListItem,
+  LinkPaymentHistoryListItem, LinkPaymentWaitListItem {
  additionalServiceCategory?: AdditionalServiceCategory;
  mid?: string
 }
@@ -375,6 +378,21 @@ export interface ExtensionLinkPayHistoryListResponse extends DefaulResponsePagin
  content: Array<ListItemProps>
 }

+export interface ExtensionLinkPayHistoryDownloadExcelParams extends ExtensionRequestParams {
+  searchCl: string;
+  searchValue: string;
+  paymentMethod: string;
+  fromDate: string;
+  toDate: string;
+  paymentStatus: string;
+  sendStatus: string;
+  sendMethod: string;
+}
+
+export interface ExtensionLinkPayHistoryDownloadExcelRespone {
+  status: boolean;
+}
+
 export interface ExtensionLinkPayHistoryDetailParams extends ExtensionRequestParams {
  tid: string;
 }
@@ -405,6 +423,7 @@ export interface ExtensionLinkPayHistoryResendResponse {
  status: boolean
 }

+
 export interface ExtensionLinkPayWaitListParams extends ExtensionRequestParams {
  searchCl: string;
  searchValue: string;
@@ -420,6 +439,20 @@ export interface ExtensionLinkPayWaitListResponse extends DefaulResponsePaginati
  content: Array<ListItemProps>
 }

+export interface ExtensionLinkPayWaitDownloadExcelParams extends ExtensionRequestParams {
+  searchCl: string;
+  searchValue: string;
+  fromDate: string;
+  toDate: string;
+  sendStatus: string;
+  sendMethod: string;
+  processStatus: string;
+}
+
+export interface ExtensionLinkPayWaitDownloadExcelRespone {
+  status: boolean;
+}
+
 export interface ExtensionLinkPayWaitDetailParams extends ExtensionRequestParams {
  tid: string;
 }
@@ -440,6 +473,14 @@ export interface ExtensionLinkPayWaitDetailResponse {
  moid: string;
 }

+export interface ExtensionLinkPayWaitDeleteParams extends ExtensionRequestParams {
+  tid: string;
+}
+
+export interface ExtensionLinkPayWaitDeleteRespone {
+  status: boolean
+}
+
 // 계좌 성명 조회 확장 서비스
 // ========================================
 export interface ExtensionAccountHolderSearchListParams extends ExtensionRequestParams { // Request
--- a/src/entities/additional-service/ui/info-wrap/detail-info-wrap.tsx
+++ b/src/entities/additional-service/ui/info-wrap/detail-info-wrap.tsx
@@ -16,7 +16,7 @@ export const DetailInfoWrap = ({
            <div className="txn-section">
                <div className="section-title">상세 정보</div>
                <ul className="kv-list">
-                    {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) &&
+                    {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) &&
                        <>
                            < li className="kv-row">
                                <span className="k">이메일</span>
@@ -28,7 +28,7 @@ export const DetailInfoWrap = ({
                            </li>
                            <li className="kv-row">
                                <span className="k">상품명</span>
-                                <span className="v">상품명 respone 추가 필요</span>
+                                <span className="v">{detailInfo?.goodsName && detailInfo?.goodsName}</span>
                            </li>
                            <li className="kv-row">
                                <span className="k">주문번호</span>
--- a/src/entities/additional-service/ui/info-wrap/payment-info-wrap.tsx
+++ b/src/entities/additional-service/ui/info-wrap/payment-info-wrap.tsx
@@ -8,9 +8,6 @@ export const PaymentInfoWrap = ({
    paymentInfo
 }: DetailInfoSectionProps) => {

-    const checkValue = (val: any) => {
-        return (!!val || val === 0);
-    };
    console.log("PaymentInfo Check: ", paymentInfo)

    return (
@@ -18,7 +15,7 @@ export const PaymentInfoWrap = ({
            <div className="txn-section">
                <div className="section-title">결제 정보</div>
                <ul className="kv-list">
-                    {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) &&
+                    {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) &&
                        <>
                            <li className="kv-row">
                                <span className="k">구매자명</span>
@@ -38,12 +35,6 @@ export const PaymentInfoWrap = ({
                                <span className="k">결제상태(실패횟수)</span>
                                <span className="v">  {`${getPaymentStatusText(paymentInfo?.paymentStatus)}(${paymentInfo?.failCount})`}</span>
                            </li>
-                            {checkValue(paymentInfo?.failCount) && (
-                                <li className="kv-row">
-                                    <span className="k">실패횟수</span>
-                                    <span className="v">{paymentInfo?.failCount}회</span>
-                                </li>
-                            )}
                            <li className="kv-row">
                                <span className="k">결제수단</span>
                                <span className="v">{paymentInfo?.paymentMethod}</span>
@@ -51,7 +42,7 @@ export const PaymentInfoWrap = ({
                            <li className="kv-row">
                                <span className="k">결제일자</span>
                                <span className="v">
-                                    {paymentInfo?.paymentDate && paymentInfo.paymentDate}
+                                    {paymentInfo?.paymentDate && moment(paymentInfo.paymentDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD')}
                                </span>
                            </li>
                            <li className="kv-row">
@@ -61,6 +52,55 @@ export const PaymentInfoWrap = ({
                                </span>
                            </li>
                        </>
+                    }{(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) &&
+                        <>
+                            <li className="kv-row">
+                                <span className="k">진행상태</span>
+                                <span className="v">{paymentInfo?.processStatus}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">요청일자</span>
+                                <span className="v">{paymentInfo?.requestDate && moment(paymentInfo.requestDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD')}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">결제유효일자</span>
+                                <span className="v">
+                                    {paymentInfo?.paymentLimitDate && moment(paymentInfo.paymentLimitDate).format('YYYY.MM.DD')}
+                                </span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">발송수단</span>
+                                <span className="v">{paymentInfo?.sendMethod}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">구매자명</span>
+                                <span className="v">{paymentInfo?.buyerName}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">이메일</span>
+                                <span className="v">
+                                    {paymentInfo?.email && paymentInfo.email}
+                                </span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">휴대폰번호</span>
+                                <span className="v">
+                                    {paymentInfo?.phoneNumber && paymentInfo.phoneNumber}
+                                </span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">상품명</span>
+                                <span className="v">
+                                    {paymentInfo?.goodsName && paymentInfo.goodsName}
+                                </span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">주문번호</span>
+                                <span className="v">
+                                    {paymentInfo?.moid && paymentInfo?.moid}
+                                </span>
+                            </li>
+                        </>
                    }
                </ul>
            </div>
--- a/src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx
+++ b/src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx
@@ -36,7 +36,7 @@ export const TitleInfoWrap = ({
          <div className="num-day">{titleInfo?.requestDate}</div>
        </>
      )}
-      {additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping && (
+      {additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory && (
        <>
          <div className="num-amount">
            <span className="amount-text">
@@ -44,16 +44,30 @@ export const TitleInfoWrap = ({
                value={titleInfo?.amount}
                thousandSeparator
                displayType="text"
-                suffix={ '원' }
+                suffix={'원'}
              ></NumericFormat>
            </span>
          </div>
          <div className="num-store">{titleInfo?.corpName}</div>
-          <div className="num-day">{titleInfo?.requestDate}</div>
+          <div className="num-day">{titleInfo?.sendDate}</div>
        </>
      )}
      {additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending && (
        <>
+          <>
+            <div className="num-amount">
+              <span className="amount-text">
+                <NumericFormat
+                  value={titleInfo?.amount}
+                  thousandSeparator
+                  displayType="text"
+                  suffix={'원'}
+                ></NumericFormat>
+              </span>
+            </div>
+            <div className="num-store">{titleInfo?.corpName}</div>
+            <div className="num-day">{titleInfo?.scheduledSendDate}</div>
+          </>
        </>
      )}
    </>
--- a/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx
+++ b/src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx
@@ -6,7 +6,7 @@ import { ChangeEvent, useState } from 'react';
 import {
    LinkPaymentSearchType,
    LinkPaymentSendMethod,
-    LinkPaymentShippingHistoryFilterProps,
+    LinkPaymentHistoryFilterProps,
    LinkPaymentTransactionStatus,
    ProcessResult
 } from "../../../model/types";
@@ -16,7 +16,7 @@ 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 = ({
+export const LinkPaymentHistoryFilter = ({
    filterOn,
    setFilterOn,
    mid,
@@ -35,7 +35,7 @@ export const LinkPaymentShippingHistoryFilter = ({
    setTransactionStatus,
    setProcessResult,
    setSendMethod
-}: LinkPaymentShippingHistoryFilterProps) => {
+}: LinkPaymentHistoryFilterProps) => {


    const [filterMid, setFilterMid] = useState<string>(mid);
--- a/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-list.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-list.tsx
@@ -1,10 +1,10 @@
-import { LinkPaymentShippingListProps } from '../../model/types';
+import { LinkPaymentHistoryListProps } from '../../model/types';
 import { ListDateGroup } from '../list-date-group';

-export const LinkPaymentShippingHistoryList = ({
+export const LinkPaymentHistoryList = ({
  additionalServiceCategory,
  listItems
-}: LinkPaymentShippingListProps) => {
+}: LinkPaymentHistoryListProps) => {

  const getListDateGroup = () => {
    let rs = [];
--- a/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx
@@ -1,16 +1,16 @@
 import moment from 'moment';
 import { IMAGE_ROOT } from "@/shared/constants/common";
 import { useState, useEffect } from "react";
-import { LinkPaymentShippingHistoryFilter } from "./filter/link-payment-shipping-history-filter";
+import { LinkPaymentHistoryFilter } from "./filter/link-payment-history-filter";
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
-import { LinkPaymentShippingHistoryList } from "./link-payment-shipping-history-list";
+import { LinkPaymentHistoryList } from "./link-payment-history-list";
 import { SortOptionsBox } from "../sort-options-box";
-import { AdditionalServiceCategory, LinkPaymentSendMethod, LinkPaymentShippingListItem, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
+import { AdditionalServiceCategory, LinkPaymentSendMethod, LinkPaymentHistoryListItem, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
 import { LinkPaymentSearchType, } from "../../model/types";
 import { useExtensionLinkPayHistoryListMutation } from '../../api/link-payment/use-extension-link-pay-history-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { todo } from 'node:test';
+import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-history-download-excel-mutation';

 const processResultBtnGroup = [
    { name: '전체', value: ProcessResult.ALL },
@@ -18,7 +18,7 @@ const processResultBtnGroup = [
    { name: '실패', value: ProcessResult.FAIL }
 ]

-export const LinkPaymentShippingHistoryWrap = () => {
+export const LinkPaymentHistoryWrap = () => {
    const { navigate } = useNavigate();

    const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -35,7 +35,7 @@ export const LinkPaymentShippingHistoryWrap = () => {
    const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL)

    const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
-
+    const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation();

    const onClickToNavigate = () => {
        navigate(PATHS.additionalService.linkPayment.request)
@@ -66,7 +66,7 @@ export const LinkPaymentShippingHistoryWrap = () => {
        })
    };

-    const assembleData = (content: Array<LinkPaymentShippingListItem>) => {
+    const assembleData = (content: Array<LinkPaymentHistoryListItem>) => {
        let data: any = {};
        if (content && content.length > 0) {
            for (let i = 0; i < content?.length; i++) {
@@ -85,8 +85,20 @@ export const LinkPaymentShippingHistoryWrap = () => {
    };

    const onClickToDownloadExcel = () => {
-
-    }
+        downloadExcel({
+            mid: mid,
+            searchCl: searchType === LinkPaymentSearchType.ALL ? '' : searchType,
+            searchValue: searchKeyword,
+            paymentMethod: 'st', // 추후 변경 필요 빼야함
+            fromDate: startDate,
+            toDate: endDate,
+            paymentStatus: transactionStatus === LinkPaymentTransactionStatus.ALL ? '' : transactionStatus,
+            sendStatus: processResult === ProcessResult.ALL ? '' : processResult,
+            sendMethod: sendMethod === LinkPaymentSendMethod.ALL ? '' : sendMethod,
+        }).then((rs) => {
+            console.log('Excel Dowload Status : ' + rs.status)
+        });
+    };

    const onClickProcessResult = (val: ProcessResult) => {
        setProcessResult(val);
@@ -159,17 +171,17 @@ export const LinkPaymentShippingHistoryWrap = () => {
                </div>
            </div>

-            <LinkPaymentShippingHistoryList
+            <LinkPaymentHistoryList
                listItems={listItems}
-                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
-            ></LinkPaymentShippingHistoryList>
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
+            ></LinkPaymentHistoryList>
            <div className="apply-row">
                <button
                    className="btn-50 btn-blue flex-1"
                    onClick={() => onClickToNavigate()}
                >결제 신청</button>
            </div>
-            <LinkPaymentShippingHistoryFilter
+            <LinkPaymentHistoryFilter
                filterOn={filterOn}
                setFilterOn={setFilterOn}
                mid={mid}
@@ -188,7 +200,7 @@ export const LinkPaymentShippingHistoryWrap = () => {
                setTransactionStatus={setTransactionStatus}
                setProcessResult={setProcessResult}
                setSendMethod={setSendMethod}
-            ></LinkPaymentShippingHistoryFilter>
+            ></LinkPaymentHistoryFilter>
        </>
    )
 }
--- a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
@@ -9,6 +9,7 @@ import { AdditionalServiceCategory, LinkPaymentWaitListItem, LinkPaymentSearchTy
 import { SortOptionsBox } from '../sort-options-box';
 import { useExtensionLinkPayWaitListMutation } from '../../api/link-payment/use-extension-link-pay-wait-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
+import { useExtensionLinkPayWaitDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-wait-download-excel-mutation';
 const sendingStatusBtnGrouup = [
    { name: '전체', value: LinkPaymentSendingStatus.ALL },
    { name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
@@ -31,6 +32,7 @@ export const LinkPaymentWaitSendWrap = () => {
    const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);

    const { mutateAsync: pendingSendList } = useExtensionLinkPayWaitListMutation();
+    const { mutateAsync: downloadExcel } = useExtensionLinkPayWaitDownloadExcelMutation();

    const onClickToOpenFilter = () => {
        setFilterOn(!filterOn);
@@ -82,7 +84,18 @@ export const LinkPaymentWaitSendWrap = () => {
    };

    const onClickToDownloadExcel = () => {
-
+        downloadExcel({
+            mid: mid,
+            searchCl: searchType === LinkPaymentSearchType.ALL ? '' : searchType,
+            searchValue: searchKeyword,
+            fromDate: startDate,
+            toDate: endDate,
+            sendStatus: sendingStatus === LinkPaymentSendingStatus.ALL ? '' : sendingStatus, // 추후 삭제 필요
+            sendMethod: sendMethod === LinkPaymentSendMethod.ALL ? '' : sendMethod,
+            processStatus: sendingStatus === LinkPaymentSendingStatus.ALL ? '' : sendingStatus,
+        }).then((rs) => {
+            console.log('Excel Dowload Status : ' + rs.status)
+        });
    };

    const onClickToSort = (sort: SortByKeys) => {
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -59,7 +59,7 @@ export const ListItem = ({
        rs = 'gray';
      }
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      if (paymentStatus === "PAYMENT_COMPLETE") {
        rs = 'blue';
      }
@@ -101,7 +101,7 @@ export const ListItem = ({
        }
      });
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      navigate(PATHS.additionalService.linkPayment.detail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
@@ -163,7 +163,7 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      str = `${accountNo}`
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping ||
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
       additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending
    ) {
      if (sendMethod === "SMS") {
@@ -199,7 +199,7 @@ export const ListItem = ({
        </div>
      );
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
      if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
        rs.push(
          <div className="transaction-details">
@@ -262,7 +262,7 @@ export const ListItem = ({
        </div>
      );
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping ||
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory ||
      additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending
    ) {
      rs.push(