거래내역 관련

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>