거래내역 관련

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

@@ -0,0 +1,44 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const DetailInfoWrap = ({
+  transactionCategory,
+  detailInfo,
+  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);
+    }
+  };
+  
+  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 }}
+        >
+        
+        </motion.ul>
+      </div>
+    </>
+  )
+};