- 부가서비스 : 링크결제_발송내역 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/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>
      );
    }