세금계산서 리스트 및 상세

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

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

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { VatReturnTab } from '@/entities/vat-return/ui/vat-return-tab';
+import { ListWrap } from '@/entities/vat-return/ui/list-wrap';
+import { VatReturnTabKeys } from '@/entities/vat-return/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const ListPage = () => {
+  const { navigate } = useNavigate();
+  const [activeTab, setActiveTab] = useState<VatReturnTabKeys>(VatReturnTabKeys.List);
+  useSetHeaderTitle('부가세 신고 자료');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane pt-46 active">
+            <VatReturnTab activeTab={ activeTab }></VatReturnTab>
+            <ListWrap></ListWrap>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

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

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { VatReturnTab } from '@/entities/vat-return/ui/vat-return-tab';
+import { VatReferenceWrap } from '@/entities/vat-return/ui/vat-reference-wrap';
+import { VatReturnTabKeys } from '@/entities/vat-return/model/types';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+
+export const VatReferencePage = () => {
+  const { navigate } = useNavigate();
+
+  const [activeTab, setActiveTab] = useState<VatReturnTabKeys>(VatReturnTabKeys.VatReference);
+  useSetHeaderTitle('부가세 신고 자료');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <VatReturnTab activeTab={ activeTab }></VatReturnTab>
+            <VatReferenceWrap></VatReferenceWrap>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};

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

@@ -0,0 +1,18 @@
+import { Route } from 'react-router-dom';
+import { SentryRoutes } from '@/shared/configs/sentry';
+import { ROUTE_NAMES } from '@/shared/constants/route-names';
+import { ListPage } from './list-page';
+import { DetailPage } from './detail-page';
+import { VatReferencePage } from './vat-reference-page';
+
+export const VatReturnPages = () => {
+  return (
+    <>
+      <SentryRoutes>
+        <Route path={ROUTE_NAMES.vatReturn.list} element={<ListPage />} />
+        <Route path={ROUTE_NAMES.vatReturn.detail} element={<DetailPage />} />
+        <Route path={ROUTE_NAMES.vatReturn.vatReference} element={<VatReferencePage />} />
+      </SentryRoutes>
+    </>
+  );
+};