통합거래조회 UI api

src/entities/transaction/ui/list-item.tsx

@@ -2,21 +2,18 @@ import { NumericFormat } from 'react-number-format';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps, TransactionCategory } from '../model/types';
+import moment from 'moment';
 
 export const ListItem = ({
   transactionCategory,
-  tid,
-  issueNumber,
-  billKey,
-  mid,
-  stateDate,
-  stateCode,
-  stateName,
-  installmentMonth,
-  serviceCode,
-  serviceName,
-  serviceDetailName,
-  goodsAmount
+  tid, mid, stateDate, stateCode, stateName,
+  installmentMonth, serviceCode, serviceName,
+  serviceDetailName, goodsAmount,
+  id, amount, customerName, issueNumber,
+  issueStatus, paymentMethod, processResult, 
+  transactionDateTime, transactionAmount,
+  deliveryStatus, settlementStatus, 
+  cancelStatus, billKey, orderNumber
 }: ListItemProps) => {
   const { navigate } = useNavigate();
   const getItemClass = () => {
@@ -51,7 +48,8 @@ export const ListItem = ({
     if(transactionCategory === TransactionCategory.AllTransaction){
       navigate(PATHS.transaction.allTransaction.detail, {
         state: {
-          tid: tid
+          tid: tid,
+          serviceCode: serviceCode
         }
       });
     }
@@ -82,9 +80,85 @@ export const ListItem = ({
   };
   
   const getTime = () => {
-    let time = stateDate?.substring(8, 12);
-    let timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
-    return timeStr;
+    let timeStr = '';
+    if(transactionCategory === TransactionCategory.AllTransaction){
+      let time = stateDate?.substring(8, 12);
+      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
+    }
+    else{
+      timeStr = moment(transactionDateTime).format('HH:mm');
+    }
+    return timeStr
+  };
+
+  const getTitle = () => {
+    let str = '';
+    if(transactionCategory === TransactionCategory.AllTransaction){
+      str = `${serviceName}(${serviceDetailName})`;
+    }
+    else if(transactionCategory === TransactionCategory.CashReceipt){
+      str = `${customerName}(${issueNumber})`
+    }
+    else if(transactionCategory === TransactionCategory.Escrow){
+      str = `${customerName}(${issueNumber})`
+    }
+    else if(transactionCategory === TransactionCategory.Billing){
+      str = `${billKey}`
+    }
+    return str;
+  };
+
+  const getDetail = () => {
+    let rs = [];
+    if(transactionCategory === TransactionCategory.AllTransaction){
+      rs.push(
+        <>
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ stateName }</span>
+          <span className="separator">|</span>
+          <span>{ mid }</span>
+        </>
+      );
+    }
+    else if(transactionCategory === TransactionCategory.CashReceipt){
+      rs.push(
+        <>
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ issueStatus }</span>
+          <span className="separator">|</span>
+          <span>{ paymentMethod }</span>
+          <span className="separator">|</span>
+          <span>{ processResult }</span>
+        </>
+      );
+    }
+    else if(transactionCategory === TransactionCategory.Escrow){
+      rs.push(
+        <>
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ deliveryStatus }</span>
+          <span className="separator">|</span>
+          <span>{ settlementStatus }</span>
+          <span className="separator">|</span>
+          <span>{ cancelStatus }</span>
+        </>
+      );
+    }
+    else if(transactionCategory === TransactionCategory.Billing){
+      rs.push(
+        <>
+          <span>{ getTime() }</span>
+          <span className="separator">|</span>
+          <span>{ processResult }</span>
+          <span className="separator">|</span>
+          <span>{ paymentMethod }</span>
+        </>
+      );
+    }
+    return rs;
   };
 
   return (
@@ -97,13 +171,9 @@ export const ListItem = ({
           <div className={ `status-dot ${getDotClass()}`}></div>
         </div>
         <div className="transaction-content">
-          <div className="transaction-title">{ `${serviceName}(${serviceDetailName})` }</div>
+          <div className="transaction-title">{ getTitle() }</div>
           <div className="transaction-details">
-            <span>{ stateName }</span>
-            <span className="separator">|</span>
-            <span>{ getTime() }</span>
-            <span className="separator">|</span>
-            <span>{ mid }</span>
+            { getDetail() }
             { (!!installmentMonth && parseInt(installmentMonth) > 1) && 
               <>
                 <span className="separator">|</span>