거래내역 관련

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

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const TransactionInfoWrap = ({
+  transactionCategory,
+  transactionInfo,
+  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.Transaction);
+    }
+  };
+
+  return (
+    <>
+      <div className="txn-section" onClick={ () => onClickToSetShowInfo() }>
+        <div 
+          className="section-title with-toggle"
+          
+        >
+          거래 정보 <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">가맹점명</span>
+            <span className="v">NICE PAY</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">사업자번호</span>
+            <span className="v">123-45-67890</span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  )
+};