feat: 토픽 사진 추가할 때 사이즈 제한 주기

woowacourse-teams · Oct 19, 2023 · 32e0aa5 · 32e0aa5
1 parent d7f5fa6
commit 32e0aa5
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/frontend/src/components/TopicInfo/UpdatedTopicInfo.tsx b/frontend/src/components/TopicInfo/UpdatedTopicInfo.tsx
@@ -14,7 +14,7 @@ import Space from '../common/Space';
 import InputContainer from '../InputContainer';
 import Text from '../common/Text';
 import useCompressImage from '../../hooks/useCompressImage';
-import Image from '../common/Image';
+import ImageCommon from '../common/Image';
 import { DEFAULT_TOPIC_IMAGE } from '../../constants';
 import { putApi } from '../../apis/putApi';
 
@@ -135,6 +135,7 @@ function UpdatedTopicInfo({
   ) => {
     const file = event.target.files && event.target.files[0];
     const formData = new FormData();
+    const currentImage = new Image();
 
     if (!file) {
       showToast(
@@ -145,12 +146,22 @@ function UpdatedTopicInfo({
     }
 
     const compressedFile = await compressImage(file);
-    formData.append('image', compressedFile);
-
-    await putApi(`/topics/images/${id}`, formData);
-
-    const updatedImageUrl = URL.createObjectURL(compressedFile);
-    setChangedImages(updatedImageUrl);
+    currentImage.src = URL.createObjectURL(compressedFile);
+
+    currentImage.onload = async () => {
+      if (currentImage.width < 300) {
+        showToast(
+          'warning',
+          '이미지의 크기가 너무 작습니다. 다른 이미지를 선택해 주세요.',
+        );
+        return;
+      }
+      formData.append('image', compressedFile);
+      await putApi(`/topics/images/${id}`, formData);
+
+      const updatedImageUrl = URL.createObjectURL(compressedFile);
+      setChangedImages(updatedImageUrl);
+    };
   };
 
   return (
@@ -288,7 +299,7 @@ const ImageInputButton = styled.input`
   display: none;
 `;
 
-const TopicImage = styled(Image)`
+const TopicImage = styled(ImageCommon)`
   border-radius: ${({ theme }) => theme.radius.medium};
 `;
 

diff --git a/frontend/src/pages/NewTopic.tsx b/frontend/src/pages/NewTopic.tsx
@@ -127,6 +127,7 @@ function NewTopic() {
     event: React.ChangeEvent<HTMLInputElement>,
   ) => {
     const file = event.target.files && event.target.files[0];
+    const currentImage = new Image();
     if (!file) {
       showToast(
         'error',
@@ -136,9 +137,20 @@ function NewTopic() {
     }
 
     const compressedFile = await compressImage(file);
-
-    setFormImage(compressedFile);
-    setShowImage(URL.createObjectURL(file));
+    currentImage.src = URL.createObjectURL(compressedFile);
+
+    currentImage.onload = () => {
+      if (currentImage.width < 300) {
+        showToast(
+          'warning',
+          '이미지의 크기가 너무 작습니다. 다른 이미지를 선택해 주세요.',
+        );
+        return;
+      }
+
+      setFormImage(compressedFile);
+      setShowImage(URL.createObjectURL(file));
+    };
   };
 
   useEffect(() => {