bottomsheet

src/entities/additional-service/ui/fund-account/detail/result-detail.tsx

@@ -178,13 +178,15 @@ export const FundAccountResultDetail = ({
           </div>
         </div>
       </motion.div>
-      <EmailBottomSheet
+      { !!emailBottomSheetOn &&
-        bottomSheetOn={emailBottomSheetOn}
+        <EmailBottomSheet
-        setBottomSheetOn={setEmailBottomSheetOn}
+          bottomSheetOn={ emailBottomSheetOn }
-        imageSave={false}
+          setBottomSheetOn={ setEmailBottomSheetOn }
-        sendEmail={true}
+          imageMode={ false }
-        sendRequest={onSendRequest}
+          emailMode={ true }
-      ></EmailBottomSheet>
+          sendRequest={ onSendRequest }
+        ></EmailBottomSheet>
+      }
     </>
   );
 };

src/entities/additional-service/ui/fund-account/result-list-wrap.tsx

@@ -398,13 +398,15 @@ export const FundAccountResultListWrap = () => {
         mid={ detailMid }
         tid={ detailTid }
       ></FundAccountResultDetail>
-      <EmailBottomSheet
+      { !!emailBottomSheetOn && 
-        bottomSheetOn={emailBottomSheetOn}
+        <EmailBottomSheet
-        setBottomSheetOn={setEmailBottomSheetOn}
+          bottomSheetOn={emailBottomSheetOn}
-        imageSave={false}
+          setBottomSheetOn={setEmailBottomSheetOn}
-        sendEmail={true}
+          imageMode={false}
-        sendRequest={onSendRequest}
+          emailMode={true}
-      ></EmailBottomSheet>
+          sendRequest={onSendRequest}
+        ></EmailBottomSheet>
+      }
     </>
   );
 };

src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx

@@ -364,13 +364,15 @@ export const FundAccountTransferListWrap = () => {
         setDetailOn={ setDetailOn }
         seq={ detailSeq }
       ></FundAccountTransferDetail>
-      <EmailBottomSheet
+      { emailBottomSheetOn && 
-        bottomSheetOn={emailBottomSheetOn}
+        <EmailBottomSheet
-        setBottomSheetOn={setEmailBottomSheetOn}
+          bottomSheetOn={ emailBottomSheetOn }
-        imageSave={false}
+          setBottomSheetOn={ setEmailBottomSheetOn }
-        sendEmail={true}
+          imageMode={ false }
-        sendRequest={onSendRequest}
+          emailMode={ true }
-      />
+          sendRequest={ onSendRequest }
+        />
+      }
     </>
   );
 };

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
+			{ emailBottomSheetOn &&
-				bottomSheetOn={emailBottomSheetOn}
+				<EmailBottomSheet
-				setBottomSheetOn={setEmailBottomSheetOn}
+					bottomSheetOn={ emailBottomSheetOn }
-				imageSave={false}
+					setBottomSheetOn={ setEmailBottomSheetOn }
-				sendEmail={true}
+					imageMode={ false }
-				sendRequest={onSendRequest}
+					emailMode={ true }
-			></EmailBottomSheet>
+					sendRequest={ onSendRequest }
+				></EmailBottomSheet>
+			}
 		</>
 	);
 }

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
+      { !!emailBottomSheetOn &&
-        bottomSheetOn={emailBottomSheetOn}
+        <EmailBottomSheet
-        setBottomSheetOn={setEmailBottomSheetOn}
+          bottomSheetOn={ emailBottomSheetOn }
-        imageSave={false}
+          setBottomSheetOn={ setEmailBottomSheetOn }
-        sendEmail={true}
+          imageMode={ false }
-        sendRequest={onSendRequest}
+          emailMode={ true }
-      ></EmailBottomSheet>
+          sendRequest={ onSendRequest }
+        ></EmailBottomSheet>
+      }
     </>
   );
 }

src/entities/additional-service/ui/payout/detail/payout-detail.tsx

@@ -197,13 +197,15 @@ export const PayoutDetail = ({
 					setBottomSheetOn={setDownloadTypeBottomSheetOn}
 					onSelectType={onSelectDownloadType}
 				/>
-				<EmailBottomSheet
+				{ !!emailBottomSheetOn &&
-					bottomSheetOn={emailBottomSheetOn}
+					<EmailBottomSheet
-					setBottomSheetOn={setEmailBottomSheetOn}
+						bottomSheetOn={ emailBottomSheetOn }
-					imageSave={false}
+						setBottomSheetOn={ setEmailBottomSheetOn }
-					sendEmail={true}
+						imageMode={ false }
-					sendRequest={onSendRequest}
+						emailMode={ true }
-				/>
+						sendRequest={ onSendRequest }
+					/>
+				}
 			</motion.div>
 		</>
 	);

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;
+  imageMode: boolean;
-  sendEmail: boolean;
+  emailMode: boolean;
   sendRequest: (email?: string) => void;
 };
