- 부가서비스 : 링크결제_발송내역 List 목업데이터 API 연동

src/entities/additional-service/api/use-extension-link-pay-history-list-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 { 
+  ExtensionKeyinListParams,
+  ExtensionKeyinListResponse,
+  ExtensionLinkPayHistoryListParams,
+  ExtensionLinkPayHistoryListResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionLinkPayHistoryListParam = (params: ExtensionLinkPayHistoryListParams) => {
+  return resultify(
+    axios.post<ExtensionLinkPayHistoryListResponse>(API_URL_ADDITIONAL_SERVICE.extensionLinkPaymentHistoryList(), params),
+  );
+};
+
+export const useExtensionLinkPayHistoryListMutation = (options?: UseMutationOptions<ExtensionLinkPayHistoryListResponse, CBDCAxiosError, ExtensionLinkPayHistoryListParams>) => {
+  const mutation = useMutation<ExtensionLinkPayHistoryListResponse, CBDCAxiosError, ExtensionLinkPayHistoryListParams>({
+    ...options,
+    mutationFn: (params: ExtensionLinkPayHistoryListParams) => extensionLinkPayHistoryListParam(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

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

@@ -50,6 +50,16 @@ export interface DetailInfo {
   requestWay?: string; //요청 구분
 }
 
+export interface PaymentInfo {
+  buyerName?: string;
+  sendMethod?: string;
+  sendDate?: string;
+  paymentStatus?: string;
+  paymentMethod?: string;
+  paymentDate?: string;
+  paymentLimitDate?: string;
+}
+
 // 상세정보 Info Enum
 export enum InfoWrapKeys {
   Title = 'Title',
@@ -187,22 +197,22 @@ export enum LinkPaymentSendingStatus {
 }
 
 export interface LinkPaymentShippingListItem {
-  transactionId?: string;
+  tid?: string;
-  customerName?: string;
+  // TODO : buyerName 필요
-  status?: string;
+  paymentDate?: string;
-  channel?: string;
+  paymentStatus?: string;
-  amount?: number;
   sendDate?: string;
-  transactionDate?: string;
+  sendStatus?: string;
+  sendMethod?: string;
+  amount?: number;
 }
 
 export interface LinkPaymentPendingListItem {
-  transactionId?: string;
+  tid?: string;
-  customerName?: string;
+  scheduledSendDate?: string;
-  status?: string;
+  sendMethod?: string;
-  channel?: string;
+  processStatus?: string;
   amount?: number;
-  requestDate?: string;
 }
 
 export interface LinkPaymentShippingListProps {
@@ -261,6 +271,7 @@ export enum DetailInfoSectionKeys {
 export interface DetailResponse {
   titleInfo?: TitleInfo //최상단 섹션
   detailInfo?: DetailInfo // '상세 정보' 섹션
+  paymentInfo?: PaymentInfo // '결제 정보' 섹션
 }
 
 export interface DetailInfoSectionProps extends DetailResponse {
@@ -305,7 +316,10 @@ export interface SettlementAgencyBottomAgreeProps {
 // 공통 리스트 관련 타입들
 // ========================================
 
-export interface ListItemProps extends KeyInPaymentListItem, AccountHolderSearchListItem, LinkPaymentShippingListItem, LinkPaymentPendingListItem {
+export interface ListItemProps extends 
+KeyInPaymentListItem, AccountHolderSearchListItem, 
+LinkPaymentShippingListItem, LinkPaymentPendingListItem
+{
   additionalServiceCategory?: AdditionalServiceCategory;
   mid?: string
 }
@@ -329,6 +343,34 @@ export interface AdditionalServiceListProps {
 export interface ExtensionRequestParams {
   mid: string;
 }
+// 링크 결제 - 발송,대기 조회 확장 서비스
+// ========================================
+export interface ExtensionLinkPayHistoryListParams extends ExtensionRequestParams {
+  searchCl: string;
+  searchValue: string;
+  paymentMethod: string;
+  fromDate: string;
+  toDate: string;
+  paymentStatus: string;
+  sendStatus: string;
+  sendMethod: string;
+  page?: DefaultRequestPagination;
+}
+
+export interface ExtensionLinkPayHistoryListResponse extends DefaulResponsePagination {
+  content: Array<ListItemProps>
+}
+
+export interface ExtensionLinkPayWaitListParams extends ExtensionRequestParams {
+  searchCl: string;
+  searchValue: string;
+  fromDate: string;
+  toDate: string;
+  sendStatus: string;
+  sendMethod: string;
+  processStatus: string;
+  page?: DefaultRequestPagination;
+}
 
 // 계좌 성명 조회 확장 서비스
 // ========================================
@@ -345,10 +387,6 @@ export interface ExtensionAccountHolderSearchListResponse extends DefaulResponse
   content: Array<ListItemProps>
 }
 
-export interface ExtensionAccountHolderSearchListItemProps { // Response - content
-
-}
-
 export interface ExtensionAccountHolderSearchDetailParams extends ExtensionRequestParams { // Request
   tid: string;
 }

src/entities/additional-service/ui/info-wrap/payment-info-wrap.tsx

@@ -0,0 +1,8 @@
+
+import { DetailInfoSectionProps } from '../../model/types';
+
+export const PaymentInfoWrap = ({
+    additionalServiceCategory,
+}: DetailInfoSectionProps) => {
+
+}

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

@@ -1,7 +1,7 @@
 import { LinkPaymentShippingListProps } from '../../model/types';
 import { ListDateGroup } from '../list-date-group';
 
-export const LinkPaymentSHippingHistoryList = ({
+export const LinkPaymentShippingHistoryList = ({
   additionalServiceCategory,
   listItems
 }: LinkPaymentShippingListProps) => {

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

@@ -4,10 +4,13 @@ import { useState, useEffect } from "react";
 import { LinkPaymentShippingHistoryFilter } from "./filter/link-payment-shipping-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 { LinkPaymentShippingHistoryList } from "./link-payment-shipping-history-list";
 import { SortOptionsBox } from "../sort-options-box";
-import { AdditionalServiceCategory, LinkPaymentSendMethod, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
+import { AdditionalServiceCategory, LinkPaymentSendMethod, LinkPaymentShippingListItem, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
 import { LinkPaymentSearchType, } from "../../model/types";
+import { useExtensionLinkPayHistoryListMutation } from '../../api/use-extension-link-pay-history-list-mutation';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
+import { todo } from 'node:test';
 
 const processResultBtnGroup = [
     { name: '전체', value: ProcessResult.ALL },
@@ -21,6 +24,7 @@ export const LinkPaymentShippingHistoryWrap = () => {
     const [filterOn, setFilterOn] = useState<boolean>(false);
     const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
     const [listItems, setListItems] = useState({});
+    const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
     const [mid, setMid] = useState<string>('nictest001m');
     const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.ALL)
     const [searchKeyword, setSearchKeyword] = useState<string>('');
@@ -30,68 +34,75 @@ export const LinkPaymentShippingHistoryWrap = () => {
     const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL)
     const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL)
 
-    const onClickToOpenFilter = () => {
+    const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
-        setFilterOn(!filterOn);
+
-    };
+
     const onClickToNavigate = () => {
         navigate(PATHS.additionalService.linkPayment.request)
     }
+
+
+
+    const callList = (option?: {
+        sortBy?: string,
+        val?: string
+    }) => {
+        pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
+        setPageParam(pageParam);
+
+        let listParams = {
+            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,
+            page: pageParam
+        }
+
+        linkPayHistoryList(listParams).then((rs) => {
+            setListItems(assembleData(rs.content));
+        })
+    };
+
+    const assembleData = (content: Array<LinkPaymentShippingListItem>) => {
+        let data: any = {};
+        if (content && content.length > 0) {
+            for (let i = 0; i < content?.length; i++) {
+                let sendDate = content[i]?.sendDate?.substring(0, 8);
+                let groupDate = moment(sendDate).format('YYYYMMDD');
+                if (!!groupDate && !data.hasOwnProperty(groupDate)) {
+                    data[groupDate] = [];
+                }
+                if (!!groupDate && data.hasOwnProperty(groupDate)) {
+                    data[groupDate].push(content[i]);
+                }
+            }
+        }
+        console.log('Data : ', data)
+        return data;
+    };
+
+    const onClickToDownloadExcel = () => {
+
+    }
+
+    const onClickProcessResult = (val: ProcessResult) => {
+        setProcessResult(val);
+    }
+
     const onClickToSort = (sort: SortByKeys) => {
         setSortBy(sort);
         callList({ sortBy: sort });
     };
 
-    const callList = (option?: { sortBy?: string, val?: string }) => {
+    const onClickToOpenFilter = () => {
-        setListItems({
+        setFilterOn(!filterOn);
-            '20250608': [
-                {
-                    transactionId: 'txn1',
-                    customerName: '김*환(7000)',
-                    status: '결제완료',
-                    channel: 'SMS',
-                    paymentMethod: '신용카드',
-                    amount: 5254000
-                },
-                {
-                    transactionId: 'txn2',
-                    customerName: '김*환(7000)',
-                    status: '결제완료',
-                    channel: '이메일',
-                    paymentMethod: '신용카드',
-                    amount: 5254000
-                },
-                {
-                    transactionId: 'txn3',
-                    customerName: '김*환(7000)',
-                    status: '입금요청',
-                    channel: '이메일',
-                    paymentMethod: '신용카드',
-                    amount: 5254000
-                },
-                {
-                    transactionId: 'txn4',
-                    customerName: '김*환(7000)',
-                    status: '결제중단',
-                    channel: 'SMS',
-                    paymentMethod: '',
-                    amount: 5254000
-                },
-                {
-                    transactionId: 'txn5',
-                    customerName: '김*환(7000)',
-                    status: '결제실패',
-                    channel: 'SMS',
-                    paymentMethod: '',
-                    amount: 5254000
-                }
-            ]
-        });
     };
 
-    const onClickProcessResult = (val: ProcessResult) => {
-        setProcessResult(val);
-    }
-
     useEffect(() => {
         callList();
     }, []);
@@ -123,6 +134,7 @@ export const LinkPaymentShippingHistoryWrap = () => {
                         <img
                             src={IMAGE_ROOT + '/ico_download.svg'}
                             alt="다운로드"
+                            onClick={() => onClickToDownloadExcel()}
                         />
                     </button>
                 </div>
@@ -149,10 +161,10 @@ export const LinkPaymentShippingHistoryWrap = () => {
                 </div>
             </div>
 
-            <LinkPaymentSHippingHistoryList
+            <LinkPaymentShippingHistoryList
                 listItems={listItems}
-                additionalServiceCategory={ AdditionalServiceCategory.LinkPaymentShipping }
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
-            ></LinkPaymentSHippingHistoryList>
+            ></LinkPaymentShippingHistoryList>
             <div className="apply-row">
                 <button
                     className="btn-50 btn-blue flex-1"

src/entities/additional-service/ui/list-date-group.tsx

@@ -28,19 +28,18 @@ export const ListDateGroup = ({
             tid={ items[i]?.tid }
             paymentDate= { items[i]?.paymentDate}
             paymentStatus={ items[i]?.paymentStatus}
-
             requestDate={ items[i]?.requestDate }
             bankName={ items[i]?.bankName}
             accountNo={ items[i]?.accountNo }
             resultStatus={ items[i]?.resultStatus }
 
-            transactionId={ items[i]?.transactionId }
-            customerName={ items[i]?.customerName }
-            status={ items[i]?.status }
-            channel={ items[i]?.channel }
             amount={ items[i]?.amount }
             sendDate={ items[i]?.sendDate }
-            transactionDate={ items[i]?.transactionDate }
+            sendStatus={ items[i]?.sendStatus}
+            sendMethod={ items[i]?.sendMethod}
+            scheduledSendDate={ items[i]?.scheduledSendDate}
+            processStatus={ items[i]?.processStatus}
+
           ></ListItem>
         )
       }  

src/entities/additional-service/ui/list-item.tsx

@@ -9,9 +9,8 @@ export const ListItem = ({
   mid, tid, paymentDate, paymentStatus,
 
   requestDate, bankName, accountNo, resultStatus,
-
+  amount, sendDate, sendStatus, sendMethod,
-  transactionId, customerName, status, channel,
+  scheduledSendDate, processStatus
-  amount, sendDate, transactionDate
 }: ListItemProps) => {
   const { navigate } = useNavigate();
   const getItemClass = () => {
@@ -113,11 +112,8 @@ export const ListItem = ({
       let time = requestDate?.substring(8, 14);
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+    else {
-      timeStr = moment(transactionDate).format('HH:mm');
+      return
-    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
-      timeStr = moment(sendDate).format('HH:mm');
     }
     return timeStr
   };
@@ -131,10 +127,18 @@ export const ListItem = ({
       str = `${accountNo}`
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
-      str = `${customerName}(${transactionId})`
+      if (sendMethod === "SMS") {
+        str = `${"buyerName"}(${"휴대폰 번호 뒷자리"})`
+      } else {
+        str = `${"buyerName"}(${"이메일"})`
+      }
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
-      str = `${customerName}(${transactionId})`
+      if (sendMethod === "SMS") {
+        str = `${"추후 buyerName 추가 필요"}(${"휴대폰 번호 뒷자리"})`
+      } else {
+        str = `${"추후 buyerName 추가 필요"}(${"이메일"})`
+      }
     }
     return str;
   };
@@ -160,24 +164,35 @@ export const ListItem = ({
       );
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
-      rs.push(
+
-        <div className="transaction-details">
+      if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
-          <span>{getTime()}</span>
+        rs.push(
-          <span className="separator">|</span>
+          <div className="transaction-details">
-          <span>{status}</span>
+            <span>{paymentStatus}</span>
-          <span className="separator">|</span>
+            <span className="separator">|</span>
-          <span>{channel}</span>
+            <span>{sendMethod}</span>
-        </div>
+          </div>
-      );
+        )
+      } else {
+        rs.push(
+          <div className="transaction-details">
+            <span>{paymentStatus}</span>
+            <span className="separator">|</span>
+            <span>{sendMethod}</span>
+            <span className="separator">|</span>
+            <span>{"결제수단 추가 필요"}</span>
+          </div>
+        );
+
+      }
+
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
       rs.push(
         <div className="transaction-details">
-          <span>{getTime()}</span>
+          <span>{processStatus}</span>
           <span className="separator">|</span>
-          <span>{status}</span>
+          <span>{sendMethod}</span>
-          <span className="separator">|</span>
-          <span>{channel}</span>
         </div>
       );
     }

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

@@ -168,7 +168,6 @@ export const KeyInPaymentPage = () => {
                 <button
                   className="download-btn"
                   aria-label="다운로드"
-                  onClick={() => onClickToDownloadExcel()}
                 >
                   <img
                     src={IMAGE_ROOT + '/ico_download.svg'}

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

@@ -17,6 +17,14 @@ export const API_URL_ADDITIONAL_SERVICE = {
     // POST: 계좌성명조회 엑셀 다운
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/search-account-name/excel`;
   },
+  extensionLinkPaymentHistoryList: () => {
+    // POST: 링크결제 - 발송내역 리스트 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/history/list`;
+  },
+  extensionLinkPaymentWaitList: () => {
+    // POST: 링크결제 - 발송대기 리스트 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/wait/list`;
+  },
   extensionSmsResend: () => {  
     // POST: SMS 결제 통보 > SMS 재발송
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/sms/resend`;