세금계산서 리스트 및 상세

src/pages/tax/invoice/detail-page.tsx

@@ -1,133 +0,0 @@
-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 { useInvoiceDetailMutation } from '@/entities/tax/api/use-invoice-detail-mutation';
-import { DetailAmountInfoSection } from '@/entities/tax/ui/detail-amount-info-section';
-import { DetailPublishInfoSection } from '@/entities/tax/ui/detail-publish-info-section';
-import { DetailReceiverInfoSection } from '@/entities/tax/ui/detail-receiver-info-section';
-import { DetailSupplierInfoSection } from '@/entities/tax/ui/detail-supplier-info-section';
-import { HeaderType } from '@/entities/common/model/types';
-import {
-  DetailResponse,
-  InvoiceDetailParams,
-  DetailAmountInfoProps,
-  DetailInfoSectionKeys,
-  DetailPublishInfoProps,
-  DetailReceiverInfoProps,
-  DetailSupplierInfoProps
-} from '@/entities/tax/model/types';
-import {
-  useSetOnBack, 
-  useSetHeaderTitle,
-  useSetHeaderType,
-  useSetFooterMode
-} from '@/widgets/sub-layout/use-sub-layout';
-
-export const InvoiceDetailPage = () => {
-  const { navigate } = useNavigate();
-  const location = useLocation();
-
-  const [tid, setTid] = useState<string>(location?.state.tid);
-
-  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
-  const [publishInfo, setPublishInfo] = useState<DetailPublishInfoProps>();
-  const [receiverInfo, setReceiverInfo] = useState<DetailReceiverInfoProps>();
-  const [supplierInfo, setSupplierInfo] = useState<DetailSupplierInfoProps>();
-
-  const [showAmount, setShowAmount] = useState<boolean>(false);
-  const [showPublish, setShowPublish] = useState<boolean>(false);
-  const [showReceiver, setShowReceiver] = useState<boolean>(false);
-  const [showSupplier, setShowSupplier] = useState<boolean>(false);
-
-  useSetHeaderTitle('세금계산서 상세');
-  useSetHeaderType(HeaderType.RightClose);
-  useSetOnBack(() => {
-    navigate(PATHS.tax.invoice.list);
-  });
-  useSetFooterMode(false);
-  
-  
-  const { mutateAsync: invoiceDetail } = useInvoiceDetailMutation();
-
-  const onClickToShowInfo = (info: DetailInfoSectionKeys) => {
-    if(info === DetailInfoSectionKeys.Amount){
-      setShowAmount(!showAmount);
-    }
-    else if(info === DetailInfoSectionKeys.Publish){
-      setShowPublish(!showReceiver);
-    }
-    else if(info === DetailInfoSectionKeys.Receiver){
-      setShowReceiver(!showReceiver);
-    }
-    else if(info === DetailInfoSectionKeys.Supplier){
-      setShowSupplier(!showSupplier);
-    }
-  };
-
-  const callDetail = () => {
-    let invoiceDetailParams: InvoiceDetailParams = {
-      svcCd: 'st',
-      tid: tid
-    };
-    invoiceDetail(invoiceDetailParams).then((rs: DetailResponse) => {
-      setAmountInfo(rs.amountInfo);
-      setPublishInfo(rs.publishInfo);
-      setReceiverInfo(rs.receiverInfo);
-      setSupplierInfo(rs.supplierInfo);
-    });
-  };
-  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">
-
-                <DetailAmountInfoSection
-                  amountInfo={ amountInfo }
-                  isOpen={ showAmount }
-                  tid={ tid }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailAmountInfoSection>
-
-                <div className="txn-divider minus"></div>
-
-                <DetailPublishInfoSection
-                  publishInfo={ publishInfo }
-                  isOpen={ showAmount }
-                  tid={ tid }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailPublishInfoSection>
-
-                <div className="txn-divider minus"></div>
-
-                <DetailReceiverInfoSection
-                  receiverInfo={ receiverInfo }
-                  isOpen={ showAmount }
-                  tid={ tid }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailReceiverInfoSection>
-
-                <div className="txn-divider"></div>
-
-                <DetailSupplierInfoSection
-                  supplierInfo={ supplierInfo }
-                  isOpen={ showAmount }
-                  tid={ tid }
-                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
-                ></DetailSupplierInfoSection>
-                
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </>
-  )
-};

src/pages/tax/tax-pages.tsx

@@ -1,20 +0,0 @@
-import { Route } from 'react-router-dom';
-import { SentryRoutes } from '@/shared/configs/sentry';
-import { ROUTE_NAMES } from '@/shared/constants/route-names';
-import { InvoiceListPage } from './invoice/list-page';
-import { InvoiceDetailPage } from './invoice/detail-page';
-import { VatReferencePage } from './vat-reference/vat-reference-page';
-
-export const TaxPages = () => {
-  return (
-    <>
-      <SentryRoutes>
-        <Route path={ROUTE_NAMES.tax.invoice.base}>
-          <Route path={ROUTE_NAMES.tax.invoice.list} element={<InvoiceListPage />} />
-          <Route path={ROUTE_NAMES.tax.invoice.detail} element={<InvoiceDetailPage />} />
-        </Route>
-        <Route path={ROUTE_NAMES.tax.vatReference} element={<VatReferencePage />} />
-      </SentryRoutes>
-    </>
-  );
-};

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

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { TaxTab } from '@/entities/tax/ui/tax-tab';
-import { InvoiceListWrap } from '@/entities/tax/ui/invoice-list-wrap';
-import { TaxTabKeys } from '@/entities/tax/model/types';
+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,
@@ -12,9 +12,9 @@ import {
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 
-export const InvoiceListPage = () => {
+export const ListPage = () => {
   const { navigate } = useNavigate();
-  const [activeTab, setActiveTab] = useState<TaxTabKeys>(TaxTabKeys.InvoiceList);
+  const [activeTab, setActiveTab] = useState<VatReturnTabKeys>(VatReturnTabKeys.List);
   useSetHeaderTitle('부가세 신고 자료');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
@@ -27,8 +27,8 @@ export const InvoiceListPage = () => {
       <main>
         <div className="tab-content">
           <div className="tab-pane pt-46 active">
-            <TaxTab activeTab={ activeTab }></TaxTab>
-            <InvoiceListWrap></InvoiceListWrap>
+            <VatReturnTab activeTab={ activeTab }></VatReturnTab>
+            <ListWrap></ListWrap>
           </div>
         </div>
       </main>

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

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { TaxTab } from '@/entities/tax/ui/tax-tab';
-import { VatReferenceWrap } from '@/entities/tax/ui/vat-reference-wrap';
-import { TaxTabKeys } from '@/entities/tax/model/types';
+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,
@@ -16,7 +16,7 @@ import {
 export const VatReferencePage = () => {
   const { navigate } = useNavigate();
 
-  const [activeTab, setActiveTab] = useState<TaxTabKeys>(TaxTabKeys.VatReference);
+  const [activeTab, setActiveTab] = useState<VatReturnTabKeys>(VatReturnTabKeys.VatReference);
   useSetHeaderTitle('부가세 신고 자료');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
@@ -29,7 +29,7 @@ export const VatReferencePage = () => {
       <main>
         <div className="tab-content">
           <div className="tab-pane sub active">
-            <TaxTab activeTab={ activeTab }></TaxTab>
+            <VatReturnTab activeTab={ activeTab }></VatReturnTab>
             <VatReferenceWrap></VatReferenceWrap>
           </div>
         </div>

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