+export enum EmailBottomSheetSelectedMode {
+  IMAGE = 'IMAGE',
+  EMAIL = 'EMAIL'
+};
 
 export const EmailBottomSheet = ({
   bottomSheetOn,
   setBottomSheetOn,
-  imageSave,
+  imageMode,
-  sendEmail,
+  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>

src/entities/settlement/ui/list-wrap.tsx

@@ -532,8 +532,8 @@ export const ListWrap = ({
         <EmailBottomSheet
           bottomSheetOn={ emailBottomSheetOn }
           setBottomSheetOn={ setEmailBottomSheetOn }
-          imageSave={ false }
+          imageMode={ false }
-          sendEmail={ true }
+          emailMode={ true }
           sendRequest={ onRequestDownloadExcel }
         ></EmailBottomSheet>
       }

src/entities/transaction/ui/detail/escrow-detail.tsx

@@ -231,13 +231,15 @@ export const EscrowDetail = ({
           >메일 재발송</button>
         </div>
       </motion.div>
-      <EmailBottomSheet
+      { !!bottomSheetOn && 
-        setBottomSheetOn={ setBottomSheetOn }
+        <EmailBottomSheet
-        bottomSheetOn={ bottomSheetOn }
+          setBottomSheetOn={ setBottomSheetOn }
-        imageSave={ false }
+          bottomSheetOn={ bottomSheetOn }
-				sendEmail={ true }
+          imageMode={ false }
-				sendRequest={ callMailResend }
+          emailMode={ true }
-      ></EmailBottomSheet>
+          sendRequest={ callMailResend }
+        ></EmailBottomSheet>
+      }
     </>
   );
 };

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}
+      />
     </>
   );
 };

src/entities/vat-return/ui/list-wrap.tsx

@@ -251,8 +251,8 @@ export const ListWrap = () => {
         <EmailBottomSheet
           bottomSheetOn={ emailBottomSheetOn }
           setBottomSheetOn={ setEmailBottomSheetOn }
-          imageSave={ false }
+          imageMode={ false }
-          sendEmail={ true }
+          emailMode={ true }
           sendRequest={ onRequestDownloadExcel }
         ></EmailBottomSheet>
       }

src/entities/vat-return/ui/section/amount-section.tsx

@@ -89,8 +89,8 @@ export const AmountSection = ({
         <EmailBottomSheet
           bottomSheetOn={ downloadBottomSheetOn }
           setBottomSheetOn={ setDownloadBottomSheetOn }
-          imageSave={ true }
+          imageMode={ true }
-          sendEmail={ true }
+          emailMode={ true }
           sendRequest={ onRequestDownload }
         ></EmailBottomSheet>
       }

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}
+        bottomSheetOn={ emailBottomSheetOn }
-        setBottomSheetOn={setEmailBottomSheetOn}
+        setBottomSheetOn={ setEmailBottomSheetOn }
-        imageSave={false}
+        imageMode={ false }
-        sendEmail={true}
+        emailMode={ true }
-        sendRequest={onSendRequest}
+        sendRequest={ onSendRequest }
       ></EmailBottomSheet>
     </>
   );

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}
+        bottomSheetOn={ emailBottomSheetOn }
-        setBottomSheetOn={setEmailBottomSheetOn}
+        setBottomSheetOn={ setEmailBottomSheetOn }
-        imageSave={false}
+        imageMode={ false }
-        sendEmail={true}
+        emailMode={ true }
-        sendRequest={onSendRequest}
+        sendRequest={ onSendRequest }
-      />
+      ></EmailBottomSheet>
     </>
   );
 };

src/pages/additional-service/alimtalk/list-page.tsx

@@ -357,13 +357,12 @@ export const AlimtalkListPage = () => {
         seq={ detailSeq }
       ></AlimtalkDetail>
       <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
+        bottomSheetOn={ emailBottomSheetOn }
-        setBottomSheetOn={setEmailBottomSheetOn}
+        setBottomSheetOn={ setEmailBottomSheetOn }
-        imageSave={false}
+        imageMode={ false }
-        sendEmail={true}
+        emailMode={ true }
         sendRequest={onSendRequest}
-      >
+      ></EmailBottomSheet>
-      </EmailBottomSheet>
     </>
   );
 };

src/pages/additional-service/ars/list-page.tsx

