email 자동 셋팅

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

@@ -51,7 +51,7 @@ export const BillingListPage = () => {
 	const [minAmount, setMinAmount] = useState<number>();
 	const [maxAmount, setMaxAmount] = useState<number>();
 
-	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
 
 	useSetHeaderTitle('빌링');
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -102,8 +102,8 @@ export const BillingListPage = () => {
 	const onClickToOpenFilter = () => {
     setFilterOn(!filterOn);
   };
-  const onClickToDownloadExcel = () => {
-    setEmailBottomSheetOn(true);
+  const onClickToOpenDownloadBottomSheet = () => {
+    setDownloadBottomSheetOn(true);
   };
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
@@ -119,7 +119,7 @@ export const BillingListPage = () => {
 		});
   };
 
-	const onRequestDownloadExcel = (userEmail?: string) => {
+	const onRequestDownload = (userEmail?: string) => {
 
 	};
 
@@ -161,7 +161,7 @@ export const BillingListPage = () => {
 									<img 
 										src={ IMAGE_ROOT + '/ico_download.svg' } 
 										alt="다운로드"
-										onClick={ () => onClickToDownloadExcel() }
+										onClick={ () => onClickToOpenDownloadBottomSheet() }
                   />
 								</button>
 							</div>
@@ -217,13 +217,13 @@ export const BillingListPage = () => {
 				setMinAmount={ setMinAmount }
 				setMaxAmount={ setMaxAmount }
       ></BillingFilter>
-			{ !!emailBottomSheetOn &&
+			{ !!downloadBottomSheetOn &&
 				<EmailBottomSheet
-					bottomSheetOn={ emailBottomSheetOn }
-					setBottomSheetOn={ setEmailBottomSheetOn }
+					bottomSheetOn={ downloadBottomSheetOn }
+					setBottomSheetOn={ setDownloadBottomSheetOn }
 					imageSave={ false }
 					sendEmail={ true }
-					sendRequest={ onRequestDownloadExcel }
+					sendRequest={ onRequestDownload }
 				></EmailBottomSheet>
 			}
 		</>

src/pages/vat-return/detail-page.tsx

@@ -6,7 +6,9 @@ import { useVatReturnDetailMutation } from '@/entities/vat-return/api/use-vat-re
 import { HeaderType } from '@/entities/common/model/types';
 import {
   VatReturnDetailParams,
-  VatReturnDetailResponse
+  VatReturnDetailResponse,
+  VatReturnTaxInvoiceParams,
+  VatReturnTaxInvoiceResponse
 } from '@/entities/vat-return/model/types';
 import {
   useSetOnBack, 
@@ -18,6 +20,8 @@ import { SupplierSection } from '@/entities/vat-return/ui/section/supplier-secti
 import { ReceiverSection } from '@/entities/vat-return/ui/section/receiver-section';
 import { IssueSection } from '@/entities/vat-return/ui/section/issue-section';
 import { AmountSection } from '@/entities/vat-return/ui/section/amount-section';
+import { useVatReturnTaxInvoiceMutation } from '@/entities/vat-return/api/use-vat-return-tax-invoice-mutation';
+import { VatReturnListDetailBottomSheet } from '@/entities/vat-return/ui/list-detail-bottom-sheet';
 
 export const DetailPage = () => {
   const { navigate } = useNavigate();
@@ -27,7 +31,8 @@ export const DetailPage = () => {
   taxInvoiceNumber = 'TAX202506300001';
   
   const [openAmount, setOpenAmount] = useState<boolean>(false);
-  const [detail, setDetail] = useState<VatReturnDetailResponse>({});
+  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+  const [detail, setDetail] = useState<VatReturnTaxInvoiceResponse>({});
 
   useSetHeaderTitle('세금계산서 상세');
   useSetHeaderType(HeaderType.RightClose);
@@ -35,10 +40,11 @@ export const DetailPage = () => {
     navigate(PATHS.vatReturn.list);
   });
   useSetFooterMode(false);
-    
+  
+  const { mutateAsync: vatReturnTaxInvoice } = useVatReturnTaxInvoiceMutation();
   const { mutateAsync: vatReturnDetail } = useVatReturnDetailMutation();
 
-  const callDetail = () => {
+  const callTaxInvoice = () => {
     let params: VatReturnDetailParams = {
       taxInvoiceNumber: taxInvoiceNumber,
     };
@@ -46,8 +52,13 @@ export const DetailPage = () => {
       setDetail(rs);
     });
   };
+
+  const onClickToOpenBottomSheet = () => {
+    setBottomSheetOn(true);
+  };
+
   useEffect(() => {
-    callDetail();
+    callTaxInvoice();
   }, []);
   
   return (
@@ -74,9 +85,21 @@ export const DetailPage = () => {
                 ></SupplierSection>
               </div>
             </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ onClickToOpenBottomSheet }
+              >거래 취소</button>
+            </div>
           </div>
         </div>
       </main>
+      { !!bottomSheetOn &&
+        <VatReturnListDetailBottomSheet
+          bottomSheetOn={ bottomSheetOn }
+          setBottomSheetOn={ setBottomSheetOn }
+        ></VatReturnListDetailBottomSheet>
+      }
     </>
   )
 };