상세 수정

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

@@ -14,7 +14,8 @@ import {
 	BillingSearchType, 
 	ListItemProps, 
 	BillingListParams, 
-	BillingListResponse 
+	BillingListResponse, 
+	DetailData
 } from '@/entities/transaction/model/types';
 import { useBillingListMutation } from '@/entities/transaction/api/use-billing-list-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -31,6 +32,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 { BillingDetail } from '@/entities/transaction/ui/detail/billing-detail';
 
 export const BillingListPage = () => {
 	const { navigate } = useNavigate();
@@ -55,6 +57,8 @@ export const BillingListPage = () => {
 	const [maxAmount, setMaxAmount] = useState<number>();
 
 	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
+	const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailTid, setDetailTid] = useState<string>('');
 
 	useSetHeaderTitle(t('billing.title'));
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -149,10 +153,17 @@ export const BillingListPage = () => {
 	const onClickToRequestStatus = (val: BillingRequestStatus) => {
     setRequestStatus(val);
   };
+	const onClickToNavigate = () => {
+    navigate(PATHS.transaction.billing.charge);
+  };
 
 	const onRequestDownload = (userEmail?: string) => {
 
 	};
+	const setDetailData = (detailData: DetailData) => {
+		setDetailOn(detailData.detailOn);
+		setDetailTid(detailData.tid);
+	};
 
   useEffect(() => {
 		callList();
@@ -217,11 +228,18 @@ export const BillingListPage = () => {
 						<BillingList 
 							listItems={ listItems }
 							transactionCategory={ TransactionCategory.Billing }
+							setDetailData={ setDetailData }
 						></BillingList>
 						<div ref={ setTarget }></div>
 					</div>
 				</div>
 			</main>
+			<div className="apply-row">
+        <button
+          className="btn-50 btn-blue flex-1"
+          onClick={ () => onClickToNavigate() }
+        >{ t('transaction.list.paymentRequest') }</button>
+      </div>
 			<BillingFilter
         filterOn={ filterOn }
         setFilterOn={ setFilterOn }
@@ -246,6 +264,11 @@ export const BillingListPage = () => {
 				setMinAmount={ setMinAmount }
 				setMaxAmount={ setMaxAmount }
       ></BillingFilter>
+			<BillingDetail
+				detailOn={ detailOn }
+				setDetailOn={ setDetailOn }
+				tid={ detailTid }
+			></BillingDetail>
 			{ !!downloadBottomSheetOn &&
 				<EmailBottomSheet
 					bottomSheetOn={ downloadBottomSheetOn }