bottomsheet

2025-11-07 16:23:49 +09:00
parent 0696c42e62
commit 6b6d3cff0e
24 changed files with 185 additions and 124 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
@@ -178,13 +178,15 @@ export const FundAccountResultDetail = ({
          </div>
        </div>
      </motion.div>
-      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
-        sendRequest={onSendRequest}
-      ></EmailBottomSheet>
+      { !!emailBottomSheetOn &&
+        <EmailBottomSheet
+          bottomSheetOn={ emailBottomSheetOn }
+          setBottomSheetOn={ setEmailBottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ onSendRequest }
+        ></EmailBottomSheet>
+      }
    </>
  );
 };
--- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
@@ -398,13 +398,15 @@ export const FundAccountResultListWrap = () => {
        mid={ detailMid }
        tid={ detailTid }
      ></FundAccountResultDetail>
-      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
-        sendRequest={onSendRequest}
-      ></EmailBottomSheet>
+      { !!emailBottomSheetOn && 
+        <EmailBottomSheet
+          bottomSheetOn={emailBottomSheetOn}
+          setBottomSheetOn={setEmailBottomSheetOn}
+          imageMode={false}
+          emailMode={true}
+          sendRequest={onSendRequest}
+        ></EmailBottomSheet>
+      }
    </>
  );
 };
--- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
@@ -364,13 +364,15 @@ export const FundAccountTransferListWrap = () => {
        setDetailOn={ setDetailOn }
        seq={ detailSeq }
      ></FundAccountTransferDetail>
-      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
-        sendRequest={onSendRequest}
-      />
+      { emailBottomSheetOn && 
+        <EmailBottomSheet
+          bottomSheetOn={ emailBottomSheetOn }
+          setBottomSheetOn={ setEmailBottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ onSendRequest }
+        />
+      }
    </>
  );
 };
--- 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
@@ -310,13 +310,15 @@ export const LinkPaymentHistoryWrap = () => {
 				requestId={detailRequestId}
 				subReqId={detailSubReqId}
 			></LinkPaymentHistoryDetail>
-			<EmailBottomSheet
-				bottomSheetOn={emailBottomSheetOn}
-				setBottomSheetOn={setEmailBottomSheetOn}
-				imageSave={false}
-				sendEmail={true}
-				sendRequest={onSendRequest}
-			></EmailBottomSheet>
+			{ emailBottomSheetOn &&
+				<EmailBottomSheet
+					bottomSheetOn={ emailBottomSheetOn }
+					setBottomSheetOn={ setEmailBottomSheetOn }
+					imageMode={ false }
+					emailMode={ true }
+					sendRequest={ onSendRequest }
+				></EmailBottomSheet>
+			}
 		</>
 	);
 }
--- 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
@@ -278,13 +278,15 @@ export const LinkPaymentWaitSendWrap = () => {
        mid={ detailMid }
        requestId={ detailRequestId }
      ></LinkPaymentWaitDetail>
-      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
-        sendRequest={onSendRequest}
-      ></EmailBottomSheet>
+      { !!emailBottomSheetOn &&
+        <EmailBottomSheet
+          bottomSheetOn={ emailBottomSheetOn }
+          setBottomSheetOn={ setEmailBottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ onSendRequest }
+        ></EmailBottomSheet>
+      }
    </>
  );
 }
