- 자금이체 : 이체신청,결과조회 리스트,상세정보 수정

- 부가서비스 엑셀 다운로드 이메일 바텀시트 추가
2025-10-23 13:47:16 +09:00
parent a60b5ba69e
commit fbc910caf9
15 changed files with 293 additions and 181 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
@@ -69,16 +69,6 @@ export const AccountHolderAuthPage = () => {
    });
  };

-  const onClickToDownloadExcel = () => {
-    downloadExcel({
-      mid: mid,
-      fromDate: fromDate,
-      toDate: toDate,
-      authStatus: authStatus
-    }).then((rs) => {
-      console.log('Excel Downlaod Status : ' + rs.status);
-    });
-  }

  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
@@ -155,11 +145,12 @@ export const AccountHolderAuthPage = () => {
                </div>
                <button
                  className="download-btn"
+                  aria-label="다운로드"
+                  onClick={() => onClickToOpenEmailBottomSheet()}
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
                    alt="다운로드"
-                    onClick={() => onClickToDownloadExcel()}
                  />
                </button>
              </div>
--- 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
@@ -40,7 +40,6 @@ export const AccountHolderSearchPage = () => {
  const [bank, setBank] = useState<string>('');
  const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
-  const [email, setEmail] = useState<string>('');

  useSetHeaderTitle('계좌성명조회');
  useSetHeaderType(HeaderType.LeftArrow);
@@ -87,8 +86,6 @@ export const AccountHolderSearchPage = () => {

  const onSendRequest = (selectedEmail?: string) => {
    if (selectedEmail) {
-
-      // 이메일을 설정한 후 다운로드 실행
      downloadExcel({
        mid: mid,
        //email: selectedEmail,
@@ -105,20 +102,6 @@ export const AccountHolderSearchPage = () => {
    setEmailBottomSheetOn(false);
  };

-  const onClickToDownloadExcel = () => {
-    downloadExcel({
-      mid: mid,
-      searchCl: searchType,
-      searchValue: searchKeyword,
-      fromDate: startDate,
-      toDate: endDate,
-      bankCode: bank,
-      resultStatus: processResult
-    }).then((rs) => {
-      console.log('Excel Dowload Status : ' + rs.status);
-    });
-  };
-
  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
    callList({
--- a/src/pages/additional-service/ars/list-page.tsx
+++ b/src/pages/additional-service/ars/list-page.tsx
@@ -20,6 +20,7 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { ArsPaymentStatusBtnGroup } from '@/entities/additional-service/model/ars/constant';
 import { ArsFilter } from '@/entities/additional-service/ui/filter/ars-filter';
 import { useStore } from '@/shared/model/store';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';

 export const ArsListPage = () => {
  const { navigate } = useNavigate();
@@ -38,6 +39,7 @@ 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 { mutateAsync: extensionArsList } = useExtensionArsListMutation();
  const { mutateAsync: extensionArsDownloadExcel } = useExtensionArsDownloadExcelMutation();
@@ -75,20 +77,28 @@ export const ArsListPage = () => {
    });
  };

-  const callDownloadExcel = () => {
-    let params: ExtensionArsDownloadExcelParams = {
-      mid: mid,
-      moid: moid,
-      fromDate: fromDate,
-      toDate: toDate,
-      paymentStatus: paymentStatus,
-      orderStatus: orderStatus,
-      minAmount: minAmount,
-      maxAmount: maxAmount,
-    };
-    extensionArsDownloadExcel(params).then((rs: ExtensionArsDownloadExcelResponse) => {
+  const onClickToOpenEmailBottomSheet = () => {
+    setEmailBottomSheetOn(true);
+  };

-    });
+  const onSendRequest = (selectedEmail?: string) => {
+    if (selectedEmail) {
+      const params: ExtensionArsDownloadExcelParams = {
+        mid: mid,
+        moid: moid,
+        fromDate: fromDate,
+        toDate: toDate,
+        paymentStatus: paymentStatus,
+        orderStatus: orderStatus,
+        minAmount: minAmount,
+        maxAmount: maxAmount,
+        //email: selectedEmail
+      };
+      extensionArsDownloadExcel(params).then((rs: ExtensionArsDownloadExcelResponse) => {
+        console.log('Excel Download Status:', rs);
+      });
+    }
+    setEmailBottomSheetOn(false);
  };

  const onClickToNavigate = () => {
@@ -96,10 +106,6 @@ export const ArsListPage = () => {
      state: { mid }
    });
  };
-
-  const onClickToDownloadExcel = () => {
-    callDownloadExcel();
-  };
  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
  };
@@ -206,7 +212,7 @@ export const ArsListPage = () => {
                <button
                  className="download-btn"
                  aria-label="다운로드"
-                  onClick={() => onClickToDownloadExcel()}
+                  onClick={() => onClickToOpenEmailBottomSheet()}
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
@@ -268,6 +274,13 @@ export const ArsListPage = () => {
        setMinAmount={setMinAmount}
        setMaxAmount={setMaxAmount}
      ></ArsFilter>
+      <EmailBottomSheet
+        bottomSheetOn={emailBottomSheetOn}
+        setBottomSheetOn={setEmailBottomSheetOn}
+        imageSave={false}
+        sendEmail={true}
+        sendRequest={onSendRequest}
+      ></EmailBottomSheet>
    </>
  );
 };
--- a/src/pages/additional-service/face-auth/face-auth-page.tsx
+++ b/src/pages/additional-service/face-auth/face-auth-page.tsx
@@ -20,6 +20,7 @@ import { FaceAuthList } from '@/entities/additional-service/ui/face-auth/face-au
 import { FaceAuthFilter } from '@/entities/additional-service/ui/face-auth/filter/face-auth-filter';
 import { FaceAuthListItem, FaceAuthTransactionType } from '@/entities/additional-service/model/face-auth/types';
 import { ResultStatusBtnGroup } from '@/entities/additional-service/model/face-auth/constant';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';

 export const FaceAuthPage = () => {
    const { navigate } = useNavigate();
@@ -35,6 +36,7 @@ export const FaceAuthPage = () => {
    const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
    const [transactionType, setTransactionType] = useState<FaceAuthTransactionType>(FaceAuthTransactionType.ALL);
    const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
+    const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);

    useSetHeaderTitle('안면인증');
    useSetHeaderType(HeaderType.LeftArrow);
@@ -87,17 +89,25 @@ export const FaceAuthPage = () => {
        //});
    };

-    const onClickToDownloadExcel = () => {
-        // downloadExcel({
-        //     mid: mid,
-        //     memberId: memberId,
-        //     fromDate: startDate,
-        //     toDate: endDate,
-        //     transactionType: transactionType,
-        //     resultStatus: processResult
-        // }).then((rs) => {
-        //     console.log('Excel Dowload Status : ' + rs.status);
-        // });
+    const onClickToOpenEmailBottomSheet = () => {
+        setEmailBottomSheetOn(true);
+    };
+
+    const onSendRequest = (selectedEmail?: string) => {
+        if (selectedEmail) {
+            // downloadExcel({
+            //     mid: mid,
+            //     //email: selectedEmail,
+            //     memberId: memberId,
+            //     fromDate: startDate,
+            //     toDate: endDate,
+            //     transactionType: transactionType,
+            //     resultStatus: processResult
+            // }).then((rs) => {
+            //     console.log('Excel Download Status: ' + rs.status);
+            // });
+        }
+        setEmailBottomSheetOn(false);
    };

    const onClickToOpenFilter = () => {
@@ -147,11 +157,12 @@ export const FaceAuthPage = () => {
                                </div>
                                <button
                                    className="download-btn"
+                                    aria-label="다운로드"
+                                    onClick={() => onClickToOpenEmailBottomSheet()}
                                >
                                    <img
                                        src={IMAGE_ROOT + '/ico_download.svg'}
                                        alt="다운로드"
-                                        onClick={() => onClickToDownloadExcel()}
                                    />
                                </button>
                            </div>
@@ -199,6 +210,13 @@ export const FaceAuthPage = () => {
                setTransactionType={setTransactionType}
                setProcessResult={setProcessResult}
            />
+            <EmailBottomSheet
+                bottomSheetOn={emailBottomSheetOn}
+                setBottomSheetOn={setEmailBottomSheetOn}
+                imageSave={false}
+                sendEmail={true}
+                sendRequest={onSendRequest}
+            ></EmailBottomSheet>
        </>
    );
 };
--- a/src/pages/additional-service/fund-account/result-detail-page.tsx
+++ b/src/pages/additional-service/fund-account/result-detail-page.tsx
@@ -19,6 +19,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';

 export const FundAccountResultDetailPage = () => {
  const { navigate } = useNavigate();
@@ -28,7 +29,7 @@ export const FundAccountResultDetailPage = () => {
  const mid = location.state.mid;

  const [detail, setDetail] = useState<ExtensionFundAccountResultDetailResponse>();
-  const [email, setEmail] = useState<string>('');
+  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);

  const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation();
  const { mutateAsync: extensionFundAccountDownlaodReceipt } = useExtensionFundAccountDownloadReceiptMutation();
@@ -40,19 +41,27 @@ export const FundAccountResultDetailPage = () => {
    };

    extensionFundAccountResultDetail(params).then((rs: ExtensionFundAccountResultDetailResponse) => {
+      console.log(rs.requestDate)
      setDetail(rs);
    });
  };

-  const onClickToDownload = () => {
-    let params: ExtensionFundAccountDownloadReceiptParams = {
-      mid: mid,
-      tid: tid,
-      email: email
-    };
-    extensionFundAccountDownlaodReceipt(params).then((rs: ExtensionFundAccountDownloadReceiptResponse) => {
-      console.log(rs);
-    });
+  const onClickToOpenEmailBottomSheet = () => {
+    setEmailBottomSheetOn(true);
+  };
+
+  const onSendRequest = (selectedEmail?: string) => {
+    if (selectedEmail) {
+      let params: ExtensionFundAccountDownloadReceiptParams = {
+        mid: mid,
+        tid: tid,
+        email: selectedEmail
+      };
+      extensionFundAccountDownlaodReceipt(params).then((rs: ExtensionFundAccountDownloadReceiptResponse) => {
+        console.log('Receipt Download Status:', rs);
+      });
+    }
+    setEmailBottomSheetOn(false);
  };

  useSetHeaderTitle('자금이체 상세');
@@ -64,6 +73,7 @@ export const FundAccountResultDetailPage = () => {

  useEffect(() => {
    callDetail();
+    console.log(detail?.requestDate)
  }, []);

  return (
@@ -83,7 +93,9 @@ export const FundAccountResultDetailPage = () => {
                </span>
              </div>
              <div className="num-store">{detail?.accountName}({detail?.accountNo})</div>
-              <div className="num-day">  {moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</div>
+              {detail?.applicationDate && (
+                <div className="num-day">  {moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</div>
+              )}
            </div>
            {/* ✅ resultMessage가 "정상"일 때만 표시 */}
            {detail?.resultMessage === '정상' && (
@@ -91,7 +103,7 @@ export const FundAccountResultDetailPage = () => {
                <button
                  type="button"
                  className="receipt-btn"
-                  onClick={ onClickToDownload }
+                  onClick={ onClickToOpenEmailBottomSheet }
                  >
                  <span className="icon-24 download"></span>
                  <span>입금확인서</span>
@@ -104,19 +116,19 @@ export const FundAccountResultDetailPage = () => {
              <ul className="kv-list">
                <li className="kv-row">
                  <span className="k">요청일시</span>
-                  <span className="v">{moment(detail?.requsetDate).format('YYYY.MM.DD HH:mm:ss')}</span>
+                  <span className="v">{moment(detail?.requestDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</span>
                </li>
                <li className="kv-row">
                  <span className="k">이체일시</span>
-                  <span className="v">{moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD  HH:mm:ss')}</span>
+                  <span className="v">{detail?.applicationDate ? moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD  HH:mm:ss') : '-'}</span>
                </li>
                <li className="kv-row">
                  <span className="k">이체결과</span>
-                  <span className="v">{detail?.resultMessage}</span>
+                  <span className="v">{detail?.resultMessage || '-'}</span>
                </li>
                <li className="kv-row">
                  <span className="k">실패사유</span>
-                  <span className="v">{detail?.failReason}</span>
+                  <span className="v">{detail?.failReason || '-'}</span>
                </li>
                <li className="kv-row">
                  <span className="k">수취인명</span>
@@ -147,6 +159,13 @@ export const FundAccountResultDetailPage = () => {
          </div>
        </div>
      </main>
+      <EmailBottomSheet
+        bottomSheetOn={emailBottomSheetOn}
+        setBottomSheetOn={setEmailBottomSheetOn}
+        imageSave={false}
+        sendEmail={true}
+        sendRequest={onSendRequest}
+      ></EmailBottomSheet>
    </>
  );
 };
--- a/src/pages/additional-service/fund-account/transfer-detail-page.tsx
+++ b/src/pages/additional-service/fund-account/transfer-detail-page.tsx
@@ -120,7 +120,7 @@ export const FundAccountTransferDetailPage = () => {
                </li>
                <li className="kv-row">
                  <span className="k">은행</span>
-                  <span className="v">{detail?.bankCode}</span>
+                  <span className="v">{detail?.bankCode || '-'} </span>
                </li>
                <li className="kv-row">
                  <span className="k">계좌번호</span>
--- 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,6 +21,7 @@ import { KeyInPaymentList } from '@/entities/additional-service/ui/key-in-paymen
 import { useStore } from '@/shared/model/store';
 import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types';
 import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';

 export const KeyInPaymentPage = () => {
  const { navigate } = useNavigate();
@@ -36,6 +37,7 @@ export const KeyInPaymentPage = () => {
  const [paymentStatus, setPaymentStatus] = useState<KeyInPaymentPaymentStatus>(KeyInPaymentPaymentStatus.ALL)
  const [minAmount, setMinAmount] = useState<number>();
  const [maxAmount, setMaxAmount] = useState<number>();
+  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);

  useSetHeaderTitle('KEY-IN 결제');
  useSetHeaderType(HeaderType.LeftArrow);
@@ -83,25 +85,33 @@ export const KeyInPaymentPage = () => {
    setFilterOn(!filterOn);
  };

-  const onClickToDownloadExcel = () => {
-    let newMinAmount = minAmount;
-    if (!!minAmount && typeof (minAmount) === 'string') {
-      newMinAmount = parseInt(minAmount);
+  const onClickToOpenEmailBottomSheet = () => {
+    setEmailBottomSheetOn(true);
+  };
+
+  const onSendRequest = (selectedEmail?: string) => {
+    if (selectedEmail) {
+      let newMinAmount = minAmount;
+      if (!!minAmount && typeof (minAmount) === 'string') {
+        newMinAmount = parseInt(minAmount);
+      }
+      let newMaxAmount = maxAmount;
+      if (!!maxAmount && typeof (maxAmount) === 'string') {
+        newMaxAmount = parseInt(maxAmount);
+      }
+      downloadExcel({
+        mid: mid,
+        fromDate: startDate,
+        toDate: endDate,
+        paymentStatus: paymentStatus,
+        minAmount: newMinAmount,
+        maxAmount: newMaxAmount,
+        //email: selectedEmail
+      }).then((rs) => {
+        console.log('Excel Download Status:', rs.status);
+      });
    }
-    let newMaxAmount = maxAmount;
-    if (!!maxAmount && typeof (maxAmount) === 'string') {
-      newMaxAmount = parseInt(maxAmount);
-    }
-    downloadExcel({
-      mid: mid,
-      fromDate: startDate,
-      toDate: endDate,
-      paymentStatus: paymentStatus,
-      minAmount: newMinAmount,
-      maxAmount: newMaxAmount
-    }).then((rs) => {
-      console.log('Excel Dowload Status : ' + rs.status);
-    });
+    setEmailBottomSheetOn(false);
  };

  const onClickToSort = (sort: SortTypeKeys) => {
@@ -161,7 +171,7 @@ export const KeyInPaymentPage = () => {
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
                    alt="다운로드"
-                    onClick={() => onClickToDownloadExcel()}
+                    onClick={() => onClickToOpenEmailBottomSheet()}
                  />
                </button>
              </div>
@@ -210,6 +220,13 @@ export const KeyInPaymentPage = () => {
        setMinAmount={setMinAmount}
        setMaxAmount={setMaxAmount}
      ></KeyInPaymentFilter>
+      <EmailBottomSheet
+        bottomSheetOn={emailBottomSheetOn}
+        setBottomSheetOn={setEmailBottomSheetOn}
+        imageSave={false}
+        sendEmail={true}
+        sendRequest={onSendRequest}
+      ></EmailBottomSheet>
    </>
  );
 };
--- a/src/pages/additional-service/payout/list-page.tsx
+++ b/src/pages/additional-service/payout/list-page.tsx
@@ -28,6 +28,7 @@ import { PayoutDisbursementStatusBtnGroup } from '@/entities/additional-service/
 import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
 import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
 import { useStore } from '@/shared/model/store';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';

 export const PayoutListPage = () => {
  const { navigate } = useNavigate();
@@ -44,6 +45,7 @@ export const PayoutListPage = () => {
  const [status, setStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL);
  const [minAmount, setMinAmount] = useState<number>(0);
 	const [maxAmount, setMaxAmount] = useState<number>(50000000);
+  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);

  const { mutateAsync: extensionPayoutList } = useExtensionPayoutListMutation();
  const { mutateAsync: extensionPayoutExcel } = useExtensionPayoutExcelMutation();
@@ -92,23 +94,27 @@ export const PayoutListPage = () => {
    });
  };

-  const callDownloadExcel = () => {
-     let params: ExtensionPayoutExcelParams = {
-      mid: mid,
-      searchDateType: searchDateType,
-      fromDate: fromDate,
-      toDate: toDate,
-      status: status,
-      minAmount: minAmount,
-      maxAmount: maxAmount,
-    };
-    extensionPayoutExcel(params).then((rs: ExtensionPayoutExcelResponse) => {
-
-    });
+  const onClickToOpenEmailBottomSheet = () => {
+    setEmailBottomSheetOn(true);
  };

-  const onClickToDownloadExcel = () => {
-    callDownloadExcel();
+  const onSendRequest = (selectedEmail?: string) => {
+    if (selectedEmail) {
+      const params: ExtensionPayoutExcelParams = {
+        mid: mid,
+        searchDateType: searchDateType,
+        fromDate: fromDate,
+        toDate: toDate,
+        status: status,
+        minAmount: minAmount,
+        maxAmount: maxAmount,
+        //email: selectedEmail
+      };
+      extensionPayoutExcel(params).then((rs: ExtensionPayoutExcelResponse) => {
+        console.log('Excel Download Status:', rs);
+      });
+    }
+    setEmailBottomSheetOn(false);
  };
  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
@@ -211,13 +217,13 @@ export const PayoutListPage = () => {
                    />
                  </button>
                </div>
-                <button 
-                  className="download-btn" 
+                <button
+                  className="download-btn"
                  aria-label="다운로드"
-                  onClick={ () => onClickToDownloadExcel() }
+                  onClick={ () => onClickToOpenEmailBottomSheet() }
                >
-                  <img 
-                    src={ IMAGE_ROOT + '/ico_download.svg' } 
+                  <img
+                    src={ IMAGE_ROOT + '/ico_download.svg' }
                    alt="다운로드"
                  />
                </button>
@@ -283,6 +289,13 @@ export const PayoutListPage = () => {
        setMinAmount={ setMinAmount }
        setMaxAmount={ setMaxAmount }
      ></PayoutFilter>
+      <EmailBottomSheet
+        bottomSheetOn={emailBottomSheetOn}
+        setBottomSheetOn={setEmailBottomSheetOn}
+        imageSave={false}
+        sendEmail={true}
+        sendRequest={onSendRequest}
+      ></EmailBottomSheet>
    </>
  );
 };
--- a/src/pages/additional-service/sms-payment/sms-payment-page.tsx
+++ b/src/pages/additional-service/sms-payment/sms-payment-page.tsx
@@ -20,6 +20,7 @@ import { useExtensionSmsDetailMutation } from '@/entities/additional-service/api
 import { useStore } from '@/shared/model/store';
 import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
 import { PATHS } from '@/shared/constants/paths';
+import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';


 export const SmsPaymentPage = () => {
@@ -41,6 +42,7 @@ 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 { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
  const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
@@ -85,18 +87,26 @@ export const SmsPaymentPage = () => {
    })
  }

-  const onClickToDownloadExcel = () => {
-    downloadExcel({
-      mid: mid,
-      searchCl: searchCl,
-      searchValue: searchValue,
-      fromDate: fromDate,
-      toDate: toDate,
-      smsCl: smsCl,
-    }).then((rs) => {
-      console.log('Excel Dowload Status : ' + rs.status);
-    });
-  }
+  const onClickToOpenEmailBottomSheet = () => {
+    setEmailBottomSheetOn(true);
+  };
+
+  const onSendRequest = (selectedEmail?: string) => {
+    if (selectedEmail) {
+      downloadExcel({
+        mid: mid,
+        searchCl: searchCl,
+        searchValue: searchValue,
+        fromDate: fromDate,
+        toDate: toDate,
+        smsCl: smsCl,
+        //email: selectedEmail
+      }).then((rs) => {
+        console.log('Excel Download Status:', rs.status);
+      });
+    }
+    setEmailBottomSheetOn(false);
+  };

  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
@@ -153,7 +163,7 @@ export const SmsPaymentPage = () => {
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
                    alt="다운로드"
-                    onClick={() => onClickToDownloadExcel()}
+                    onClick={() => onClickToOpenEmailBottomSheet()}
                  />
                </button>
              </div>
@@ -193,6 +203,13 @@ export const SmsPaymentPage = () => {
        setToDate={setToDate}
        setSmsCl={setSmsCl}
      ></SmsPaymentFilter>
+      <EmailBottomSheet
+        bottomSheetOn={emailBottomSheetOn}
+        setBottomSheetOn={setEmailBottomSheetOn}
+        imageSave={false}
+        sendEmail={true}
+        sendRequest={onSendRequest}
+      ></EmailBottomSheet>
    </>
  );
 };