정산내역 상세 변경

2025-11-04 09:28:42 +09:00
parent c99b635950
commit cab65b19bc
10 changed files with 246 additions and 22 deletions
--- a/src/entities/settlement/ui/detail/settlement-detail.tsx
+++ b/src/entities/settlement/ui/detail/settlement-detail.tsx
@@ -0,0 +1,192 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { AmountInfoWrap } from '@/entities/settlement/ui/info-wrap/amount-info-wrap';
+import { SettlementInfoWrap } from '@/entities/settlement/ui/info-wrap/settlement-info-wrap';
+import { TransactionInfoWrap } from '@/entities/settlement/ui/info-wrap/transaction-info-wrap'
+import { 
+  AmountInfo,
+  InfoWrapKeys,
+  SettlementInfo,
+  SettlementPeriodType,
+  SettlementsHistoryDetailParams,
+  SettlementsHistoryDetailResponse,
+  SettlementsTransactionDetailParams,
+  SettlementsTransactionDetailResponse,
+  TransactionInfo
+} from '@/entities/settlement/model/types';
+import { useSettlementsHistoryDetailMutation } from '@/entities/settlement/api/use-settlements-history-detail-mutation';
+import { useSettlementsTransactionDetailMutation } from '@/entities/settlement/api/use-settlements-transaction-detail-mutation';
+import { NumericFormat } from 'react-number-format';
+import moment from 'moment';
+import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+
+export interface SettlementDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  periodType: SettlementPeriodType;
+  settlementId?: string;
+  tid?: string;
+};
+
+export const SettlementDetail = ({
+  detailOn,
+  setDetailOn,
+  periodType,
+  settlementId,
+  tid
+}: SettlementDetailProps) => {
+  const { t, i18n } = useTranslation();
+  
+  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
+  const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [settlementAmount, setSettlementAmount] = useState<number>();
+  const [settlementDate, setSettlementDate] = useState<string>();
+  const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
+  const [transactionAmount, setTransactionAmount] = useState<number>();
+  const [merchantName, setMerchantName] = useState<string>();
+
+  const [showSettlement, setShowSettlement] = useState<boolean>(false);
+  const [showTransaction, setShowTransaction] = useState<boolean>(false);
+
+  const { mutateAsync: settlementsHistoryDetail } = useSettlementsHistoryDetailMutation();
+  const { mutateAsync: settlementsTransactionDetail } = useSettlementsTransactionDetailMutation();
+    
+  const callSettlementDetail = () => {
+    if(settlementId){
+      let params: SettlementsHistoryDetailParams = {
+        settlementId: settlementId
+      };
+
+      settlementsHistoryDetail(params).then((rs: SettlementsHistoryDetailResponse) => {
+        setAmountInfo(rs.amountInfo);
+        setSettlementInfo(rs.settlementInfo);
+        setSettlementAmount(rs.settlementAmount);
+        setSettlementDate(rs.settlementDate);
+      });
+    }
+  };
+
+  const callTransactionDetail = () => {
+    if(tid){
+      let params: SettlementsTransactionDetailParams = {
+        tid: tid
+      };
+
+      settlementsTransactionDetail(params).then((rs: SettlementsTransactionDetailResponse) => {
+        setAmountInfo(rs.amountInfo);
+        setTransactionInfo(rs.transactionInfo);
+        setTransactionAmount(rs.transactionAmount);
+        setMerchantName(rs.merchantName);
+      });
+    }
+  };
+  
+  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
+    if(infoWrapKey === InfoWrapKeys.Settlement){
+      setShowSettlement(!showSettlement);
+    }
+    else if(infoWrapKey === InfoWrapKeys.Transaction){
+      setShowTransaction(!showTransaction);
+    }
+  };
+
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  useEffect(() => {
+    if(periodType === SettlementPeriodType.SETTLEMENT_DATE && settlementId){
+      callSettlementDetail();
+    }
+    else if(periodType === SettlementPeriodType.TRANSACTION_DATE && tid){
+      callTransactionDetail();
+    }
+  }, [periodType, settlementId, tid]);
+
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        <div className="full-menu-container pdw-16">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">{ t('settlement.detailTitle') }</div>
+            <div className="full-menu-actions">
+              <FullMenuClose
+                addClass="full-menu-close"
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
+            </div>
+          </div>
+          <div className="tab-pane sub active">
+            <div className="option-list">
+              <div className="txn-detail">
+                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) &&
+                  <div className="txn-num-group">
+                    <div className="txn-amount">
+                      <div className="value">
+                        {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
+                        <NumericFormat
+                          value={ settlementAmount }
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat>
+                        {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
+                      </div>
+                    </div>
+                    <div className="txn-date">{ moment(settlementDate).format('YYYY.MM.DD') }</div>
+                  </div>
+                }
+                { (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
+                  <div className="txn-num-group">
+                    <div className="txn-amount">
+                      <div className="value">
+                        {i18n.language === 'en' && <span className="unit">{t('home.currencySymbol')}</span>}
+                        <NumericFormat
+                          value={ transactionAmount }
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat>
+                        {i18n.language !== 'en' && <span className="unit">{t('home.currencyWon')}</span>}
+                      </div>
+                    </div>
+                    <div className="txn-date">{ merchantName }</div>
+                  </div>
+                }
+                <div className="txn-divider minus"></div>
+                
+                <AmountInfoWrap
+                  periodType={ periodType }
+                  amountInfo={ amountInfo }
+                  settlementAmount={ settlementAmount }
+                ></AmountInfoWrap>
+                <div className="txn-divider"></div>
+                { (periodType === SettlementPeriodType.SETTLEMENT_DATE) && 
+                  <SettlementInfoWrap
+                    settlementInfo={ settlementInfo }
+                    isOpen={ showSettlement }
+                    onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                  ></SettlementInfoWrap>
+                }
+                { (periodType === SettlementPeriodType.TRANSACTION_DATE) && 
+                  <TransactionInfoWrap
+                    transactionInfo={ transactionInfo }
+                    isOpen={ showTransaction }
+                    onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
+                  ></TransactionInfoWrap>
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+};