Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

2025-10-25 21:48:27 +09:00
parent 9cffa264e7 b10376e171
commit db0418177c
33 changed files with 657 additions and 284 deletions
--- a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
+++ b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
@@ -22,12 +22,18 @@ import { useStore } from '@/shared/model/store';
 import { AccountHolderAuthListItem, AccountHolderAuthStatus, ExtensionAccountHolderAuthContentItem, ExtensionAccountHolderAuthDownloadExcelParams, ExtensionAccountHolderAuthDownloadExcelResponse } from '@/entities/additional-service/model/account-holder-auth/types';
 import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';

 export const AccountHolderAuthPage = () => {
  const { navigate } = useNavigate();

  const userMid = useStore.getState().UserStore.mid;

+  // 권한 체크
+  const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+    extensionCode: 'ACCOUNT_AUTH'
+  });
+
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<ExtensionAccountHolderAuthContentItem>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -115,6 +121,10 @@ export const AccountHolderAuthPage = () => {
    authStatus
  ]);

+  if (!hasAccess) {
+    return <AccessDeniedDialog />;
+  }
+
  return (
    <>
      <main>
--- a/src/pages/additional-service/account-holder-auth/detail-page.tsx
+++ b/src/pages/additional-service/account-holder-auth/detail-page.tsx
@@ -83,7 +83,7 @@ export const AccountHolderAuthDetailPage = () => {
                                </li>
                                <li className="kv-row">
                                    <span className="k">계좌번호</span>
-                                    <span className="v">{detail?.bankName}</span>
+                                    <span className="v">{detail?.accountNo}</span>
                                </li>
                                <li className="kv-row">
                                    <span className="k">예금주</span>
--- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
+++ b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
@@ -22,12 +22,18 @@ import { useStore } from '@/shared/model/store';
 import { AccountHolderSearchListItem, AccountHolderSearchCl, AccountHolderResultStatus } from '@/entities/additional-service/model/account-holder-search/types';
 import { resultStatusBtnGroup } from '@/entities/additional-service/model/account-holder-search/constant';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';

 export const AccountHolderSearchPage = () => {
  const { navigate } = useNavigate();

  const userMid = useStore.getState().UserStore.mid;

+  // 권한 체크
+  const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+    extensionCode: 'SEARCH_ACCOUNT_NAME'
+  });
+
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<AccountHolderSearchListItem>>([]);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
@@ -125,6 +131,10 @@ export const AccountHolderSearchPage = () => {
    resultStatus
  ]);

