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

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

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

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

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

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 = () => {
+    const callList = (option?: {
-        setListItems({
+        sortBy?: string,
-            '20250608': [
+        val?: string
-                {
+    }) => {
-                    transactionId: 'pending1',
+        pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
-                    customerName: '김*환(7000)',
+        setPageParam(pageParam);
-                    status: '발송요청',
+
-                    channel: 'SMS',
+        let listParams = {
-                    amount: 5254000
+            mid: mid,
-                },
+            searchCl: searchType === LinkPaymentSearchType.ALL ? '' : searchType,
-                {
+            searchValue: searchKeyword,
-                    transactionId: 'pending2',
+            fromDate: startDate,
-                    customerName: '김*환(7000)',
+            toDate: endDate,
-                    status: '발송요청',
+            sendStatus: sendingStatus === LinkPaymentSendingStatus.ALL ? '' : sendingStatus, // 추후 삭제 필요
-                    channel: 'SMS',
+            sendMethod: sendMethod === LinkPaymentSendMethod.ALL ? '' : sendMethod,
-                    amount: 5254000
+            processStatus: sendingStatus === LinkPaymentSendingStatus.ALL ? '' : sendingStatus,
-                },
+            page: pageParam
-                {
+        }
-                    transactionId: 'pending3',
+
-                    customerName: '김*환(7000)',
+        pendingSendList(listParams).then((rs) => {
-                    status: '발송요청',
+            setListItems(assembleData(rs.content))
-                    channel: '이메일',
+        })
-                    amount: 5254000
+    };
-                },
+
-                {
+    const assembleData = (content: Array<LinkPaymentPendingListItem>) => {
-                    transactionId: 'pending4',
+        let data: any = {};
-                    customerName: '김*환(7000)',
+        if (content && content.length > 0) {
-                    status: '발송취소',
+            for (let i = 0; i < content?.length; i++) {
-                    channel: 'SMS',
+                let scheduledSendDate = content[i]?.scheduledSendDate?.substring(0, 8);
-                    amount: 5254000
+                let groupDate = moment(scheduledSendDate).format('YYYYMMDD');
-                },
+                if (!!groupDate && !data.hasOwnProperty(groupDate)) {
-                {
+                    data[groupDate] = [];
-                    transactionId: 'pending5',
-                    customerName: '김*환(7000)',
-                    status: '발송취소',
-                    channel: 'SMS',
-                    amount: 5254000
                 }
-            ]
+                if (!!groupDate && data.hasOwnProperty(groupDate)) {
-        });
+                    data[groupDate].push(content[i]);
+                }
+            }
+        }
+        console.log('Data : ', data)
+        return data;
     };
 
     const onClickToDownloadExcel = () => {

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

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