email 자동 셋팅

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>
+      }
     </>
   )
 };