세금계산서 리스트 및 상세

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

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useLocation } from 'react-router';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useVatReturnDetailMutation } from '@/entities/vat-return/api/use-vat-return-detail-mutation';
+import { HeaderType } from '@/entities/common/model/types';
+import {
+  VatReturnDetailParams,
+  VatReturnDetailResponse
+} from '@/entities/vat-return/model/types';
+import {
+  useSetOnBack, 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+import { SupplierSection } from '@/entities/vat-return/ui/section/supplier-section';
+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';
+
+export const DetailPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+
+  let taxInvoiceNumber = location?.state.taxInvoiceNumber;
+  taxInvoiceNumber = 'TAX202506300001';
+  
+  const [openAmount, setOpenAmount] = useState<boolean>(false);
+  const [detail, setDetail] = useState<VatReturnDetailResponse>({});
+
+  useSetHeaderTitle('세금계산서 상세');
+  useSetHeaderType(HeaderType.RightClose);
+  useSetOnBack(() => {
+    navigate(PATHS.vatReturn.list);
+  });
+  useSetFooterMode(false);
+    
+  const { mutateAsync: vatReturnDetail } = useVatReturnDetailMutation();
+
+  const callDetail = () => {
+    let params: VatReturnDetailParams = {
+      taxInvoiceNumber: taxInvoiceNumber,
+    };
+    vatReturnDetail(params).then((rs: VatReturnDetailResponse) => {
+      setDetail(rs);
+    });
+  };
+  useEffect(() => {
+    callDetail();
+  }, []);
+  
+  return (
+    <>
+      <main className="full-height">
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="option-list">
+              <div className="txn-detail">
+                <AmountSection
+                  detail={ detail }
+                ></AmountSection>
+                <div className="txn-divider minus"></div>
+                <IssueSection
+                  detail={ detail }
+                ></IssueSection>
+                <div className="txn-divider minus"></div>
+                <ReceiverSection
+                  detail={ detail }
+                ></ReceiverSection>
+                <div className="txn-divider"></div>
+                <SupplierSection
+                  detail={ detail }
+                ></SupplierSection>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+};