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

src/entities/transaction/ui/detail-arrow.tsx

@@ -1,6 +1,9 @@
 import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { AltMsgKeys, DetailArrowProps } from '../model/types';
+import { 
+  AltMsgKeys,
+  DetailArrowProps 
+} from '@/entities/common/model/types';
 
 export const DetailArrow = ({ show }: DetailArrowProps) => {
   const [altMsg, setAltMsg] = useState<AltMsgKeys>(AltMsgKeys.Fold);

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

@@ -1,9 +1,10 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
 import { DetailArrow } from '../detail-arrow';
 import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
 
 export const AmountInfoWrap = ({
   transactionCategory, 
@@ -96,12 +97,7 @@ export const AmountInfoWrap = ({
     }
     return rs;
   }
-  
-  const variants = {
-    hidden: { height: 0, padding: 0, margin: 0, display: 'none' },
-    visible: { height: 'auto', padding: '16px', margin: '10px 0', display: 'block' },
-  };
-
+    
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
       onClickToShowInfo(InfoWrapKeys.Amount);
@@ -138,19 +134,16 @@ export const AmountInfoWrap = ({
             금액상세 <DetailArrow show={ show }></DetailArrow>
           </button>
         </div>
-      
-        <motion.div 
-          className="amount-expand"
-          initial="hidden"
-          animate={ (show)? 'visible': 'hidden' }
-          variants={ variants }
-          transition={{ duration: 0.3 }}
-        >
-          <ul className="amount-list">
-            { subLi() }
-          </ul>
-        </motion.div>
-        
+
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <div className="amount-expand">
+            <ul className="amount-list">
+              { subLi() }
+            </ul>
+          </div>
+        }
+        </SlideDown>
         <div className="txn-mid">
           <span className="value">{ amountInfo?.mid }</span>
         </div>

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

@@ -1,6 +1,8 @@
 import moment from 'moment';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
 
 export const DetailInfoWrap = ({
   transactionCategory,
@@ -24,44 +26,48 @@ export const DetailInfoWrap = ({
         >
           상세 정보 <DetailArrow show={ show }></DetailArrow>
         </div>
-        <ul className="kv-list">
-          <li className="kv-row">
-            <span className="k">취소일자</span>
-            <span className="v">{ moment(detailInfo?.cancelDate).format('YYYY.MM.DD') }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">취소승인번호</span>
-            <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">현금영수증</span>
-            <span className="v">{ detailInfo?.receiptInfo }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">TID</span>
-            <span className="v">{ detailInfo?.tid }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">거래ID</span>
-            <span className="v">{ detailInfo?.merchantTid }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">서브몰명</span>
-            <span className="v">{ detailInfo?.subMallName }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">서브몰 사업자 번호</span>
-            <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">발행경로</span>
-            <span className="v">{ detailInfo?.issueChannel }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">실패사유</span>
-            <span className="v">{ detailInfo?.failureReason }</span>
-          </li>
-        </ul>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">취소일자</span>
+              <span className="v">{ moment(detailInfo?.cancelDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">취소승인번호</span>
+              <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">현금영수증</span>
+              <span className="v">{ detailInfo?.receiptInfo }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">TID</span>
+              <span className="v">{ detailInfo?.tid }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">거래ID</span>
+              <span className="v">{ detailInfo?.merchantTid }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">서브몰명</span>
+              <span className="v">{ detailInfo?.subMallName }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">서브몰 사업자 번호</span>
+              <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">발행경로</span>
+              <span className="v">{ detailInfo?.issueChannel }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">실패사유</span>
+              <span className="v">{ detailInfo?.failureReason }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown>
       </div>
     </>
   )

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

@@ -1,7 +1,8 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
 
 export const EscrowInfoWrap = ({
   transactionCategory,
@@ -9,11 +10,7 @@ export const EscrowInfoWrap = ({
   show,
   onClickToShowInfo
 }: DetailInfoProps) => {
-  const variants = {
-    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', display: 'block' },
-  };
-
+  
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
       onClickToShowInfo(InfoWrapKeys.Escrow);
@@ -29,54 +26,52 @@ export const EscrowInfoWrap = ({
         >
           정산 정보 <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">{ escrowInfo?.deliveryStatus }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">배송등록</span>
-            <span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">배송완료</span>
-            <span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">구매확인</span>
-            <span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">구매거절</span>
-            <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">거절사유</span>
-            <span className="v">{ escrowInfo?.rejectReason }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">에스크로인증번호</span>
-            <span className="v">{ escrowInfo?.escrowCertNumber }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">택배사</span>
-            <span className="v">{ escrowInfo?.deliveryCompany }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">운송장번호</span>
-            <span className="v">{ escrowInfo?.trackingNumber }</span>
-          </li>
-          <li className="kv-row">
-            <span className="k">배송주소</span>
-            <span className="v">{ escrowInfo?.deliveryAddress }</span>
-          </li>
-        </motion.ul>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">배송상태</span>
+              <span className="v">{ escrowInfo?.deliveryStatus }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">배송등록</span>
+              <span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">배송완료</span>
+              <span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">구매확인</span>
+              <span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">구매거절</span>
+              <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">거절사유</span>
+              <span className="v">{ escrowInfo?.rejectReason }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">에스크로인증번호</span>
+              <span className="v">{ escrowInfo?.escrowCertNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">택배사</span>
+              <span className="v">{ escrowInfo?.deliveryCompany }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">운송장번호</span>
+              <span className="v">{ escrowInfo?.trackingNumber }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">배송주소</span>
+              <span className="v">{ escrowInfo?.deliveryAddress }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown>
       </div>
     </>
   )

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>
     </>
   )

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

@@ -3,6 +3,8 @@ import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
 import { NumericFormat } from 'react-number-format';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
 
 export const PaymentInfoWrap = ({
   transactionCategory,
@@ -114,11 +116,6 @@ export const PaymentInfoWrap = ({
     return rs;
   };
 
-  const variants = {
-    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', display: 'block' },
-  };
-
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
       onClickToShowInfo(InfoWrapKeys.Payment);
@@ -134,36 +131,34 @@ export const PaymentInfoWrap = ({
         >
           결제 정보 <DetailArrow show={ show }></DetailArrow>
         </div>
-        <motion.ul 
-          className="kv-list"
-          initial="hidden"
-          animate={ (show)? 'visible': 'hidden' }
-          variants={ variants }
-          transition={{ duration: 0.3 }}
-        >
-          { (transactionCategory === TransactionCategory.AllTransaction) && 
-            subLi()
-          }
-          { (transactionCategory === TransactionCategory.Escrow) && 
-            <>
-              <li className="kv-row">
-                <span className="k">승인 금액</span>
-                <span className="v">
-                  <NumericFormat
-                    value={ paymentInfo?.paymentAmount } 
-                    thousandSeparator
-                    displayType="text"
-                    suffix='원'
-                  ></NumericFormat>
-                </span>
-              </li>
-              <li className="kv-row">
-                <span className="k">승인 번호</span>
-                <span className="v">{ paymentInfo?.approvalNumber }</span>
-              </li>
-            </>
-          }
-        </motion.ul>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <ul className="kv-list">
+            { (transactionCategory === TransactionCategory.AllTransaction) && 
+              subLi()
+            }
+            { (transactionCategory === TransactionCategory.Escrow) && 
+              <>
+                <li className="kv-row">
+                  <span className="k">승인 금액</span>
+                  <span className="v">
+                    <NumericFormat
+                      value={ paymentInfo?.paymentAmount } 
+                      thousandSeparator
+                      displayType="text"
+                      suffix='원'
+                    ></NumericFormat>
+                  </span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">승인 번호</span>
+                  <span className="v">{ paymentInfo?.approvalNumber }</span>
+                </li>
+              </>
+            }
+          </ul>
+        }
+        </SlideDown>
       </div>
     </>
   )

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

@@ -1,8 +1,9 @@
 import moment from 'moment';
 import { NumericFormat } from 'react-number-format';
-import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
 
 export const SettlementInfoWrap = ({
   transactionCategory,
@@ -90,11 +91,6 @@ export const SettlementInfoWrap = ({
     return rs;
   };
 
-  const variants = {
-    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', display: 'block' },
-  };
-
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
       onClickToShowInfo(InfoWrapKeys.Settlement);
@@ -110,15 +106,13 @@ export const SettlementInfoWrap = ({
         >
           정산 정보 <DetailArrow show={ show }></DetailArrow>
         </div>
-        <motion.ul 
-          className="kv-list"
-          initial="hidden"
-          animate={ (show)? 'visible': 'hidden' }
-          variants={ variants }
-          transition={{ duration: 0.3 }}
-        >
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&
+          <ul className="kv-list">
           { subLi() }
-        </motion.ul>
+          </ul>
+        }
+        </SlideDown>
       </div>
     </>
   )

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

@@ -1,8 +1,9 @@
 import moment from 'moment';
-import { motion } from 'framer-motion';
 import { DetailArrow } from '../detail-arrow';
 import { InfoWrapKeys, DetailInfoProps, TransactionCategory } from '../../model/types';
 import { NumericFormat } from 'react-number-format';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
 
 export const TransactionInfoWrap = ({
   transactionCategory,
@@ -93,12 +94,6 @@ export const TransactionInfoWrap = ({
     return rs;
   };
 
-
-  const variants = {
-    hidden: { height: 0, display: 'none' },
-    visible: { height: 'auto', display: 'block' },
-  };
-
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
       onClickToShowInfo(InfoWrapKeys.Transaction);
@@ -110,17 +105,13 @@ export const TransactionInfoWrap = ({
       <div className="txn-section" onClick={ () => onClickToSetShowInfo() }>
         <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 }}
-        >
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!show &&  
+          <ul className="kv-list">
           { (transactionCategory === TransactionCategory.AllTransaction) && 
             subLi()
           }
@@ -136,8 +127,9 @@ export const TransactionInfoWrap = ({
               </li>
             </>
           }
-          
-        </motion.ul>
+          </ul>
+        }
+        </SlideDown>
       </div>
     </>
   )