정산조회 - 정산내역 리스트 및 상세

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

@@ -1,92 +1,69 @@
 import { NumericFormat } from 'react-number-format';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { ListItemProps } from '../model/types';
+import { ListItemProps, SettlementPeriodType } from '../model/types';
+import moment from 'moment';
 
 export const ListItem = ({
-  tid,
+  periodType,
+  settlementId,
+  settlementDate,
+  merchantName,
   mid,
-  stateDate,
-  stateCode,
-  stateName,
-  installmentMonth,
-  serviceCode,
-  serviceName,
-  serviceDetailName,
-  goodsAmount
+  settlementAmount,
+  approvalNumber,
+  approvalDate,
+  transactionAmount
 }: ListItemProps) => {
   const { navigate } = useNavigate();
-  const getItemClass = () => {
-    let rs = '';
-    if(stateCode === '0'){
-      rs = '';
-    }
-    else if(stateCode === '1'){
-      rs = 'approved';
-    }
-    else if(stateCode === '2'){
-      rs = 'refund';
-    }
-    return rs;
-  };
-
-  const getDotClass = (str?: string) => {
-    let rs = '';
-    if(stateCode === '0'){
-      rs = '';
-    }
-    else if(stateCode === '1'){
-      rs = 'blue';
-    }
-    else if(stateCode === '2'){
-      rs = 'gray';
-    }
-    return rs;
-  };
-
   const onClickToNavigate = () => {
-    navigate(PATHS.settlement.detail + tid, {
+    let detailId;
+    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
+      detailId = settlementId;
+    }
+    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
+      detailId = approvalNumber;
+    }
+
+    navigate(PATHS.settlement.detail + detailId, {
       state: {
-        tid: tid
+        periodType: periodType,
+        settlementId: settlementId,
+        approvalNumber: approvalNumber,
       }
     });
   };
   
-  const getTime = () => {
-    let time = stateDate?.substring(8, 12);
-    let timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
-    return timeStr;
-  };
-
   return (
     <>
       <div 
-        className={ `transaction-item ${getItemClass()}` }
+        className={ `transaction-item approved` }
         onClick={ () => onClickToNavigate() }
       >
         <div className="transaction-status">
-          <div className={ `status-dot ${getDotClass()}`}></div>
+          <div className={ `status-dot blue`}></div>
         </div>
         <div className="transaction-content">
-          <div className="transaction-title">{ `${serviceName}(${serviceDetailName})` }</div>
-          <div className="transaction-details">
-            <span>{ stateName }</span>
-            <span className="separator">|</span>
-            <span>{ getTime() }</span>
-            <span className="separator">|</span>
-            <span>{ mid }</span>
-            { (!!installmentMonth && parseInt(installmentMonth) > 1) && 
-              <>
+          { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
+            <div className="transaction-title">{ `${merchantName}(${mid})` }</div>
+          }
+          { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
+            <>
+              <div className="transaction-title">{ `${approvalNumber}(${mid})` }</div>
+              <div className="transaction-details">
+                <span>{ (!!settlementDate)? '정산': (!!approvalDate)? '승인' : '' }</span>
                 <span className="separator">|</span>
-                <span>{ installmentMonth }개월 할부</span>
-              </>
-            }
-          </div>
+                <span>정산 { moment(settlementDate).format('MM.DD') }</span>
+                <span className="separator">|</span>
+                <span>승인 { moment(approvalDate).format('MM.DD') }</span>
+              </div>
+            </>
+          }
         </div>
         <div className="transaction-amount">
           { 
             <NumericFormat
-              value={ goodsAmount } 
+              value={ settlementAmount || transactionAmount } 
               thousandSeparator
               displayType="text"
               suffix={ '원' }