거래내역 관련
This commit is contained in:
focp212@naver.com
@@ -1,28 +1,28 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { useLocation } from 'react-router';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { Dialog } from '@/shared/ui/dialogs/dialog';
|
||||
import { overlay } from 'overlay-kit';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { useAllTransactionDetailMutation } from '@/entities/transaction/api/use-all-transaction-detail-mutation';
|
||||
import { DetailAmountInfo } from '@/entities/transaction/ui/detail-amount-info';
|
||||
import { DetailImportantInfo } from '@/entities/transaction/ui/detail-important-info';
|
||||
import { DetailPaymentInfo } from '@/entities/transaction/ui/detail-payment-info';
|
||||
import { DetailTransactionInfo } from '@/entities/transaction/ui/detail-transaction-info';
|
||||
import { DetailSettlementInfo } from '@/entities/transaction/ui/detail-settlement-info';
|
||||
import { DetailPartCancelInfo } from '@/entities/transaction/ui/detail-part-cancel-info';
|
||||
import { AmountInfoWrap } from '@/entities/transaction/ui/info-wrap/amount-info-wrap';
|
||||
import { ImportantInfoWrap } from '@/entities/transaction/ui/info-wrap/important-info-wrap';
|
||||
import { PaymentInfoWrap } from '@/entities/transaction/ui/info-wrap/payment-info-wrap';
|
||||
import { TransactionInfoWrap } from '@/entities/transaction/ui/info-wrap/transaction-info-wrap';
|
||||
import { SettlementInfoWrap } from '@/entities/transaction/ui/info-wrap/settlement-info-wrap';
|
||||
import { PartCancelInfoWrap } from '@/entities/transaction/ui/info-wrap/part-cancel-info-wrap';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
PageType,
|
||||
TransactionCategory,
|
||||
AllTransactionDetailParams,
|
||||
DetailResponse,
|
||||
DetailAmountInfoProps,
|
||||
DetailImportantInfoProps,
|
||||
DetailPaymentInfoProps,
|
||||
DetailTransactionInfoProps,
|
||||
DetailSettlementInfoProps,
|
||||
DetailPartCancelInfoProps,
|
||||
DetailInfoKeys
|
||||
AmountInfo,
|
||||
ImportantInfo,
|
||||
PaymentInfo,
|
||||
TransactionInfo,
|
||||
SettlementInfo,
|
||||
PartCancelInfo,
|
||||
InfoWrapKeys
|
||||
} from '@/entities/transaction/model/types';
|
||||
import {
|
||||
useSetOnBack,
|
||||
@@ -33,19 +33,20 @@ import {
|
||||
|
||||
export const AllTransactionDetailPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const { tid } = useParams();
|
||||
const location = useLocation();
|
||||
const tid = location.state.tid;
|
||||
|
||||
const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
|
||||
const [importantInfo, setImportantInfo] = useState<DetailImportantInfoProps>();
|
||||
const [paymentInfo, setPaymentInfo] = useState<DetailPaymentInfoProps>();
|
||||
const [transactionInfo, setTransactionInfo] = useState<DetailTransactionInfoProps>();
|
||||
const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
|
||||
const [partCancelInfo, setPartCancelInfo] = useState<DetailPartCancelInfoProps>();
|
||||
const [showAmount, setShowAmount] = useState<boolean>(false);
|
||||
const [showPayment, setShowPayment] = useState<boolean>(false);
|
||||
const [showTransaction, setShowTransaction] = useState<boolean>(false);
|
||||
const [showSettlement, setShowSettlement] = useState<boolean>(false);
|
||||
const [showPartCancel, setShowPartCancel] = useState<boolean>(false);
|
||||
const [amountInfo, setAmountInfo] = useState<AmountInfo>();
|
||||
const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
|
||||
const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
|
||||
const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
|
||||
const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
|
||||
const [partCancelInfo, setPartCancelInfo] = useState<PartCancelInfo>();
|
||||
const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
|
||||
const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
|
||||
const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
|
||||
const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
|
||||
const [showPartCancelInfo, setShowPartCancelInfo] = useState<boolean>(false);
|
||||
|
||||
useSetHeaderTitle('거래내역 상세');
|
||||
useSetHeaderType(HeaderType.RightClose);
|
||||
@@ -106,21 +107,21 @@ export const AllTransactionDetailPage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToShowInfo = (info: DetailInfoKeys) => {
|
||||
if(info === DetailInfoKeys.Amount){
|
||||
setShowAmount(!showAmount);
|
||||
const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
|
||||
if(infoWrapKey === InfoWrapKeys.Amount){
|
||||
setShowAmountInfo(!showAmountInfo);
|
||||
}
|
||||
else if(info === DetailInfoKeys.Payment){
|
||||
setShowPayment(!showPayment);
|
||||
else if(infoWrapKey === InfoWrapKeys.Payment){
|
||||
setShowPaymentInfo(!showPaymentInfo);
|
||||
}
|
||||
else if(info === DetailInfoKeys.Transaction){
|
||||
setShowTransaction(!showTransaction);
|
||||
else if(infoWrapKey === InfoWrapKeys.Transaction){
|
||||
setShowTransactionInfo(!showTransactionInfo);
|
||||
}
|
||||
else if(info === DetailInfoKeys.Settlement){
|
||||
setShowSettlement(!showSettlement);
|
||||
else if(infoWrapKey === InfoWrapKeys.Settlement){
|
||||
setShowSettlementInfo(!showSettlementInfo);
|
||||
}
|
||||
else if(info === DetailInfoKeys.PartCancel){
|
||||
setShowPartCancel(!showPartCancel);
|
||||
else if(infoWrapKey === InfoWrapKeys.PartCancel){
|
||||
setShowPartCancelInfo(!showPartCancelInfo);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -131,46 +132,46 @@ export const AllTransactionDetailPage = () => {
|
||||
<div className="tab-pane sub active">
|
||||
<div className="option-list">
|
||||
<div className="txn-detail">
|
||||
<DetailAmountInfo
|
||||
pageType={ PageType.AllTransaction }
|
||||
<AmountInfoWrap
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
amountInfo={ amountInfo }
|
||||
show={ showAmount }
|
||||
show={ showAmountInfo }
|
||||
tid={ tid }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></DetailAmountInfo>
|
||||
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
|
||||
></AmountInfoWrap>
|
||||
<div className="txn-divider minus"></div>
|
||||
<DetailImportantInfo
|
||||
pageType={ PageType.AllTransaction }
|
||||
<ImportantInfoWrap
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
importantInfo={ importantInfo }
|
||||
></DetailImportantInfo>
|
||||
></ImportantInfoWrap>
|
||||
<div className="txn-divider minus"></div>
|
||||
<DetailPaymentInfo
|
||||
pageType={ PageType.AllTransaction }
|
||||
<PaymentInfoWrap
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
paymentInfo={ paymentInfo }
|
||||
show={ showPayment }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></DetailPaymentInfo>
|
||||
show={ showPaymentInfo }
|
||||
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
|
||||
></PaymentInfoWrap>
|
||||
<div className="txn-divider"></div>
|
||||
<DetailTransactionInfo
|
||||
pageType={ PageType.AllTransaction }
|
||||
<TransactionInfoWrap
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
transactionInfo={ transactionInfo }
|
||||
show={ showTransaction }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></DetailTransactionInfo>
|
||||
show={ showTransactionInfo }
|
||||
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
|
||||
></TransactionInfoWrap>
|
||||
<div className="txn-divider"></div>
|
||||
<DetailSettlementInfo
|
||||
pageType={ PageType.AllTransaction }
|
||||
<SettlementInfoWrap
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
settlementInfo={ settlementInfo }
|
||||
show={ showSettlement }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></DetailSettlementInfo>
|
||||
show={ showSettlementInfo }
|
||||
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
|
||||
></SettlementInfoWrap>
|
||||
<div className="txn-divider"></div>
|
||||
<DetailPartCancelInfo
|
||||
pageType={ PageType.AllTransaction }
|
||||
<PartCancelInfoWrap
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
partCancelInfo={ partCancelInfo }
|
||||
show={ showPartCancel }
|
||||
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
||||
></DetailPartCancelInfo>
|
||||
show={ showPartCancelInfo }
|
||||
onClickToShowInfo={ (infoWrapKey) => onClickToShowInfo(infoWrapKey) }
|
||||
></PartCancelInfoWrap>
|
||||
</div>
|
||||
</div>
|
||||
<div className="apply-row">
|
||||
|
||||
@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
|
||||
import { ListItem, PageType, SortByKeys } from '@/entities/transaction/model/types';
|
||||
import { ListItem, TransactionCategory, SortByKeys } from '@/entities/transaction/model/types';
|
||||
import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
|
||||
import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
|
||||
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
|
||||
@@ -218,7 +218,7 @@ export const AllTransactionListPage = () => {
|
||||
</div>
|
||||
<AllTransactionList
|
||||
listItems={ listItems }
|
||||
pageType={ PageType.AllTransaction }
|
||||
transactionCategory={ TransactionCategory.AllTransaction }
|
||||
></AllTransactionList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user