거래내역 관련

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

@@ -0,0 +1,78 @@
+import { motion } from 'framer-motion';
+import { NumericFormat } from 'react-number-format';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const PartCancelInfoWrap = ({
+  transactionCategory,
+  partCancelInfo,
+  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.PartCancel);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          부분취소 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          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>
+        </motion.ul>
+      </div>
+    </>
+  )
+};