--- a/src/entities/additional-service/ui/payout/detail/payout-detail.tsx
+++ b/src/entities/additional-service/ui/payout/detail/payout-detail.tsx
@@ -197,13 +197,15 @@ export const PayoutDetail = ({
 					setBottomSheetOn={setDownloadTypeBottomSheetOn}
 					onSelectType={onSelectDownloadType}
 				/>
-				<EmailBottomSheet
-					bottomSheetOn={emailBottomSheetOn}
-					setBottomSheetOn={setEmailBottomSheetOn}
-					imageSave={false}
-					sendEmail={true}
-					sendRequest={onSendRequest}
-				/>
+				{ !!emailBottomSheetOn &&
+					<EmailBottomSheet
+						bottomSheetOn={ emailBottomSheetOn }
+						setBottomSheetOn={ setEmailBottomSheetOn }
+						imageMode={ false }
+						emailMode={ true }
+						sendRequest={ onSendRequest }
+					/>
+				}
 			</motion.div>
 		</>
 	);
--- a/src/entities/common/ui/email-bottom-sheet.tsx
+++ b/src/entities/common/ui/email-bottom-sheet.tsx
@@ -2,7 +2,7 @@ import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useStore } from '@/shared/model/store';
 import { motion } from 'framer-motion';
-import { ChangeEvent, useState } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { toPng } from 'html-to-image';
 import { snackBar } from '@/shared/lib';
 import { useTranslation } from 'react-i18next';
@@ -10,22 +10,32 @@ import { useTranslation } from 'react-i18next';
 export interface EmailBottomSheetProps {
  bottomSheetOn: boolean;
  setBottomSheetOn: (bottomSheetOn: boolean) => void;
-  imageSave: boolean;
-  sendEmail: boolean;
+  imageMode: boolean;
+  emailMode: boolean;
  sendRequest: (email?: string) => void;
 };
+export enum EmailBottomSheetSelectedMode {
+  IMAGE = 'IMAGE',
+  EMAIL = 'EMAIL'
+};

 export const EmailBottomSheet = ({
  bottomSheetOn,
  setBottomSheetOn,
-  imageSave,
-  sendEmail,
+  imageMode,
+  emailMode,
  sendRequest
 }: EmailBottomSheetProps) => {
  const { t } = useTranslation();
  const optionsEmails = useStore.getState().UserStore.selectOptionsEmails;
  const email = useStore.getState().UserStore.email;
+  
  const [userEmail, setUserEmail] = useState<string>(email);
+  const [sheetImageMode, setSheetImageMode] = useState<boolean>(imageMode);
+  const [sheetEmailMode, setSheetEmailMode] = useState<boolean>(emailMode);
+
+  const [selectedMode, setSelectedMode] = useState<EmailBottomSheetSelectedMode | undefined>();
+
  const onClickToClose = () => {
    setBottomSheetOn(false);
  };
@@ -48,11 +58,23 @@ export const EmailBottomSheet = ({
    });
  };
  const onDownloadImage = () => {
-    downloadImage();
+    // downloadImage();
    setTimeout(() => {
      onClickToClose();
    }, 2000);
  };
