From 59b13fc604026ca761ca86b503bf3f6159698313 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Tue, 19 Sep 2023 16:59:08 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=95=95=EC=B6=95=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20cus?= =?UTF-8?q?tom=20hook=EC=9C=BC=EB=A1=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/hooks/useCompressImage.ts | 30 ++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 frontend/src/hooks/useCompressImage.ts diff --git a/frontend/src/hooks/useCompressImage.ts b/frontend/src/hooks/useCompressImage.ts new file mode 100644 index 000000000..f1757e792 --- /dev/null +++ b/frontend/src/hooks/useCompressImage.ts @@ -0,0 +1,30 @@ +import imageCompression from 'browser-image-compression'; + +const useCompressImage = () => { + const compressImage = async (file: File) => { + const resizingBlob = await imageCompression(file, { + maxSizeMB: 1, + maxWidthOrHeight: 500, + useWebWorker: true, + }); + const resizingFile = new File([resizingBlob], file.name, { + type: file.type, + }); + return resizingFile; + }; + + const compressImageList = async (files: FileList) => { + const compressedImageList: File[] = []; + + for (const file of files) { + const compressedImage = await compressImage(file); + compressedImageList.push(compressedImage); + } + + return compressedImageList; + }; + + return { compressImage, compressImageList }; +}; + +export default useCompressImage; From 6770957f2462649b17a9d9968e28cfdda92e27a3 Mon Sep 17 00:00:00 2001 From: GC-Park Date: Tue, 19 Sep 2023 16:59:35 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=EC=A7=80=EB=8F=84,=20=ED=95=80=20?= =?UTF-8?q?=EB=93=B1=EC=97=90=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=ED=95=A0=20=EC=8B=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?= =?UTF-8?q?=EC=95=95=EC=B6=95=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/NewPin.tsx | 12 +++++++++--- frontend/src/pages/NewTopic.tsx | 8 ++++++-- frontend/src/pages/PinDetail.tsx | 6 +++++- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/frontend/src/pages/NewPin.tsx b/frontend/src/pages/NewPin.tsx index 1e1233f4c..82392613b 100644 --- a/frontend/src/pages/NewPin.tsx +++ b/frontend/src/pages/NewPin.tsx @@ -24,6 +24,7 @@ import Modal from '../components/Modal'; import { styled } from 'styled-components'; import ModalMyTopicList from '../components/ModalMyTopicList'; import { getMapApi } from '../apis/getMapApi'; +import useCompressImage from '../hooks/useCompressImage'; type NewPinFormValueType = Pick< NewPinFormProps, @@ -49,6 +50,7 @@ const NewPin = () => { const { showToast } = useToast(); const { width } = useSetLayoutWidth(SIDEBAR); const { openModal, closeModal } = useContext(ModalContext); + const { compressImageList } = useCompressImage(); const [formImages, setFormImages] = useState([]); @@ -177,7 +179,9 @@ const NewPin = () => { }); }; - const onPinImageChange = (event: React.ChangeEvent) => { + const onPinImageChange = async ( + event: React.ChangeEvent, + ) => { const imageLists = event.target.files; let imageUrlLists = [...showedImages]; @@ -189,8 +193,10 @@ const NewPin = () => { return; } + const compressedImageList = await compressImageList(imageLists); + for (let i = 0; i < imageLists.length; i++) { - const currentImageUrl = URL.createObjectURL(imageLists[i]); + const currentImageUrl = URL.createObjectURL(compressedImageList[i]); imageUrlLists.push(currentImageUrl); } @@ -203,7 +209,7 @@ const NewPin = () => { return; } - setFormImages([...formImages, ...imageLists]); + setFormImages([...formImages, ...compressedImageList]); setShowedImages(imageUrlLists); }; diff --git a/frontend/src/pages/NewTopic.tsx b/frontend/src/pages/NewTopic.tsx index a778b8f89..5cacd65b4 100644 --- a/frontend/src/pages/NewTopic.tsx +++ b/frontend/src/pages/NewTopic.tsx @@ -17,6 +17,7 @@ import { TagContext } from '../context/TagContext'; import usePost from '../apiHooks/usePost'; import AuthorityRadioContainer from '../components/AuthorityRadioContainer'; import styled from 'styled-components'; +import useCompressImage from '../hooks/useCompressImage'; type NewTopicFormValuesType = Omit; @@ -34,6 +35,7 @@ const NewTopic = () => { description: '', image: '', }); + const { compressImage } = useCompressImage(); const [isPrivate, setIsPrivate] = useState(false); // 혼자 볼 지도 : 같이 볼 지도 const [isAll, setIsAll] = useState(true); // 모두 : 지정 인원 @@ -116,7 +118,7 @@ const NewTopic = () => { }); }; - const onTopicImageFileChange = ( + const onTopicImageFileChange = async ( event: React.ChangeEvent, ) => { const file = event.target.files && event.target.files[0]; @@ -128,7 +130,9 @@ const NewTopic = () => { return; } - setFormImage(file); + const compressedFile = await compressImage(file); + + setFormImage(compressedFile); setShowImage(URL.createObjectURL(file)); }; diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx index 6f101df3f..b84fe2250 100644 --- a/frontend/src/pages/PinDetail.tsx +++ b/frontend/src/pages/PinDetail.tsx @@ -17,6 +17,7 @@ import { ModalContext } from '../context/ModalContext'; import AddToMyTopicList from '../components/ModalMyTopicList/addToMyTopicList'; import { postApi } from '../apis/postApi'; import PinImageContainer from '../components/PinImageContainer'; +import useCompressImage from '../hooks/useCompressImage'; interface PinDetailProps { width: '372px' | '100vw'; @@ -47,6 +48,7 @@ const PinDetail = ({ description: '', }); const { openModal } = useContext(ModalContext); + const { compressImage } = useCompressImage(); const openModalWithToken = () => { if (userToken) { @@ -101,7 +103,9 @@ const PinDetail = ({ return; } - formData.append('image', file); + const compressedFile = await compressImage(file); + + formData.append('image', compressedFile); const data = JSON.stringify(pinId); const jsonBlob = new Blob([data], { type: 'application/json' }); From 7e83f614f62a6b4ce5cc3e4a44f8d336e9d8002e Mon Sep 17 00:00:00 2001 From: GC-Park Date: Tue, 19 Sep 2023 17:24:18 +0900 Subject: [PATCH 3/5] =?UTF-8?q?refactor:=20NewTopic,=20NewPin=20=ED=85=8D?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/NewPin.tsx | 17 ++++++----------- frontend/src/pages/NewTopic.tsx | 10 ++++++++-- 2 files changed, 14 insertions(+), 13 deletions(-) diff --git a/frontend/src/pages/NewPin.tsx b/frontend/src/pages/NewPin.tsx index 82392613b..799b194c7 100644 --- a/frontend/src/pages/NewPin.tsx +++ b/frontend/src/pages/NewPin.tsx @@ -245,16 +245,12 @@ const NewPin = () => { - - - 지도 선택 - - - - * - - - + + 지도 선택 + + + +