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

- 각 API 오류 수정

src/shared/api/api-url-additional-service.ts

@@ -11,7 +11,7 @@ export const API_URL_ADDITIONAL_SERVICE = {
   },
   extensionAccountHolderAuthDownlaodExcel: () => {
     // POST: 계좌점유인증 엑셀 다운
-    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/account-auth/excel`;
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/account-auth/download/excel`;
   },
   extensionAccountHolderAuthDetail: () => {
     // POST: 계좌점유인증 상세 조회
@@ -97,6 +97,10 @@ export const API_URL_ADDITIONAL_SERVICE = {
     // POST: 부가서비스 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/list`;
   },
+  extensionCheck: () => {
+    // POST: 부가서비스  사용여부 체크
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/check`;
+  },
   extensionKeyinList: () => {
     // POST: KEY-IN 결제 목록 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/keyin/list`;

src/shared/lib/hooks/use-extension-access-check.tsx

@@ -0,0 +1,97 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useExtensionCheckMutation } from '@/entities/additional-service/api/use-extension-check-mutation';
+import { Dialog } from '@/shared/ui/dialogs/dialog';
+import { PATHS } from '@/shared/constants/paths';
+
+interface UseExtensionAccessCheckProps {
+  extensionCode: string;
+  enabled?: boolean;
+}
+
+interface UseExtensionAccessCheckReturn {
+  hasAccess: boolean | null;
+  AccessDeniedDialog: () => React.ReactElement | null;
+}
+
+/**
+ * 부가서비스 접근 권한을 체크하는 훅
+ * 페이지 마운트 시 extensionCheck API를 호출하여 권한을 확인하고,
+ * 권한이 없으면 다이얼로그를 표시한 후 이전 페이지로 이동합니다.
+ */
+export const useExtensionAccessCheck = ({
+  extensionCode,
+  enabled = true
+}: UseExtensionAccessCheckProps): UseExtensionAccessCheckReturn => {
+  const { navigate } = useNavigate();
+  const { mutateAsync: extensionCheck } = useExtensionCheckMutation();
+
+  const [hasAccess, setHasAccess] = useState<boolean | null>(null);
+  const [isChecking, setIsChecking] = useState<boolean>(true);
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!enabled) {
+      setIsChecking(false);
+      setHasAccess(true);
+      return;
+    }
+
+    const checkAccess = async () => {
+      try {
+        setIsChecking(true);
+        const result = await extensionCheck({ extensionCode });
+
+        if (result.checkResult === true) {
+          // 권한 체크 통과
+          setHasAccess(true);
+        } else {
+          // 권한 체크 실패 - 다이얼로그 표시
+          setHasAccess(false);
+          setDialogOpen(true);
+        }
+      } catch (error) {
+        console.error('Extension access check error:', error);
+        // 에러 발생 시에도 다이얼로그 표시
+        setHasAccess(false);
+        setDialogOpen(true);
+      } finally {
+        setIsChecking(false);
+      }
+    };
+
+    checkAccess();
+  }, [extensionCode, enabled]);
+
+  const handleConfirm = () => {
+
+    setDialogOpen(false);
+
+    setTimeout(() => {
+      navigate(PATHS.additionalService.list);
+    }, 0);
+  };
+
+  const AccessDeniedDialog = () => {
+    return (
+      <Dialog
+        open={dialogOpen}
+        onClose={() => {}}
+        message={
+          <>
+            이용 중이지 않은 서비스입니다.<br />
+            가입 문의는 영업 담당자 또는 고객센터로 문의해 주세요.
+          </>
+        }
+        buttonLabel={['확인']}
+        onConfirmClick={handleConfirm}
+        afterLeave={() => {}}
+      />
+    );
+  };
+
+  return {
+    hasAccess,
+    AccessDeniedDialog,
+  };
+};

src/shared/ui/dialogs/dialog.tsx

@@ -36,7 +36,7 @@ export const Dialog = ({
   const { nativeDialog, resetNativeDialog } = useBridge(bridge.store, (state) => state);
 
   const whenToBlock = useCallback(() => open, [open]);
-  //   다이얼로그가 열려있을때 뒤로가기 방지
+
   const blocker = useBlocker(whenToBlock);
   const nativeMessage = nativeDialog?.message;
   const displayMessage = nativeMessage || message;
@@ -68,7 +68,6 @@ export const Dialog = ({
       leaveTo="opacity-0"
     >
       <_Dialog onClose={shouldCloseOnBackdropClick ? onClose : () => null} static={!shouldCloseOnBackdropClick}>
-        {/* The backdrop, rendered as a fixed sibling to the panel container */}
         <div
           id="cancelConfirmPopup"
           className="popup-overlay"