거래내역 관련

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/escrow/detail-page.tsx
+++ b/src/pages/transaction/escrow/detail-page.tsx
@@ -0,0 +1,140 @@
+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 { useEscrowDetailMutation } from '@/entities/transaction/api/use-escrow-detail-mutation';
+import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
+import { EscrowInfoWrap } from '@/entities/transaction/ui/info-wrap/escrow-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 { HeaderType } from '@/entities/common/model/types';
+import { 
+  TransactionCategory,
+  EscrowDetailParams,
+  DetailResponse,
+  ImportantInfo,
+  EscrowInfo,
+  PaymentInfo,
+  TransactionInfo,
+  SettlementInfo,
+  InfoWrapKeys
+} from '@/entities/transaction/model/types';
+import {
+  useSetOnBack, 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const EscrowDetailPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+  
+  const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
+  const [escrowInfo, setEscrowInfo] = useState<EscrowInfo>();
+  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
+  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
+  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [showImportantInfo, setShowImportantInfo] = useState<boolean>(false);
+  const [showEscroInfo, setShowEscroInfo] = useState<boolean>(false);
+  const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
+  const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
+  const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
+  
+
+  useSetHeaderTitle('에스크로 상세');
+  useSetHeaderType(HeaderType.RightClose);
+  useSetOnBack(() => {
+    navigate(PATHS.transaction.escrow.list);
+  });
+  useSetFooterMode(false);
+
+  const { mutateAsync: escroDetail } = useEscrowDetailMutation();
+    
+  const callDetail = () => {
+    let escroDetailParams: EscrowDetailParams = {
+      issueNumber: location?.state.issueNumber,
+    };
+    escroDetail(escroDetailParams).then((rs: DetailResponse) => {
+      setImportantInfo(rs.importantInfo);
+      setEscrowInfo(rs.escrowInfo);
+      setPaymentInfo(rs.paymentInfo);
+      setTransactionInfo(rs.transactionInfo);
+      setSettlementInfo(rs.settlementInfo);
+    });
+  };
+  useEffect(() => {
+    callDetail();
+  }, []);
+  
+  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
+    if(infoWrapKey === InfoWrapKeys.Important){
+      setShowImportantInfo(!showImportantInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Escrow){
+      setShowEscroInfo(!showEscroInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Payment){
+      setShowPaymentInfo(!showPaymentInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Transaction){
+      setShowTransactionInfo(!showTransactionInfo);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Settlement){
+      setShowSettlementInfo(!showSettlementInfo);
+    }
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="option-list">
+              <div className="txn-detail">
+                <ImportantInfoWrap
+                  transactionCategory={ TransactionCategory.Escrow }
+                  importantInfo={ importantInfo }
+                  show={ showImportantInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></ImportantInfoWrap>
+                <div className="txn-divider minus"></div>
+                <EscrowInfoWrap
+                  transactionCategory={ TransactionCategory.Escrow }
+                  importantInfo={ importantInfo }
+                  show={ showEscroInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></EscrowInfoWrap>
+                <div className="txn-divider minus"></div>
+                <PaymentInfoWrap
+                  transactionCategory={ TransactionCategory.Escrow }
+                  paymentInfo={ paymentInfo }
+                  show={ showPaymentInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></PaymentInfoWrap>
+                <div className="txn-divider"></div>
+                <TransactionInfoWrap
+                  transactionCategory={ TransactionCategory.Escrow }
+                  transactionInfo={ transactionInfo }
+                  show={ showTransactionInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></TransactionInfoWrap>
+                <div className="txn-divider"></div>
+                <SettlementInfoWrap
+                  transactionCategory={ TransactionCategory.Escrow }
+                  settlementInfo={ settlementInfo }
+                  show={ showSettlementInfo }
+                  onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                ></SettlementInfoWrap>
+                <div className="txn-divider"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};