-부가서비스 : 링크결제 - 발송내역 리스트 목업 API 연동

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

@@ -2,6 +2,7 @@ import { NumericFormat } from 'react-number-format';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps, AdditionalServiceCategory } from '../model/types';
+import { getPaymentStatusText, getProcessStatusText, getSendMethodText } from '../lib/payment-status-utils';
 import moment from 'moment';
 
 export const ListItem = ({
@@ -55,6 +56,30 @@ export const ListItem = ({
         rs = 'gray';
       }
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+      if (paymentStatus === "PAYMENT_COMPLETE") {
+        rs = 'blue';
+      }
+
+      else if (paymentStatus === "ACTIVE") {
+        rs = 'blue';
+      }
+      else if (paymentStatus === "DEPOSIT_REQUEST") {
+        rs = 'blue';
+      }
+      else if (paymentStatus === "PAYMENT_FAIL") {
+        rs = 'blue';
+      }
+      else if (paymentStatus === "INACTIVE") {
+        rs = 'gray';
+      }
+    } else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
+      if (processStatus === "SEND_REQUEST") {
+        rs = 'blue'
+      } else {
+        rs = 'gray'
+      }
+    }
     return rs;
 
   };
@@ -83,7 +108,7 @@ export const ListItem = ({
       });
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
-      navigate(PATHS.additionalService.linkPayment.detail, {
+      navigate(PATHS.additionalService.linkPayment.pendingDetail, {
         state: {
           additionalServiceCategory: additionalServiceCategory,
           mid: mid,
@@ -126,20 +151,16 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       str = `${accountNo}`
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping ||
+       additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending
+    ) {
       if (sendMethod === "SMS") {
-        str = `${"buyerName"}(${"휴대폰 번호 뒷자리"})`
+        str = `${"buyerName"}(${"휴대폰 번호"})`
       } else {
         str = `${"buyerName"}(${"이메일"})`
       }
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
-      if (sendMethod === "SMS") {
-        str = `${"추후 buyerName 추가 필요"}(${"휴대폰 번호 뒷자리"})`
-      } else {
-        str = `${"추후 buyerName 추가 필요"}(${"이메일"})`
-      }
-    }
+
     return str;
   };
 
@@ -164,35 +185,32 @@ export const ListItem = ({
       );
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
-
       if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
         rs.push(
           <div className="transaction-details">
-            <span>{paymentStatus}</span>
+            <span>{getPaymentStatusText(paymentStatus)}</span>
             <span className="separator">|</span>
-            <span>{sendMethod}</span>
+            <span>{getSendMethodText(sendMethod)}</span>
           </div>
         )
       } else {
         rs.push(
           <div className="transaction-details">
-            <span>{paymentStatus}</span>
+            <span>{getPaymentStatusText(paymentStatus)}</span>
             <span className="separator">|</span>
-            <span>{sendMethod}</span>
+            <span>{getSendMethodText(sendMethod)}</span>
             <span className="separator">|</span>
             <span>{"결제수단 추가 필요"}</span>
           </div>
         );
-
       }
-
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
       rs.push(
         <div className="transaction-details">
-          <span>{processStatus}</span>
+          <span>{getProcessStatusText(processStatus)}</span>
           <span className="separator">|</span>
-          <span>{sendMethod}</span>
+          <span>{getSendMethodText(sendMethod)}</span>
         </div>
       );
     }
@@ -220,6 +238,20 @@ export const ListItem = ({
         </div>
       );
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping ||
+      additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending
+    ) {
+      rs.push(
+        <div className="transaction-amount">
+          <NumericFormat
+            value={amount}
+            thousandSeparator
+            displayType="text"
+            suffix={'원'}
+          ></NumericFormat>
+        </div>
+      )
+    }
     return rs;
   }