+  if (!hasAccess) {
+    return <AccessDeniedDialog />;
+  }
+
  return (
    <>
      <main>
--- a/src/pages/additional-service/account-holder-search/request-page.tsx
+++ b/src/pages/additional-service/account-holder-search/request-page.tsx
@@ -18,7 +18,7 @@ export const AccountHolderSearchRequestPage = () => {
    const midOptions = useStore.getState().UserStore.selectOptionsMids
    const bankList = useStore.getState().CommonStore.bankList

-    useSetHeaderTitle('계좌성명조회_신청');
+    useSetHeaderTitle('계좌성명조회 신청');
    useSetHeaderType(HeaderType.LeftArrow);
    useSetFooterMode(false);
    useSetOnBack(() => {
--- a/src/pages/additional-service/alimtalk/detail-page.tsx
+++ b/src/pages/additional-service/alimtalk/detail-page.tsx
@@ -12,7 +12,7 @@ import { useEffect, useState } from 'react';
 import { ExtensionAlimtalkDetailParams, ExtensionAlimtalkDetailResponse } from '@/entities/additional-service/model/alimtalk/types';
 import { useExtensionAlimtalkDetailMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-detail-mutation';
 import moment from 'moment';
-import { getAlimtalkAlimClText, getAlimtalkSendClTypeText, getAlimtalkSendTypeText } from '@/entities/additional-service/model/alimtalk/constant';
+import { getAlimtalkAlimClText, getAlimtalkSendClTypeText, getAlimtalkSendTypeText, getAlimtalkServiceCodeText } from '@/entities/additional-service/model/alimtalk/constant';

 export const AlimtalkDetailPage = () => {
  const { navigate } = useNavigate();
@@ -60,7 +60,7 @@ export const AlimtalkDetailPage = () => {
              <div className="num-amount">
                <span className="amount">{ detail?.receiverName }</span>
              </div>
-              <div className="num-store">{ detail?.merchantName }</div>
+              <div className="num-store">{ detail?.companyName }</div>
              <div className="num-day">{ getDate(detail?.sendDate) }</div>
            </div>
            <div className="detail-divider"></div>
@@ -89,7 +89,7 @@ export const AlimtalkDetailPage = () => {
                </li>
                <li className="kv-row">
                  <span className="k">결제서비스</span>
-                  <span className="v">{ detail?.paymentMethod }</span>
+                  <span className="v">{ getAlimtalkServiceCodeText(detail?.serviceCode) }</span>
                </li>
                <li className="kv-row">
                  <span className="k">알림구분</span>
--- a/src/pages/additional-service/alimtalk/list-page.tsx
+++ b/src/pages/additional-service/alimtalk/list-page.tsx
@@ -31,11 +31,17 @@ import { useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { AlimtalkFilter } from '@/entities/additional-service/ui/filter/alimtalk-filter';
+import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';

 export const AlimtalkListPage = () => {
  const { navigate } = useNavigate();
  const userMid = useStore.getState().UserStore.mid;

+  // 권한 체크
+  const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+    extensionCode: 'ALIMTALK'
+  });
+
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<AlimtalkListContent>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -182,6 +188,10 @@ export const AlimtalkListPage = () => {
    sendCl
  ]);

+  if (!hasAccess) {
+    return <AccessDeniedDialog />;
+  }
+
  return (
    <>
      <main>
--- a/src/pages/additional-service/alimtalk/setting-page.tsx
+++ b/src/pages/additional-service/alimtalk/setting-page.tsx
@@ -165,9 +165,9 @@ export const AlimtalkSettingPage = () => {
                  ></AlimTalkSettingServiceRow>
                  <AlimTalkSettingServiceRow
                    title='신용카드(취소)'
-                    merchantFlag={merchantBankApprovalFlag}
+                    merchantFlag={merchantCardCancelFlag}
                    userFlag={userCardCancelFlag}
-                    setMerchantFlag={setMerchantBankApprovalFlag}
+                    setMerchantFlag={setMerchantCardCancelFlag}
                    setUserFlag={setUserCardCancelFlag}
                  ></AlimTalkSettingServiceRow>
                  <AlimTalkSettingServiceRow
--- a/src/pages/additional-service/ars/list-page.tsx
+++ b/src/pages/additional-service/ars/list-page.tsx
@@ -21,12 +21,18 @@ import { ArsPaymentStatusBtnGroup } from '@/entities/additional-service/model/ar
 import { ArsFilter } from '@/entities/additional-service/ui/filter/ars-filter';
 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 ArsListPage = () => {
  const { navigate } = useNavigate();

  const userMid = useStore.getState().UserStore.mid;

+  // 권한 체크
+  const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+    extensionCode: 'ARS'
+  });
+
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<ArsListContent>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -119,9 +125,6 @@ export const ArsListPage = () => {
    setPaymentStatus(val);
  };

-  useEffect(() => {
-    callList();
-  }, []);
  useEffect(() => {
    callList();
  }, [
@@ -181,6 +184,10 @@ export const ArsListPage = () => {
    return rs;
  }

+  // if (!hasAccess) {
+  //   return <AccessDeniedDialog />;
+  // }
+
  return (
    <>
      <main>
--- a/src/pages/additional-service/face-auth/face-auth-page.tsx
+++ b/src/pages/additional-service/face-auth/face-auth-page.tsx
@@ -22,11 +22,17 @@ import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { useExtensionFaceAuthListtMutation } from '@/entities/additional-service/api/face-auth/use-extension-face-auth-list-mutation';
 import { useExtensionFaceAuthDownloadExcelMutation } from '@/entities/additional-service/api/face-auth/use-extension-face-auth-download-excel-mutation';
 import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
+import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';

 export const FaceAuthPage = () => {
    const { navigate } = useNavigate();
    const userMid = useStore.getState().UserStore.mid;

+    // 권한 체크
+    const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+        extensionCode: 'FACE_AUTH'
+    });
+    
    const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
    const [listItems, setListItems] = useState<Array<FaceAuthListItem>>([]);
    const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -54,7 +60,7 @@ export const FaceAuthPage = () => {
        authResult?: FaceAuthResult
    }) => {
        let params: ExtensionFaceAuthListParams = {
-            mid: mid,
+            mid: "faceauth0m",
            userMallId: userMallId,
            fromDate: fromDate,
            toDate: toDate,
@@ -80,7 +86,7 @@ export const FaceAuthPage = () => {
    const onSendRequest = (selectedEmail?: string) => {
        if (selectedEmail) {
            const params: ExtensionFaceAuthExcelDownlaodPrams = {
-                mid: mid,
+                mid: "faceauth0m",
                email: selectedEmail,
                fromDate: fromDate,
                toDate: toDate
@@ -106,9 +112,9 @@ export const FaceAuthPage = () => {
    };

    const getListDateGroup = () => {
-        let rs= [];
+        let rs = [];
        let date = '';
-        let list= [];
+        let list = [];
        for (let i = 0; i < listItems.length; i++) {
            let item = listItems[i];
            if (!!item) {
@@ -155,6 +161,10 @@ export const FaceAuthPage = () => {
        callList();
    }, [mid, userMallId, fromDate, toDate, transType, authResult]);

+    // if (!hasAccess) {
+    //     return <AccessDeniedDialog />;
+    // }
+    
    return (
        <>
            <main>
--- a/src/pages/additional-service/fund-account/transfer-list-page.tsx
+++ b/src/pages/additional-service/fund-account/transfer-list-page.tsx
@@ -1,20 +1,24 @@
 import { useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { FundAccountTab } from '@/entities/additional-service/ui/fund-account/tab'; 
+import { FundAccountTab } from '@/entities/additional-service/ui/fund-account/tab';
 import { FundAccountTransferListWrap } from '@/entities/additional-service/ui/fund-account/transfer-list-wrap';
 import { FundAccountTabKeys } from '@/entities/additional-service/model/fund-account/types';
 import { HeaderType } from '@/entities/common/model/types';
-import { 
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode,
+import {
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';

 export const FundAccountTransferListPage = () => {
  const { navigate } = useNavigate();
-
+  // 권한 체크
+  const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+    extensionCode: 'FUND_ACCOUNT'
+  });
  const [activeTab, setActiveTab] = useState<FundAccountTabKeys>(FundAccountTabKeys.TransferList);

  useSetHeaderTitle('자금이체');
@@ -24,12 +28,16 @@ export const FundAccountTransferListPage = () => {
    navigate(PATHS.home);
  });

+  if (!hasAccess) {
+    return <AccessDeniedDialog />;
+  }
+
  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane pt-46 active">
-            <FundAccountTab activeTab={ activeTab }></FundAccountTab>
+            <FundAccountTab activeTab={activeTab}></FundAccountTab>
            <FundAccountTransferListWrap></FundAccountTransferListWrap>
          </div>
        </div>
--- a/src/pages/additional-service/fund-account/transfer-request-page.tsx
+++ b/src/pages/additional-service/fund-account/transfer-request-page.tsx
@@ -138,7 +138,7 @@ export const FundAccountTransferRequestPage = () => {
                    <input
                      type="text"
                      value={accountName}
-                      onChange={(e) => setAccountName(e.target.value)}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setAccountName(e.target.value) }
                    />
                  </div>
                </div>
@@ -159,7 +159,7 @@ export const FundAccountTransferRequestPage = () => {
                    <input
                      type="text"
                      value={moid}
-                      onChange={(e) => setMoid(e.target.value)}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
                    />
                  </div>
                </div>
--- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
+++ b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
@@ -22,11 +22,17 @@ import { useStore } from '@/shared/model/store';
 import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types';
 import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';

 export const KeyInPaymentPage = () => {
  const { navigate } = useNavigate();
  const userMid = useStore.getState().UserStore.mid;

+  // 권한 체크
+  const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+    extensionCode: 'KEYIN'
+  });
+
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<KeyInPaymentListItem>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -136,6 +142,11 @@ export const KeyInPaymentPage = () => {
    maxAmount
  ]);

+  // if (!hasAccess) {
+  //   return <AccessDeniedDialog />;
+  // }
+
+
  return (
    <>
      <main>
--- a/src/pages/additional-service/link-payment/link-payment-history-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-history-page.tsx
@@ -12,6 +12,7 @@ import {
    useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { LinkPaymentTabKeys } from '@/entities/additional-service/model/link-pay/types';
+import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';

 /**
 * 발송내역 탭 화면
@@ -20,6 +21,11 @@ import { LinkPaymentTabKeys } from '@/entities/additional-service/model/link-pay
 export const LinkPaymentHistoryPage = () => {
    const { navigate } = useNavigate();

+    // 권한 체크
+    const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+        extensionCode: 'LINKPAY'
+    });
+
    const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)

    useSetHeaderTitle('링크결제')
@@ -29,6 +35,10 @@ export const LinkPaymentHistoryPage = () => {
        navigate(PATHS.home);
    });

+    if (!hasAccess) {
+        return <AccessDeniedDialog />;
+    }
+
    return (
        <>
            <main>
--- a/src/pages/additional-service/link-payment/link-payment-wait-detail-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-wait-detail-page.tsx
@@ -16,7 +16,8 @@ import { AdditionalServiceCategory, DetailResponse, PaymentInfo, TitleInfo } fro
 import { useExtensionLinkPayWaitDetailMutation, } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-wait-detail-mutation';
 import { PaymentInfoWrap } from '@/entities/additional-service/ui/info-wrap/payment-info-wrap';
 import { useExtensionLinkPayWaitDeleteMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-wait-delete-mutation';
-import { ExtensionLinkPayWaitDeleteParams, ExtensionLinkPayWaitDetailParams } from '@/entities/additional-service/model/link-pay/types';
+import { ExtensionLinkPayWaitDeleteParams, ExtensionLinkPayWaitDetailParams, LinkPaymentProcessStatus } from '@/entities/additional-service/model/link-pay/types';
+import { snackBar } from '@/shared/lib';

 export const LinkPaymentWaitDetailPage = () => {
  const { navigate } = useNavigate();
@@ -54,13 +55,13 @@ export const LinkPaymentWaitDetailPage = () => {
      requestId: requestId
    }
    linkPayWaitDelete(deleteParam)
-      .then((response) => {
-        console.log("Delete 성공 응답: ", response)
+      .then((rs) => {
        onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend)
+        snackBar("삭제를 성공하였습니다.")
      })
      .catch((error) => {
        console.error("Resend 실패: ", error);
-
+        snackBar(`[실패] ${error?.response?.data?.message}`)
      });
  }

@@ -120,6 +121,7 @@ export const LinkPaymentWaitDetailPage = () => {
            <button
              className="btn-50 btn-blue flex-1"
              onClick={() => onClickToCancel()}
+              disabled={paymentInfo?.processStatus !== LinkPaymentProcessStatus.SEND_REQUEST}
            >삭제</button>
          </div>
        </div>
--- a/src/pages/additional-service/list-page.tsx
+++ b/src/pages/additional-service/list-page.tsx
@@ -2,16 +2,16 @@ import { ChangeEvent, 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 { IMAGE_ROOT } from '@/shared/constants/common';
-import { 
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode,
+import {
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useExtensionListMutation } from '@/entities/additional-service/api/use-extension-list-mutation';
-import { ExtensionListParams, ExtensionListResponse } from '@/entities/additional-service/model/types';
+import { ExtensionListParams, ExtensionListResponse, SERVICE_MAP } from '@/entities/additional-service/model/types';
 import { useStore } from '@/shared/model/store';
+import { Dialog } from '@/shared/ui/dialogs/dialog';

 export const ListPage = () => {
  const { navigate } = useNavigate();
@@ -19,6 +19,9 @@ export const ListPage = () => {
  const userMid = useStore.getState().UserStore.mid;

  const [mid, setMid] = useState<string>(userMid);
+  const [activeServices, setActiveServices] = useState<string[]>([]);
+  const [availableServices, setAvailableServices] = useState<string[]>([]);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);

  const { mutateAsync: extensionList } = useExtensionListMutation();

@@ -34,112 +37,63 @@ export const ListPage = () => {
      mid: mid
    }
    extensionList(params).then((rs: ExtensionListResponse) => {
-      console.log(rs)
+      setActiveServices(rs.activeExtensionList || []);
+      setAvailableServices(rs.availableExtensionList || []);
    });
  };

-  const activeExtensionList = [
-    {
-      className: 'list-wrap01', serviceName: 'SMS 결제 통보', serviceDesc: '입금 요청부터 완료까지 SMS 자동 전송',
-      icon: IMAGE_ROOT + '/icon_ing03.svg', path: PATHS.additionalService.smsPaymentNotification
-    },
-    {
-      className: 'list-wrap01', serviceName: '신용카드 ARS 결제', serviceDesc: '전화 한 통으로 결제 성공 편리하고 안전한 서비스',
-      icon: IMAGE_ROOT + '/icon_ing01.svg', path: PATHS.additionalService.ars.list
-    },
-    {
-      className: 'list-wrap01', serviceName: 'KEY-IN 결제', serviceDesc: '상담 중 카드정보 입력으로 간편한 결제 지원',
-      icon: IMAGE_ROOT + '/icon_ing02.svg', path: PATHS.additionalService.keyInPayment.list
-    },
-    {
-      className: 'list-wrap01', serviceName: '계좌성명조회', serviceDesc: '예금주 정보 입력으로 즉시 예금주 확인',
-      icon: IMAGE_ROOT + '/icon_ing04.svg', path: PATHS.additionalService.accountHolderSearch.list
-    },
-  ];
-  const availableExtensionList = [
-    {
-      className: 'list-wrap02', serviceName: '지급대행', serviceDesc: '하위 가맹점에 빠른 정산금 지급 지급대행 서비스',
-      icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.payout.list
-    },
-    {
-      className: 'list-wrap02', serviceName: '정산대행', serviceDesc: '하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스',
-      icon: IMAGE_ROOT + '/icon_ing06.svg', path: PATHS.additionalService.settlementAgency.manage
-    },
-    {
-      className: 'list-wrap02', serviceName: '링크 결제', serviceDesc: '결제 링크 전송만으로 어디서든 결제 가능 서비스',
-      icon: IMAGE_ROOT + '/icon_ing07.svg', path: PATHS.additionalService.linkPayment.shippingHistory
-    },
-    {
-      className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',
-      icon: IMAGE_ROOT + '/icon_ing08.svg', path: PATHS.additionalService.fundAccount.transferList
-    },
-    {
-      className: 'list-wrap02', serviceName: '계좌점유인증', serviceDesc: '1원 송금으로 실제 계좌 점유 확인 여부',
-      icon: IMAGE_ROOT + '/icon_ing09.svg', path: PATHS.additionalService.accountHolderAuth.list
-    },
-    {
-      className: 'list-wrap02', serviceName: '알림톡 결제통보', serviceDesc: '결제 상태를 알림톡으로 쉽고 빠른 안내',
-      icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.alimtalk.list
-    },
-  ];
-
-  const onClickToNavigate = (path?: string) => {
-    if(!!path){
-      navigate(path);
-    }
-  };
-
  const getActiveExtensionList = () => {
-    let rs = [];
-    for(let i=0;i<activeExtensionList.length;i++){
-      rs.push(
-        <div 
-          key={ 'key-active-' + i }
-          className={ activeExtensionList[i]?.className }
-          onClick={ () => onClickToNavigate(activeExtensionList[i]?.path) }
-        >
-          <div>
-            <div className="service-name">{ activeExtensionList[i]?.serviceName }</div>
-            <p className="service-desc">{ activeExtensionList[i]?.serviceDesc }</p>
-          </div>
-          <img 
-            src={ activeExtensionList[i]?.icon } 
-            alt={ activeExtensionList[i]?.serviceName }
-          />
+    const filteredServices = SERVICE_MAP.filter(service =>
+      activeServices.includes(service.code)
+    );
+
+    return filteredServices.map((service) => (
+      <div
+        key={'key-active-' + service.code}
+        className="list-wrap01"
+        onClick={() => service.path && navigate(service.path)}
+      >
+        <div>
+          <div className="service-name">{service.serviceName}</div>
+          <p className="service-desc">{service.serviceDesc}</p>
        </div>
-      );
-    }
-    return rs;
+        <img
+          src={service.icon}
+          alt={service.serviceName}
+        />
+      </div>
+    ));
  };
+
  const getAvailableExtensionList = () => {
-    let rs = [];
-    for(let i=0;i<availableExtensionList.length;i++){
-      rs.push(
-        <div 
-          key={ 'key-available-' + i }
-          className={ availableExtensionList[i]?.className }
-          onClick={ () => onClickToNavigate(availableExtensionList[i]?.path) }
-        >
-          <div>
-            <div className="service-name">{ availableExtensionList[i]?.serviceName }</div>
-            <p className="service-desc">{ availableExtensionList[i]?.serviceDesc }</p>
-          </div>
-          <img 
-            src={ availableExtensionList[i]?.icon } 
-            alt={ availableExtensionList[i]?.serviceName }
-          />
+    const filteredServices = SERVICE_MAP.filter(service =>
+      availableServices.includes(service.code)
+    );
+
+    return filteredServices.map((service) => (
+      <div
+        key={'key-available-' + service.code}
+        className="list-wrap02"
+        onClick={() => setDialogOpen(true)}
+      >
+        <div>
+          <div className="service-name">{service.serviceName}</div>
+          <p className="service-desc">{service.serviceDesc}</p>
        </div>
-      );
-    }
-    return rs;
+        <img
+          src={service.icon}
+          alt={service.serviceName}
+        />
+      </div>
+    ));
  };

  useEffect(() => {
-    if(!!mid){
+    if (!!mid) {
      callExtensionList();
    }
  }, [mid]);
-  
+
  return (
    <>
      <main>
@@ -147,28 +101,41 @@ export const ListPage = () => {
          <div className="tab-pane sub active">
            <div className="ing-list">
              <div className="input-wrapper top-select">
-              <select 
-                value={ mid }
-                onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
-              >
-                { 
-                  midOptions.map((value, index) => (
-                    <option
-                      key={ value.value }
-                      value={ value.value }
-                    >{ value.name }</option>
-                  )) 
-                } 
-              </select>
+                <select
+                  value={mid}
+                  onChange={(e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value)}
+                >
+                  {
+                    midOptions.map((value) => (
+                      <option
+                        key={value.value}
+                        value={value.value}
+                      >{value.name}</option>
+                    ))
+                  }
+                </select>
              </div>
              <h3 className="ing-title">사용중인 서비스</h3>
-              { getActiveExtensionList() }
+              {getActiveExtensionList()}
              <h3 className="ing-title">신청 가능한 서비스</h3>
-              { getAvailableExtensionList() }
+              {getAvailableExtensionList()}
            </div>
          </div>
        </div>
      </main>
+      <Dialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        message={
+          <>
+            이용 중이지 않은 서비스입니다.<br />
+            가입 문의는 영업 담당자 또는 고객센터로 문의해 주세요.
+          </>
+        }
+        buttonLabel={['확인']}
+        onConfirmClick={() => setDialogOpen(false)}
+        afterLeave={() => { }}
+      />
    </>
  )
 };
--- a/src/pages/additional-service/payout/detail-page.tsx
+++ b/src/pages/additional-service/payout/detail-page.tsx
@@ -13,6 +13,9 @@ import { ExtensionPayoutDetailDownloadCertificateParams, ExtensionPayoutDetailDo
 import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { useExtensionPayoutDetailDownloadCertificateMutation } from '@/entities/additional-service/api/payout/use-extension-payout-detail-download-cetificate-mutation';
+import moment from 'moment';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadTypeBottomSheet } from '@/entities/common/ui/download-type-bottom-sheet';

 export const PayoutDetailPage = () => {
  const { navigate } = useNavigate();
@@ -21,9 +24,9 @@ export const PayoutDetailPage = () => {
  const tid = location.state.tid;
  const mid = location.state.mid;

-  const [requestType, setRequestType] = useState<string>('');
-  const [email, setEmail] = useState<string>('');
  const [detail, setDetail] = useState<ExtensionPayoutDetailResponse>();
+  const [downloadTypeBottomSheetOn, setDownloadTypeBottomSheetOn] = useState<boolean>(false);
+  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);

  const { mutateAsync: extensionPayoutDetail } = useExtensionPayoutDetailMutation();
  const { mutateAsync: extensionPayoutDetailDownloadCertification } = useExtensionPayoutDetailDownloadCertificateMutation();
@@ -47,15 +50,48 @@ export const PayoutDetailPage = () => {
  });

  const onClickToDownload = () => {
-    let params: ExtensionPayoutDetailDownloadCertificateParams = {
-      tid: tid,
-      mid: mid,
-      requestType: requestType,
-      email: email
-    };
-    extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
-      console.log(rs);
-    });
+    setDownloadTypeBottomSheetOn(true);
+  };
+
+  const onSelectDownloadType = (type: 'IMAGE' | 'EMAIL') => {
+    if (type === 'IMAGE') {
+      // 이미지 저장은 바로 실행
+      const params: ExtensionPayoutDetailDownloadCertificateParams = {
+        mid: mid,
+        tid: tid,
+        requestType: 'IMAGE',
+        email: ''
+      };
+      extensionPayoutDetailDownloadCertification(params)
+        .then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
+          console.log('Certificate Download Status:', rs);
+        })
+        .catch((error) => {
+          console.error('Certificate Download Failed:', error);
+        });
+    } else {
+      // 이메일은 EmailBottomSheet 열기
+      setEmailBottomSheetOn(true);
+    }
+  };
+
+  const onSendRequest = (selectedEmail?: string) => {
+    if (selectedEmail) {
+      const params: ExtensionPayoutDetailDownloadCertificateParams = {
+        mid: mid,
+        tid: tid,
+        requestType: 'EMAIL',
+        email: selectedEmail
+      };
+      extensionPayoutDetailDownloadCertification(params)
+        .then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
+          console.log('Certificate Download Status:', rs);
+        })
+        .catch((error) => {
+          console.error('Certificate Download Failed:', error);
+        });
+    }
+    setEmailBottomSheetOn(false);
  };

  useEffect(() => {
@@ -105,11 +141,11 @@ export const PayoutDetailPage = () => {
                </li>
                <li className="kv-row">
                  <span className="k">요청일</span>
-                  <span className="v">{ detail?.requestDate }</span>
+                  <span className="v">{ moment(detail?.requestDate).format('YYYY.MM.DD') }</span>
                </li>
                <li className="kv-row">
                  <span className="k">지급일시</span>
-                  <span className="v">{ detail?.settlementDateTime }</span>
+                  <span className="v">{moment(detail?.settlementDateTime,'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</span>
                </li>
                <li className="kv-row">
                  <span className="k">사업자번호</span>
@@ -140,6 +176,18 @@ export const PayoutDetailPage = () => {
          </div>
        </div>
      </main>
+      <DownloadTypeBottomSheet
+        bottomSheetOn={downloadTypeBottomSheetOn}
+        setBottomSheetOn={setDownloadTypeBottomSheetOn}
+        onSelectType={onSelectDownloadType}
+      />
+      <EmailBottomSheet
+        bottomSheetOn={emailBottomSheetOn}
+        setBottomSheetOn={setEmailBottomSheetOn}
+        imageSave={false}
+        sendEmail={true}
+        sendRequest={onSendRequest}
+      />
    </>
  );
 };
--- a/src/pages/additional-service/payout/list-page.tsx
+++ b/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}
--- a/src/pages/additional-service/payout/request-page.tsx
+++ b/src/pages/additional-service/payout/request-page.tsx
@@ -8,12 +8,14 @@ import {
  useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 import { useExtensionPayoutRequestMutation } from "@/entities/additional-service/api/payout/use-extension-payout-request-mutation";
 import { ExtensionPayoutRequestParams, ExtensionPayoutRequestResponse } from "@/entities/additional-service/model/payout/types";
 import NiceCalendar from "@/shared/ui/calendar/nice-calendar";
 import { useStore } from "@/shared/model/store";
 import moment from 'moment';
+import { NumericFormat } from "react-number-format";
+import { snackBar } from "@/shared/lib";

 export const PayoutRequestPage = () => {
  const { navigate } = useNavigate();
@@ -41,9 +43,14 @@ export const PayoutRequestPage = () => {
      disbursementAmount: disbursementAmount,
      settlementDate: settlementDate,
    };
-    extensionPayoutRequest(params).then((rs: ExtensionPayoutRequestResponse) => {
-      navigate(PATHS.additionalService.payout.list);
-    });
+    extensionPayoutRequest(params)
+    .then((rs) => {
+      snackBar("신청을 성공하였습니다.")
+    })
+    .catch((error) => {
+      snackBar(`[실패] ${error?.response?.data?.message} `|| '[실패] 신청을 실패하였습니다.')
+    })
+    ;
  };

  const isFormValid = () => {
@@ -58,9 +65,8 @@ export const PayoutRequestPage = () => {
    setSettlementDate(moment(date).format('YYYYMMDD'));
    setCalendarOpen(false);
  };
-  const onClickToOpenCalendar = () => {
-    setCalendarOpen(true);
-  };
+
+
  return (
    <>
      <main>
@@ -69,44 +75,44 @@ export const PayoutRequestPage = () => {
            <div className="ing-list">
              <div className="billing-form gap-30">
                <div className="billing-row">
-                  <div className="billing-label">서브ID<span>*</span></div>
+                  <div className="billing-label">서브ID</div>
                  <div className="billing-field">
                    <input
                      type="text"
                      value={submallId}
-                      onChange={(e) => setSubmallId(e.target.value)}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setSubmallId(e.target.value)}
                    />
                  </div>
                </div>
                <div className="billing-row">
-                  <div className="billing-label">지급액<span>*</span></div>
+                  <div className="billing-label">지급액</div>
                  <div className="billing-field">
-                    <input
-                      type="text"
+                    <NumericFormat
                      value={disbursementAmount}
-                      onChange={(e) => setDisbursementAmount(parseInt(e.target.value))}
-                    />
+                      allowNegative={false}
+                      displayType="input"
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setDisbursementAmount(parseInt(e.target.value))}
+                    ></NumericFormat>
                  </div>
                </div>
                <div className="billing-row">
-                  <div className="billing-label">지급일<span>*</span></div>
+                  <div className="billing-label">지급일</div>
                  <div className="billing-field">
-                    <div className="input-wrapper date">
+                    <div className="input-wrapper date wid-100">
                      <input
-                        className="date-input"
                        type="text"
                        placeholder="날짜 선택"
-                        value={settlementDate}
+                        value={settlementDate ? moment(settlementDate).format('YYYY.MM.DD') : '' }
+                        readOnly={true}
                      />
                      <button
                        className="date-btn"
                        type="button"
-                        onClick={() => onClickToOpenCalendar()}
-                        disabled={!isFormValid}
+                        onClick={() => setCalendarOpen(true)}
                      >
                        <img
                          src={IMAGE_ROOT + '/ico_date.svg'}
-                          alt="날짜 선택"
+                          alt="clear"
                        />
                      </button>
                    </div>
@@ -129,6 +135,7 @@ export const PayoutRequestPage = () => {
        setCalendarOpen={setCalendarOpen}
        calendarType={CalendarType.Single}
        setNewDate={setNewDate}
+        minDate={new Date()}
      ></NiceCalendar>
    </>
  );
--- a/src/pages/additional-service/sms-payment/sms-payment-page.tsx
+++ b/src/pages/additional-service/sms-payment/sms-payment-page.tsx
@@ -21,12 +21,17 @@ import { useStore } from '@/shared/model/store';
 import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
 import { PATHS } from '@/shared/constants/paths';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
-
+import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';

 export const SmsPaymentPage = () => {
  const { navigate } = useNavigate();
  const userMid = useStore.getState().UserStore.mid;

+  // 권한 체크
+  const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
+    extensionCode: 'SMS'
+  });
+
  const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)

  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
@@ -131,6 +136,10 @@ export const SmsPaymentPage = () => {
    smsCl
  ]);

+  // if (!hasAccess) {
+  //   return <AccessDeniedDialog />;
+  // }
+
  return (
    <>
      <main>