정산조회 - 정산내역 리스트 및 상세

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

@@ -1,8 +1,9 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
 
 export const PartCancelInfoWrap = ({
   transactionCategory,
@@ -19,7 +20,7 @@ export const PartCancelInfoWrap = ({
     partCancelAmount: {name: '부분취소 금액', type: 'number'},
     remainingAmount: {name: (serviceCode === '05')? '재승인 금액': '부분취소 후 잔액', type: 'number'},
   };
-  console.log(serviceCode)
+  
   const showSubItems: Record<string, Array<string>> = {
     // 신용카드
     '01': ['originalTid', 'originalAmount', 'partCancelTid', 
@@ -91,11 +92,6 @@ export const PartCancelInfoWrap = ({
     return rs;
   };
 
-  const variants = {
-    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', display: 'block' },
-  };
-
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
       onClickToShowInfo(InfoWrapKeys.PartCancel);
@@ -111,15 +107,14 @@ export const PartCancelInfoWrap = ({
         >
           부분취소 정보 <DetailArrow show={ show }></DetailArrow>
         </div>
-        <motion.ul 
-          className="kv-list"
-          initial="hidden"
-          animate={ (show)? 'visible': 'hidden' }
-          variants={ variants }
-          transition={{ duration: 0.3 }}
-        >
-        { subLi() }
-        </motion.ul>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <ul className="kv-list">
+          { subLi() }
+          </ul>
+        }
+        </SlideDown>
+       
       </div>
     </>
   )