통합거래조회 UI api

src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx

@@ -1,5 +1,4 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 
@@ -9,11 +8,7 @@ export const DetailInfoWrap = ({
   show,
   onClickToShowInfo
 }: DetailInfoProps) => {
-  const variants = {
-    hidden: { height: 0, padding: 0, display: 'none' },
-    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
-  };
-
+  
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
       onClickToShowInfo(InfoWrapKeys.Issue);
@@ -27,17 +22,46 @@ export const DetailInfoWrap = ({
           className="section-title with-toggle"
           onClick={ () => onClickToSetShowInfo() }
         >
-          정산 정보 <DetailArrow show={ show }></DetailArrow>
+          상세 정보 <DetailArrow show={ show }></DetailArrow>
         </div>
-        <motion.ul 
-          className="kv-list"
-          initial="hidden"
-          animate={ (show)? 'visible': 'hidden' }
-          variants={ variants }
-          transition={{ duration: 0.3 }}
-        >
-        
-        </motion.ul>
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">취소일자</span>
+            <span className="v">{ moment(detailInfo?.cancelDate).format('YYYY.MM.DD') }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">취소승인번호</span>
+            <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">현금영수증</span>
+            <span className="v">{ detailInfo?.receiptInfo }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">TID</span>
+            <span className="v">{ detailInfo?.tid }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">거래ID</span>
+            <span className="v">{ detailInfo?.merchantTid }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">서브몰명</span>
+            <span className="v">{ detailInfo?.subMallName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">서브몰 사업자 번호</span>
+            <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">발행경로</span>
+            <span className="v">{ detailInfo?.issueChannel }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">실패사유</span>
+            <span className="v">{ detailInfo?.failureReason }</span>
+          </li>
+        </ul>
       </div>
     </>
   )