downloadbottomsheet

2025-11-07 17:46:06 +09:00
parent 6b6d3cff0e
commit 1bbf90b98e
24 changed files with 485 additions and 368 deletions
--- a/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx
+++ b/src/entities/additional-service/ui/fund-account/detail/result-detail.tsx
@@ -10,7 +10,7 @@ import {
 import moment from 'moment';
 import { useExtensionFundAccountResultDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-result-detail-mutation';
 import { useExtensionFundAccountDownloadReceiptMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-download-certificate-mutation';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { showAlert } from '@/widgets/show-alert';
@@ -31,7 +31,8 @@ export const FundAccountResultDetail = ({
  const { t } = useTranslation();

  const [detail, setDetail] = useState<ExtensionFundAccountResultDetailResponse>();
-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation();
  const { mutateAsync: extensionFundAccountDownlaodReceipt } = useExtensionFundAccountDownloadReceiptMutation();
@@ -53,16 +54,21 @@ export const FundAccountResultDetail = ({
    });
  };

-  const onClickToOpenEmailBottomSheet = () => {
-    setEmailBottomSheetOn(true);
+  const onClickToOpenDownloadBottomSheet = () => {
+    setDownloadBottomSheetOn(true);
  };

-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownload = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      let params: ExtensionFundAccountDownloadReceiptParams = {
        mid: mid,
        tid: tid,
-        email: selectedEmail
+        email: userEmail
      };
      extensionFundAccountDownlaodReceipt(params).then((rs: ExtensionFundAccountDownloadReceiptResponse) => {
        console.log('Receipt Download Status:', rs);
@@ -73,7 +79,6 @@ export const FundAccountResultDetail = ({
        }
      });
    }
-    setEmailBottomSheetOn(false);
  };

  const onClickToClose = () => {
@@ -123,7 +128,7 @@ export const FundAccountResultDetail = ({
              <button
                type="button"
                className="receipt-btn"
-                onClick={onClickToOpenEmailBottomSheet}
+                onClick={ onClickToOpenDownloadBottomSheet }
              >
                <span className="icon-24 download"></span>
                <span>{t('additionalService.fundAccount.depositCertificate')}</span>
@@ -178,14 +183,14 @@ export const FundAccountResultDetail = ({
          </div>
        </div>
      </motion.div>
-      { !!emailBottomSheetOn &&
-        <EmailBottomSheet
-          bottomSheetOn={ emailBottomSheetOn }
-          setBottomSheetOn={ setEmailBottomSheetOn }
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageMode={ false }
          emailMode={ true }
-          sendRequest={ onSendRequest }
-        ></EmailBottomSheet>
+          sendRequest={ onRequestDownload }
+        ></DownloadBottomSheet>
      }
    </>
  );
--- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
@@ -15,7 +15,7 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { getFundAccountResultStatusBtnGroup, getFundAccountStatusBtnGroup } from '../../model/fund-account/constant';
 import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
 import { useStore } from '@/shared/model/store';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
 import { FundAccountResultDetail } from './detail/result-detail';
@@ -45,7 +45,8 @@ export const FundAccountResultListWrap = () => {
  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
  const [bankCode, setBankCode] = useState<string>('');
  const [resultStatus, setResultStatus] = useState<FundAccountResultStatus>(FundAccountResultStatus.ALL);
-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const [totalRequestCount, setTotalRequestCount] = useState<number>(0);
  const [totalRequestAmount, setTotalRequestAmount] = useState<number>(0);
@@ -156,19 +157,24 @@ export const FundAccountResultListWrap = () => {
    });
  };

-  const onClickToOpenEmailBottomSheet = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if (!checkGrant(55, 'D')) {
      showAlert(t('common.nopermission'));
      return;
    }
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  };

-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      let params: ExtensionFundAccountResultExcelParams = {
        mid: mid,
-        email: selectedEmail,
+        email: userEmail,
        searchDateType: searchDateType,
        fromDate: fromDate,
        toDate: toDate,
@@ -182,7 +188,6 @@ export const FundAccountResultListWrap = () => {
        }
      });
    }
-    setEmailBottomSheetOn(false);
  };

  const onClickToOpenFilter = () => {
@@ -295,7 +300,7 @@ export const FundAccountResultListWrap = () => {
            <button
              className="filter-btn"
              aria-label="필터"
-              onClick={() => onClickToOpenFilter()}
+              onClick={ onClickToOpenFilter }
            >
              <img
                src={IMAGE_ROOT + '/ico_setting.svg'}
@@ -306,7 +311,7 @@ export const FundAccountResultListWrap = () => {
          <button
            className="download-btn"
            aria-label="다운로드"
-            onClick={() => onClickToOpenEmailBottomSheet()}
+            onClick={ onClickToOpenDownloadBottomSheet }
          >
            <img
              src={IMAGE_ROOT + '/ico_download.svg'}
@@ -398,14 +403,14 @@ export const FundAccountResultListWrap = () => {
        mid={ detailMid }
        tid={ detailTid }
      ></FundAccountResultDetail>
-      { !!emailBottomSheetOn && 
-        <EmailBottomSheet
-          bottomSheetOn={emailBottomSheetOn}
-          setBottomSheetOn={setEmailBottomSheetOn}
-          imageMode={false}
-          emailMode={true}
-          sendRequest={onSendRequest}
-        ></EmailBottomSheet>
+      { !!downloadBottomSheetOn && 
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ onRequestDownloadExcel }
+        ></DownloadBottomSheet>
      }
    </>
  );
--- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
@@ -24,7 +24,7 @@ import { useExtensionFundAccountBalanceMutation } from '../../api/fund-account/u
 import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction-filter';
 import { PATHS } from '@/shared/constants/paths';
 import { useStore } from '@/shared/model/store';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
 import { FundAccountTransferDetail } from './detail/transfer-detail';
@@ -54,7 +54,8 @@ export const FundAccountTransferListWrap = () => {
  const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailSeq, setDetailSeq] = useState<number>(0);

-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
+
  const [balance, setBalance] = useState<number>(0);

  const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
@@ -134,12 +135,12 @@ export const FundAccountTransferListWrap = () => {
    callBalance();
  };

-  const onClickToOpenEmailBottomSheet = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if (!checkGrant(55, 'D')) {
      showAlert(t('common.nopermission'));
      return;
    }
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  };

  const setDetailData = (detailData: DetailData) => {
@@ -149,11 +150,16 @@ export const FundAccountTransferListWrap = () => {
    }
  };

-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      const params: ExtensionFundAccountTransferExcelParams = {
        mid: mid,
-        email: selectedEmail,
+        email: userEmail,
        fromDate: fromDate,
        toDate: toDate,
      };
@@ -166,7 +172,6 @@ export const FundAccountTransferListWrap = () => {
        }
      });
    }
-    setEmailBottomSheetOn(false);
  };

  const callBalance = () => {
@@ -277,7 +282,7 @@ export const FundAccountTransferListWrap = () => {
            <button
              className="filter-btn"
              aria-label="필터"
-              onClick={() => onClickToOpenFilter()}
+              onClick={ onClickToOpenFilter }
            >
              <img
                src={IMAGE_ROOT + '/ico_setting.svg'}
@@ -288,7 +293,7 @@ export const FundAccountTransferListWrap = () => {
          <button
            className="download-btn"
            aria-label="다운로드"
-            onClick={onClickToOpenEmailBottomSheet}
+            onClick={ onClickToOpenDownloadBottomSheet }
          >
            <img
              src={IMAGE_ROOT + '/ico_download.svg'}
@@ -364,14 +369,14 @@ export const FundAccountTransferListWrap = () => {
        setDetailOn={ setDetailOn }
        seq={ detailSeq }
      ></FundAccountTransferDetail>
-      { emailBottomSheetOn && 
-        <EmailBottomSheet
-          bottomSheetOn={ emailBottomSheetOn }
-          setBottomSheetOn={ setEmailBottomSheetOn }
+      { !!downloadBottomSheetOn && 
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageMode={ false }
          emailMode={ true }
-          sendRequest={ onSendRequest }
-        />
+          sendRequest={ onRequestDownloadExcel }
+        ></DownloadBottomSheet>
      }
    </>
  );
--- a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
@@ -13,7 +13,7 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-history-download-excel-mutation';
 import { useStore } from '@/shared/model/store';
 import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaymentPaymentMethod, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '../../model/link-pay/types';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
 import { LinkPaymentHistoryDetail } from './detail/link-payment-history-detail';
@@ -50,7 +50,9 @@ export const LinkPaymentHistoryWrap = () => {
 	const [paymentStatus, setPaymentStatus] = useState<LinkPaymentPaymentStatus>(LinkPaymentPaymentStatus.ALL);
 	const [sendStatus, setSendStatus] = useState<LinkPaymentSendStatus>(LinkPaymentSendStatus.ALL);
 	const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
-	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+	
+	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
+	
 	const [detailOn, setDetailOn] = useState<boolean>(false);
 	const [detailMid, setDetailMid] = useState<string>('');
 	const [detailRequestId, setDetailRequestId] = useState<string>('');
@@ -58,6 +60,7 @@ export const LinkPaymentHistoryWrap = () => {

 	const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
 	const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation();
+	
 	const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
 		entries.forEach((entry: IntersectionObserverEntry) => {
 			if (entry.isIntersecting) {
@@ -144,19 +147,24 @@ export const LinkPaymentHistoryWrap = () => {
 		});
 	};

-	const onClickToOpenEmailBottomSheet = () => {
+	const onClickToOpenDownloadBottomSheet = () => {
 		if (!checkGrant(54, 'D')) {
 			showAlert(t('common.nopermission'));
 			return;
 		}
-		setEmailBottomSheetOn(true);
+		setDownloadBottomSheetOn(true);
 	};

-	const onSendRequest = (selectedEmail?: string) => {
-		if (selectedEmail) {
+	const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+		if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
 			downloadExcel({
 				mid: mid,
-				email: selectedEmail,
+				email: userEmail,
 				searchCl: searchCl,
 				searchValue: searchValue,
 				paymentMethod: paymentMethod,
@@ -174,7 +182,6 @@ export const LinkPaymentHistoryWrap = () => {
        }
      });
 		}
-		setEmailBottomSheetOn(false);
 	};

 	const onClickPaymentStatus = (val: LinkPaymentPaymentStatus) => {
@@ -233,14 +240,14 @@ export const LinkPaymentHistoryWrap = () => {
 							<img
 								src={IMAGE_ROOT + '/ico_setting.svg'}
 								alt={t('common.searchOptions')}
-								onClick={() => onClickToOpenFilter()}
+								onClick={ onClickToOpenFilter }
 							/>
 						</button>
 					</div>
 					<button
 						className="download-btn"
 						aria-label={t('common.download')}
-						onClick={onClickToOpenEmailBottomSheet}
+						onClick={ onClickToOpenDownloadBottomSheet }
 					>
 						<img
 							src={IMAGE_ROOT + '/ico_download.svg'}
@@ -310,14 +317,14 @@ export const LinkPaymentHistoryWrap = () => {
 				requestId={detailRequestId}
 				subReqId={detailSubReqId}
 			></LinkPaymentHistoryDetail>
-			{ emailBottomSheetOn &&
-				<EmailBottomSheet
-					bottomSheetOn={ emailBottomSheetOn }
-					setBottomSheetOn={ setEmailBottomSheetOn }
+			{ !!downloadBottomSheetOn &&
+				<DownloadBottomSheet
+					bottomSheetOn={ downloadBottomSheetOn }
+					setBottomSheetOn={ setDownloadBottomSheetOn }
 					imageMode={ false }
 					emailMode={ true }
-					sendRequest={ onSendRequest }
-				></EmailBottomSheet>
+					sendRequest={ onRequestDownloadExcel }
+				></DownloadBottomSheet>
 			}
 		</>
 	);
--- a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
@@ -14,7 +14,7 @@ import { useExtensionLinkPayWaitDownloadExcelMutation } from '../../api/link-pay
 import { useStore } from '@/shared/model/store';
 import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitListItem } from '../../model/link-pay/types';
 import { getProcessStatusBtnGroup } from '../../model/link-pay/constant';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
 import { LinkPaymentWaitDetail } from './detail/link-payment-wait-detail';
@@ -40,7 +40,9 @@ export const LinkPaymentWaitSendWrap = () => {
  const [processStatus, setProcessStatus] = useState<LinkPaymentProcessStatus>(LinkPaymentProcessStatus.ALL);
  const [listItems, setListItems] = useState<Array<LinkPaymentWaitListItem>>([]);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
+
  const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailMid, setDetailMid] = useState<string>('');
  const [detailRequestId, setDetailRequestId] = useState<string>('');
@@ -126,19 +128,24 @@ export const LinkPaymentWaitSendWrap = () => {
    });
  };

-  const onClickToOpenEmailBottomSheet = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if (!checkGrant(54, 'D')) {
      showAlert(t('common.nopermission'));
      return;
    }
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  };

-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      downloadExcel({
        mid: mid,
-        email: selectedEmail,
+        email: userEmail,
        searchCl: searchType,
        searchValue: searchValue,
        fromDate: startDate,
@@ -154,7 +161,6 @@ export const LinkPaymentWaitSendWrap = () => {
        }
      });
    }
-    setEmailBottomSheetOn(false);
  };

  const onClickToSort = (sort: SortTypeKeys) => {
@@ -204,14 +210,14 @@ export const LinkPaymentWaitSendWrap = () => {
              <img
                src={IMAGE_ROOT + '/ico_setting.svg'}
                alt={t('common.searchOptions')}
-                onClick={() => onClickToOpenFilter()}
+                onClick={ onClickToOpenFilter }
              />
            </button>
          </div>
          <button
            className="download-btn"
            aria-label={t('common.download')}
-            onClick={onClickToOpenEmailBottomSheet}
+            onClick={ onClickToOpenDownloadBottomSheet }
          >
            <img
              src={IMAGE_ROOT + '/ico_download.svg'}
@@ -278,14 +284,14 @@ export const LinkPaymentWaitSendWrap = () => {
        mid={ detailMid }
        requestId={ detailRequestId }
      ></LinkPaymentWaitDetail>
-      { !!emailBottomSheetOn &&
-        <EmailBottomSheet
-          bottomSheetOn={ emailBottomSheetOn }
-          setBottomSheetOn={ setEmailBottomSheetOn }
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageMode={ false }
          emailMode={ true }
-          sendRequest={ onSendRequest }
-        ></EmailBottomSheet>
+          sendRequest={ onRequestDownloadExcel }
+        ></DownloadBottomSheet>
      }
    </>
  );
--- a/src/entities/additional-service/ui/payout/detail/payout-detail.tsx
+++ b/src/entities/additional-service/ui/payout/detail/payout-detail.tsx
@@ -7,8 +7,7 @@ import { useExtensionPayoutDetailMutation } from '@/entities/additional-service/
 import { useExtensionPayoutDetailDownloadCertificateMutation } from '@/entities/additional-service/api/payout/use-extension-payout-detail-download-cetificate-mutation';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
-import { DownloadTypeBottomSheet } from '@/entities/common/ui/download-type-bottom-sheet';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { showAlert } from '@/widgets/show-alert';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { snackBar } from '@/shared/lib';
@@ -29,8 +28,8 @@ export const PayoutDetail = ({
 	const { t } = useTranslation();

 	const [detail, setDetail] = useState<ExtensionPayoutDetailResponse>();
-	const [downloadTypeBottomSheetOn, setDownloadTypeBottomSheetOn] = useState<boolean>(false);
-	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+	
+	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

 	const { mutateAsync: extensionPayoutDetail } = useExtensionPayoutDetailMutation();
 	const { mutateAsync: extensionPayoutDetailDownloadCertification } = useExtensionPayoutDetailDownloadCertificateMutation();
@@ -50,17 +49,19 @@ export const PayoutDetail = ({
 		});
 	}

-	const onClickToDownload = () => {
+	const onClickToOpenDownloadBottomSheet = () => {
 		if(!checkGrant(53, 'D')){
 			showAlert(t('common.nopermission'));
 			return;
 		}
-		setDownloadTypeBottomSheetOn(true);
+		setDownloadBottomSheetOn(true);
 	};

-	const onSelectDownloadType = (type: 'IMAGE' | 'EMAIL') => {
-		if(type === 'IMAGE'){
-			// Save image directly
+	const onRequestDownload = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+		if(selectedMode === DownloadSelectedMode.IMAGE){
 			const params: ExtensionPayoutDetailDownloadCertificateParams = {
 				mid: mid,
 				tid: tid,
@@ -73,19 +74,14 @@ export const PayoutDetail = ({
 				console.error('Certificate Download Failed:', error);
 			});
 		}
-		else{
-			// Open EmailBottomSheet for email option
-			setEmailBottomSheetOn(true);
-		}
-	};
-
-	const onSendRequest = (selectedEmail?: string) => {
-		if(selectedEmail){
+		else if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
 			const params: ExtensionPayoutDetailDownloadCertificateParams = {
 				mid: mid,
 				tid: tid,
 				requestType: 'EMAIL',
-				email: selectedEmail
+				email: userEmail
 			};
 			extensionPayoutDetailDownloadCertification(params).then((rs: ExtensionPayoutDetailDownloadCertificateResponse) => {
 				console.log('Certificate Download Status:', rs);
@@ -93,7 +89,6 @@ export const PayoutDetail = ({
 				console.error('Certificate Download Failed:', error);
 			});
 		}
-		setEmailBottomSheetOn(false);
 	};

 	const onClickToClose = () => {
@@ -138,7 +133,7 @@ export const PayoutDetail = ({
 							<button
 								className="receipt-btn"
 								type="button"
-								onClick={onClickToDownload}
+								onClick={ onClickToOpenDownloadBottomSheet }
 							>
 								<span className="icon-24 download"></span>
 								<span>{t('additionalService.payout.depositCertificate')}</span>
@@ -192,18 +187,13 @@ export const PayoutDetail = ({
 						</ul>
 					</div>
 				</div>
-				<DownloadTypeBottomSheet
-					bottomSheetOn={downloadTypeBottomSheetOn}
-					setBottomSheetOn={setDownloadTypeBottomSheetOn}
-					onSelectType={onSelectDownloadType}
-				/>
-				{ !!emailBottomSheetOn &&
-					<EmailBottomSheet
-						bottomSheetOn={ emailBottomSheetOn }
-						setBottomSheetOn={ setEmailBottomSheetOn }
+				{ !!downloadBottomSheetOn &&
+					<DownloadBottomSheet
+						bottomSheetOn={ downloadBottomSheetOn }
+						setBottomSheetOn={ setDownloadBottomSheetOn }
 						imageMode={ false }
 						emailMode={ true }
-						sendRequest={ onSendRequest }
+						sendRequest={ onRequestDownload }
 					/>
 				}
 			</motion.div>
--- a/src/entities/common/ui/download-bottom-sheet.tsx
+++ b/src/entities/common/ui/download-bottom-sheet.tsx
@@ -7,44 +7,58 @@ import { toPng } from 'html-to-image';
 import { snackBar } from '@/shared/lib';
 import { useTranslation } from 'react-i18next';

-export interface EmailBottomSheetProps {
+export interface DownloadBottomSheetProps {
  bottomSheetOn: boolean;
  setBottomSheetOn: (bottomSheetOn: boolean) => void;
  imageMode: boolean;
  emailMode: boolean;
-  sendRequest: (email?: string) => void;
+  sendRequest: (
+    selectedMode: DownloadSelectedMode,
+    email?: string
+  ) => void;
 };
-export enum EmailBottomSheetSelectedMode {
+export enum DownloadSelectedMode {
  IMAGE = 'IMAGE',
  EMAIL = 'EMAIL'
 };

-export const EmailBottomSheet = ({
+export const DownloadBottomSheet = ({
  bottomSheetOn,
  setBottomSheetOn,
  imageMode,
  emailMode,
  sendRequest
-}: EmailBottomSheetProps) => {
+}: DownloadBottomSheetProps) => {
  const { t } = useTranslation();
  const optionsEmails = useStore.getState().UserStore.selectOptionsEmails;
  const email = useStore.getState().UserStore.email;
  
-  const [userEmail, setUserEmail] = useState<string>(email);
+  const [userEmail, setUserEmail] = useState<string | undefined>(email);
  const [sheetImageMode, setSheetImageMode] = useState<boolean>(imageMode);
  const [sheetEmailMode, setSheetEmailMode] = useState<boolean>(emailMode);

-  const [selectedMode, setSelectedMode] = useState<EmailBottomSheetSelectedMode | undefined>();
+  const [selectedMode, setSelectedMode] = useState<DownloadSelectedMode | undefined>();

  const onClickToClose = () => {
    setBottomSheetOn(false);
  };

  const onClickToRequest = () => {
-    sendRequest(userEmail);
-    setTimeout(() => {
-      onClickToClose();
-    }, 2000);
+    if(selectedMode === DownloadSelectedMode.IMAGE){
+      sendRequest(selectedMode);
+      setTimeout(() => {
+        onClickToClose();
+      }, 10);
+    }
+    else if(selectedMode === DownloadSelectedMode.EMAIL){
+      sendRequest(selectedMode, userEmail);
+      setTimeout(() => {
+        onClickToClose();
+      }, 10);
+    }
+    else{
+      snackBar('신청 방법을 선택하세요');
+    }  
  };
  
  const downloadImage = () => {
@@ -61,7 +75,11 @@ export const EmailBottomSheet = ({
    // downloadImage();
    setTimeout(() => {
      onClickToClose();
-    }, 2000);
+    }, 10);
+  };
+
+  const onClickToSelectMode = (mode: DownloadSelectedMode) => {
+    setSelectedMode(mode);
  };

  useEffect(() => {
@@ -69,10 +87,10 @@ export const EmailBottomSheet = ({
    setSheetEmailMode(emailMode);

    if(imageMode && !emailMode){
-      setSelectedMode(EmailBottomSheetSelectedMode.IMAGE);
+      setSelectedMode(DownloadSelectedMode.IMAGE);
    }
    else if(!imageMode && emailMode){
-      setSelectedMode(EmailBottomSheetSelectedMode.EMAIL);
+      setSelectedMode(DownloadSelectedMode.EMAIL);
    }
  }, [imageMode, emailMode]);
  
@@ -90,7 +108,7 @@ export const EmailBottomSheet = ({
      >
        <div className="bottomsheet-header">
          <div className="bottomsheet-title">
-            <h2>{t('common.selectEmailAddress')}</h2>
+            <h2>신청 방법을 선택하세요</h2>
            <button
              className="close-btn"
              type="button"
@@ -109,7 +127,7 @@ export const EmailBottomSheet = ({
            { !!sheetImageMode &&
            <div
              className="email-label mb-10"
-              onClick={ onDownloadImage }
+              onClick={ () => onClickToSelectMode(DownloadSelectedMode.IMAGE) }
            >
              <div className="mail-icon">
                <div className="mail-icon-bg"></div>
@@ -123,7 +141,10 @@ export const EmailBottomSheet = ({
            }
            { !!sheetEmailMode &&
            <>
-              <div className="email-label">
+              <div 
+                className="email-label"
+                onClick={ () => onClickToSelectMode(DownloadSelectedMode.EMAIL) }
+              >
                <div className="mail-icon">
                  <div className="mail-icon-bg"></div>
                  <img
@@ -133,7 +154,7 @@ export const EmailBottomSheet = ({
                </div>
                <span className="label-text">{t('common.receiveByEmail')}</span>
              </div>
-              { selectedMode === EmailBottomSheetSelectedMode.EMAIL && 
+              { selectedMode === DownloadSelectedMode.EMAIL && 
                optionsEmails && 
                optionsEmails.length > 0 &&
                <div className="email-select">
@@ -154,7 +175,7 @@ export const EmailBottomSheet = ({
                  </div>
                </div>
              }
-              { selectedMode === EmailBottomSheetSelectedMode.EMAIL && 
+              { selectedMode === DownloadSelectedMode.EMAIL && 
                (!optionsEmails || optionsEmails.length === 0) &&
                <div className="error-message">
                  <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
--- a/src/entities/settlement/ui/list-wrap.tsx
+++ b/src/entities/settlement/ui/list-wrap.tsx
@@ -32,7 +32,7 @@ import {
 } from '../model/types';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
 import { useStore } from '@/shared/model/store';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
 import { SettlementDetail } from './detail/settlement-detail';
@@ -85,7 +85,7 @@ export const ListWrap = ({
  const [detailSettlementId, setDetailSettlementId] = useState<string>('');
  const [detailTid, setDetailTid] = useState<string>('');

-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const { mutateAsync: settlementsHistory } = useSettlementsHistoryMutation();
  const { mutateAsync: settlementsHistorySummary} = useSettlementsHistorySummaryMutation();
@@ -384,16 +384,19 @@ export const ListWrap = ({
  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
  };
-  const onClickToDownloadExcel = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if(checkGrant(menuId, 'D')){
-      setEmailBottomSheetOn(true);
+      setDownloadBottomSheetOn(true);
    }
    else{
      showAlert(t('common.nopermission'));
    }
  };

-  const onRequestDownloadExcel = (userEmail?: string) => {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
    
  };
    
@@ -428,7 +431,7 @@ export const ListWrap = ({
            <img
              src={ IMAGE_ROOT + '/ico_download.svg' }
              alt={t('transaction.download')}
-              onClick={ () => onClickToDownloadExcel() }
+              onClick={ () => onClickToOpenDownloadBottomSheet() }
            />
          </button>
        </div>
@@ -528,14 +531,14 @@ export const ListWrap = ({
        settlementId={ detailSettlementId }
        tid={ detailTid }
      ></SettlementDetail>
-      { !!emailBottomSheetOn &&
-        <EmailBottomSheet
-          bottomSheetOn={ emailBottomSheetOn }
-          setBottomSheetOn={ setEmailBottomSheetOn }
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageMode={ false }
          emailMode={ true }
          sendRequest={ onRequestDownloadExcel }
-        ></EmailBottomSheet>
+        ></DownloadBottomSheet>
      }
    </>
  );
--- a/src/entities/transaction/ui/detail/escrow-detail.tsx
+++ b/src/entities/transaction/ui/detail/escrow-detail.tsx
@@ -24,7 +24,7 @@ import {
 import { useEscrowMailResendMutation } from '@/entities/transaction/api/use-escrow-mail-resend-mutation';
 import { MerchantInfoSection } from '@/entities/transaction/ui/section/merchant-info-section';
 import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { checkGrant } from '@/shared/lib/check-grant';
@@ -65,7 +65,7 @@ export const EscrowDetail = ({
  const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
  const [showMerchantInfo, setShowMerchantInfo] = useState<boolean>(false);

-  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const [orderNumber, setOrderNumber] = useState<string>();
  
@@ -102,14 +102,17 @@ export const EscrowDetail = ({

  const onClickToShowMailResend = () => {
    if(checkGrant(menuId, 'X')){
-      setBottomSheetOn(true);
+      setDownloadBottomSheetOn(true);
    }
    else{
      showAlert(t('common.nopermission'));
    }
  };

-  const callMailResend = () => {
+  const callMailResend = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
    let params = {
      orderNumber: orderNumber,
      tid: tid,
@@ -231,14 +234,14 @@ export const EscrowDetail = ({
          >메일 재발송</button>
        </div>
      </motion.div>
-      { !!bottomSheetOn && 
-        <EmailBottomSheet
-          setBottomSheetOn={ setBottomSheetOn }
-          bottomSheetOn={ bottomSheetOn }
+      { !!downloadBottomSheetOn && 
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageMode={ false }
          emailMode={ true }
          sendRequest={ callMailResend }
-        ></EmailBottomSheet>
+        ></DownloadBottomSheet>
      }
    </>
  );
--- a/src/entities/transaction/ui/section/amount-info-section.tsx
+++ b/src/entities/transaction/ui/section/amount-info-section.tsx
@@ -4,11 +4,10 @@ import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { CashReceiptReceiptDownloadParams, CashReceiptReceiptDownloadResponse, InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
 import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
-import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
 import { useCashReceiptReceiptDownloadMutation } from '../../api/use-cash-receipt-receipt-download-mutation';
 import { useState } from 'react';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';

 export const AmountInfoSection = ({
  transactionCategory,
@@ -22,7 +21,8 @@ export const AmountInfoSection = ({
  const { t } = useTranslation();

  const { mutateAsync: cashReceiptReceiptDownload } = useCashReceiptReceiptDownloadMutation();
-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
+
  let newAmountInfo: Record<string, any> | undefined = amountInfo;
  const subItems: Record<string, Record<string, string>> = {
    mid: {name: t('transaction.fields.mid'), type: 'string'},
@@ -187,14 +187,13 @@ export const AmountInfoSection = ({
  };

  const onClickToOpenDownloadBottomSheet = () => {
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  };

-  const onSendRequest = (email?: string) => {
-    
-  };
-
-  const onRequestToDownload = () => {
+  const onRequestDownload = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
    if(!!tid){
      let params: CashReceiptReceiptDownloadParams = {
        tid: tid
@@ -210,7 +209,7 @@ export const AmountInfoSection = ({
      });
    }
  };
-
+  
  return (
    <>
      <div className="txn-num-group">
@@ -414,13 +413,15 @@ export const AmountInfoSection = ({
          }
        </div>
      </div>
-      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageMode={true}
-        emailMode={true}
-        sendRequest={onSendRequest}
-      />
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
+          imageMode={ true }
+          emailMode={ true }
+          sendRequest={ onRequestDownload }
+        ></DownloadBottomSheet>
+      }
    </>
  );
 };
--- a/src/entities/vat-return/ui/list-wrap.tsx
+++ b/src/entities/vat-return/ui/list-wrap.tsx
@@ -17,7 +17,7 @@ import {
 import { useVatReturnListMutation } from '../api/use-vat-return-list-mutation';
 import { ListDateGroup } from './list-date-group';
 import { useStore } from '@/shared/model/store';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { TaxInvoiceDetail } from './detail/tax-invoice-detail';
 import { showAlert } from '@/widgets/show-alert';
@@ -40,7 +40,7 @@ export const ListWrap = () => {
  const [receiptType, setReceiptType] = useState<VatReturnReceiptType>(VatReturnReceiptType.ALL);
  const [targetType, setTargetType] = useState<VatReturnTargetType>(VatReturnTargetType.ALL);

-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailTaxInvoiceNumber, setDetailTaxInvoiceNumber] = useState<string>('');
@@ -118,17 +118,20 @@ export const ListWrap = () => {
  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
  };
-  const onClickToDownloadExcel = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if(checkGrant(menuId, 'D')){
-      setEmailBottomSheetOn(true);
+      setDownloadBottomSheetOn(true);
    }
    else{
      showAlert(t('common.nopermission'));
    }
  };
-  const onRequestDownloadExcel = (userEmail?: string) => {
-
-	};
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    
+  };

  useEffect(() => {
    callList();
@@ -212,7 +215,7 @@ export const ListWrap = () => {
            <img
              src={ IMAGE_ROOT + '/ico_download.svg' }
              alt={t('transaction.download')}
-              onClick={ onClickToDownloadExcel }
+              onClick={ onClickToOpenDownloadBottomSheet }
            />
          </button>
        </div>
@@ -247,14 +250,14 @@ export const ListWrap = () => {
        taxInvoiceNumber={ detailTaxInvoiceNumber }
      >
      </TaxInvoiceDetail>
-      { !!emailBottomSheetOn &&
-        <EmailBottomSheet
-          bottomSheetOn={ emailBottomSheetOn }
-          setBottomSheetOn={ setEmailBottomSheetOn }
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageMode={ false }
          emailMode={ true }
          sendRequest={ onRequestDownloadExcel }
-        ></EmailBottomSheet>
+        ></DownloadBottomSheet>
      }
    </>
  );
--- a/src/entities/vat-return/ui/section/amount-section.tsx
+++ b/src/entities/vat-return/ui/section/amount-section.tsx
@@ -6,7 +6,7 @@ import { NumericFormat } from 'react-number-format';
 import SlideDown from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 import { useState } from 'react';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';

 export interface AmountSectionProps {
  detail: VatReturnDetailResponse;
@@ -24,8 +24,11 @@ export const AmountSection = ({
    setIsOpen(status);
  };

-  const onRequestDownload = (userEmail?: string) => {
-
+  const onRequestDownload = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    
  };

  const onClickToOpenDownloadBottomSheet = () => {
@@ -86,13 +89,13 @@ export const AmountSection = ({
        </div>
      </div>
      { !!downloadBottomSheetOn &&
-        <EmailBottomSheet
+        <DownloadBottomSheet
          bottomSheetOn={ downloadBottomSheetOn }
          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageMode={ true }
          emailMode={ true }
          sendRequest={ onRequestDownload }
-        ></EmailBottomSheet>
+        ></DownloadBottomSheet>
      }
    </>
  );
--- 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,7 +22,7 @@ import { AccountHolderAuthFilter } from '@/entities/additional-service/ui/accoun
 import { useStore } from '@/shared/model/store';
 import { AccountHolderAuthStatus, AccountHolderAuthItem, ExtensionAccountHolderAuthDownloadExcelParams, ExtensionAccountHolderAuthDownloadExcelResponse } from '@/entities/additional-service/model/account-holder-auth/types';
 import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { AccountHolderAuthDetail } from '@/entities/additional-service/ui/account-holder-auth/detail/account-holder-auth-detail';
@@ -53,7 +53,8 @@ export const AccountHolderAuthPage = () => {
  const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailMid, setDetailMid] = useState<string>('');
  const [detailTid, setDetailTid] = useState<string>('');
-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  useSetHeaderTitle(t('additionalService.accountHolderAuth.title'));
  useSetHeaderType(HeaderType.LeftArrow);
@@ -156,19 +157,24 @@ export const AccountHolderAuthPage = () => {
  };


-  const onClickToOpenEmailBottomSheet = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if (!checkGrant(59, 'D')) {
      showAlert(t('common.nopermission'));
      return;
    }
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  };

-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      const params: ExtensionAccountHolderAuthDownloadExcelParams = {
        mid: mid,
-        email: selectedEmail,
+        email: userEmail,
        fromDate: fromDate,
        toDate: toDate,
        authStatus: authStatus
@@ -182,7 +188,6 @@ export const AccountHolderAuthPage = () => {
        }
      });
    }
-    setEmailBottomSheetOn(false);
  };

  useEffect(() => {
@@ -220,14 +225,14 @@ export const AccountHolderAuthPage = () => {
                    <img
                      src={IMAGE_ROOT + '/ico_setting.svg'}
                      alt={t('common.searchOptions')}
-                      onClick={() => onClickToOpenFilter()}
+                      onClick={ onClickToOpenFilter }
                    />
                  </button>
                </div>
                <button
                  className="download-btn"
                  aria-label={t('common.download')}
-                  onClick={() => onClickToOpenEmailBottomSheet()}
+                  onClick={ onClickToOpenDownloadBottomSheet }
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
@@ -288,13 +293,15 @@ export const AccountHolderAuthPage = () => {
        mid={detailMid}
        tid={detailTid}
      ></AccountHolderAuthDetail>
-      <EmailBottomSheet
-        bottomSheetOn={ emailBottomSheetOn }
-        setBottomSheetOn={ setEmailBottomSheetOn }
-        imageMode={ false }
-        emailMode={ true }
-        sendRequest={ onSendRequest }
-      ></EmailBottomSheet>
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ onRequestDownloadExcel }
+        ></DownloadBottomSheet>
+      }
    </>
  );
 };
--- 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
@@ -21,7 +21,7 @@ import { AccountHolderSearchList } from '@/entities/additional-service/ui/accoun
 import { useStore } from '@/shared/model/store';
 import { AccountHolderSearchListItem, AccountHolderSearchCl, AccountHolderResultStatus } from '@/entities/additional-service/model/account-holder-search/types';
 import { getResultStatusBtnGroup } from '@/entities/additional-service/model/account-holder-search/constant';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { useTranslation } from 'react-i18next';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
@@ -53,7 +53,9 @@ export const AccountHolderSearchPage = () => {
  const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
  const [bank, setBank] = useState<string>('');
  const [resultStatus, setResultStatus] = useState<AccountHolderResultStatus>(AccountHolderResultStatus.ALL);
-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
+
  const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailMid, setDetailMid] = useState<string>('');
  const [detailTid, setDetailTid] = useState<string>('');
@@ -145,19 +147,24 @@ export const AccountHolderSearchPage = () => {
    setFilterOn(!filterOn);
  };

-  const onClickToOpenEmailBottomSheet = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if (!checkGrant(60, 'D')) {
      showAlert(t('common.nopermission'));
      return;
    }
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  };

-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      downloadExcel({
        mid: mid,
-        email: selectedEmail,
+        email: userEmail,
        searchCl: searchCl,
        searchValue: searchValue,
        fromDate: startDate,
@@ -174,7 +181,6 @@ export const AccountHolderSearchPage = () => {
        // }
      });
    }
-    setEmailBottomSheetOn(false);
  };

  const onClickToSort = (sort: SortTypeKeys) => {
@@ -233,13 +239,13 @@ export const AccountHolderSearchPage = () => {
                    <img
                      src={IMAGE_ROOT + '/ico_setting.svg'}
                      alt={t('common.searchOptions')}
-                      onClick={() => onClickToOpenFilter()}
+                      onClick={ onClickToOpenFilter }
                    />
                  </button>
                </div>
                <button
                  className="download-btn"
-                  onClick={onClickToOpenEmailBottomSheet}
+                  onClick={ onClickToOpenDownloadBottomSheet }
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
@@ -305,13 +311,15 @@ export const AccountHolderSearchPage = () => {
        mid={detailMid}
        tid={detailTid}
      ></AccountHolderSearchDetail>
-      <EmailBottomSheet
-        bottomSheetOn={ emailBottomSheetOn }
-        setBottomSheetOn={ setEmailBottomSheetOn }
-        imageMode={ false }
-        emailMode={ true }
-        sendRequest={ onSendRequest }
-      ></EmailBottomSheet>
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ onRequestDownloadExcel }
+        ></DownloadBottomSheet>
+      }
    </>
  );
 };
--- a/src/pages/additional-service/alimtalk/list-page.tsx
+++ b/src/pages/additional-service/alimtalk/list-page.tsx
@@ -29,7 +29,7 @@ import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group'
 import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
 import { useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { AlimtalkFilter } from '@/entities/additional-service/ui/filter/alimtalk-filter';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
@@ -62,7 +62,8 @@ export const AlimtalkListPage = () => {
  const [sendType, setSendType] = useState<AlimtalkSendType>(AlimtalkSendType.ALL);
  const [sendCl, setSendCl] = useState<AlimTalkSendCl>(AlimTalkSendCl.ALL);

-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
+  
  const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailMid, setDetailMid] = useState<string>('');
  const [detailTid, setDetailTid] = useState<string>('');
@@ -149,16 +150,21 @@ export const AlimtalkListPage = () => {
  };


-  const onClickToOpenEmailBottomSheet = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if (!checkGrant(58, 'D')) {
      showAlert(t('common.nopermission'));
      return;
    }
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  }

-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      const params: ExtensionAlimtalkDownloadExcelParams = {
        mid: mid,
        searchCl: searchCl,
@@ -169,7 +175,7 @@ export const AlimtalkListPage = () => {
        toDate: toDate,
        sendType: sendType,
        sendCl: sendCl,
-        email: selectedEmail
+        email: userEmail
      };
      extensionAlimtalkDownloadExcel(params).then((rs: ExtensionAlimtalkDownloadExcelResponse) => {
        console.log('Excel Download Status:', rs.status);
@@ -180,7 +186,6 @@ export const AlimtalkListPage = () => {
        }
      });
    };
-    setEmailBottomSheetOn(false);
  };

  const setDetailData = (detailData: DetailData) => {
@@ -293,7 +298,7 @@ export const AlimtalkListPage = () => {
                  <button
                    className="filter-btn"
                    aria-label="필터"
-                    onClick={() => onClickToOpenFilter()}
+                    onClick={ onClickToOpenFilter }
                  >
                    <img
                      src={IMAGE_ROOT + '/ico_setting.svg'}
@@ -304,7 +309,7 @@ export const AlimtalkListPage = () => {
                <button
                  className="download-btn"
                  aria-label="다운로드"
-                  onClick={onClickToOpenEmailBottomSheet}
+                  onClick={ onClickToOpenDownloadBottomSheet }
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
@@ -356,13 +361,15 @@ export const AlimtalkListPage = () => {
        tid={ detailTid }
        seq={ detailSeq }
      ></AlimtalkDetail>
-      <EmailBottomSheet
-        bottomSheetOn={ emailBottomSheetOn }
-        setBottomSheetOn={ setEmailBottomSheetOn }
-        imageMode={ false }
-        emailMode={ true }
-        sendRequest={onSendRequest}
-      ></EmailBottomSheet>
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ onRequestDownloadExcel }
+        ></DownloadBottomSheet>
+      }
    </>
  );
 };
--- a/src/pages/additional-service/ars/list-page.tsx
+++ b/src/pages/additional-service/ars/list-page.tsx
@@ -21,7 +21,7 @@ import { getArsPaymentStatusBtnGroup } from '@/entities/additional-service/model
 import { ArsFilter } from '@/entities/additional-service/ui/ars/filter/ars-filter';
 import { useTranslation } from 'react-i18next';
 import { useStore } from '@/shared/model/store';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { ArsList } from '@/entities/additional-service/ui/ars/ars-list';
@@ -54,7 +54,8 @@ export const ArsListPage = () => {
  const [orderStatus, setOrderStatus] = useState<OrderStatus>(OrderStatus.ALL);
  const [minAmount, setMinAmount] = useState<number>();
  const [maxAmount, setMaxAmount] = useState<number>();
-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailMid, setDetailMid] = useState<string>('');
@@ -143,16 +144,21 @@ export const ArsListPage = () => {
    });
  };

-  const onClickToOpenEmailBottomSheet = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if (!checkGrant(52, 'D')) {
      showAlert(t('common.nopermission'));
      return;
    }
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  };

-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      const params: ExtensionArsDownloadExcelParams = {
        mid: mid,
        moid: moid,
@@ -162,7 +168,7 @@ export const ArsListPage = () => {
        orderStatus: orderStatus,
        minAmount: minAmount,
        maxAmount: maxAmount,
-        email: selectedEmail
+        email: userEmail
      };
      extensionArsDownloadExcel(params).then((rs: ExtensionArsDownloadExcelResponse) => {
        console.log('Excel Download Status:', rs);
@@ -173,7 +179,6 @@ export const ArsListPage = () => {
        }
      });
    }
-    setEmailBottomSheetOn(false);
  };

  const setDetailData = (detailData: DetailData) => {
@@ -240,7 +245,7 @@ export const ArsListPage = () => {
                  <button
                    className="filter-btn"
                    aria-label={t('filter.filter')}
-                    onClick={() => onClickToOpenFilter()}
+                    onClick={ onClickToOpenFilter }
                  >
                    <img
                      src={IMAGE_ROOT + '/ico_setting.svg'}
@@ -251,7 +256,7 @@ export const ArsListPage = () => {
                <button
                  className="download-btn"
                  aria-label={t('common.download')}
-                  onClick={onClickToOpenEmailBottomSheet}
+                  onClick={ onClickToOpenDownloadBottomSheet }
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
@@ -323,13 +328,15 @@ export const ArsListPage = () => {
        mid={detailMid}
        tid={detailTid}
      ></ArsDetail>
-      <EmailBottomSheet
-        bottomSheetOn={ emailBottomSheetOn }
-        setBottomSheetOn={ setEmailBottomSheetOn }
-        imageMode={ false }
-        emailMode={ true }
-        sendRequest={onSendRequest}
-      ></EmailBottomSheet>
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ onRequestDownloadExcel }
+        ></DownloadBottomSheet>
+      }
    </>
  );
 };
--- a/src/pages/additional-service/face-auth/face-auth-page.tsx
+++ b/src/pages/additional-service/face-auth/face-auth-page.tsx
@@ -18,7 +18,7 @@ import {
 import { FaceAuthFilter } from '@/entities/additional-service/ui/face-auth/filter/face-auth-filter';
 import { ExtensionFaceAuthExcelDownlaodPrams, ExtensionFaceAuthExcelDownlaodResponse, ExtensionFaceAuthListParams, ExtensionFaceAuthListResponse, FaceAuthListItem, FaceAuthResult, FaceAuthTransType } from '@/entities/additional-service/model/face-auth/types';
 import { getAuthResultBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-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';
@@ -51,7 +51,8 @@ export const FaceAuthPage = () => {
 	const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
 	const [transType, setTransType] = useState<FaceAuthTransType>(FaceAuthTransType.ALL);
 	const [authResult, setAuthResult] = useState<FaceAuthResult>(FaceAuthResult.ALL);
-	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

 	useSetHeaderTitle(t('faceAuth.title'));
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -133,19 +134,24 @@ export const FaceAuthPage = () => {
 		});
 	};

-	const onClickToOpenEmailBottomSheet = () => {
+	const onClickToOpenDownloadBottomSheet = () => {
 		if (!checkGrant(65, 'D')) {
 			showAlert(t('common.nopermission'));
 			return;
 		}
-		setEmailBottomSheetOn(true);
+		setDownloadBottomSheetOn(true);
 	};

-	const onSendRequest = (selectedEmail?: string) => {
-		if(selectedEmail){
+	const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+		if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
 			const params: ExtensionFaceAuthExcelDownlaodPrams = {
 				mid: mid,
-				email: selectedEmail,
+				email: userEmail,
 				fromDate: fromDate,
 				toDate: toDate
 			};
@@ -158,8 +164,6 @@ export const FaceAuthPage = () => {
        }
      });
 		}
-		console
-		setEmailBottomSheetOn(false);
 	};

 	const onClickToOpenFilter = () => {
@@ -254,14 +258,14 @@ export const FaceAuthPage = () => {
 										<img
 											src={IMAGE_ROOT + '/ico_setting.svg'}
 											alt={t('transaction.searchOptions')}
-											onClick={() => onClickToOpenFilter()}
+											onClick={ onClickToOpenFilter }
 										/>
 									</button>
 								</div>
 								<button
 									className="download-btn"
 									aria-label={t('transaction.download')}
-									onClick={onClickToOpenEmailBottomSheet}
+									onClick={ onClickToOpenDownloadBottomSheet }
 								>
 									<img
 										src={IMAGE_ROOT + '/ico_download.svg'}
@@ -317,13 +321,15 @@ export const FaceAuthPage = () => {
 				setTransType={setTransType}
 				setAuthResult={setAuthResult}
 			/>
-			<EmailBottomSheet
-				bottomSheetOn={ emailBottomSheetOn }
-				setBottomSheetOn={ setEmailBottomSheetOn }
-				imageMode={ false }
-				emailMode={ true }
-				sendRequest={ onSendRequest }
-			></EmailBottomSheet>
+			{ !!downloadBottomSheetOn &&
+				<DownloadBottomSheet
+					bottomSheetOn={ downloadBottomSheetOn }
+					setBottomSheetOn={ setDownloadBottomSheetOn }
+					imageMode={ false }
+					emailMode={ true }
+					sendRequest={ onRequestDownloadExcel }
+				></DownloadBottomSheet>
+			}
 		</>
 	);
 };
--- 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
@@ -21,7 +21,7 @@ import { KeyInPaymentList } from '@/entities/additional-service/ui/key-in-paymen
 import { useStore } from '@/shared/model/store';
 import { KeyInPaymentListItem, KeyInPaymentStatus, KeyInPaymentTansactionType } from '@/entities/additional-service/model/key-in/types';
 import { getKeyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { useTranslation } from 'react-i18next';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
@@ -51,7 +51,8 @@ export const KeyInPaymentPage = () => {
  const [status, setStatus] = useState<KeyInPaymentStatus>(KeyInPaymentStatus.ALL);
  const [minAmount, setMinAmount] = useState<number>();
  const [maxAmount, setMaxAmount] = useState<number>();
-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  useSetHeaderTitle(t('additionalService.keyIn.title'));
  useSetHeaderType(HeaderType.LeftArrow);
@@ -140,17 +141,22 @@ export const KeyInPaymentPage = () => {
    setFilterOn(!filterOn);
  };

-  const onClickToOpenEmailBottomSheet = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if (!checkGrant(56, 'D')) {
      showAlert(t('common.nopermission'));
      return;
    }
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  };

  // 엑셀 다운로드
-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      downloadExcel({
        mid: mid,
        fromDate: startDate,
@@ -158,7 +164,7 @@ export const KeyInPaymentPage = () => {
        paymentStatus: transactionType,
        minAmount: minAmount,
        maxAmount: maxAmount,
-        email: selectedEmail
+        email: userEmail
      }).then((rs) => {
        console.log('Excel Download Status:', rs.status);
      }).catch((e: any) => {
@@ -168,7 +174,6 @@ export const KeyInPaymentPage = () => {
        }
      });
    }
-    setEmailBottomSheetOn(false);
  };

  const onClickToSort = (sort: SortTypeKeys) => {
@@ -217,17 +222,17 @@ export const KeyInPaymentPage = () => {
                    <img
                      src={IMAGE_ROOT + '/ico_setting.svg'}
                      alt="검색옵션"
-                      onClick={() => onClickToOpenFilter()}
+                      onClick={ onClickToOpenFilter }
                    />
                  </button>
                </div>
                <button
                  className="download-btn"
                  aria-label="다운로드"
-                  onClick={onClickToOpenEmailBottomSheet}
+                  onClick={ onClickToOpenDownloadBottomSheet }
                >
                  <img
-                    src={IMAGE_ROOT + '/ico_download.svg'}
+                    src={ IMAGE_ROOT + '/ico_download.svg' }
                    alt="다운로드"
                  />
                </button>
@@ -278,14 +283,14 @@ export const KeyInPaymentPage = () => {
        setMinAmount={setMinAmount}
        setMaxAmount={setMaxAmount}
      ></KeyInPaymentFilter>
-      { !!emailBottomSheetOn &&
-        <EmailBottomSheet
-          bottomSheetOn={ emailBottomSheetOn }
-          setBottomSheetOn={ setEmailBottomSheetOn }
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageMode={ false }
          emailMode={ true }
-          sendRequest={ onSendRequest }
-        ></EmailBottomSheet>
+          sendRequest={ onRequestDownloadExcel }
+        ></DownloadBottomSheet>
      }
    </>
  );
--- a/src/pages/additional-service/payout/list-page.tsx
+++ b/src/pages/additional-service/payout/list-page.tsx
@@ -29,7 +29,7 @@ import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group'
 import { useTranslation } from 'react-i18next';
 import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
 import { useStore } from '@/shared/model/store';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { PayoutList } from '@/entities/additional-service/ui/payout/payout-list';
@@ -59,7 +59,8 @@ export const PayoutListPage = () => {
  const [status, setStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL);
  const [minAmount, setMinAmount] = useState<number | undefined>();
  const [maxAmount, setMaxAmount] = useState<number | undefined>();
-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailMid, setDetailMid] = useState<string>('');
@@ -155,19 +156,24 @@ export const PayoutListPage = () => {
    });
  };

-  const onClickToOpenEmailBottomSheet = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if (!checkGrant(53, 'D')) {
      showAlert(t('common.nopermission'));
      return;
    }
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  };

-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      const params: ExtensionPayoutExcelParams = {
        mid: mid,
-        email: selectedEmail,
+        email: userEmail,
        fromDate: fromDate,
        toDate: toDate,
      };
@@ -180,7 +186,6 @@ export const PayoutListPage = () => {
        }
      });
    }
-    setEmailBottomSheetOn(false);
  };

  const setDetailData = (detailData: DetailData) => {
@@ -294,7 +299,7 @@ export const PayoutListPage = () => {
                <button
                  className="download-btn"
                  aria-label={t('common.download')}
-                  onClick={onClickToOpenEmailBottomSheet}
+                  onClick={ onClickToOpenDownloadBottomSheet }
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
@@ -369,20 +374,20 @@ export const PayoutListPage = () => {
        setMaxAmount={setMaxAmount}
      ></PayoutFilter>
      <PayoutDetail
-      detailOn={detailOn}
-      setDetailOn={setDetailOn}
-      mid={detailMid}
-      tid={detailTid}
+        detailOn={detailOn}
+        setDetailOn={setDetailOn}
+        mid={detailMid}
+        tid={detailTid}
      >
      </PayoutDetail>
-      { !!emailBottomSheetOn &&
-        <EmailBottomSheet
-          bottomSheetOn={ emailBottomSheetOn }
-          setBottomSheetOn={ setEmailBottomSheetOn }
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageMode={ false }
          emailMode={ true }
-          sendRequest={ onSendRequest }
-        ></EmailBottomSheet>
+          sendRequest={ onRequestDownloadExcel }
+        ></DownloadBottomSheet>
      }
    </>
  );
--- a/src/pages/additional-service/sms-payment/sms-payment-page.tsx
+++ b/src/pages/additional-service/sms-payment/sms-payment-page.tsx
@@ -21,10 +21,9 @@ import { useExtensionSmsDetailMutation } from '@/entities/additional-service/api
 import { useStore } from '@/shared/model/store';
 import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
 import { PATHS } from '@/shared/constants/paths';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
 import useIntersectionObserver from '@/widgets/intersection-observer';
-import { set } from 'lodash-es';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
@@ -53,7 +52,8 @@ export const SmsPaymentPage = () => {
  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
  const [smsCl, setSmsCl] = useState<SmsCl>(SmsCl.ALL);
  const [smsDetailData, setSmsDetailData] = useState<ExtensionSmsDetailResponse | null>(null);
-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
  const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
@@ -147,16 +147,21 @@ export const SmsPaymentPage = () => {
    });
  }

-  const onClickToOpenEmailBottomSheet = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if (!checkGrant(57, 'D')) {
      showAlert(t('common.nopermission'));
      return;
    }
-    setEmailBottomSheetOn(true);
+    setDownloadBottomSheetOn(true);
  };

-  const onSendRequest = (selectedEmail?: string) => {
-    if (selectedEmail) {
+  const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      downloadExcel({
        mid: mid,
        searchCl: searchCl,
@@ -164,7 +169,7 @@ export const SmsPaymentPage = () => {
        fromDate: fromDate,
        toDate: toDate,
        smsCl: smsCl,
-        email: selectedEmail
+        email: userEmail
      }).then((rs) => {
        console.log('Excel Download Status:', rs.status);
      }).catch((e: any) => {
@@ -174,14 +179,12 @@ export const SmsPaymentPage = () => {
        }
      });
    }
-    setEmailBottomSheetOn(false);
  };

  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
  };

-
  const onClickToShowDetail = (selectedSeq: number) => {
    setSeq(selectedSeq);
    callDetail(selectedSeq);
@@ -231,7 +234,7 @@ export const SmsPaymentPage = () => {
                <button
                  className="download-btn"
                  aria-label="다운로드"
-                  onClick={onClickToOpenEmailBottomSheet}
+                  onClick={ onClickToOpenDownloadBottomSheet }
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
@@ -274,14 +277,14 @@ export const SmsPaymentPage = () => {
        setToDate={setToDate}
        setSmsCl={setSmsCl}
      ></SmsPaymentFilter>
-      { !!emailBottomSheetOn &&
-        <EmailBottomSheet
-          bottomSheetOn={emailBottomSheetOn}
-          setBottomSheetOn={setEmailBottomSheetOn}
-          imageMode={false}
-          emailMode={true}
-          sendRequest={onSendRequest}
-        ></EmailBottomSheet>
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ onRequestDownloadExcel }
+        ></DownloadBottomSheet>
      }
    </>
  );
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/src/pages/transaction/all-transaction/list-page.tsx
@@ -29,7 +29,7 @@ import {
 	useSetHeaderType,
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
 import { AllTransactionDetail } from '@/entities/transaction/ui/detail/all-transaction-detail';
@@ -72,7 +72,7 @@ export const AllTransactionListPage = () => {
  const [totalCount, setTotalCount] = useState<number>(0);
  const [totalAmount, setTotalAmount] = useState<number>(0);

-  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailTid, setDetailTid] = useState<string>('');
@@ -189,16 +189,21 @@ export const AllTransactionListPage = () => {
    setFilterOn(!filterOn);
  };
  
-  const onClickToDownloadExcel = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
    if(checkGrant(menuId, 'D')){
-      setEmailBottomSheetOn(true);
+      setDownloadBottomSheetOn(true);
    }
    else{
      showAlert(t('common.nopermission'));
    }
  };
-  const onRequestDownloadExcel = (userEmail?: string) => {
-    if(userEmail){
+  const onRequestDownloadExcel = (
+    selectedMode: DownloadSelectedMode,
+		userEmail?: string
+  ) => {
+    if(selectedMode === DownloadSelectedMode.EMAIL
+      && userEmail
+    ){
      let params: TransactionDownloadExcelParams = {
        email: userEmail,
        mid: mid,
@@ -226,8 +231,8 @@ export const AllTransactionListPage = () => {
        }
      });
    }
-    
  };
+
  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
  };
@@ -325,7 +330,7 @@ export const AllTransactionListPage = () => {
 										<img
                      src={ IMAGE_ROOT + '/ico_download.svg' }
                      alt={t('transaction.download')}
-                      onClick={ () => onClickToDownloadExcel() }
+                      onClick={ () => onClickToOpenDownloadBottomSheet() }
                    />
 									</button>
 								</div>
@@ -399,14 +404,14 @@ export const AllTransactionListPage = () => {
        tid={ detailTid }
        serviceCode={ detailServiceCode }
      ></AllTransactionDetail>
-      { !!emailBottomSheetOn &&
-        <EmailBottomSheet
-          bottomSheetOn={ emailBottomSheetOn }
-          setBottomSheetOn={ setEmailBottomSheetOn }
+      { !!downloadBottomSheetOn &&
+        <DownloadBottomSheet
+          bottomSheetOn={ downloadBottomSheetOn }
+          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageMode={ false }
          emailMode={ true }
          sendRequest={ onRequestDownloadExcel }
-        ></EmailBottomSheet>
+        ></DownloadBottomSheet>
      }
    </>
 	);
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -29,7 +29,7 @@ import {
 	useSetHeaderType,
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { BillingDetail } from '@/entities/transaction/ui/detail/billing-detail';
 import { showAlert } from '@/widgets/show-alert';
@@ -60,6 +60,7 @@ export const BillingListPage = () => {
 	const [maxAmount, setMaxAmount] = useState<number>();

 	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
+
 	const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailTid, setDetailTid] = useState<string>('');

@@ -174,9 +175,13 @@ export const BillingListPage = () => {
 		}
  };

-	const onRequestDownload = (userEmail?: string) => {
+	const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    
+  };

-	};
 	const setDetailData = (detailData: DetailData) => {
 		setDetailOn(detailData.detailOn);
 		setDetailTid(detailData.tid);
@@ -287,13 +292,13 @@ export const BillingListPage = () => {
 				tid={ detailTid }
 			></BillingDetail>
 			{ !!downloadBottomSheetOn &&
-				<EmailBottomSheet
+				<DownloadBottomSheet
 					bottomSheetOn={ downloadBottomSheetOn }
 					setBottomSheetOn={ setDownloadBottomSheetOn }
 					imageMode={ false }
 					emailMode={ true }
-					sendRequest={ onRequestDownload }
-				></EmailBottomSheet>
+					sendRequest={ onRequestDownloadExcel }
+				></DownloadBottomSheet>
 			}
 		</>
 	);
--- a/src/pages/transaction/cash-receipt/list-page.tsx
+++ b/src/pages/transaction/cash-receipt/list-page.tsx
@@ -32,7 +32,7 @@ import {
 import { getCashReceiptTransactionTypeBtnGroup } from '@/entities/transaction/model/contant';
 import { useStore } from '@/shared/model/store';
 import { useCashReceiptSummaryMutation } from '@/entities/transaction/api/use-cash-receipt-summary-mutation';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { CashReceiptDetail } from '@/entities/transaction/ui/detail/cash-receit-detail';
 import { checkGrant } from '@/shared/lib/check-grant';
@@ -65,7 +65,7 @@ export const CashReceiptListPage = () => {
 	const [cancelAmount, setCancelAmount] = useState<number>(0);
 	const [totalCount, setTotalCount] = useState<number>(0);

-	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

 	const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailTid, setDetailTid] = useState<string>('');
@@ -172,10 +172,14 @@ export const CashReceiptListPage = () => {

 	}

-	const onRequestDownloadExcel = (userEmail?: string) => {
-    setEmailBottomSheetOn(true);
+	const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
+    
  };

+
 	const setDetailData = (detailData: DetailData) => {
 		setDetailOn(detailData.detailOn);
 		setDetailTid(detailData.tid);
@@ -187,9 +191,9 @@ export const CashReceiptListPage = () => {
 	const onClickToOpenFilter = () => {
 		setFilterOn(!filterOn);
 	};
-	const onClickToDownloadExcel = () => {
+	const onClickToOpenDownloadBottomSheet = () => {
 		if(checkGrant(menuId, 'D')){
-			setEmailBottomSheetOn(true);
+			setDownloadBottomSheetOn(true);
 		}
 		else{
 			showAlert(t('common.nopermission'));
@@ -245,7 +249,7 @@ export const CashReceiptListPage = () => {
 									<img
 										src={IMAGE_ROOT + '/ico_download.svg'}
 										alt={ t('transaction.download') }
-										onClick={() => onClickToDownloadExcel()}
+										onClick={() => onClickToOpenDownloadBottomSheet()}
 									/>
 								</button>
 							</div>
@@ -330,14 +334,14 @@ export const CashReceiptListPage = () => {
 				setDetailOn={ setDetailOn }
 				tid={ detailTid }
 			></CashReceiptDetail>
-			{ !!emailBottomSheetOn &&
-				<EmailBottomSheet
-					bottomSheetOn={ emailBottomSheetOn }
-					setBottomSheetOn={ setEmailBottomSheetOn }
+			{ !!downloadBottomSheetOn &&
+				<DownloadBottomSheet
+					bottomSheetOn={ downloadBottomSheetOn }
+					setBottomSheetOn={ setDownloadBottomSheetOn }
 					imageMode={ false }
 					emailMode={ true }
 					sendRequest={ onRequestDownloadExcel }
-				></EmailBottomSheet>
+				></DownloadBottomSheet>
 			}
 		</>
 	);
--- a/src/pages/transaction/escrow/list-page.tsx
+++ b/src/pages/transaction/escrow/list-page.tsx
@@ -28,7 +28,7 @@ import {
 	useSetHeaderType,
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
+import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { EscrowDetail } from '@/entities/transaction/ui/detail/escrow-detail';
 import { checkGrant } from '@/shared/lib/check-grant';
@@ -58,7 +58,7 @@ export const EscrowListPage = () => {
 	const [minAmount, setMinAmount] = useState<number>();
 	const [maxAmount, setMaxAmount] = useState<number>();

-	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

 	const [detailOn, setDetailOn] = useState<boolean>(false);
  const [detailTid, setDetailTid] = useState<string>('');
@@ -150,15 +150,18 @@ export const EscrowListPage = () => {
 	const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
  };
-  const onClickToDownloadExcel = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
 		if(checkGrant(menuId, 'D')){
-			setEmailBottomSheetOn(true);
+			setDownloadBottomSheetOn(true);
 		}
 		else{
 			showAlert(t('common.nopermission'));
 		}
  };
-	const onRequestDownloadExcel = (userEmail?: string) => {
+	const onRequestDownloadExcel = (
+		selectedMode: DownloadSelectedMode,
+		userEmail?: string
+	) => {
    
  };

@@ -213,7 +216,7 @@ export const EscrowListPage = () => {
 									<img
 										src={ IMAGE_ROOT + '/ico_download.svg' }
 										alt={ t('transaction.download') }
-										onClick={ () => onClickToDownloadExcel() }
+										onClick={ () => onClickToOpenDownloadBottomSheet() }
 									/>
 								</button>
 							</div>
@@ -275,14 +278,14 @@ export const EscrowListPage = () => {
 				tid={ detailTid }
 				serviceCode={ detailServiceCode }
 			></EscrowDetail>
-			{ !!emailBottomSheetOn &&
-				<EmailBottomSheet
-					bottomSheetOn={ emailBottomSheetOn }
-					setBottomSheetOn={ setEmailBottomSheetOn }
+			{ !!downloadBottomSheetOn &&
+				<DownloadBottomSheet
+					bottomSheetOn={ downloadBottomSheetOn }
+					setBottomSheetOn={ setDownloadBottomSheetOn }
 					imageMode={ false }
 					emailMode={ true }
 					sendRequest={ onRequestDownloadExcel }
-				></EmailBottomSheet>
+				></DownloadBottomSheet>
 			}
 		</>
 	);