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

2025-09-18 18:14:26 +09:00
parent 92dad13d0f
commit 93b38d3f42
10 changed files with 215 additions and 105 deletions
--- a/src/entities/additional-service/api/use-extension-link-pay-detail-mutation.ts
+++ b/src/entities/additional-service/api/use-extension-link-pay-detail-mutation.ts
--- a/src/entities/additional-service/api/use-extension-link-pay-history-list-mutation.ts
+++ b/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,
+  };
+};
--- a/src/entities/additional-service/model/types.ts
+++ b/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;
-  customerName?: string;
-  status?: string;
-  channel?: string;
-  amount?: number;
+  tid?: string;
+  // TODO : buyerName 필요
+  paymentDate?: string;
+  paymentStatus?: string;
  sendDate?: string;
-  transactionDate?: string;
+  sendStatus?: string;
+  sendMethod?: string;
+  amount?: number;
 }

 export interface LinkPaymentPendingListItem {
-  transactionId?: string;
-  customerName?: string;
-  status?: string;
-  channel?: string;
+  tid?: string;
+  scheduledSendDate?: string;
+  sendMethod?: 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;
 }
--- a/src/entities/additional-service/ui/info-wrap/payment-info-wrap.tsx
+++ b/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) => {
+
+}
--- 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,7 +1,7 @@
 import { LinkPaymentShippingListProps } from '../../model/types';
 import { ListDateGroup } from '../list-date-group';

-export const LinkPaymentSHippingHistoryList = ({
+export const LinkPaymentShippingHistoryList = ({
  additionalServiceCategory,
  listItems
 }: LinkPaymentShippingListProps) => {
--- 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
@@ -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 = () => {
-        setFilterOn(!filterOn);
-    };
+    const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
+
+
    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 }) => {
-        setListItems({
-            '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 onClickToOpenFilter = () => {
+        setFilterOn(!filterOn);
    };

-    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 }
-            ></LinkPaymentSHippingHistoryList>
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+            ></LinkPaymentShippingHistoryList>
            <div className="apply-row">
                <button
                    className="btn-50 btn-blue flex-1"
--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/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>
        )
      }  
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -9,9 +9,8 @@ export const ListItem = ({
  mid, tid, paymentDate, paymentStatus,

  requestDate, bankName, accountNo, resultStatus,
-
-  transactionId, customerName, status, channel,
-  amount, sendDate, transactionDate
+  amount, sendDate, sendStatus, sendMethod,
+  scheduledSendDate, processStatus
 }: ListItemProps) => {
  const { navigate } = useNavigate();
  const getItemClass = () => {
@@ -46,7 +45,7 @@ export const ListItem = ({
      else if (paymentStatus === 'AFTER_CANCEL') {
        rs = 'gray';
      }
-      
+
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      if (resultStatus === "SUCCESS") {
@@ -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) {
-      timeStr = moment(transactionDate).format('HH:mm');
-    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
-      timeStr = moment(sendDate).format('HH:mm');
+    else {
+      return
    }
    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">
-          <span>{getTime()}</span>
-          <span className="separator">|</span>
-          <span>{status}</span>
-          <span className="separator">|</span>
-          <span>{channel}</span>
-        </div>
-      );
+
+      if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
+        rs.push(
+          <div className="transaction-details">
+            <span>{paymentStatus}</span>
+            <span className="separator">|</span>
+            <span>{sendMethod}</span>
+          </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 className="separator">|</span>
-          <span>{channel}</span>
+          <span>{sendMethod}</span>
        </div>
      );
    }
--- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
+++ b/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'}
--- a/src/shared/api/api-url-additional-service.ts
+++ b/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`;