-부가서비스 : 링크결제 - 발송내역 리스트 목업 API 연동

2025-09-19 12:41:36 +09:00
parent ffa5b88932
commit b900c16b71
9 changed files with 185 additions and 65 deletions
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-detail-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-detail-mutation.ts
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-history-list-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-history-list-mutation.ts
@@ -7,7 +7,7 @@ import {
  ExtensionKeyinListResponse,
  ExtensionLinkPayHistoryListParams,
  ExtensionLinkPayHistoryListResponse
-} from '../model/types';
+} from '../../model/types';
 import { 
  useMutation,
  UseMutationOptions
--- 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
--- 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
@@ -0,0 +1,33 @@
+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,
+  ExtensionLinkPayWaitListParams,
+  ExtensionLinkPayWaitListResponse
+} from '../../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionLinkPayWaitListParam = (params: ExtensionLinkPayWaitListParams) => {
+  return resultify(
+    axios.post<ExtensionLinkPayWaitListResponse>(API_URL_ADDITIONAL_SERVICE.extensionLinkPaymentWaitList(), params),
+  );
+};
+
+export const useExtensionLinkPayWaitListMutation = (options?: UseMutationOptions<ExtensionLinkPayWaitListResponse, CBDCAxiosError, ExtensionLinkPayWaitListParams>) => {
+  const mutation = useMutation<ExtensionLinkPayWaitListResponse, CBDCAxiosError, ExtensionLinkPayWaitListParams>({
+    ...options,
+    mutationFn: (params: ExtensionLinkPayWaitListParams) => extensionLinkPayWaitListParam(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};
--- a/src/entities/additional-service/lib/payment-status-utils.ts
+++ b/src/entities/additional-service/lib/payment-status-utils.ts
@@ -0,0 +1,49 @@
+export const getPaymentStatusText = (status?: string): string => {
+  if (!status) return '';
+
+  const statusMap: Record<string, string> = {
+    'ALL': '전체',
+    'ACTIVE': '미완료/활성화',
+    'DEPOSIT_REQUEST': '입금요청',
+    'PAYMENT_COMPLETE': '결제완료',
+    'PAYMENT_FAIL': '결제실패',
+    'INACTIVE': '결제중단/비활성화'
+  };
+
+  return statusMap[status] || status;
+};
+
+export const getProcessStatusText = (status?: string): string => {
+  if (!status) return '';
+
+  const processStatusMap: Record<string, string> = {
+    'SEND_REQUEST': '발송요청',
+    'SEND_CANCEL': '발송취소',
+    'PENDING': '대기중'
+  };
+
+  return processStatusMap[status] || status;
+};
+
+export const getSendMethodText = (method?: string): string => {
+  if (!method) return '';
+
+  const sendMethodMap: Record<string, string> = {
+    'SMS': 'SMS',
+    'EMAIL': '이메일',
+    'KAKAO': '알림톡'
+  };
+
+  return sendMethodMap[method] || method;
+};
+
+export const getResultStatusText = (status?: string): string => {
+  if (!status) return '';
+
+  const resultStatusMap: Record<string, string> = {
+    'SUCCESS': '성공',
+    'FAIL': '실패'
+  };
+
+  return resultStatusMap[status] || status;
+};
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -212,6 +212,7 @@ export interface LinkPaymentPendingListItem {
  scheduledSendDate?: string;
  sendMethod?: string;
  processStatus?: string;
+  // TODO: buyerName,phoneNumber 필요
  amount?: number;
 }

@@ -372,6 +373,10 @@ export interface ExtensionLinkPayWaitListParams extends ExtensionRequestParams {
  page?: DefaultRequestPagination;
 }

+export interface ExtensionLinkPayWaitListResponse extends DefaulResponsePagination {
+  content: Array<ListItemProps>
+}
+
 // 계좌 성명 조회 확장 서비스
 // ========================================
 export interface ExtensionAccountHolderSearchListParams extends ExtensionRequestParams { // Request
--- a/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx
@@ -5,9 +5,10 @@ import { LinkPaymentPendingSendFilter } from "./filter/link-payment-pending-send
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
 import { LinkPaymentPendingList } from "./link-payment-pending-list";
-import { AdditionalServiceCategory, LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, SortByKeys } from "../../model/types";
+import { AdditionalServiceCategory, LinkPaymentPendingListItem, LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, SortByKeys } from "../../model/types";
 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';
 const sendingStatusBtnGrouup = [
    { name: '전체', value: LinkPaymentSendingStatus.ALL },
    { name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
@@ -26,8 +27,10 @@ export const LinkPaymentPendingSendWrap = () => {
    const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
    const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
    const [sendingStatus, setSendingStatus] = useState<LinkPaymentSendingStatus>(LinkPaymentSendingStatus.ALL);
-
    const [listItems, setListItems] = useState({});
+    const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+
+    const { mutateAsync: pendingSendList } = useExtensionLinkPayWaitListMutation();

    const onClickToOpenFilter = () => {
        setFilterOn(!filterOn);
@@ -36,46 +39,46 @@ export const LinkPaymentPendingSendWrap = () => {
        navigate(PATHS.additionalService.linkPayment.request)
    }

-    const callList = () => {
-        setListItems({
-            '20250608': [
-                {
-                    transactionId: 'pending1',
-                    customerName: '김*환(7000)',
-                    status: '발송요청',
-                    channel: 'SMS',
-                    amount: 5254000
-                },
-                {
-                    transactionId: 'pending2',
-                    customerName: '김*환(7000)',
-                    status: '발송요청',
-                    channel: 'SMS',
-                    amount: 5254000
-                },
-                {
-                    transactionId: 'pending3',
-                    customerName: '김*환(7000)',
-                    status: '발송요청',
-                    channel: '이메일',
-                    amount: 5254000
-                },
-                {
-                    transactionId: 'pending4',
-                    customerName: '김*환(7000)',
-                    status: '발송취소',
-                    channel: 'SMS',
-                    amount: 5254000
-                },
-                {
-                    transactionId: 'pending5',
-                    customerName: '김*환(7000)',
-                    status: '발송취소',
-                    channel: 'SMS',
-                    amount: 5254000
+    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,
+            fromDate: startDate,
+            toDate: endDate,
+            sendStatus: sendingStatus === LinkPaymentSendingStatus.ALL ? '' : sendingStatus, // 추후 삭제 필요
+            sendMethod: sendMethod === LinkPaymentSendMethod.ALL ? '' : sendMethod,
+            processStatus: sendingStatus === LinkPaymentSendingStatus.ALL ? '' : sendingStatus,
+            page: pageParam
+        }
+
+        pendingSendList(listParams).then((rs) => {
+            setListItems(assembleData(rs.content))
+        })
+    };
+
+    const assembleData = (content: Array<LinkPaymentPendingListItem>) => {
+        let data: any = {};
+        if (content && content.length > 0) {
+            for (let i = 0; i < content?.length; i++) {
+                let scheduledSendDate = content[i]?.scheduledSendDate?.substring(0, 8);
+                let groupDate = moment(scheduledSendDate).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 = () => {
--- 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
@@ -8,7 +8,7 @@ import { LinkPaymentShippingHistoryList } from "./link-payment-shipping-history-
 import { SortOptionsBox } from "../sort-options-box";
 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 { 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';

@@ -41,8 +41,6 @@ export const LinkPaymentShippingHistoryWrap = () => {
        navigate(PATHS.additionalService.linkPayment.request)
    }

-
-
    const callList = (option?: {
        sortBy?: string,
        val?: string
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -2,6 +2,7 @@ import { NumericFormat } from 'react-number-format';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps, AdditionalServiceCategory } from '../model/types';
+import { getPaymentStatusText, getProcessStatusText, getSendMethodText } from '../lib/payment-status-utils';
 import moment from 'moment';

 export const ListItem = ({
@@ -55,6 +56,30 @@ export const ListItem = ({
        rs = 'gray';
      }
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+      if (paymentStatus === "PAYMENT_COMPLETE") {
+        rs = 'blue';
+      }
+
+      else if (paymentStatus === "ACTIVE") {
+        rs = 'blue';
+      }
+      else if (paymentStatus === "DEPOSIT_REQUEST") {
+        rs = 'blue';
+      }
+      else if (paymentStatus === "PAYMENT_FAIL") {
+        rs = 'blue';
+      }
+      else if (paymentStatus === "INACTIVE") {
+        rs = 'gray';
+      }
+    } else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
+      if (processStatus === "SEND_REQUEST") {
+        rs = 'blue'
+      } else {
+        rs = 'gray'
+      }
+    }
    return rs;

  };
@@ -83,7 +108,7 @@ export const ListItem = ({
      });
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
-      navigate(PATHS.additionalService.linkPayment.detail, {
+      navigate(PATHS.additionalService.linkPayment.pendingDetail, {
        state: {
          additionalServiceCategory: additionalServiceCategory,
          mid: mid,
@@ -126,20 +151,16 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
      str = `${accountNo}`
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping ||
+       additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending
+    ) {
      if (sendMethod === "SMS") {
-        str = `${"buyerName"}(${"휴대폰 번호 뒷자리"})`
+        str = `${"buyerName"}(${"휴대폰 번호"})`
      } else {
        str = `${"buyerName"}(${"이메일"})`
      }
    }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
-      if (sendMethod === "SMS") {
-        str = `${"추후 buyerName 추가 필요"}(${"휴대폰 번호 뒷자리"})`
-      } else {
-        str = `${"추후 buyerName 추가 필요"}(${"이메일"})`
-      }
-    }
+
    return str;
  };

@@ -164,35 +185,32 @@ export const ListItem = ({
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
-
      if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
        rs.push(
          <div className="transaction-details">
-            <span>{paymentStatus}</span>
+            <span>{getPaymentStatusText(paymentStatus)}</span>
            <span className="separator">|</span>
-            <span>{sendMethod}</span>
+            <span>{getSendMethodText(sendMethod)}</span>
          </div>
        )
      } else {
        rs.push(
          <div className="transaction-details">
-            <span>{paymentStatus}</span>
+            <span>{getPaymentStatusText(paymentStatus)}</span>
            <span className="separator">|</span>
-            <span>{sendMethod}</span>
+            <span>{getSendMethodText(sendMethod)}</span>
            <span className="separator">|</span>
            <span>{"결제수단 추가 필요"}</span>
          </div>
        );
-
      }
-
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
      rs.push(
        <div className="transaction-details">
-          <span>{processStatus}</span>
+          <span>{getProcessStatusText(processStatus)}</span>
          <span className="separator">|</span>
-          <span>{sendMethod}</span>
+          <span>{getSendMethodText(sendMethod)}</span>
        </div>
      );
    }
@@ -220,6 +238,20 @@ export const ListItem = ({
        </div>
      );
    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping ||
+      additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending
+    ) {
+      rs.push(
+        <div className="transaction-amount">
+          <NumericFormat
+            value={amount}
+            thousandSeparator
+            displayType="text"
+            suffix={'원'}
+          ></NumericFormat>
+        </div>
+      )
+    }
    return rs;
  }