✨ feat: 보관한 편지 이미지 다운로드 기능 추가 (#303)

* ✨ feat: 보관한 편지 이미지 다운로그 기능 추가 * 🔨 refactor: 이미지 다운로드 유틸로 분리 * 🚚 rename: 함수명 imageDownload에서 downloadImage 로 변경
dnd-side-project · Apr 21, 2024 · fca9e57 · fca9e57
1 parent 7e0579a
commit fca9e57
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 70 deletions.
diff --git a/src/pages/LetterReceptionPage/NormalReception/components/ReceptionPolaroid.tsx b/src/pages/LetterReceptionPage/NormalReception/components/ReceptionPolaroid.tsx
@@ -1,37 +1,21 @@
-import axios from 'axios';
 import Button from '@/components/Button';
 import PolaroidModal from '@/components/PolaroidModal';
 import IconButton from '@/components/IconButton';
 import { Download } from '@/assets/icons';
+import { downloadImage } from '@/utils/downloadUtils';
 
 interface ReceptionPolaroidProps {
   img: string;
   bottomPosition?: number;
 }
 
 const ReceptionPolaroid = ({ img, bottomPosition }: ReceptionPolaroidProps) => {
-  const handleDownload = async () => {
-    const response = await axios.get(img, {
-      responseType: 'blob',
-    });
-
-    const url = window.URL.createObjectURL(new Blob([response.data]));
-
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'image.jpg';
-    document.body.appendChild(link);
-    link.click();
-
-    window.URL.revokeObjectURL(url);
-  };
-
   return (
     <PolaroidModal
       img={img}
       bottomPosition={bottomPosition}
       headerRightContent={
-        <IconButton onClick={handleDownload}>
+        <IconButton onClick={() => downloadImage(img)}>
           <Download color="white" height={20} width={20} />
         </IconButton>
       }

diff --git a/src/pages/LetterReceptionPage/OnboardingReception/components/PolaroidModal/index.tsx b/src/pages/LetterReceptionPage/OnboardingReception/components/PolaroidModal/index.tsx
@@ -1,10 +1,10 @@
-import axios from 'axios';
 import { CaretLeft, Download } from '@/assets/icons';
 import Header from '@/components/Header';
 import IconButton from '@/components/IconButton';
 import Modal from '@/components/Modal';
 import useBoolean from '@/hooks/useBoolean';
 import Button from '@/components/Button';
+import { downloadImage } from '@/utils/downloadUtils';
 import pageStyles from '../../styles';
 import styles from './style';
 
@@ -13,26 +13,6 @@ interface PolaroidModalProps extends ReturnType<typeof useBoolean> {
 }
 
 const PolaroidModal = ({ imagePath, value, off }: PolaroidModalProps) => {
-  const handleDownload = async () => {
-    if (!imagePath) {
-      return;
-    }
-
-    const response = await axios.get(imagePath, {
-      responseType: 'blob',
-    });
-
-    const url = window.URL.createObjectURL(new Blob([response.data]));
-
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'image.jpg';
-    document.body.appendChild(link);
-    link.click();
-
-    window.URL.revokeObjectURL(url);
-  };
-
   return (
     <Modal isOpen={value} close={off}>
       <div css={styles.container}>
@@ -41,7 +21,7 @@ const PolaroidModal = ({ imagePath, value, off }: PolaroidModalProps) => {
             <CaretLeft css={styles.icon} strokeWidth={2.5} onClick={off} />
           </Header.Left>
           <Header.Right>
-            <IconButton onClick={handleDownload}>
+            <IconButton onClick={() => downloadImage(imagePath!)}>
               <Download css={styles.icon} />
             </IconButton>
           </Header.Right>

diff --git a/src/pages/LetterReplyPage/replyLetter/index.tsx b/src/pages/LetterReplyPage/replyLetter/index.tsx
@@ -1,10 +1,10 @@
-import axios from 'axios';
 import LetterCard from '@/components/LetterCard';
 import { formatDate } from '@/utils/dateUtils';
 import PolaroidModal from '@/components/PolaroidModal';
 import Button from '@/components/Button';
 import IconButton from '@/components/IconButton';
 import { Download } from '@/assets/icons';
+import { downloadImage } from '@/utils/downloadUtils';
 import useLetterReplyWithTag from '../hooks/useLetterReplyWithTag';
 import LetterContent from '../components/LetterContent';
 
@@ -15,22 +15,6 @@ interface ReplyLetterProps {
 const ReplyLetter = ({ letterId }: ReplyLetterProps) => {
   const { replyLetter } = useLetterReplyWithTag(letterId);
 
-  const handleDownload = async () => {
-    const response = await axios.get(replyLetter.replyImagePath!, {
-      responseType: 'blob',
-    });
-
-    const url = window.URL.createObjectURL(new Blob([response.data]));
-
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'image.jpg';
-    document.body.appendChild(link);
-    link.click();
-
-    window.URL.revokeObjectURL(url);
-  };
-
   return (
     <LetterCard isOpen={true}>
       <LetterContent
@@ -43,7 +27,10 @@ const ReplyLetter = ({ letterId }: ReplyLetterProps) => {
         <PolaroidModal
           img={replyLetter.replyImagePath}
           headerRightContent={
-            <IconButton id="download-button" onClick={handleDownload}>
+            <IconButton
+              id="download-button"
+              onClick={() => downloadImage(replyLetter.replyImagePath!)}
+            >
               <Download color="white" height={20} width={20} />
             </IconButton>
           }

diff --git a/src/pages/LetterStoragePage/ReplyStorage/ReplyLetterModal.tsx b/src/pages/LetterStoragePage/ReplyStorage/ReplyLetterModal.tsx
@@ -9,10 +9,9 @@ import TagList from '@/components/TagList';
 import textStyles from '@/styles/textStyles';
 import COLORS from '@/constants/colors';
 import { formatDate } from '@/utils/dateUtils';
-import PolaroidModal from '@/components/PolaroidModal';
-import Button from '@/components/Button';
 import { getTagList } from '../utils/tagUtills';
 import LetterModalHeader from '../components/LetterModalHeader';
+import ReplyPolaroidModal from './ReplyPolaroidModal';
 
 interface ReplyLetterModalProps extends ReturnType<typeof useBoolean> {
   letter: Reply;
@@ -55,11 +54,7 @@ const ReplyLetterModal = ({ value, off, letter }: ReplyLetterModalProps) => {
                 nickname={letter.senderNickname}
               />
               {letter.sendImagePath && (
-                <PolaroidModal img={letter.sendImagePath}>
-                  <Button variant="secondary" size="sm">
-                    닫기
-                  </Button>
-                </PolaroidModal>
+                <ReplyPolaroidModal imagePath={letter.sendImagePath} />
               )}
             </>
           ) : (
@@ -78,11 +73,7 @@ const ReplyLetterModal = ({ value, off, letter }: ReplyLetterModalProps) => {
                 nickname={letter.receiverNickname}
               />
               {letter.replyImagePath && (
-                <PolaroidModal img={letter.replyImagePath}>
-                  <Button variant="secondary" size="sm">
-                    닫기
-                  </Button>
-                </PolaroidModal>
+                <ReplyPolaroidModal imagePath={letter.replyImagePath} />
               )}
             </>
           )}

diff --git a/src/pages/LetterStoragePage/ReplyStorage/ReplyPolaroidModal.tsx b/src/pages/LetterStoragePage/ReplyStorage/ReplyPolaroidModal.tsx
@@ -0,0 +1,38 @@
+import { css } from '@emotion/react';
+import PolaroidModal from '@/components/PolaroidModal';
+import Button from '@/components/Button';
+import IconButton from '@/components/IconButton';
+import { Download } from '@/assets/icons';
+import { downloadImage } from '@/utils/downloadUtils';
+
+interface ReplyPolaroidModalProps {
+  imagePath: string;
+}
+
+const ReplyPolaroidModal = ({ imagePath }: ReplyPolaroidModalProps) => {
+  return (
+    <PolaroidModal
+      img={imagePath}
+      headerRightContent={
+        <IconButton
+          css={style.download}
+          onClick={() => downloadImage(imagePath)}
+        >
+          <Download color="white" height={20} width={20} />
+        </IconButton>
+      }
+    >
+      <Button variant="secondary" size="sm">
+        닫기
+      </Button>
+    </PolaroidModal>
+  );
+};
+
+export default ReplyPolaroidModal;
+
+const style = {
+  download: css`
+    margin-right: 2px;
+  `,
+};
diff --git a/src/utils/downloadUtils.ts b/src/utils/downloadUtils.ts
@@ -0,0 +1,26 @@
+import axios from 'axios';
+
+/**
+ * 이미지 다운로드
+ * @param imagePath 이미지 경로
+ * @returns
+ */
+export const downloadImage = async (imagePath: string) => {
+  if (!imagePath) {
+    return;
+  }
+
+  const response = await axios.get(imagePath, {
+    responseType: 'blob',
+  });
+
+  const url = window.URL.createObjectURL(new Blob([response.data]));
+
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'image.jpg';
+  document.body.appendChild(link);
+  link.click();
+
+  window.URL.revokeObjectURL(url);
+};