정산내역 상세 변경

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/model/types.ts
+++ b/src/entities/settlement/model/types.ts
@@ -186,9 +186,17 @@ export interface ListDateGroupProps {
  date?: string;
  periodType: SettlementPeriodType;
  items?: Array<SettlementsHistoryContent & SettlementsTransactionListContent>
+  setDetailData?: (detailData: DetailData) => void;
+};
+
+export interface DetailData {
+  settlementId?: string;
+  tid?: string;
+  detailOn: boolean;
 };
 export interface ListItemProps extends SettlementsHistoryContent, SettlementsTransactionListContent {
  periodType: SettlementPeriodType;
+  setDetailData?: (detailData: DetailData) => void;
 };

 export interface AmountInfoWrapProps {
--- a/src/entities/settlement/ui/detail/list-detail.tsx
+++ b/src/entities/settlement/ui/detail/list-detail.tsx
--- 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>
+    </>
+  );
+};
--- a/src/entities/settlement/ui/list-date-group.tsx
+++ b/src/entities/settlement/ui/list-date-group.tsx
@@ -8,7 +8,8 @@ import { useTranslation } from 'react-i18next';
 export const ListDateGroup = ({
  date,
  periodType,
-  items
+  items,
+  setDetailData
 }: ListDateGroupProps) => {
  const { i18n } = useTranslation();

@@ -38,6 +39,7 @@ export const ListDateGroup = ({
            approvalNumber={ items[i]?.approvalNumber }
            approvalDate={ items[i]?.approvalDate }
            transactionAmount={ items[i]?.transactionAmount }
+            setDetailData={ setDetailData }
          ></ListItem>
        )
      }  
--- a/src/entities/settlement/ui/list-item.tsx
+++ b/src/entities/settlement/ui/list-item.tsx
@@ -15,27 +15,28 @@ export const ListItem = ({
  settlementAmount,
  approvalNumber,
  approvalDate,
-  transactionAmount
+  transactionAmount,
+  setDetailData
 }: ListItemProps) => {
-  const { navigate } = useNavigate();
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
  const onClickToNavigate = () => {
    let detailId;
    if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
-      detailId = settlementId;
+      if(setDetailData && settlementId){
+        setDetailData({
+          settlementId: settlementId,
+          detailOn: true
+        });
+      }
    }
    else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
-      detailId = approvalNumber;
-    }
-
-    navigate(PATHS.settlement.detail + detailId, {
-      state: {
-        periodType: periodType,
-        settlementId: settlementId,
-        approvalNumber: approvalNumber,
-        tid: tid,
+      if(setDetailData && tid){
+        setDetailData({
+          tid: tid,
+          detailOn: true
+        });
      }
-    });
+    }
  };

  const getDotClass = () => {
@@ -46,7 +47,6 @@ export const ListItem = ({
    else if(periodType === SettlementPeriodType.TRANSACTION_DATE && transactionAmount){
      if(transactionAmount > 0) rs = 'blue';
    }
-    
    return rs;
  };
  
--- a/src/entities/settlement/ui/list-wrap.tsx
+++ b/src/entities/settlement/ui/list-wrap.tsx
@@ -27,13 +27,15 @@ import {
  SettlementsHistoryResponse,
  SettlementsHistorySummaryParams,
  SettlementsHistorySummaryResponse,
-  SettlementsTransactionSummaryParams
+  SettlementsTransactionSummaryParams,
+  DetailData
 } from '../model/types';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
+import { SettlementDetail } from './detail/settlement-detail';

 export interface ListWrapProps {
  startDateFromCalendar?: string;
@@ -74,6 +76,10 @@ export const ListWrap = ({
  const [preSettlementCancelOffset, setPreSettlementCancelOffset] = useState<number>();
  const [isOpenSummary, setIsOpenSummary] = useState<boolean>(false);

+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailSettlementId, setDetailSettlementId] = useState<string>('');
+  const [detailTid, setDetailTid] = useState<string>('');
+
  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);

  const { mutateAsync: settlementsHistory } = useSettlementsHistoryMutation();
@@ -241,6 +247,16 @@ export const ListWrap = ({
      setPeriodType(val);
    }
  };
+
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if(detailData.settlementId){
+      setDetailSettlementId(detailData.settlementId);
+    }
+    if(detailData.tid){
+      setDetailTid(detailData.tid);
+    }
+  };
  
  const getSettlementDateListDateGroup = () => {
    let rs = [];
@@ -265,6 +281,7 @@ export const ListWrap = ({
                  periodType={ periodType }
                  date={ date }
                  items={ list }
+                  setDetailData={ setDetailData }
                ></ListDateGroup>
              );
            }
@@ -282,6 +299,7 @@ export const ListWrap = ({
          periodType={ periodType }
          date={ date }
          items={ list }
+          setDetailData={ setDetailData }
        ></ListDateGroup>
      );
    }
@@ -311,6 +329,7 @@ export const ListWrap = ({
                  periodType={ periodType }
                  date={ date }
                  items={ list }
+                  setDetailData={ setDetailData }
                ></ListDateGroup>
              );
            }
@@ -329,6 +348,7 @@ export const ListWrap = ({
          periodType={ periodType }
          date={ date }
          items={ list }
+          setDetailData={ setDetailData }
        ></ListDateGroup>
      );
    }
@@ -477,6 +497,13 @@ export const ListWrap = ({
        setEndDate={ setEndDate }
        setPaymentMethod={ setPaymentMethod }
      ></ListFilter>
+      <SettlementDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        periodType={ periodType }
+        settlementId={ detailSettlementId }
+        tid={ detailTid }
+      ></SettlementDetail>
      { !!emailBottomSheetOn &&
        <EmailBottomSheet
          bottomSheetOn={ emailBottomSheetOn }
--- a/src/pages/settlement/list/list-page.tsx
+++ b/src/pages/settlement/list/list-page.tsx
@@ -5,7 +5,6 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { SettlementTab } from '@/entities/settlement/ui/settlement-tab';
 import { ListWrap } from '@/entities/settlement/ui/list-wrap';
 import { SettlementTabKeys } from '@/entities/settlement/model/types'; 
-import { FooterItemActiveKey } from '@/entities/common/model/types';
 import { HeaderType } from '@/entities/common/model/types';
 import {
 	useSetHeaderTitle,
--- a/src/pages/settlement/settlement-pages.tsx
+++ b/src/pages/settlement/settlement-pages.tsx
@@ -3,7 +3,6 @@ import { SentryRoutes } from '@/shared/configs/sentry';
 import { ROUTE_NAMES } from '@/shared/constants/route-names';
 import { CalendarPage } from './calendar/calendar-page';
 import { ListPage } from './list/list-page';
-import { DetailPage } from './list/detail-page';

 export const SettlementPages = () => {
  return (
@@ -11,7 +10,6 @@ export const SettlementPages = () => {
      <SentryRoutes>
        <Route path={ROUTE_NAMES.settlement.calendar} element={<CalendarPage />} />
        <Route path={ROUTE_NAMES.settlement.list} element={<ListPage />} />
-        <Route path={ROUTE_NAMES.settlement.detail} element={<DetailPage />} />
      </SentryRoutes>
    </>
  );
--- a/src/shared/constants/paths.ts
+++ b/src/shared/constants/paths.ts
@@ -59,7 +59,6 @@ export const PATHS: RouteNamesType = {
    base: generatePath(ROUTE_NAMES.settlement.base),
    calendar: generatePath(ROUTE_NAMES.settlement.base, ROUTE_NAMES.settlement.calendar),
    list: generatePath(ROUTE_NAMES.settlement.base, ROUTE_NAMES.settlement.list),
-    detail: generatePath(ROUTE_NAMES.settlement.base, ROUTE_NAMES.settlement.detail),
  },
  merchant: {
    base: generatePath(ROUTE_NAMES.merchant.base),
--- a/src/shared/constants/route-names.ts
+++ b/src/shared/constants/route-names.ts
@@ -26,7 +26,6 @@ export const ROUTE_NAMES = {
    base: '/settlement/*',
    calendar: 'calendar',
    list: 'list',
-    detail: 'detail/:detailId',
  },
  merchant: {
    base: '/merchant/*',