거래내역 상세 페이지 관련

src/pages/transaction/escrow/detail-page.tsx

@@ -18,7 +18,8 @@ import {
   PaymentInfo,
   TransactionInfo,
   SettlementInfo,
-  InfoSectionKeys
+  InfoSectionKeys,
+  MerchantInfo
 } from '@/entities/transaction/model/types';
 import {
   useSetOnBack, 
@@ -28,6 +29,7 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { EscrowMailResendBottomSheet } from '@/entities/transaction/ui/escrow-mail-resend-bottom-sheet';
 import { useEscrowMailResendMutation } from '@/entities/transaction/api/use-escrow-mail-resend-mutation';
+import { MerchantInfoSection } from '@/entities/transaction/ui/section/merchant-info-section';
 
 export const EscrowDetailPage = () => {
   const { navigate } = useNavigate();
@@ -39,12 +41,16 @@ export const EscrowDetailPage = () => {
   const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
   const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
   const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [merchantInfo, setMerchantInfo] = useState<MerchantInfo>();
+
   const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
   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);
+  const [showMerchantInfo, setShowMerchantInfo] = useState<boolean>(false);
+
   const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
 
   const [orderNumber, setOrderNumber] = useState<string>();
@@ -65,11 +71,12 @@ export const EscrowDetailPage = () => {
       issueNumber: location?.state.issueNumber,
     };
     escrowDetail(escroDetailParams).then((rs: DetailResponse) => {
-      setImportantInfo(rs.importantInfo);
-      setEscrowInfo(rs.escrowInfo);
-      setPaymentInfo(rs.paymentInfo);
-      setTransactionInfo(rs.transactionInfo);
-      setSettlementInfo(rs.settlementInfo);
+      setImportantInfo(rs.importantInfo || {});
+      setEscrowInfo(rs.escrowInfo || {});
+      setPaymentInfo(rs.paymentInfo || {});
+      setTransactionInfo(rs.transactionInfo || {});
+      setSettlementInfo(rs.settlementInfo || {});
+      setMerchantInfo(rs.merchantInfo || {});
 
       setOrderNumber(rs.importantInfo?.orderNumber);
       setTid(rs.importantInfo?.tid);
@@ -112,6 +119,9 @@ export const EscrowDetailPage = () => {
     else if(infoSectionKey === InfoSectionKeys.Settlement){
       setShowSettlementInfo(!showSettlementInfo);
     }
+    else if(infoSectionKey === InfoSectionKeys.Merchant){
+      setShowMerchantInfo(!showMerchantInfo);
+    }
   };
 
   return (
@@ -127,8 +137,7 @@ export const EscrowDetailPage = () => {
                 ></ImportantInfoSection>
                 <div className="txn-divider minus"></div>
                 <EscrowInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
-                  importantInfo={ importantInfo }
+                  escrowInfo={ escrowInfo }
                   isOpen={ showEscroInfo }
                   onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
                 ></EscrowInfoSection>
@@ -153,6 +162,11 @@ export const EscrowDetailPage = () => {
                   isOpen={ showSettlementInfo }
                   onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
                 ></SettlementInfoSection>
+                <MerchantInfoSection
+                  merchantInfo={ merchantInfo }
+                  isOpen={ showMerchantInfo }
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></MerchantInfoSection>
                 <div className="txn-divider"></div>
               </div>
             </div>