첫 커밋

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

@@ -0,0 +1,133 @@
+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 }
+                  show={ showAmount }
+                  tid={ tid }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailAmountInfoSection>
+
+                <div className="txn-divider minus"></div>
+
+                <DetailPublishInfoSection
+                  publishInfo={ publishInfo }
+                  show={ showAmount }
+                  tid={ tid }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailPublishInfoSection>
+
+                <div className="txn-divider minus"></div>
+
+                <DetailReceiverInfoSection
+                  receiverInfo={ receiverInfo }
+                  show={ showAmount }
+                  tid={ tid }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailReceiverInfoSection>
+
+                <div className="txn-divider"></div>
+
+                <DetailSupplierInfoSection
+                  supplierInfo={ supplierInfo }
+                  show={ showAmount }
+                  tid={ tid }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailSupplierInfoSection>
+                
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+};

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

@@ -0,0 +1,38 @@
+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 { HeaderType } from '@/entities/common/model/types';
+import { 
+	useSetHeaderTitle,
+	useSetHeaderType,
+	useSetFooterMode,
+  useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const InvoiceListPage = () => {
+  const { navigate } = useNavigate();
+
+  const [activeTab, setActiveTab] = useState<TaxTabKeys>(TaxTabKeys.InvoiceList);
+  useSetHeaderTitle('부가세 신고 자료');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <TaxTab activeTab={ activeTab }></TaxTab>
+            <InvoiceListWrap></InvoiceListWrap>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};