diff --git a/src/pages/LetterReceptionPage/NormalReception/components/ReceptionPolaroid.tsx b/src/pages/LetterReceptionPage/NormalReception/components/ReceptionPolaroid.tsx index e26f90ed..985a9f95 100644 --- a/src/pages/LetterReceptionPage/NormalReception/components/ReceptionPolaroid.tsx +++ b/src/pages/LetterReceptionPage/NormalReception/components/ReceptionPolaroid.tsx @@ -1,8 +1,8 @@ -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; @@ -10,28 +10,12 @@ interface ReceptionPolaroidProps { } 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 ( + downloadImage(img)}> } diff --git a/src/pages/LetterReceptionPage/OnboardingReception/components/PolaroidModal/index.tsx b/src/pages/LetterReceptionPage/OnboardingReception/components/PolaroidModal/index.tsx index b13ab8cc..38bec69c 100644 --- 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 { } 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 (
@@ -41,7 +21,7 @@ const PolaroidModal = ({ imagePath, value, off }: PolaroidModalProps) => { - + downloadImage(imagePath!)}> diff --git a/src/pages/LetterReplyPage/replyLetter/index.tsx b/src/pages/LetterReplyPage/replyLetter/index.tsx index 6a6a5c77..b87e6df8 100644 --- 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 ( { + downloadImage(replyLetter.replyImagePath!)} + > } diff --git a/src/pages/LetterStoragePage/ReplyStorage/ReplyLetterModal.tsx b/src/pages/LetterStoragePage/ReplyStorage/ReplyLetterModal.tsx index 37363466..07be5039 100644 --- 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 { letter: Reply; @@ -55,11 +54,7 @@ const ReplyLetterModal = ({ value, off, letter }: ReplyLetterModalProps) => { nickname={letter.senderNickname} /> {letter.sendImagePath && ( - - - + )} ) : ( @@ -78,11 +73,7 @@ const ReplyLetterModal = ({ value, off, letter }: ReplyLetterModalProps) => { nickname={letter.receiverNickname} /> {letter.replyImagePath && ( - - - + )} )} diff --git a/src/pages/LetterStoragePage/ReplyStorage/ReplyPolaroidModal.tsx b/src/pages/LetterStoragePage/ReplyStorage/ReplyPolaroidModal.tsx new file mode 100644 index 00000000..af53a3e0 --- /dev/null +++ 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 ( + downloadImage(imagePath)} + > + + + } + > + + + ); +}; + +export default ReplyPolaroidModal; + +const style = { + download: css` + margin-right: 2px; + `, +}; diff --git a/src/utils/downloadUtils.ts b/src/utils/downloadUtils.ts new file mode 100644 index 00000000..2b551595 --- /dev/null +++ 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); +};