거래 상세 amountInfo

src/entities/transaction/ui/section/amount-info-section.tsx

@@ -15,37 +15,39 @@ export const AmountInfoSection = ({
   onClickToOpenInfo
 }: InfoSectionProps) => {
   const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
+  let newAmountInfo: Record<string, any> | undefined = amountInfo;
 
+  console.log('amountInfo --> ', amountInfo);
   const subItems: Record<string, Record<string, string>> = {
     mid: {name: 'MID', type: 'string'}, 
+    transactionRequestAmount: {name: '거래요청금액', type: 'number'},
     transactionAmount: {name: '거래금액', type: 'number'},
-    escrowFee: {name: '에스크로수수료', type: 'number'},
-
     pointAmount: {name: '포인트금액', type: 'number'},
     couponAmount: {name: '쿠폰금액', type: 'number'},
-    partServiceCode: {name: '간편결제코드', type: 'string' },
+    escrowFee: {name: '에스크로수수료', type: 'number'},
+    kakaoMoneyAmount: {name: '카카오머니', type: 'number'},
+    kakaoPointAmount: {name: '카카오포인트', type: 'number'},
     kakaoDiscountAmount: {name: '카카오 즉시할인', type: 'number'},
+    naverPointAmount: {name: '네이버 포인트', type: 'number'},
+    tossMoneyAmount: {name: '토스머니', type: 'number'},
     tossDiscountAmount: {name: '토스할인', type: 'number'},
-    multiPointAmount: {name: '멀티포인트금액', type: 'number'},
-    multiCouponAmount: {name: '멀티쿠폰금액', type: 'number'},
-    receiptAmount: {name: '영수증금액', type: 'number'},
-    cupDepositAmount: {name: '컵보증금', type: 'number'},
+    paycoPointAmount: {name: '페이코포인트', type: 'number'},
+    paycoCouponAmount: {name: '페이코쿠폰', type: 'number'},
   };
-  
-  const showTop = ['01', '02', '03', '26'];
+ 
   const openSubItems: Record<string, Array<string>> = {
     // 신용카드
-    '01': ['mid', 'cardAmount', 'pointAmount', 
-      'couponAmount', 'escrowFee', 'kakaoMoney',
-      'kakaoPoint', 'kakaoInstantDiscount', 'naverPoint',
-      'tossMoney', 'tossDiscount', 'paycoPoint', 'paycoCoupon'
+    '01': ['transactionAmount', 'pointAmount', 'couponAmount', 
+      'escrowFee', 'kakaoMoneyAmount', 'kakaoPointAmount', 
+      'kakaoDiscountAmount', 'naverPointAmount', 'tossMoneyAmount', 
+      'tossDiscountAmount', 'paycoPointAmount', 'paycoCouponAmount'
     ],
     // 계좌이체
-    '02': ['mid', 'transactionAmount', 'escrowFee'],
+    '02': ['mid', 'transactionRequestAmount', 'transactionAmount', 'escrowFee'],
     // 가상계좌
-    '03': ['mid', 'transactionAmount'],
+    '03': ['mid', 'transactionRequestAmount', 'transactionAmount'],
     // 휴대폰
-    '05': ['mid', 'transactionAmount'],
+    '05': ['mid', 'transactionRequestAmount', 'transactionAmount'],
     // 문화상품권
     '14': ['mid', 'transactionAmount'],
     // SSG머니
@@ -58,32 +60,98 @@ export const AmountInfoSection = ({
     '31': ['mid', 'transactionAmount'],
   };
   
+  
   const checkValue = (val: any) => {
     return (!!val || val === 0);
   };
-  let newAmountInfo: Record<string, any> | undefined = amountInfo;
+
+  const getAmountValue = (k?: string) => {
+    let value = 0;
+    let rs = [];
+    if(!!k){
+      let value = 0;
+      if(k === 'kakaoMoneyAmount'
+        && newAmountInfo?.partServiceCode === 'E016'
+      ){
+        value = newAmountInfo['multiPointAmount'] || 0;
+      }
+      else if(k === 'kakaoPointAmount'
+        && newAmountInfo?.partServiceCode === 'E016'
+      ){
+        value = newAmountInfo['multiCouponAmount'] || 0;
+      }
+      else if(k === 'naverPointAmount'
+        && newAmountInfo?.partServiceCode === 'E020'
+      ){
+        value = newAmountInfo['multiPointAmount'] || 0;
+      }
+      else if(k === 'tossMoneyAmount'
+        && newAmountInfo?.partServiceCode === 'E025'
+      ){
+        value = newAmountInfo['multiPointAmount'] || 0;
+      }
+      else if(k === 'paycoPointAmount'
+        && newAmountInfo?.partServiceCode === 'E015'
+      ){
+        value = newAmountInfo['multiPointAmount'] || 0;
+      }
+      else if(k === 'paycoCouponAmount'
+        && newAmountInfo?.partServiceCode === 'E015'
+      ){
+        value = newAmountInfo['multiCouponAmount'] || 0;
+      }
+      else{
+        if(newAmountInfo){
+          value = newAmountInfo[k] || 0;
+        }
+      }
+      rs.push(
+        <NumericFormat
+          value={ value } 
+          thousandSeparator
+          displayType="text"
+        ></NumericFormat>
+      )
+    }
+    return rs; 
+  };
+  
   const subLi = () => {
     let rs = [];
     if(!!newAmountInfo && !!serviceCode && !!openSubItems[serviceCode]){
       for(let i=0;i<openSubItems[serviceCode].length;i++){
         let k = openSubItems[serviceCode][i];
         if(!!k){
+          let name = subItems[k]?.name;
+          
+          if(serviceCode === '01'){
+            if(k === 'transactionAmount'){
+              name = '신용카드금액'
+            }
+            if(k === 'transactionRequestAmount'){
+              name = '승인요청금액';
+            }
+          }
+          
           rs.push(
             <li 
               key={`key-amount-item-${i}`}
               className="amount-item"
             >
-              <span className="label">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
+              <span className="label">·&nbsp;&nbsp;{ name }</span>
               <span className="value">
               { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'string') &&
                 newAmountInfo[k] 
               }
-              { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'number') &&
+              { (subItems[k]?.type === 'number') && 
+                getAmountValue(k)
+                /*
                 <NumericFormat
-                  value={ newAmountInfo[k] } 
+                  value={ newAmountInfo[k] || 0 } 
                   thousandSeparator
                   displayType="text"
                 ></NumericFormat>
+                */
               }
               { (checkValue(newAmountInfo[k]) && subItems[k]?.type === 'date') &&
                 moment(newAmountInfo[k]).format('YYYY.MM.DD')
@@ -118,11 +186,23 @@ export const AmountInfoSection = ({
       <div className="txn-num-group">
         <div className="txn-amount">
           <div className="value">
-            <NumericFormat
-              value={ amountInfo?.transactionAmount } 
-              thousandSeparator
-              displayType="text"
-            ></NumericFormat>
+            { 
+              (serviceCode === '01' || serviceCode === '02' || serviceCode === '03' || serviceCode === '26') &&
+              <NumericFormat
+                value={ amountInfo?.transactionRequestAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat>
+            }
+            {
+              (serviceCode === '05' || serviceCode === '14' || serviceCode === '21' 
+                || serviceCode === '24' || serviceCode === '31') &&
+              <NumericFormat
+                value={ amountInfo?.transactionAmount } 
+                thousandSeparator
+                displayType="text"
+              ></NumericFormat> 
+            }
             <span className="unit">원</span>
           </div>
           <button