- 부가서비스 소개 List, 권한 검증 추가

- 각 API 오류 수정

src/pages/additional-service/payout/list-page.tsx

@@ -15,9 +15,9 @@ import {
 import { JSX, useEffect, useState } from 'react';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import {
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode,
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import moment from 'moment';
@@ -29,8 +29,13 @@ import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group'
 import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
 import { useStore } from '@/shared/model/store';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 
 export const PayoutListPage = () => {
+  // 권한 체크
+  const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+    extensionCode: 'PAYOUT'
+  });
   const { navigate } = useNavigate();
   const userMid = useStore.getState().UserStore.mid;
 
@@ -44,12 +49,12 @@ export const PayoutListPage = () => {
   const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
   const [status, setStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL);
   const [minAmount, setMinAmount] = useState<number>(0);
-	const [maxAmount, setMaxAmount] = useState<number>(50000000);
+  const [maxAmount, setMaxAmount] = useState<number>(50000000);
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
 
   const { mutateAsync: extensionPayoutList } = useExtensionPayoutListMutation();
   const { mutateAsync: extensionPayoutExcel } = useExtensionPayoutExcelMutation();
-  
+
   useSetHeaderTitle('지급대행');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
@@ -65,26 +70,19 @@ export const PayoutListPage = () => {
     sortType?: SortTypeKeys,
     status?: PayoutDisbursementStatus
   }) => {
-		let newMinAmount = minAmount;
-		if(!!minAmount && typeof(minAmount) === 'string'){
-			newMinAmount = parseInt(minAmount);
-		}
-		let newMaxAmount = maxAmount;
-		if(!!maxAmount && typeof(maxAmount) === 'string'){
-			newMaxAmount = parseInt(maxAmount);
-		}
+
     let params: ExtensionPayoutListParams = {
       mid: mid,
       searchDateType: searchDateType,
       fromDate: fromDate,
       toDate: toDate,
       status: option?.status ?? status,
-      minAmount: newMinAmount,
-      maxAmount: newMaxAmount,
+      minAmount: minAmount,
+      maxAmount: maxAmount,
       page: pageParam
     };
 
-    if(params.page){
+    if (params.page) {
       params.page.sortType = option?.sortType || sortType;
       setPageParam(params.page);
     }
@@ -102,13 +100,9 @@ export const PayoutListPage = () => {
     if (selectedEmail) {
       const params: ExtensionPayoutExcelParams = {
         mid: mid,
-        searchDateType: searchDateType,
+        email: selectedEmail,
         fromDate: fromDate,
         toDate: toDate,
-        status: status,
-        minAmount: minAmount,
-        maxAmount: maxAmount,
-        //email: selectedEmail
       };
       extensionPayoutExcel(params).then((rs: ExtensionPayoutExcelResponse) => {
         console.log('Excel Download Status:', rs);
@@ -127,9 +121,6 @@ export const PayoutListPage = () => {
   };
   const onClickToDisbursementStatus = (val: PayoutDisbursementStatus) => {
     setStatus(val);
-    callExtensionPayoutList({
-      status: val
-    });
   };
 
   useEffect(() => {
@@ -145,9 +136,9 @@ export const PayoutListPage = () => {
   ]);
 
   const getListDateGroup = () => {
-    let rs= [];
+    let rs = [];
     let date = '';
-    let list= [];
+    let list = [];
     for (let i = 0; i < listItems.length; i++) {
       let itemDateStr = '';
       if (searchDateType === PayoutSearchDateType.REQUEST_DATE) {
@@ -190,6 +181,10 @@ export const PayoutListPage = () => {
     return rs;
   };
 
+  if (!hasAccess) {
+    return <AccessDeniedDialog />;
+  }
+
   return (
     <>
       <main>
@@ -198,19 +193,19 @@ export const PayoutListPage = () => {
             <section className="summary-section">
               <div className="credit-controls">
                 <div>
-                  <input 
+                  <input
                     className="credit-period"
                     type="text"
-                    value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
-                    readOnly={ true }
+                    value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
+                    readOnly={true}
                   />
-                  <button 
-                    className="filter-btn" 
+                  <button
+                    className="filter-btn"
                     aria-label="필터"
-                    onClick={ () => onClickToOpenFilter() }
+                    onClick={() => onClickToOpenFilter()}
                   >
-                    <img 
-                      src={ IMAGE_ROOT + '/ico_setting.svg' }
+                    <img
+                      src={IMAGE_ROOT + '/ico_setting.svg'}
                       alt="검색옵션"
                     />
                   </button>
@@ -218,10 +213,10 @@ export const PayoutListPage = () => {
                 <button
                   className="download-btn"
                   aria-label="다운로드"
-                  onClick={ () => onClickToOpenEmailBottomSheet() }
+                  onClick={() => onClickToOpenEmailBottomSheet()}
                 >
                   <img
-                    src={ IMAGE_ROOT + '/ico_download.svg' }
+                    src={IMAGE_ROOT + '/ico_download.svg'}
                     alt="다운로드"
                   />
                 </button>
@@ -240,52 +235,52 @@ export const PayoutListPage = () => {
 
             <section className="filter-section">
               <SortTypeBox
-                sortType={ sortType }
-                onClickToSort={ onClickToSort }
+                sortType={sortType}
+                onClickToSort={onClickToSort}
               ></SortTypeBox>
               <div className="excrow mr-0">
                 <div className="full-menu-keywords no-padding">
-                {
-                  PayoutDisbursementStatusBtnGroup.map((value, index) => (
-                    <span 
-                      key={ `key-service-code=${ index }` }
-                      className={ `keyword-tag ${(status === value.value)? 'active': ''}` }
-                      onClick={ () => onClickToDisbursementStatus(value.value) }
-                    >{ value.name }</span>
-                  ))
-                }
+                  {
+                    PayoutDisbursementStatusBtnGroup.map((value, index) => (
+                      <span
+                        key={`key-service-code=${index}`}
+                        className={`keyword-tag ${(status === value.value) ? 'active' : ''}`}
+                        onClick={() => onClickToDisbursementStatus(value.value)}
+                      >{value.name}</span>
+                    ))
+                  }
                 </div>
               </div>
             </section>
             <section className="transaction-list">
-              { getListDateGroup() }
+              {getListDateGroup()}
             </section>
             <div className="apply-row">
               <button
                 className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToNavigation() }
+                onClick={() => onClickToNavigation()}
               >지급대행 신청</button>
             </div>
           </div>
         </div>
       </main>
       <PayoutFilter
-        filterOn={ filterOn }
-        setFilterOn={ setFilterOn }
-        mid={ mid }
-        searchDateType={ searchDateType }
-        fromDate={ fromDate }
-        toDate={ toDate }
-        status= { status }
-        minAmount={ minAmount }
-        maxAmount={ maxAmount }
-        setMid={ setMid }
-        setSearchDateType={ setSearchDateType }
-        setFromDate={ setFromDate }
-        setToDate={ setToDate }
-        setStatus={ setStatus }
-        setMinAmount={ setMinAmount }
-        setMaxAmount={ setMaxAmount }
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+        mid={mid}
+        searchDateType={searchDateType}
+        fromDate={fromDate}
+        toDate={toDate}
+        status={status}
+        minAmount={minAmount}
+        maxAmount={maxAmount}
+        setMid={setMid}
+        setSearchDateType={setSearchDateType}
+        setFromDate={setFromDate}
+        setToDate={setToDate}
+        setStatus={setStatus}
+        setMinAmount={setMinAmount}
+        setMaxAmount={setMaxAmount}
       ></PayoutFilter>
       <EmailBottomSheet
         bottomSheetOn={emailBottomSheetOn}