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

2025-09-18 09:45:10 +09:00
parent 22bdd45f0a
commit 746358dfe1
42 changed files with 1388 additions and 704 deletions
--- a/src/entities/transaction/ui/info-wrap/amount-info-wrap.tsx
+++ b/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>
--- a/src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx
+++ b/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>
    </>
  )
--- a/src/entities/transaction/ui/info-wrap/escrow-info-wrap.tsx
+++ b/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>
    </>
  )
--- a/src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx
+++ b/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>
    </>
  )
--- a/src/entities/transaction/ui/info-wrap/payment-info-wrap.tsx
+++ b/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>
    </>
  )
--- a/src/entities/transaction/ui/info-wrap/settlement-info-wrap.tsx
+++ b/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>
    </>
  )
--- a/src/entities/transaction/ui/info-wrap/transaction-info-wrap.tsx
+++ b/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>
    </>
  )