@@ -324,10 +324,10 @@ export const ArsListPage = () => {
         tid={detailTid}
       ></ArsDetail>
       <EmailBottomSheet
-        bottomSheetOn={emailBottomSheetOn}
+        bottomSheetOn={ emailBottomSheetOn }
-        setBottomSheetOn={setEmailBottomSheetOn}
+        setBottomSheetOn={ setEmailBottomSheetOn }
-        imageSave={false}
+        imageMode={ false }
-        sendEmail={true}
+        emailMode={ true }
         sendRequest={onSendRequest}
       ></EmailBottomSheet>
     </>

src/pages/additional-service/face-auth/face-auth-page.tsx

@@ -318,11 +318,11 @@ export const FaceAuthPage = () => {
 				setAuthResult={setAuthResult}
 			/>
 			<EmailBottomSheet
-				bottomSheetOn={emailBottomSheetOn}
+				bottomSheetOn={ emailBottomSheetOn }
-				setBottomSheetOn={setEmailBottomSheetOn}
+				setBottomSheetOn={ setEmailBottomSheetOn }
-				imageSave={false}
+				imageMode={ false }
-				sendEmail={true}
+				emailMode={ true }
-				sendRequest={onSendRequest}
+				sendRequest={ onSendRequest }
 			></EmailBottomSheet>
 		</>
 	);

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
+      { !!emailBottomSheetOn &&
-        bottomSheetOn={emailBottomSheetOn}
+        <EmailBottomSheet
-        setBottomSheetOn={setEmailBottomSheetOn}
+          bottomSheetOn={ emailBottomSheetOn }
-        imageSave={false}
+          setBottomSheetOn={ setEmailBottomSheetOn }
-        sendEmail={true}
+          imageMode={ false }
-        sendRequest={onSendRequest}
+          emailMode={ true }
-      ></EmailBottomSheet>
+          sendRequest={ onSendRequest }
+        ></EmailBottomSheet>
+      }
     </>
   );
 };

src/pages/additional-service/payout/list-page.tsx

@@ -375,13 +375,15 @@ export const PayoutListPage = () => {
       tid={detailTid}
       >
       </PayoutDetail>
-      <EmailBottomSheet
+      { !!emailBottomSheetOn &&
-        bottomSheetOn={emailBottomSheetOn}
+        <EmailBottomSheet
-        setBottomSheetOn={setEmailBottomSheetOn}
+          bottomSheetOn={ emailBottomSheetOn }
-        imageSave={false}
+          setBottomSheetOn={ setEmailBottomSheetOn }
-        sendEmail={true}
+          imageMode={ false }
-        sendRequest={onSendRequest}
+          emailMode={ true }
-      ></EmailBottomSheet>
+          sendRequest={ onSendRequest }
+        ></EmailBottomSheet>
+      }
     </>
   );
 };

src/pages/additional-service/sms-payment/sms-payment-page.tsx

@@ -274,13 +274,15 @@ export const SmsPaymentPage = () => {
         setToDate={setToDate}
         setSmsCl={setSmsCl}
       ></SmsPaymentFilter>
-      <EmailBottomSheet
+      { !!emailBottomSheetOn &&
-        bottomSheetOn={emailBottomSheetOn}
+        <EmailBottomSheet
-        setBottomSheetOn={setEmailBottomSheetOn}
+          bottomSheetOn={emailBottomSheetOn}
-        imageSave={false}
+          setBottomSheetOn={setEmailBottomSheetOn}
-        sendEmail={true}
+          imageMode={false}
-        sendRequest={onSendRequest}
+          emailMode={true}
-      ></EmailBottomSheet>
+          sendRequest={onSendRequest}
+        ></EmailBottomSheet>
+      }
     </>
   );
 };

src/pages/transaction/all-transaction/list-page.tsx

@@ -403,8 +403,8 @@ export const AllTransactionListPage = () => {
         <EmailBottomSheet
           bottomSheetOn={ emailBottomSheetOn }
           setBottomSheetOn={ setEmailBottomSheetOn }
-          imageSave={ false }
+          imageMode={ false }
-          sendEmail={ true }
+          emailMode={ true }
           sendRequest={ onRequestDownloadExcel }
         ></EmailBottomSheet>
       }

src/pages/transaction/billing/list-page.tsx

@@ -290,8 +290,8 @@ export const BillingListPage = () => {
 				<EmailBottomSheet
 					bottomSheetOn={ downloadBottomSheetOn }
 					setBottomSheetOn={ setDownloadBottomSheetOn }
-					imageSave={ false }
+					imageMode={ false }
-					sendEmail={ true }
+					emailMode={ true }
 					sendRequest={ onRequestDownload }
 				></EmailBottomSheet>
 			}

src/pages/transaction/cash-receipt/list-page.tsx

@@ -334,8 +334,8 @@ export const CashReceiptListPage = () => {
 				<EmailBottomSheet
 					bottomSheetOn={ emailBottomSheetOn }
 					setBottomSheetOn={ setEmailBottomSheetOn }
-					imageSave={ false }
+					imageMode={ false }
-					sendEmail={ true }
+					emailMode={ true }
 					sendRequest={ onRequestDownloadExcel }
 				></EmailBottomSheet>
 			}

src/pages/transaction/escrow/list-page.tsx

@@ -279,8 +279,8 @@ export const EscrowListPage = () => {
 				<EmailBottomSheet
 					bottomSheetOn={ emailBottomSheetOn }
 					setBottomSheetOn={ setEmailBottomSheetOn }
-					imageSave={ false }
+					imageMode={ false }
-					sendEmail={ true }
+					emailMode={ true }
 					sendRequest={ onRequestDownloadExcel }
 				></EmailBottomSheet>
 			}