부가서비스

- 계좌점유인증 상세정보,필터,엑셀다운 API 연동
- 계좌성명조회 상세정보 페이지 수정

src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx

@@ -3,7 +3,7 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import {  SortByKeys, AuthAndTransferStatus, AccountHolderAuthListItem } from '@/entities/additional-service/model/types';
+import { SortByKeys, AuthAndTransferStatus, AccountHolderAuthListItem } from '@/entities/additional-service/model/types';
 import { useEffect, useState } from 'react';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { SortOptionsBox } from '@/entities/additional-service/ui/sort-options-box';
@@ -17,6 +17,8 @@ import {
 import { useExtensionAccountHolderAuthListMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-list-mutation';
 import { authStatusBtnGroup } from '@/entities/additional-service/model/account-holder-auth/constant';
 import { AccountHolderAuthList } from '@/entities/additional-service/ui/account-holder-auth/account-holder-auth-list';
+import { useExtensionAccountHolderAuthDownloadExcelMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-download-excel-mutation';
+import { AccountHolderAuthFilter } from '@/entities/additional-service/ui/account-holder-auth/filter/account-holder-auth-filter';
 
 export const AccountHolderAuthPage = () => {
   const { navigate } = useNavigate();
@@ -38,7 +40,7 @@ export const AccountHolderAuthPage = () => {
   });
 
   const { mutateAsync: accountHolderAuthList } = useExtensionAccountHolderAuthListMutation();
-
+  const { mutateAsync: downloadExcel } = useExtensionAccountHolderAuthDownloadExcelMutation();
   const callList = (option?: {
     sortBy?: string,
     val?: string
@@ -78,7 +80,14 @@ export const AccountHolderAuthPage = () => {
   };
 
   const onClickToDownloadExcel = () => {
-
+    downloadExcel({
+      mid: mid,
+      fromDate: fromDate,
+      toDate: toDate,
+      authStatus: authStatus
+    }).then((rs) => {
+      console.log('Excel Downlaod Status : ' + rs.status)
+    });
   }
 
   const onClickToOpenFilter = () => {
@@ -147,7 +156,7 @@ export const AccountHolderAuthPage = () => {
                     authStatusBtnGroup.map((value, index) => (
                       <span
                         key={`key-service-code=${index}`}
-                        className={`keyword-tag ${( authStatus === value.value) ? 'active' : ''}`}
+                        className={`keyword-tag ${(authStatus === value.value) ? 'active' : ''}`}
                         onClick={() => onClickToAuthStatus(value.value)}
                       >{value.name}</span>
                     ))
@@ -162,6 +171,19 @@ export const AccountHolderAuthPage = () => {
           </div>
         </div>
       </main>
+      <AccountHolderAuthFilter
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+        mid={mid}
+        startDate={fromDate}
+        endDate={toDate}
+        authStatus={authStatus}
+        setMid={setMid}
+        setStartDate={setFromDate}
+        setEndDate={setToDate}
+        setAuthStatus={setAuthStatus}
+      >
+      </AccountHolderAuthFilter>
     </>
   );
 };

src/pages/additional-service/account-holder-auth/detail-page.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import {
+    useSetHeaderTitle,
+    useSetHeaderType,
+    useSetFooterMode,
+    useSetOnBack
+} from '@/widgets/sub-layout/use-sub-layout';
+import { AdditionalServiceCategory, DetailInfo, DetailResponse, ExtensionAccountHolderAuthDetailParams, TitleInfo } from '@/entities/additional-service/model/types';
+import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
+import { useLocation } from 'react-router';
+import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
+import { useExtensionAccountHolderAuthDetailMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-deatil-mutation';
+
+export const AccountHolderAuthDetailPage = () => {
+    const { navigate } = useNavigate();
+    const location = useLocation();
+
+    const { mid, tid } = location.state || {};
+
+    const [titleInfo, setTitleInfo] = useState<TitleInfo>();
+    const [detailInfo, setDetailInfo] = useState<DetailInfo>();
+
+    useSetHeaderTitle('계좌점유인증 상세');
+    useSetHeaderType(HeaderType.LeftArrow);
+    useSetFooterMode(false);
+    useSetOnBack(() => {
+        navigate(PATHS.additionalService.accountHolderAuth.list);
+    });
+
+    const { mutateAsync: accountHolderAuthDetail } = useExtensionAccountHolderAuthDetailMutation();
+
+    const callDetail = () => {
+        let accountHolderAuthDetailParams: ExtensionAccountHolderAuthDetailParams = {
+            mid: mid,
+            tid: tid
+        }
+        accountHolderAuthDetail(accountHolderAuthDetailParams).then((rs: DetailResponse) => {
+            console.log("Detail Info: ", rs)
+            setTitleInfo(rs.titleInfo);
+            setDetailInfo(rs.detailInfo);
+        });
+    };
+    useEffect(() => {
+        callDetail();
+    }, []);
+    return (
+        <>
+            <main>
+                <div className="tab-content">
+                    <div className="tab-pane sub active">
+                        <div className="pay-top">
+                            <TitleInfoWrap
+                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderAuth}
+                                titleInfo={titleInfo}
+                            ></TitleInfoWrap>
+                        </div>
+                        <div className="pay-detail">
+                            <div className="detail-divider"></div>
+                            <DetailInfoWrap
+                                additionalServiceCategory={AdditionalServiceCategory.AccountHolderAuth}
+                                detailInfo={detailInfo}
+                            ></DetailInfoWrap>
+                        </div>
+                    </div>
+                </div>
+            </main >
+        </>
+    )
+}