상세 수정

src/pages/transaction/escrow/list-page.tsx

@@ -13,7 +13,8 @@ import {
 	EscrowSettlementStatus, 
 	ListItemProps, 
 	EscrowListParams,
-	EscrowListResponse
+	EscrowListResponse,
+	DetailData
 } from '@/entities/transaction/model/types';
 import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -30,6 +31,7 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { EscrowDetail } from '@/entities/transaction/ui/detail/escrow-detail';
 
 export const EscrowListPage = () => {
 	const { navigate } = useNavigate();
@@ -54,6 +56,10 @@ export const EscrowListPage = () => {
 	const [maxAmount, setMaxAmount] = useState<number>();
 
 	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+	const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailTid, setDetailTid] = useState<string>('');
+  const [detailServiceCode, setDetailServiceCode] = useState<string>('');
 		
 	useSetHeaderTitle(t('escrow.title'));
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -150,6 +156,15 @@ export const EscrowListPage = () => {
     });
     */
   };
+
+	const setDetailData = (detailData: DetailData) => {
+		setDetailOn(detailData.detailOn);
+		setDetailTid(detailData.tid);
+		if(detailData?.serviceCode){
+			setDetailServiceCode(detailData?.serviceCode);
+		}
+	};
+
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
   };
@@ -221,6 +236,7 @@ export const EscrowListPage = () => {
 						<EscrowList 
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.Escrow }
+							setDetailData={ setDetailData }
 						></EscrowList>
 						<div ref={ setTarget }></div>
 					</div>
@@ -248,6 +264,12 @@ export const EscrowListPage = () => {
 				setMinAmount={ setMinAmount }
 				setMaxAmount={ setMaxAmount }
       ></EscrowFilter>
+			<EscrowDetail
+				detailOn={ detailOn }
+				setDetailOn={ setDetailOn }
+				tid={ detailTid }
+				serviceCode={ detailServiceCode }
+			></EscrowDetail>
 			{ !!emailBottomSheetOn &&
 				<EmailBottomSheet
 					bottomSheetOn={ emailBottomSheetOn }