통합거래조회 UI api

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

@@ -1,7 +1,6 @@
-import moment from 'moment';
-import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import moment from 'moment';
 
 export const IssueInfoWrap = ({
   transactionCategory,
@@ -9,10 +8,7 @@ export const IssueInfoWrap = ({
   show,
   onClickToShowInfo
 }: DetailInfoProps) => {
-  const variants = {
-    hidden: { height: 0, padding: 0, display: 'none' },
-    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
-  };
+  
 
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
@@ -27,17 +23,42 @@ export const IssueInfoWrap = ({
           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">{ issueInfo?.approvalNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">발행번호</span>
+            <span className="v">{ issueInfo?.issueNumber }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">발행일시</span>
+            <span className="v">{ moment(issueInfo?.issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">용도</span>
+            <span className="v">{ issueInfo?.purpose }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">결제수단</span>
+            <span className="v">{ issueInfo?.paymentMethod }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">상품명</span>
+            <span className="v">{ issueInfo?.productName }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">진행상태</span>
+            <span className="v">{ issueInfo?.transmissionStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">거래구분</span>
+            <span className="v">{ issueInfo?.transactionType }</span>
+          </li>
+        </ul>
       </div>
     </>
   )