통합거래조회 UI api

src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx

@@ -1,3 +1,4 @@
+import moment from 'moment';
 import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
 import { DetailArrow } from '../detail-arrow';
@@ -6,13 +7,93 @@ import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 export const PartCancelInfoWrap = ({
   transactionCategory,
   partCancelInfo,
+  serviceCode,
   show,
   onClickToShowInfo
 }: DetailInfoProps) => {
   
+  const subItems: Record<string, Record<string, string>> = {
+    originalTid: {name: '원거래 TID', type: 'string'},
+    originalAmount: {name: '원거래 금액', type: 'number'},
+    partCancelTid: {name: (serviceCode === '05')? '재승인 TID': '부분취소 TID', type: 'string'},
+    partCancelAmount: {name: '부분취소 금액', type: 'number'},
+    remainingAmount: {name: (serviceCode === '05')? '재승인 금액': '부분취소 후 잔액', type: 'number'},
+  };
+  console.log(serviceCode)
+  const showSubItems: Record<string, Array<string>> = {
+    // 신용카드
+    '01': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 계좌이체
+    '02': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 가상계좌
+    '03': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 휴대폰
+    '04': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 계좌간편결제
+    '26': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // SSG머니
+    '21': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // SSG은행계좌
+    '24': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 문화상품권
+    '14': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+    // 티머니페이
+    '31': ['originalTid', 'originalAmount', 'partCancelTid', 
+      'partCancelAmount', 'remainingAmount'],
+  };
+
+  const checkValue = (val: any) => {
+    return (!!val || val === 0);
+  };
+  let newPartCancelInfo: Record<string, any> | undefined = partCancelInfo;
+  const subLi = () => {
+    let rs = [];
+
+    if(!!newPartCancelInfo && !!serviceCode && !!showSubItems[serviceCode]){
+      for(let i=0;i<showSubItems[serviceCode].length;i++){
+        let k = showSubItems[serviceCode][i];
+        if(!!k){
+          rs.push(
+            <li 
+              key={`key-important-item-${i}`}
+              className="kv-row"
+            >
+              <span className="k">·&nbsp;&nbsp;{ subItems[k]?.name }</span>
+              <span className="v">
+              { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'string') &&
+                newPartCancelInfo[k] 
+              }
+              { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'number') &&
+                <NumericFormat
+                  value={ newPartCancelInfo[k] } 
+                  thousandSeparator
+                  displayType="text"
+                  suffix='원'
+                ></NumericFormat>
+              }
+              { (checkValue(newPartCancelInfo[k]) && subItems[k]?.type === 'date') &&
+                moment(newPartCancelInfo[k]).format('YYYY.MM.DD')
+              }
+              </span>
+            </li>
+          );
+        }
+      }
+    }
+    return rs;
+  };
+
   const variants = {
-    hidden: { height: 0, padding: 0, display: 'none' },
-    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+    hidden: { height: 0, display: 'none' },
+    visible: { height: 'auto', display: 'block' },
   };
 
   const onClickToSetShowInfo = () => {
@@ -37,40 +118,7 @@ export const PartCancelInfoWrap = ({
           variants={ variants }
           transition={{ duration: 0.3 }}
         >
-          <li className="kv-row">
-            <span className="k">원거래 TID</span>
-            <span className="v">{ partCancelInfo?.originalTid }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">원거래 금액</span>
-            <span className="v">
-              <NumericFormat
-                value={ partCancelInfo?.originalAmount } 
-                thousandSeparator
-                displayType="text"
-                suffix={ '원' }
-              ></NumericFormat>
-            </span>
-          </li>
-          <li className="kv-row">
-            <span className="k">부분취소 TID</span>
-            <span className="v">nictest00m01012506171629294150</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">부분취소 금액</span>
-            <span className="v">50,000원</span>
-          </li>
-          <li className="kv-row nopadding">
-            <span className="k">부분취소 후 잔액</span>
-            <span className="v">
-              <NumericFormat
-                value={ partCancelInfo?.remainingAmount } 
-                thousandSeparator
-                displayType="text"
-                suffix={ '원' }
-              ></NumericFormat>
-            </span>
-          </li>
+        { subLi() }
         </motion.ul>
       </div>
     </>