- 부가서비스 : 계좌성명조회 목업 API 연결

- 부가서비스 Types 정리

src/entities/additional-service/ui/list-item.tsx

@@ -6,10 +6,9 @@ import moment from 'moment';
 
 export const ListItem = ({
   additionalServiceCategory,
-  tid, paymentDate, paymentStatus,
+  mid, tid, paymentDate, paymentStatus,
 
-  requestId, requestDate, bank, accountNumber,
-  accountHolder, processResult,
+  requestDate, bankName, accountNo, resultStatus,
 
   transactionId, customerName, status, channel,
   amount, sendDate, transactionDate
@@ -34,46 +33,67 @@ export const ListItem = ({
 
   const getDotClass = (str?: string) => {
     let rs = '';
-    if (paymentStatus === '') {
-      rs = '';
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      if (paymentStatus === '') {
+        rs = '';
+      }
+      else if (paymentStatus === "APPROVAL") {
+        rs = 'blue';
+      }
+      else if (paymentStatus === "ALL_CANCEL") {
+        rs = 'gray';
+      }
+      else if (paymentStatus === 'AFTER_CANCEL') {
+        rs = 'gray';
+      }
+      
     }
-    else if (paymentStatus === "APPROVAL") {
-      rs = 'blue';
-    }
-    else if (paymentStatus === "ALL_CANCEL") {
-      rs = 'gray';
-    }
-    else if (paymentStatus === 'AFTER_CANCEL') {
-      rs = 'gray';
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
+      if (resultStatus === "SUCCESS") {
+        rs = 'blue';
+      }
+      else if (resultStatus === "FAIL") {
+        rs = 'gray';
+      }
     }
     return rs;
+
   };
 
   const onClickToNavigate = () => {
     if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
-      
+
       return;
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       navigate(PATHS.additionalService.accountHolderSearch.detail, {
         state: {
-          requestId: requestId
+          mid: mid,
+          tid: tid
         }
       });
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
       navigate(PATHS.additionalService.linkPayment.detail, {
         state: {
-          transactionId: transactionId
+          mid: mid,
+          tid: tid
         }
       });
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
       navigate(PATHS.additionalService.linkPayment.detail, {
         state: {
-          transactionId: transactionId
+          mid: mid,
+          tid: tid
         }
       });
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundTransfer) {
+
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.SettlementAgency) {
+
     }
     else {
       alert('additionalServiceCategory가 존재하지 않습니다.');
@@ -87,7 +107,8 @@ export const ListItem = ({
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
-      timeStr = moment(requestDate).format('HH:mm');
+      let time = requestDate?.substring(8, 14);
+      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
       timeStr = moment(transactionDate).format('HH:mm');
@@ -104,7 +125,7 @@ export const ListItem = ({
       str = `${tid}(${amount})`;
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
-      str = `${accountHolder}(${accountNumber})`
+      str = `${accountNo}`
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
       str = `${customerName}(${transactionId})`
@@ -131,9 +152,7 @@ export const ListItem = ({
         <div className="transaction-details">
           <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{bank}</span>
-          <span className="separator">|</span>
-          <span>{processResult}</span>
+          <span>{bankName}</span>
         </div>
       );
     }
@@ -162,6 +181,30 @@ export const ListItem = ({
     return rs;
   };
 
+  const getAmount = () => {
+    let rs: any[] = [];
+    if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
+      rs.push(
+        <div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}>
+          {resultStatus === 'SUCCESS' ? '성공' : '실패'}
+        </div>
+      );
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+      rs.push(
+        <div className="transaction-amount">
+          <NumericFormat
+            value={amount}
+            thousandSeparator
+            displayType="text"
+            suffix={'원'}
+          ></NumericFormat>
+        </div>
+      );
+    }
+    return rs;
+  }
+
   return (
     <>
       <div
@@ -175,14 +218,7 @@ export const ListItem = ({
           <div className="transaction-title">{getTitle()}</div>
           {getDetail()}
         </div>
-        <div className="transaction-amount">
-          <NumericFormat
-            value={amount}
-            thousandSeparator
-            displayType="text"
-            suffix={'원'}
-          ></NumericFormat>
-        </div>
+        {getAmount()}
       </div>
     </>
   );