거래내역 관련

2025-09-10 09:38:20 +09:00
parent 6c778d9d40
commit 73d3f7008f
45 changed files with 1101 additions and 1110 deletions
--- a/src/pages/transaction/billing/detail-page.tsx
+++ b/src/pages/transaction/billing/detail-page.tsx
@@ -1,28 +1,28 @@
 import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+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 { DetailAmountInfo } from '@/entities/transaction/ui/detail-amount-info';
-import { DetailImportantInfo } from '@/entities/transaction/ui/detail-important-info';
-import { DetailPaymentInfo } from '@/entities/transaction/ui/detail-payment-info';
-import { DetailTransactionInfo } from '@/entities/transaction/ui/detail-transaction-info';
-import { DetailSettlementInfo } from '@/entities/transaction/ui/detail-settlement-info';
-import { DetailPartCancelInfo } from '@/entities/transaction/ui/detail-part-cancel-info';
+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 { HeaderType } from '@/entities/common/model/types';
 import { 
-  PageType,
+  TransactionCategory,
  BillingDetailParams,
  DetailResponse,
-  DetailAmountInfoProps,
-  DetailImportantInfoProps,
-  DetailPaymentInfoProps,
-  DetailTransactionInfoProps,
-  DetailSettlementInfoProps,
-  DetailPartCancelInfoProps,
-  DetailInfoKeys
+  AmountInfo,
+  ImportantInfo,
+  PaymentInfo,
+  TransactionInfo,
+  SettlementInfo,
+  PartCancelInfo,
+  InfoWrapKeys
 } from '@/entities/transaction/model/types';
 import {
  useSetOnBack, 
@@ -33,14 +33,14 @@ import {

 export const BillingDetailPage = () => {
  const { navigate } = useNavigate();
-  const { tid } = useParams();
+  const location = useLocation();
  
-  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
-  const [importantInfo, setImportantInfo] = useState<DetailImportantInfoProps>();
-  const [paymentInfo, setPaymentInfo] = useState<DetailPaymentInfoProps>();
-  const [transactionInfo, setTransactionInfo] = useState<DetailTransactionInfoProps>();
-  const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
-  const [partCancelInfo, setPartCancelInfo] = useState<DetailPartCancelInfoProps>();
+  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);
@@ -58,8 +58,7 @@ export const BillingDetailPage = () => {
    
  const callDetail = () => {
    let billingDetailParams: BillingDetailParams = {
-      svcCd: 'st',
-      tid: tid
+      billKey: location?.state.billKey
    };
    billingDetail(billingDetailParams).then((rs: DetailResponse) => {
      setAmountInfo(rs.amountInfo);
@@ -74,53 +73,20 @@ export const BillingDetailPage = () => {
    callDetail();
  }, []);

-  const onClickToNavigate = (path: string) => {
-    let timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      navigate(PATHS.transaction.allTransaction.cancel, {
-        state: {
-          tid: tid
-        }
-      });
-    }, 10)
-  };
-
-
-  const onClickToCancel = () => {
-    let msg = '거래를 취소하시겠습니까?';
-    
-    overlay.open(({ 
-      isOpen,
-      close,
-      unmount
-    }) => {
-      return (
-        <Dialog
-          afterLeave={ unmount }
-          open={ isOpen }
-          onClose={ close }
-          onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
-          message={ msg }
-          buttonLabel={['취소', '확인']}
-        />
-      );
-    });
-  };
-
-  const onClickToShowInfo = (info: DetailInfoKeys) => {
-    if(info === DetailInfoKeys.Amount){
+  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
+    if(infoWrapKey === InfoWrapKeys.Amount){
      setShowAmount(!showAmount);
    }
-    else if(info === DetailInfoKeys.Payment){
+    else if(infoWrapKey === InfoWrapKeys.Payment){
      setShowPayment(!showPayment);
    }
-    else if(info === DetailInfoKeys.Transaction){
+    else if(infoWrapKey === InfoWrapKeys.Transaction){
      setShowTransaction(!showTransaction);
    }
-    else if(info === DetailInfoKeys.Settlement){
+    else if(infoWrapKey === InfoWrapKeys.Settlement){
      setShowSettlement(!showSettlement);
    }
-    else if(info === DetailInfoKeys.PartCancel){
+    else if(infoWrapKey === InfoWrapKeys.PartCancel){
      setShowPartCancel(!showPartCancel);
    }
  };
@@ -132,54 +98,48 @@ export const BillingDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
-                <DetailAmountInfo
-                  pageType={ PageType.Billing }
+                <AmountInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  amountInfo={ amountInfo }
                  show={ showAmount }
-                  tid={ tid }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailAmountInfo>
+                ></AmountInfoWrap>
                <div className="txn-divider minus"></div>
-                <DetailImportantInfo
-                  pageType={ PageType.Billing }
+                <ImportantInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  importantInfo={ importantInfo }
-                ></DetailImportantInfo>
+                ></ImportantInfoWrap>
                <div className="txn-divider minus"></div>
-                <DetailPaymentInfo
-                  pageType={ PageType.Billing }
+                <PaymentInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  paymentInfo={ paymentInfo }
                  show={ showPayment }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPaymentInfo>
+                ></PaymentInfoWrap>
                <div className="txn-divider"></div>
-                <DetailTransactionInfo
-                  pageType={ PageType.Billing }
+                <TransactionInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  transactionInfo={ transactionInfo }
                  show={ showTransaction }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailTransactionInfo>
+                ></TransactionInfoWrap>
                <div className="txn-divider"></div>
-                <DetailSettlementInfo
-                  pageType={ PageType.Billing }
+                <SettlementInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  settlementInfo={ settlementInfo }
                  show={ showSettlement }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailSettlementInfo>
+                ></SettlementInfoWrap>
                <div className="txn-divider"></div>
-                <DetailPartCancelInfo
-                  pageType={ PageType.Billing }
+                <PartCancelInfoWrap
+                  transactionCategory={ TransactionCategory.Billing }
                  partCancelInfo={ partCancelInfo }
                  show={ showPartCancel }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPartCancelInfo>
+                ></PartCancelInfoWrap>
              </div>
            </div>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToCancel() }
-              >거래 취소</button>
-            </div>
+            
          </div>
        </div>
      </main>
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -4,7 +4,7 @@ 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, PageType, SortByKeys } from '@/entities/transaction/model/types';
+import { ListItem, 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';
@@ -33,8 +33,8 @@ export const BillingListPage = () => {
 	const [listItems, setListItems] = useState({});
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-	const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
-	const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
+	const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
+	const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
 		
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -50,30 +50,21 @@ export const BillingListPage = () => {
    sortBy?: string, 
    val?: string
  }) => {
-    let listSummaryParams = {
-      moid: 'string',
-      tid: 'string',
-      fromDate: fromDate,
-      toDate: toDate,
-      stateCode: '0',
-      serviceCode: (option?.val)? option.val: selectedServiceCode,
-      minAmount: 0,
-      maxAmount: 0,
-      dateCl: 'TRANS',
-      goodsName: 'string',
-      cardCode: 'st',
-      bankCode: 'str',
-      searchCl: 'CARD_NO',
-      searchValue: 'string',
-    };
-    pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
+		pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
    setPageParam(pageParam);
+    let listParams = {
+      mid: 'nictest001m',
+      searchType: 'ALL',
+			searchKeyword: 'P14633723',
+      startDate: startDate,
+      endDate: endDate,
+      requestStatus: 'ALL',
+      processResult: 'ALL',
+      paymentMethod: 'ALL',
+			pagination: pageParam
+    };    
    
-    let listParam = {
-      ...listSummaryParams,
-      ...{page: pageParam}
-    };
-    billingList(listParam).then((rs) => {
+    billingList(listParams).then((rs) => {
      setListItems(assembleData(rs.content));
    });
 	}
@@ -131,7 +122,7 @@ export const BillingListPage = () => {
 									<input 
 										type="text" 
 										className="credit-period" 
-										value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
+										value={ moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD') } 
 										readOnly={ true } 
 									/>
 									<button className="filter-btn">
@@ -173,7 +164,7 @@ export const BillingListPage = () => {
 						</div>
 						<BillingList 
 							listItems={ listItems }
-							pageType={ PageType.Billing }
+							transactionCategory={ TransactionCategory.Billing }
 						></BillingList> 
 					</div>
 				</div>