정산내역 상세 변경

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 {

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>
+    </>
+  );
+};

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

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 } = useTranslation();
-  const { t, i18n } = 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;
+      if(setDetailData && tid){
-    }
+        setDetailData({
-
+          tid: tid,
-    navigate(PATHS.settlement.detail + detailId, {
+          detailOn: true
-      state: {
+        });
-        periodType: periodType,
-        settlementId: settlementId,
-        approvalNumber: approvalNumber,
-        tid: tid,
       }
-    });
+    }
   };
 
   const getDotClass = () => {
@@ -46,7 +47,6 @@ export const ListItem = ({
     else if(periodType === SettlementPeriodType.TRANSACTION_DATE && transactionAmount){
       if(transactionAmount > 0) rs = 'blue';
     }
-    
     return rs;
   };
   

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 }

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,

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

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

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/*',