부가서비스

- 링크결제 발송내역/발송대기 엑셀다운로드 API 연결
- 링크결제 발송대기 상세 페이지 목업 API 연결
- 링크결제 발송대기 삭제 API 연결

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
     }

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

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

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

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

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';

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 
+export interface ListItemProps extends
-KeyInPaymentListItem, AccountHolderSearchListItem, 
+  KeyInPaymentListItem, AccountHolderSearchListItem,
-LinkPaymentShippingListItem, LinkPaymentWaitListItem,
+  LinkPaymentHistoryListItem, LinkPaymentWaitListItem {
-PayoutContent
-{
   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

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>

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>

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

src/entities/additional-service/ui/link-payment/filter/link-payment-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);

src/entities/additional-service/ui/link-payment/link-payment-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 = [];

src/entities/additional-service/ui/link-payment/link-payment-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}
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
-            ></LinkPaymentShippingHistoryList>
+            ></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>
         </>
     )
 }

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) => {

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(

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 { LinkPaymentShippingHistoryPage } from './link-payment/link-payment-shipping-history-page';
+import { LinkPaymentHistoryPage } from './link-payment/link-payment-history-page';
 import { LinkPaymentWaitSendPage } from './link-payment/link-payment-wait-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.shippingHistory} element={<LinkPaymentShippingHistoryPage />} />
+          <Route path={ROUTE_NAMES.additionalService.linkPayment.shippingHistory} element={<LinkPaymentHistoryPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.pendingSend} element={<LinkPaymentWaitSendPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.request} element={<LinkPaymentApplyPage />} />
           <Route path={ROUTE_NAMES.additionalService.linkPayment.requestConfirm} element={<LinkPaymentApplyConfirmPage />} />

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -119,8 +119,8 @@ export const KeyInPaymentPage = () => {
       fromDate: startDate,
       toDate: endDate,
       paymentStatus: transactionStatus,
-      minAmount: minAmount,
+      minAmount: newMinAmount,
-      maxAmount: maxAmount
+      maxAmount: newMaxAmount
     }).then((rs) => {
 
     });

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

@@ -2,21 +2,17 @@ import { useEffect, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useLocation } from 'react-router';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-payment-info-section';
 import { HeaderType } from '@/entities/common/model/types';
-import { IMAGE_ROOT } from '@/shared/constants/common';
 import {
   useSetOnBack,
   useSetHeaderTitle,
   useSetHeaderType,
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { DetailDeetsInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section';
 import { overlay } from 'overlay-kit';
 import { Dialog } from '@/shared/ui/dialogs/dialog';
-import { extensionLinkPayHistoryDetail, useExtensionLinkPayHistoryDetailMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-history-detail-mutation';
+import { useExtensionLinkPayHistoryDetailMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-history-detail-mutation';
 import { AdditionalServiceCategory, DetailInfo, DetailResponse, ExtensionLinkPayHistoryDetailParams, ExtensionLinkPayHistoryResendParams, PaymentInfo, TitleInfo } from '@/entities/additional-service/model/types';
-import { resourceLimits } from 'worker_threads';
 import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
 import { PaymentInfoWrap } from '@/entities/additional-service/ui/info-wrap/payment-info-wrap';
 import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
@@ -28,17 +24,11 @@ export const LinkPaymentDetailPage = () => {
 
   const { mid, tid } = location.state || {};
 
-  const [transactionId, setTransactionId] = useState<string>(location?.state?.transactionId || '');
-
   const [titleInfo, setTitleInfo] = useState<TitleInfo>();
   const [detailInfo, setDetailInfo] = useState<DetailInfo>();
   const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
 
-
-  const [deetsInfo, setDeetsInfo] = useState<any>();
-
   const [showPayment, setShowPayment] = useState<boolean>(false);
-  const [showDeets, setShowDeets] = useState<boolean>(false);
 
   useSetHeaderTitle('링크결제 상세');
   useSetHeaderType(HeaderType.RightClose);
@@ -116,19 +106,19 @@ export const LinkPaymentDetailPage = () => {
           <div className="tab-pane sub active">
             <div className="pay-top">
               <TitleInfoWrap
-              additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+              additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
               titleInfo={titleInfo}
               ></TitleInfoWrap>
             </div>
             <div className="pay-detail">
               <div className="detail-divider"></div>
               <PaymentInfoWrap
-                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
                 paymentInfo={paymentInfo}
               ></PaymentInfoWrap>
               <div className="detail-divider"></div>
               <DetailInfoWrap
-                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
                 detailInfo={detailInfo}
               ></DetailInfoWrap>
             </div>

src/pages/additional-service/link-payment/link-payment-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 { LinkPaymentShippingHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap';
+import { LinkPaymentHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-history-wrap';
 import {
     useSetHeaderTitle,
     useSetHeaderType,
@@ -17,7 +17,7 @@ import {
  * 발송내역 탭 화면
  */
 
-export const LinkPaymentShippingHistoryPage = () => {
+export const LinkPaymentHistoryPage = () => {
     const { navigate } = useNavigate();
 
     const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)
@@ -35,7 +35,7 @@ export const LinkPaymentShippingHistoryPage = () => {
                 <div className="tab-content">
                     <div className="tab-pane pt-46 active">
                         <LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
-                        <LinkPaymentShippingHistoryWrap></LinkPaymentShippingHistoryWrap>
+                        <LinkPaymentHistoryWrap></LinkPaymentHistoryWrap>
                     </div>
                 </div>
             </main>

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

@@ -2,31 +2,27 @@ import { useEffect, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useLocation } from 'react-router';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-payment-info-section';
 import { HeaderType } from '@/entities/common/model/types';
-import { IMAGE_ROOT } from '@/shared/constants/common';
 import {
   useSetOnBack,
   useSetHeaderTitle,
   useSetHeaderType,
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { DetailDeetsInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section';
 import { overlay } from 'overlay-kit';
 import { Dialog } from '@/shared/ui/dialogs/dialog';
 import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
-import { AdditionalServiceCategory, TitleInfo } from '@/entities/additional-service/model/types';
+import { AdditionalServiceCategory, DetailResponse, ExtensionLinkPayWaitDeleteParams, ExtensionLinkPayWaitDetailParams, PaymentInfo, TitleInfo } from '@/entities/additional-service/model/types';
+import { useExtensionLinkPayWaitDetailMutation, } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-wait-detail-mutation';
+import { PaymentInfoWrap } from '@/entities/additional-service/ui/info-wrap/payment-info-wrap';
+import { useExtensionLinkPayWaitDeleteMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-wait-delete-mutation';
 
 export const LinkPaymentWaitDetailPage = () => {
   const { navigate } = useNavigate();
   const location = useLocation();
-
+  const { mid, tid } = location.state || {};
-  const [transactionId, setTransactionId] = useState<string>(location?.state?.transactionId || '');
-
   const [titleInfo, setTitleInfo] = useState<TitleInfo>();
-  const [paymentInfo, setPaymentInfo] = useState<any>();
+  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
-
-  const [showPayment, setShowPayment] = useState<boolean>(false);
 
   useSetHeaderTitle('링크결제 상세_발송대기');
   useSetHeaderType(HeaderType.RightClose);
@@ -35,6 +31,38 @@ export const LinkPaymentWaitDetailPage = () => {
   });
   useSetFooterMode(false);
 
+  const { mutateAsync: linkPayWaitDetail } = useExtensionLinkPayWaitDetailMutation();
+  const { mutateAsync: linkPayWaitDelete } = useExtensionLinkPayWaitDeleteMutation();
+  const callDetail = () => {
+    let detailParam: ExtensionLinkPayWaitDetailParams = {
+      mid: mid,
+      tid: tid
+    }
+
+    linkPayWaitDetail(detailParam).then((rs: DetailResponse) => {
+      console.log("Detail Info: ", rs)
+      setTitleInfo(rs.titleInfo)
+      setPaymentInfo(rs.paymentInfo)
+    })
+
+  }
+
+  const deletePayment = () => {
+    let deleteParam: ExtensionLinkPayWaitDeleteParams = {
+      mid: mid,
+      tid: tid
+    }
+    linkPayWaitDelete(deleteParam)
+      .then((response) => {
+        console.log("Delete 성공 응답: ", response)
+        onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend)
+      })
+      .catch((error) => {
+        console.error("Resend 실패: ", error);
+
+      });
+  }
+
   const onClickToNavigate = (path: string) => {
     let timeout = setTimeout(() => {
       clearTimeout(timeout);
@@ -43,10 +71,6 @@ export const LinkPaymentWaitDetailPage = () => {
     }, 10)
   };
 
-  const onClickToShowInfo = () => {
-    setShowPayment(!showPayment);
-  };
-
   const onClickToCancel = () => {
     let msg = '삭제 하시겠습니까?';
 
@@ -60,7 +84,7 @@ export const LinkPaymentWaitDetailPage = () => {
           afterLeave={unmount}
           open={isOpen}
           onClose={close}
-          onConfirmClick={() => onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend)}
+          onConfirmClick={() => deletePayment()}
           message={msg}
           buttonLabel={['취소', '확인']}
         />
@@ -68,46 +92,35 @@ export const LinkPaymentWaitDetailPage = () => {
     });
   };
 
+  useEffect(() => {
+    callDetail();
+  }, []);
+
   return (
     <>
-      <main className="full-height">
+      <main>
         <div className="tab-content">
           <div className="tab-pane sub active">
-            <div className="option-list">
+            <div className="pay-top">
-              <div className="txn-detail">
+              <TitleInfoWrap
-                <TitleInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
-                  additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
+                titleInfo={titleInfo}
-                  titleInfo={titleInfo}
+              ></TitleInfoWrap>
-                ></TitleInfoWrap>
 
-                <div className="txn-num-group">
+              <div className="txn-divider minus"></div>
-                  <div className="txn-amount">
-                    <div className="value">3,500,000<span className="unit">원</span></div>
-                  </div>
-                  <div className="txn-mid">
-                    <span className="value">나이스테스트가맹점</span>
-                  </div>
-                  <div className="txn-mid">
-                    <span className="value">2025.06.09</span>
-                  </div>
-                </div>
 
-                <div className="txn-divider minus"></div>
+              <PaymentInfoWrap
-
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
-                <DetailPaymentInfoSection
+                paymentInfo={paymentInfo}
-                  paymentInfo={paymentInfo}
+              ></PaymentInfoWrap>
-                  show={showPayment}
-                  onClickToShowInfo={onClickToShowInfo}
-                ></DetailPaymentInfoSection>
-              </div>
-            </div>
-            <div className="apply-row">
-              <button
-                className="btn-50 btn-blue flex-1"
-                onClick={() => onClickToCancel()}
-              >삭제</button>
             </div>
           </div>
+          <div className="apply-row">
+            <button
+              className="btn-50 btn-blue flex-1"
+              onClick={() => onClickToCancel()}
+            >삭제</button>
+          </div>
         </div>
       </main>
     </>

src/shared/api/api-url-additional-service.ts

@@ -1,4 +1,4 @@
-import { 
+import {
   API_BASE_URL,
   API_URL_KEY,
 } from './../constants/url';
@@ -21,19 +21,34 @@ export const API_URL_ADDITIONAL_SERVICE = {
     // POST: 링크결제 - 발송내역 리스트 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/history/list`;
   },
+  extensionLinkPaymentHistoryDownloadExcel: () => {
+    // POST: 링크결제 - 발송내역 엑셀 다운
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/history/excel`;
+  },
   extensionLinkPaymentHistoryDetail: () => {
+    // POST: 링크결제 - 발송내역 상세 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/history/detail`;
   },
   extensionLinkPaymentHistoryResend: () => {
+    // POST: 링크결제 - 발송내역 상세 > 재발송
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/resend`;
   },
   extensionLinkPaymentWaitList: () => {
     // POST: 링크결제 - 발송대기 리스트 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/wait/list`;
   },
+  extensionLinkPaymentWaitDownloadExcel: () => {
+    // POST: 링크결제 - 발송내역 엑셀 다운
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/wait/excel`;
+  },
   extensionLinkPaymentWaitDetail: () => {
+    // POST: 링크결제 - 발송대기 상세 내역 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/wait/detail`;
   },
+  extensionLinkPayMentWaitDelete: () => {
+    // POST: 링크결제 - 발송대기 삭제
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/wait/delete`;
+  },
   extensionSmsResend: () => {
     // POST: SMS 결제 통보 > SMS 재발송
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/sms/resend`;