downloadbottomsheet

2025-11-07 17:46:06 +09:00
parent 6b6d3cff0e
commit 1bbf90b98e
24 changed files with 485 additions and 368 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,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>
      }
    </>
  );