downloadbottomsheet

src/entities/common/ui/download-bottom-sheet.tsx

@@ -7,44 +7,58 @@ import { toPng } from 'html-to-image';
 import { snackBar } from '@/shared/lib';
 import { useTranslation } from 'react-i18next';
 
-export interface EmailBottomSheetProps {
+export interface DownloadBottomSheetProps {
   bottomSheetOn: boolean;
   setBottomSheetOn: (bottomSheetOn: boolean) => void;
   imageMode: boolean;
   emailMode: boolean;
-  sendRequest: (email?: string) => void;
+  sendRequest: (
+    selectedMode: DownloadSelectedMode,
+    email?: string
+  ) => void;
 };
-export enum EmailBottomSheetSelectedMode {
+export enum DownloadSelectedMode {
   IMAGE = 'IMAGE',
   EMAIL = 'EMAIL'
 };
 
-export const EmailBottomSheet = ({
+export const DownloadBottomSheet = ({
   bottomSheetOn,
   setBottomSheetOn,
   imageMode,
   emailMode,
   sendRequest
-}: EmailBottomSheetProps) => {
+}: DownloadBottomSheetProps) => {
   const { t } = useTranslation();
   const optionsEmails = useStore.getState().UserStore.selectOptionsEmails;
   const email = useStore.getState().UserStore.email;
   
-  const [userEmail, setUserEmail] = useState<string>(email);
+  const [userEmail, setUserEmail] = useState<string | undefined>(email);
   const [sheetImageMode, setSheetImageMode] = useState<boolean>(imageMode);
   const [sheetEmailMode, setSheetEmailMode] = useState<boolean>(emailMode);
 
-  const [selectedMode, setSelectedMode] = useState<EmailBottomSheetSelectedMode | undefined>();
+  const [selectedMode, setSelectedMode] = useState<DownloadSelectedMode | undefined>();
 
   const onClickToClose = () => {
     setBottomSheetOn(false);
   };
 
   const onClickToRequest = () => {
-    sendRequest(userEmail);
-    setTimeout(() => {
-      onClickToClose();
-    }, 2000);
+    if(selectedMode === DownloadSelectedMode.IMAGE){
+      sendRequest(selectedMode);
+      setTimeout(() => {
+        onClickToClose();
+      }, 10);
+    }
+    else if(selectedMode === DownloadSelectedMode.EMAIL){
+      sendRequest(selectedMode, userEmail);
+      setTimeout(() => {
+        onClickToClose();
+      }, 10);
+    }
+    else{
+      snackBar('신청 방법을 선택하세요');
+    }  
   };
   
   const downloadImage = () => {
@@ -61,7 +75,11 @@ export const EmailBottomSheet = ({
     // downloadImage();
     setTimeout(() => {
       onClickToClose();
-    }, 2000);
+    }, 10);
+  };
+
+  const onClickToSelectMode = (mode: DownloadSelectedMode) => {
+    setSelectedMode(mode);
   };
 
   useEffect(() => {
@@ -69,10 +87,10 @@ export const EmailBottomSheet = ({
     setSheetEmailMode(emailMode);
 
     if(imageMode && !emailMode){
-      setSelectedMode(EmailBottomSheetSelectedMode.IMAGE);
+      setSelectedMode(DownloadSelectedMode.IMAGE);
     }
     else if(!imageMode && emailMode){
-      setSelectedMode(EmailBottomSheetSelectedMode.EMAIL);
+      setSelectedMode(DownloadSelectedMode.EMAIL);
     }
   }, [imageMode, emailMode]);
   
@@ -90,7 +108,7 @@ export const EmailBottomSheet = ({
       >
         <div className="bottomsheet-header">
           <div className="bottomsheet-title">
-            <h2>{t('common.selectEmailAddress')}</h2>
+            <h2>신청 방법을 선택하세요</h2>
             <button
               className="close-btn"
               type="button"
@@ -109,7 +127,7 @@ export const EmailBottomSheet = ({
             { !!sheetImageMode &&
             <div
               className="email-label mb-10"
-              onClick={ onDownloadImage }
+              onClick={ () => onClickToSelectMode(DownloadSelectedMode.IMAGE) }
             >
               <div className="mail-icon">
                 <div className="mail-icon-bg"></div>
@@ -123,7 +141,10 @@ export const EmailBottomSheet = ({
             }
             { !!sheetEmailMode &&
             <>
-              <div className="email-label">
+              <div 
+                className="email-label"
+                onClick={ () => onClickToSelectMode(DownloadSelectedMode.EMAIL) }
+              >
                 <div className="mail-icon">
                   <div className="mail-icon-bg"></div>
                   <img
@@ -133,7 +154,7 @@ export const EmailBottomSheet = ({
                 </div>
                 <span className="label-text">{t('common.receiveByEmail')}</span>
               </div>
-              { selectedMode === EmailBottomSheetSelectedMode.EMAIL && 
+              { selectedMode === DownloadSelectedMode.EMAIL && 
                 optionsEmails && 
                 optionsEmails.length > 0 &&
                 <div className="email-select">
@@ -154,7 +175,7 @@ export const EmailBottomSheet = ({
                   </div>
                 </div>
               }
-              { selectedMode === EmailBottomSheetSelectedMode.EMAIL && 
+              { selectedMode === DownloadSelectedMode.EMAIL && 
                 (!optionsEmails || optionsEmails.length === 0) &&
                 <div className="error-message">
                   <p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p>