수정

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

@@ -3,6 +3,8 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useStore } from '@/shared/model/store';
 import { motion } from 'framer-motion';
 import { ChangeEvent, useState } from 'react';
+import { toPng } from 'html-to-image';
+import { snackBar } from '@/shared/lib';
 
 export interface EmailBottomSheetProps {
   bottomSheetOn: boolean;
@@ -30,6 +32,22 @@ export const EmailBottomSheet = ({
     sendRequest(userEmail);
   };
   
+  const downloadImage = () => { 
+    const app = document.getElementById('root') as HTMLElement;
+    toPng(app).then((image) => {
+      const link = document.createElement('a');
+      link.download = 'downloadImage.png';
+      link.href = image;
+      link.click();
+      snackBar('이미지가 요청 되었습니다.');
+    });
+  };
+  const onDownloadImage = () => {
+    downloadImage();
+    setTimeout(() => {
+      onClickToClose();
+    }, 1000);
+  };
   
   return (
     <>
@@ -62,7 +80,10 @@ export const EmailBottomSheet = ({
         <div className="bottomsheet-content">
           <div className="email-section">
             { !!imageSave &&
-            <div className="email-label mb-10">
+            <div 
+              className="email-label mb-10"
+              onClick={ onDownloadImage }
+            >
               <div className="mail-icon">
                 <div className="mail-icon-bg"></div>
                 <img 
@@ -93,7 +114,10 @@ export const EmailBottomSheet = ({
                   >
                     {
                       optionsEmails.map((value, index) => (
-                        <option value={ value.value }>{ value.value }</option>
+                        <option 
+                          key={ value.value }
+                          value={ value.value }
+                        >{ value.value }</option>
                       ))
                     }
                   </select>