85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useParams } from 'react-router-dom';
|
|
import { PATHS } from '@/shared/constants/paths';
|
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|
import { DetailAmountInfo } from '@/entities/settlement/ui/detail-amount-info';
|
|
import { DetailSettlementInfo } from '@/entities/settlement/ui/detail-settlement-info';
|
|
import { HeaderType } from '@/entities/common/model/types';
|
|
import {
|
|
SettlementDetailParams,
|
|
DetailResponse,
|
|
DetailAmountInfoProps,
|
|
DetailSettlementInfoProps,
|
|
} from '@/entities/settlement/model/types';
|
|
import {
|
|
useSetOnBack,
|
|
useSetHeaderTitle,
|
|
useSetHeaderType,
|
|
useSetFooterMode
|
|
} from '@/widgets/sub-layout/use-sub-layout';
|
|
|
|
export const DetailPage = () => {
|
|
const { navigate } = useNavigate();
|
|
const { tid } = useParams();
|
|
|
|
const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
|
|
const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
|
|
const [showAmount, setShowAmount] = useState<boolean>(false);
|
|
const [showSettlement, setShowSettlement] = useState<boolean>(false);
|
|
|
|
useSetHeaderTitle('정산내역 상세');
|
|
useSetHeaderType(HeaderType.RightClose);
|
|
useSetOnBack(() => {
|
|
navigate(PATHS.settlement.list);
|
|
});
|
|
useSetFooterMode(false);
|
|
|
|
const onClickToShowInfo = (info: string) => {
|
|
if(info === 'amount'){
|
|
setShowAmount(!showAmount);
|
|
}
|
|
else if(info === 'settlement'){
|
|
setShowSettlement(!showSettlement);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<main>
|
|
<div className="tab-content">
|
|
<div className="tab-pane sub active">
|
|
<div className="option-list">
|
|
<div className="txn-detail">
|
|
<div className="txn-num-group">
|
|
<div className="txn-amount">
|
|
<div className="value">63,736,320<span className="unit">원</span></div>
|
|
{/*
|
|
<button className="chip-btn" type="button">금액상세 <img src="../images/select_arrow.svg" alt="펼치기"/></button>
|
|
*/}
|
|
</div>
|
|
<div className="txn-date">2025.06.08</div>
|
|
</div>
|
|
<div className="txn-divider minus"></div>
|
|
<DetailAmountInfo
|
|
amountInfo={ amountInfo }
|
|
show={ showAmount }
|
|
tid={ tid }
|
|
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
|
></DetailAmountInfo>
|
|
<div className="txn-divider"></div>
|
|
<DetailSettlementInfo
|
|
settlementInfo={ settlementInfo }
|
|
show={ showSettlement }
|
|
onClickToShowInfo={ (info) => onClickToShowInfo(info) }
|
|
></DetailSettlementInfo>
|
|
</div>
|
|
</div>
|
|
<div className="apply-row">
|
|
<button className="btn-50 btn-blue flex-1">거래 취소</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</>
|
|
);
|
|
}; |