+
+  useEffect(() => {
+    setSheetImageMode(imageMode);
+    setSheetEmailMode(emailMode);
+
+    if(imageMode && !emailMode){
+      setSelectedMode(EmailBottomSheetSelectedMode.IMAGE);
+    }
+    else if(!imageMode && emailMode){
+      setSelectedMode(EmailBottomSheetSelectedMode.EMAIL);
+    }
+  }, [imageMode, emailMode]);
  
  return (
    <>
@@ -84,7 +106,7 @@ export const EmailBottomSheet = ({

        <div className="bottomsheet-content">
          <div className="email-section">
-            { !!imageSave &&
+            { !!sheetImageMode &&
            <div
              className="email-label mb-10"
              onClick={ onDownloadImage }
@@ -99,7 +121,7 @@ export const EmailBottomSheet = ({
              <span className="label-text">{t('common.imageSave')}</span>
            </div>
            }
-            { !!sendEmail &&
+            { !!sheetEmailMode &&
            <>
              <div className="email-label">
                <div className="mail-icon">
@@ -111,7 +133,9 @@ export const EmailBottomSheet = ({
                </div>
                <span className="label-text">{t('common.receiveByEmail')}</span>
              </div>
-              { optionsEmails && optionsEmails.length > 0 &&
+              { selectedMode === EmailBottomSheetSelectedMode.EMAIL && 
+                optionsEmails && 
+                optionsEmails.length > 0 &&
                <div className="email-select">
                  <div className="select-wrapper">
                    <select
@@ -130,7 +154,8 @@ export const EmailBottomSheet = ({
                  </div>
                </div>
              }
-              { (!optionsEmails || optionsEmails.length === 0) &&
+              { selectedMode === EmailBottomSheetSelectedMode.EMAIL && 
+                (!optionsEmails || optionsEmails.length === 0) &&
                <div className="error-message">
                  <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>
                </div>
--- a/src/entities/settlement/ui/list-wrap.tsx
+++ b/src/entities/settlement/ui/list-wrap.tsx
@@ -532,8 +532,8 @@ export const ListWrap = ({
        <EmailBottomSheet
          bottomSheetOn={ emailBottomSheetOn }
          setBottomSheetOn={ setEmailBottomSheetOn }
-          imageSave={ false }
-          sendEmail={ true }
+          imageMode={ false }
+          emailMode={ true }
          sendRequest={ onRequestDownloadExcel }
        ></EmailBottomSheet>
      }
--- a/src/entities/transaction/ui/detail/escrow-detail.tsx
+++ b/src/entities/transaction/ui/detail/escrow-detail.tsx
@@ -231,13 +231,15 @@ export const EscrowDetail = ({
          >메일 재발송</button>
        </div>
      </motion.div>
-      <EmailBottomSheet
-        setBottomSheetOn={ setBottomSheetOn }
-        bottomSheetOn={ bottomSheetOn }
-        imageSave={ false }
-				sendEmail={ true }
-				sendRequest={ callMailResend }
-      ></EmailBottomSheet>
+      { !!bottomSheetOn && 
+        <EmailBottomSheet
+          setBottomSheetOn={ setBottomSheetOn }
+          bottomSheetOn={ bottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ callMailResend }
+        ></EmailBottomSheet>
+      }
    </>
  );
 };
--- a/src/entities/transaction/ui/section/amount-info-section.tsx
+++ b/src/entities/transaction/ui/section/amount-info-section.tsx
@@ -7,6 +7,8 @@ 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';

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

  const { mutateAsync: cashReceiptReceiptDownload } = useCashReceiptReceiptDownloadMutation();
-
+  const [emailBottomSheetOn, setEmailBottomSheetOn] = 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'},
@@ -184,7 +186,15 @@ export const AmountInfoSection = ({
    }
  };

-  const onClickToDownload = () => {
+  const onClickToOpenDownloadBottomSheet = () => {
+    setEmailBottomSheetOn(true);
+  };
+
+  const onSendRequest = (email?: string) => {
+    
+  };
+
+  const onRequestToDownload = () => {
    if(!!tid){
      let params: CashReceiptReceiptDownloadParams = {
        tid: tid
@@ -395,15 +405,22 @@ export const AmountInfoSection = ({
        <div className="txn-doc">
          {
            (transactionCategory === TransactionCategory.CashReceipt) &&
-            !!canDownloadReceipt &&
+            
            <button
              className="doc-btn"
              type="button"
-              onClick={ () => onClickToDownload() }
+              onClick={ () => onClickToOpenDownloadBottomSheet() }
            >{t('transaction.fields.transactionConfirmation')}</button>
          }
        </div>
      </div>
+      <EmailBottomSheet
+        bottomSheetOn={emailBottomSheetOn}
+        setBottomSheetOn={setEmailBottomSheetOn}
+        imageMode={true}
+        emailMode={true}
+        sendRequest={onSendRequest}
+      />
    </>
  );
 };
--- a/src/entities/vat-return/ui/list-wrap.tsx
+++ b/src/entities/vat-return/ui/list-wrap.tsx
@@ -251,8 +251,8 @@ export const ListWrap = () => {
        <EmailBottomSheet
          bottomSheetOn={ emailBottomSheetOn }
          setBottomSheetOn={ setEmailBottomSheetOn }
-          imageSave={ false }
-          sendEmail={ true }
+          imageMode={ false }
+          emailMode={ true }
          sendRequest={ onRequestDownloadExcel }
        ></EmailBottomSheet>
      }
--- a/src/entities/vat-return/ui/section/amount-section.tsx
+++ b/src/entities/vat-return/ui/section/amount-section.tsx
@@ -89,8 +89,8 @@ export const AmountSection = ({
        <EmailBottomSheet
          bottomSheetOn={ downloadBottomSheetOn }
          setBottomSheetOn={ setDownloadBottomSheetOn }
-          imageSave={ true }
-          sendEmail={ true }
+          imageMode={ true }
+          emailMode={ true }
          sendRequest={ onRequestDownload }
        ></EmailBottomSheet>
      }
--- 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
@@ -289,11 +289,11 @@ export const AccountHolderAuthPage = () => {
        tid={detailTid}
      ></AccountHolderAuthDetail>
      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
-        sendRequest={onSendRequest}
+        bottomSheetOn={ emailBottomSheetOn }
+        setBottomSheetOn={ setEmailBottomSheetOn }
+        imageMode={ false }
+        emailMode={ true }
+        sendRequest={ onSendRequest }
      ></EmailBottomSheet>
    </>
  );
--- 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
@@ -306,12 +306,12 @@ export const AccountHolderSearchPage = () => {
        tid={detailTid}
      ></AccountHolderSearchDetail>
      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
-        sendRequest={onSendRequest}
-      />
+        bottomSheetOn={ emailBottomSheetOn }
+        setBottomSheetOn={ setEmailBottomSheetOn }
+        imageMode={ false }
+        emailMode={ true }
+        sendRequest={ onSendRequest }
+      ></EmailBottomSheet>
    </>
  );
 };
--- a/src/pages/additional-service/alimtalk/list-page.tsx
+++ b/src/pages/additional-service/alimtalk/list-page.tsx
@@ -357,13 +357,12 @@ export const AlimtalkListPage = () => {
        seq={ detailSeq }
      ></AlimtalkDetail>
      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
+        bottomSheetOn={ emailBottomSheetOn }
+        setBottomSheetOn={ setEmailBottomSheetOn }
+        imageMode={ false }
+        emailMode={ true }
        sendRequest={onSendRequest}
-      >
-      </EmailBottomSheet>
+      ></EmailBottomSheet>
    </>
  );
 };
--- a/src/pages/additional-service/ars/list-page.tsx
+++ b/src/pages/additional-service/ars/list-page.tsx
@@ -324,10 +324,10 @@ export const ArsListPage = () => {
        tid={detailTid}
      ></ArsDetail>
      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
+        bottomSheetOn={ emailBottomSheetOn }
+        setBottomSheetOn={ setEmailBottomSheetOn }
+        imageMode={ false }
+        emailMode={ 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
@@ -318,11 +318,11 @@ export const FaceAuthPage = () => {
 				setAuthResult={setAuthResult}
 			/>
 			<EmailBottomSheet
-				bottomSheetOn={emailBottomSheetOn}
-				setBottomSheetOn={setEmailBottomSheetOn}
-				imageSave={false}
-				sendEmail={true}
-				sendRequest={onSendRequest}
+				bottomSheetOn={ emailBottomSheetOn }
+				setBottomSheetOn={ setEmailBottomSheetOn }
+				imageMode={ false }
+				emailMode={ true }
+				sendRequest={ onSendRequest }
 			></EmailBottomSheet>
 		</>
 	);
--- 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
@@ -278,13 +278,15 @@ export const KeyInPaymentPage = () => {
        setMinAmount={setMinAmount}
        setMaxAmount={setMaxAmount}
      ></KeyInPaymentFilter>
-      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
-        sendRequest={onSendRequest}
-      ></EmailBottomSheet>
+      { !!emailBottomSheetOn &&
+        <EmailBottomSheet
+          bottomSheetOn={ emailBottomSheetOn }
+          setBottomSheetOn={ setEmailBottomSheetOn }
+          imageMode={ false }
+          emailMode={ true }
+          sendRequest={ onSendRequest }
+        ></EmailBottomSheet>
+      }
    </>
  );
 };
--- a/src/pages/additional-service/payout/list-page.tsx
+++ b/src/pages/additional-service/payout/list-page.tsx
@@ -375,13 +375,15 @@ export const PayoutListPage = () => {
      tid={detailTid}
      >
      </PayoutDetail>
-      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
-        sendRequest={onSendRequest}
-      ></EmailBottomSheet>
+      { !!emailBottomSheetOn &&
+        <EmailBottomSheet
+          bottomSheetOn={ emailBottomSheetOn }
+          setBottomSheetOn={ setEmailBottomSheetOn }
+          imageMode={ false }
+          emailMode={ 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
@@ -274,13 +274,15 @@ export const SmsPaymentPage = () => {
        setToDate={setToDate}
        setSmsCl={setSmsCl}
      ></SmsPaymentFilter>
-      <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
-        setBottomSheetOn={setEmailBottomSheetOn}
-        imageSave={false}
-        sendEmail={true}
-        sendRequest={onSendRequest}
-      ></EmailBottomSheet>
+      { !!emailBottomSheetOn &&
+        <EmailBottomSheet
+          bottomSheetOn={emailBottomSheetOn}
+          setBottomSheetOn={setEmailBottomSheetOn}
+          imageMode={false}
+          emailMode={true}
+          sendRequest={onSendRequest}
+        ></EmailBottomSheet>
+      }
    </>
  );
 };
--- a/src/pages/transaction/all-transaction/list-page.tsx
+++ b/src/pages/transaction/all-transaction/list-page.tsx
@@ -403,8 +403,8 @@ export const AllTransactionListPage = () => {
        <EmailBottomSheet
          bottomSheetOn={ emailBottomSheetOn }
          setBottomSheetOn={ setEmailBottomSheetOn }
-          imageSave={ false }
-          sendEmail={ true }
+          imageMode={ false }
+          emailMode={ true }
          sendRequest={ onRequestDownloadExcel }
        ></EmailBottomSheet>
      }
--- a/src/pages/transaction/billing/list-page.tsx
+++ b/src/pages/transaction/billing/list-page.tsx
@@ -290,8 +290,8 @@ export const BillingListPage = () => {
 				<EmailBottomSheet
 					bottomSheetOn={ downloadBottomSheetOn }
 					setBottomSheetOn={ setDownloadBottomSheetOn }
-					imageSave={ false }
-					sendEmail={ true }
+					imageMode={ false }
+					emailMode={ true }
 					sendRequest={ onRequestDownload }
 				></EmailBottomSheet>
 			}
--- a/src/pages/transaction/cash-receipt/list-page.tsx
+++ b/src/pages/transaction/cash-receipt/list-page.tsx
@@ -334,8 +334,8 @@ export const CashReceiptListPage = () => {
 				<EmailBottomSheet
 					bottomSheetOn={ emailBottomSheetOn }
 					setBottomSheetOn={ setEmailBottomSheetOn }
-					imageSave={ false }
-					sendEmail={ true }
+					imageMode={ false }
+					emailMode={ true }
 					sendRequest={ onRequestDownloadExcel }
 				></EmailBottomSheet>
 			}
--- a/src/pages/transaction/escrow/list-page.tsx
+++ b/src/pages/transaction/escrow/list-page.tsx
@@ -279,8 +279,8 @@ export const EscrowListPage = () => {
 				<EmailBottomSheet
 					bottomSheetOn={ emailBottomSheetOn }
 					setBottomSheetOn={ setEmailBottomSheetOn }
-					imageSave={ false }
-					sendEmail={ true }
+					imageMode={ false }
+					emailMode={ true }
 					sendRequest={ onRequestDownloadExcel }
 				></EmailBottomSheet>
 			}