통합거래조회 UI api

2025-09-11 13:40:21 +09:00
parent 409a711b9a
commit 1b4af7a82f
27 changed files with 1056 additions and 390 deletions
--- a/src/pages/transaction/all-transaction/detail-page.tsx
+++ b/src/pages/transaction/all-transaction/detail-page.tsx
@@ -35,6 +35,7 @@ export const AllTransactionDetailPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();
  const tid = location.state.tid;
+  const serviceCode = location.state.serviceCode;
  
  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
  const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
@@ -136,18 +137,21 @@ export const AllTransactionDetailPage = () => {
                  transactionCategory={ TransactionCategory.AllTransaction }
                  amountInfo={ amountInfo }
                  show={ showAmountInfo }
-                  tid={ tid }
+                  tid={ tid } 
+                  serviceCode={ serviceCode }
                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                ></AmountInfoWrap>
-                <div className="txn-divider minus"></div>
+                <div className="txn-divider"></div>
                <ImportantInfoWrap
                  transactionCategory={ TransactionCategory.AllTransaction }
                  importantInfo={ importantInfo }
+                  serviceCode={ serviceCode }
                ></ImportantInfoWrap>
-                <div className="txn-divider minus"></div>
+                <div className="txn-divider"></div>
                <PaymentInfoWrap
                  transactionCategory={ TransactionCategory.AllTransaction }
                  paymentInfo={ paymentInfo }
+                  serviceCode={ serviceCode }
                  show={ showPaymentInfo }
                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                ></PaymentInfoWrap>
@@ -155,6 +159,7 @@ export const AllTransactionDetailPage = () => {
                <TransactionInfoWrap
                  transactionCategory={ TransactionCategory.AllTransaction }
                  transactionInfo={ transactionInfo }
+                  serviceCode={ serviceCode }
                  show={ showTransactionInfo }
                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                ></TransactionInfoWrap>
@@ -162,6 +167,7 @@ export const AllTransactionDetailPage = () => {
                <SettlementInfoWrap
                  transactionCategory={ TransactionCategory.AllTransaction }
                  settlementInfo={ settlementInfo }
+                  serviceCode={ serviceCode }
                  show={ showSettlementInfo }
                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                ></SettlementInfoWrap>
@@ -169,6 +175,7 @@ export const AllTransactionDetailPage = () => {
                <PartCancelInfoWrap
                  transactionCategory={ TransactionCategory.AllTransaction }
                  partCancelInfo={ partCancelInfo }
+                  serviceCode={ serviceCode }
                  show={ showPartCancelInfo }
                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                ></PartCancelInfoWrap>
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/src/pages/transaction/all-transaction/list-page.tsx
@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
-import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { AllTransactionListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
 import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
 import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -84,12 +84,12 @@ export const AllTransactionListPage = () => {
    });
  };

-  const assembleData = (content: Array<ListItem>) => {
+  const assembleData = (content: Array<AllTransactionListItem>) => {
    let data: any = {};
    if(content && content.length > 0){
      for(let i=0;i<content?.length;i++){
-        let stateDate = content[i]?.stateDate;
-        let groupDate = stateDate?.substring(0, 8);
+        let stateDate = content[i]?.stateDate?.substring(0, 8);
+        let groupDate = moment(stateDate).format('YYYYMMDD');
        if(!!groupDate && !data.hasOwnProperty(groupDate)){
          data[groupDate] = [];
        }
@@ -141,7 +141,10 @@ export const AllTransactionListPage = () => {
    if(!!serviceCodeOptions && serviceCodeOptions.length > 0)
    for(let i=0;i<serviceCodeOptions.length;i++){
      rs.push(
-      <option value={serviceCodeOptions[i]?.value}>{ serviceCodeOptions[i]?.text }</option>
+        <option 
+          key={`key-${i}`}
+          value={serviceCodeOptions[i]?.value}
+        >{ serviceCodeOptions[i]?.text }</option>
      )
    }
    return rs;
--- a/src/pages/transaction/billing/detail-page.tsx
+++ b/src/pages/transaction/billing/detail-page.tsx
@@ -1,28 +1,15 @@
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
-import { Dialog } from '@/shared/ui/dialogs/dialog';
-import { overlay } from 'overlay-kit';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useBillingDetailMutation } from '@/entities/transaction/api/use-billing-detail-mutation';
-import { AmountInfoWrap } from '@/entities/transaction/ui/info-wrap/amount-info-wrap';
-import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
-import { PaymentInfoWrap } from '@/entities/transaction/ui/info-wrap/payment-info-wrap';
-import { TransactionInfoWrap } from '@/entities/transaction/ui/info-wrap/transaction-info-wrap';
-import { SettlementInfoWrap } from '@/entities/transaction/ui/info-wrap/settlement-info-wrap';
-import { PartCancelInfoWrap } from '@/entities/transaction/ui/info-wrap/part-cancel-info-wrap';
+import { BillingInfoWrap } from '@/entities/transaction/ui/info-wrap/billing-info-wrap';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
  TransactionCategory,
  BillingDetailParams,
-  DetailResponse,
-  AmountInfo,
-  ImportantInfo,
-  PaymentInfo,
-  TransactionInfo,
-  SettlementInfo,
-  PartCancelInfo,
-  InfoWrapKeys
+  BillingDetailResponse,
+  BillingInfo
 } from '@/entities/transaction/model/types';
 import {
  useSetOnBack, 
@@ -34,19 +21,9 @@ import {
 export const BillingDetailPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();
+    
+  const [billingInfo, setBillingInfo] = useState<BillingInfo>();
  
-  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
-  const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
-  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
-  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
-  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
-  const [partCancelInfo, setPartCancelInfo] = useState<PartCancelInfo>();
-  const [showAmount, setShowAmount] = useState<boolean>(false);
-  const [showPayment, setShowPayment] = useState<boolean>(false);
-  const [showTransaction, setShowTransaction] = useState<boolean>(false);
-  const [showSettlement, setShowSettlement] = useState<boolean>(false);
-  const [showPartCancel, setShowPartCancel] = useState<boolean>(false);
-
  useSetHeaderTitle('빌링 상세');
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
@@ -60,37 +37,14 @@ export const BillingDetailPage = () => {
    let billingDetailParams: BillingDetailParams = {
      billKey: location?.state.billKey
    };
-    billingDetail(billingDetailParams).then((rs: DetailResponse) => {
-      setAmountInfo(rs.amountInfo);
-      setImportantInfo(rs.importantInfo);
-      setPaymentInfo(rs.paymentInfo);
-      setTransactionInfo(rs.transactionInfo);
-      setSettlementInfo(rs.settlementInfo);
-      setPartCancelInfo(rs.partCancelInfo);
+    billingDetail(billingDetailParams).then((rs: BillingDetailResponse) => {
+      setBillingInfo(rs);
    });
  };
  useEffect(() => {
    callDetail();
  }, []);
-
-  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
-    if(infoWrapKey === InfoWrapKeys.Amount){
-      setShowAmount(!showAmount);
-    }
-    else if(infoWrapKey === InfoWrapKeys.Payment){
-      setShowPayment(!showPayment);
-    }
-    else if(infoWrapKey === InfoWrapKeys.Transaction){
-      setShowTransaction(!showTransaction);
-    }
-    else if(infoWrapKey === InfoWrapKeys.Settlement){
-      setShowSettlement(!showSettlement);
-    }
-    else if(infoWrapKey === InfoWrapKeys.PartCancel){
-      setShowPartCancel(!showPartCancel);
-    }
-  };
-
+  
  return (
    <>
      <main>
@@ -98,48 +52,12 @@ export const BillingDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
-                <AmountInfoWrap
+                <BillingInfoWrap
                  transactionCategory={ TransactionCategory.Billing }
-                  amountInfo={ amountInfo }
-                  show={ showAmount }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></AmountInfoWrap>
-                <div className="txn-divider minus"></div>
-                <ImportantInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
-                  importantInfo={ importantInfo }
-                ></ImportantInfoWrap>
-                <div className="txn-divider minus"></div>
-                <PaymentInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
-                  paymentInfo={ paymentInfo }
-                  show={ showPayment }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></PaymentInfoWrap>
-                <div className="txn-divider"></div>
-                <TransactionInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
-                  transactionInfo={ transactionInfo }
-                  show={ showTransaction }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></TransactionInfoWrap>
-                <div className="txn-divider"></div>
-                <SettlementInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
-                  settlementInfo={ settlementInfo }
-                  show={ showSettlement }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></SettlementInfoWrap>
-                <div className="txn-divider"></div>
-                <PartCancelInfoWrap
-                  transactionCategory={ TransactionCategory.Billing }
-                  partCancelInfo={ partCancelInfo }
-                  show={ showPartCancel }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></PartCancelInfoWrap>
+                  billingInfo={ billingInfo }
+                ></BillingInfoWrap>
              </div>
            </div>
-            
          </div>
        </div>
      </main>
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -1,10 +1,11 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
+import { useStore } from '@/shared/model/store';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { BillingList } from '@/entities/transaction/ui/billing-list';
-import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { BillingListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
 import { useBillingListMutation } from '@/entities/transaction/api/use-billing-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
@@ -27,6 +28,7 @@ const serviceCodes = [

 export const BillingListPage = () => {
 	const { navigate } = useNavigate();
+	const userInfo = useStore((state) => state.UserStore.UserInfo);

 	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
@@ -69,12 +71,11 @@ export const BillingListPage = () => {
    });
 	}

-	const assembleData = (content: Array<ListItem>) => {
+	const assembleData = (content: Array<BillingListItem>) => {
 		let data: any = {};
 		if(content && content.length > 0){
 			for(let i=0;i<content?.length;i++){
-				let stateDate = content[i]?.stateDate;
-				let groupDate = stateDate?.substring(0, 8);
+				let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
 				if(!!groupDate && !data.hasOwnProperty(groupDate)){
 					data[groupDate] = [];
 				}
--- a/src/pages/transaction/cash-receipt/detail-page.tsx
+++ b/src/pages/transaction/cash-receipt/detail-page.tsx
@@ -1,8 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import { PATHS } from '@/shared/constants/paths';
-import { Dialog } from '@/shared/ui/dialogs/dialog';
-import { overlay } from 'overlay-kit';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useCashReceiptDetailMutation } from '@/entities/transaction/api/use-cash-receipt-detail-mutation';
 import { IssueInfoWrap } from '@/entities/transaction/ui/info-wrap/issue-info-wrap';
@@ -29,7 +27,6 @@ export const CashReceiptDetailPage = () => {
  
  const [issueInfo, setIssueInfo] = useState<IssueInfo>();
  const [detailInfo, setDetailInfo] = useState<DetailInfo>();
-  const [showIssueInfo, setShowIssueInfo] = useState<boolean>(false);
  const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
  
  useSetHeaderTitle('현금영수증 상세');
@@ -55,10 +52,7 @@ export const CashReceiptDetailPage = () => {
  }, []);

  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
-    if(infoWrapKey === InfoWrapKeys.Issue){
-      setShowIssueInfo(!showIssueInfo);
-    }
-    else if(infoWrapKey === InfoWrapKeys.Detail){
+    if(infoWrapKey === InfoWrapKeys.Detail){
      setShowDetailInfo(!showDetailInfo);
    }
  };
@@ -73,8 +67,6 @@ export const CashReceiptDetailPage = () => {
                <IssueInfoWrap
                  transactionCategory={ TransactionCategory.CashReceipt }
                  issueInfo={ issueInfo }
-                  show={ showIssueInfo }
-                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
                ></IssueInfoWrap>
                <div className="txn-divider minus"></div>
                <DetailInfoWrap
--- a/src/pages/transaction/cash-receipt/list-page.tsx
+++ b/src/pages/transaction/cash-receipt/list-page.tsx
@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { CashReceiptList } from '@/entities/transaction/ui/cash-receipt-list';
-import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { CashReceiptListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
 import { useCashReceiptListMutation } from '@/entities/transaction/api/use-cash-receipt-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
@@ -63,17 +63,17 @@ export const CashReceiptListPage = () => {
    };
    
    cashReceiptList(listParams).then((rs) => {
+			console.log(rs)
      setListItems(assembleData(rs.content));
    });
    
  };

-	const assembleData = (content: Array<ListItem>) => {
+	const assembleData = (content: Array<CashReceiptListItem>) => {
    let data: any = {};
    if(content && content.length > 0){
      for(let i=0;i<content?.length;i++){
-        let stateDate = content[i]?.stateDate;
-        let groupDate = stateDate?.substring(0, 8);
+       let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
        if(!!groupDate && !data.hasOwnProperty(groupDate)){
          data[groupDate] = [];
        }
--- a/src/pages/transaction/escrow/list-page.tsx
+++ b/src/pages/transaction/escrow/list-page.tsx
@@ -1,10 +1,11 @@
 import moment from 'moment';
 import { useEffect, useState } from 'react';
+import { useStore } from '@/shared/model/store';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { EscrowList } from '@/entities/transaction/ui/escrow-list';
-import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
+import { EscrowListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
 import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
@@ -26,14 +27,15 @@ const serviceCodes = [

 export const EscrowListPage = () => {
 	const { navigate } = useNavigate();
+	const userInfo = useStore((state) => state.UserStore.UserInfo);

 	const [selectedServiceCode, setSelectedServiceCode] = useState<string>('all');
 	const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
-	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
 		
 	useSetHeaderTitle('에스크로');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -49,32 +51,33 @@ export const EscrowListPage = () => {
    sortBy?: string, 
    val?: string
  }) => {
-		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+		// pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
    setPageParam(pageParam);
    let listParams = {
-      mid: "nictest001m",
-  		searchType: "ORDER_NUMBER",
-  		searchKeyword: "01384234",
+      mid: 'nictest001m',
+  		searchType: 'ORDER_NUMBER',
+  		searchKeyword: '',
  		startDate: startDate,
  		endDate: endDate,
-  		deliveryStatus: "ALL",
-  		settlementStatus: "ALL",
+  		deliveryStatus: 'ALL',
+  		settlementStatus: 'ALL',
  		minAmount: 0,
  		maxAmount: 999999999,
 			pagination: pageParam
    };
+
+		console.log(listParams)
    
    escrowList(listParams).then((rs) => {
      setListItems(assembleData(rs.content));
    });
  };

-	const assembleData = (content: Array<ListItem>) => {
+	const assembleData = (content: Array<EscrowListItem>) => {
    let data: any = {};
    if(content && content.length > 0){
      for(let i=0;i<content?.length;i++){
-        let stateDate = content[i]?.stateDate;
-        let groupDate = stateDate?.substring(0, 8);
+        let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
        if(!!groupDate && !data.hasOwnProperty(groupDate)){
          data[groupDate] = [];
        }