bottomsheet

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>