[FE] Feat/#604 image swiper 적용 및 image size limit 적용 (#608)

* refactor: PinDetail 빼먹었던 부분 다시 추가 * refactor: image wrapper에 key값 적용 * feat: 핀 디테일 이미지에 스와이퍼 적용 * refactor: 이미지 3개 이하면 스와이프 안 나오도록 수정 * refactor: 비로그인 시 이미지 추가 버튼 안 보이도록 수정 * feat: 토픽 사진 추가할 때 사이즈 제한 주기 * refactor: 필요없는 코드 삭제
woowacourse-teams · Oct 19, 2023 · 4574c3a · 4574c3a
1 parent d0eab4d
commit 4574c3a
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 36 deletions.
diff --git a/frontend/src/components/PinImageContainer/index.tsx b/frontend/src/components/PinImageContainer/index.tsx
@@ -9,6 +9,8 @@ import { useModalContext, ImageModal } from '../../context/ImageModalContext';
 import { useState } from 'react';
 import Button from '../common/Button';
 import Space from '../common/Space';
+import Swiper from '../common/Swiper';
+import Tab from '../common/Swiper/Tab';
 
 interface PinImageContainerProps {
   images: ImageProps[];
@@ -43,13 +45,59 @@ const PinImageContainer = ({ images, getPinData }: PinImageContainerProps) => {
     openModal();
   };
 
-  return (
-    <>
+  if (images.length <= 3) {
+    return (
       <FilmList>
-        {images.map(
-          (image, index) =>
-            index < 3 && (
-              <ImageWrapper>
+        {images.map((image, index) => (
+          <Tab label={`${index}`} key={image.id}>
+            <ImageWrapper key={`image-${index}`}>
+              <div onClick={() => onImageOpen(image.imageUrl)}>
+                <Image
+                  key={image.id}
+                  height="100px"
+                  width="100px"
+                  src={image.imageUrl}
+                  $errorDefaultSrc={NOT_FOUND_IMAGE}
+                />
+              </div>
+              <RemoveImageIconWrapper
+                onClick={() => onRemovePinImage(image.id)}
+              >
+                <RemoveImageButton />
+              </RemoveImageIconWrapper>
+            </ImageWrapper>
+          </Tab>
+        ))}
+        {isModalOpen && (
+          <ImageModal closeModalHandler={closeModal}>
+            <ModalImageWrapper>
+              <ModalImage src={modalImage} />
+              <Space size={3} />
+              <Button variant="custom" onClick={closeModal}>
+                닫기
+              </Button>
+            </ModalImageWrapper>
+          </ImageModal>
+        )}
+      </FilmList>
+    );
+  }
+
+  return (
+    <Wrapper>
+      {
+        <Swiper
+          as="ul"
+          width={330}
+          height={100}
+          $elementsOneTab={3}
+          swiper
+          swipeable
+          $isNotTabBoxShow
+        >
+          {images.map((image, index) => (
+            <Tab label={`${index}`} key={image.id}>
+              <ImageWrapper key={`image-${index}`}>
                 <div onClick={() => onImageOpen(image.imageUrl)}>
                   <Image
                     key={image.id}
@@ -65,28 +113,31 @@ const PinImageContainer = ({ images, getPinData }: PinImageContainerProps) => {
                   <RemoveImageButton />
                 </RemoveImageIconWrapper>
               </ImageWrapper>
-            ),
-        )}
-        {isModalOpen && (
-          <ImageModal closeModalHandler={closeModal}>
-            <ModalImageWrapper>
-              <ModalImage src={modalImage} />
-              <Space size={3} />
-              <Button variant="custom" onClick={closeModal}>
-                닫기
-              </Button>
-            </ModalImageWrapper>
-          </ImageModal>
-        )}
-      </FilmList>
-    </>
+            </Tab>
+          ))}
+          {isModalOpen && (
+            <ImageModal closeModalHandler={closeModal}>
+              <ModalImageWrapper>
+                <ModalImage src={modalImage} />
+                <Space size={3} />
+                <Button variant="custom" onClick={closeModal}>
+                  닫기
+                </Button>
+              </ModalImageWrapper>
+            </ImageModal>
+          )}
+        </Swiper>
+      }
+    </Wrapper>
   );
 };
 
-const FilmList = styled.ul`
+const Wrapper = styled.div`
   width: 330px;
+`;
+
+const FilmList = styled.ul`
   display: flex;
-  flex-direction: row;
 `;
 
 const ImageWrapper = styled.li`

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(() => {

diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx
@@ -206,7 +206,9 @@ function PinDetail({
         </Flex>
       </Flex>
       <Space size={2} />
-      <ImageInputLabel htmlFor="file">파일업로드</ImageInputLabel>
+      {userToken && (
+        <ImageInputLabel htmlFor="file">파일업로드</ImageInputLabel>
+      )}
       <ImageInputButton
         id="file"
         type="file"
@@ -234,7 +236,20 @@ function PinDetail({
           {pin.description}
         </Text>
       </Flex>
-      <Space size={7} />
+      <Space size={6} />
+
+      <ButtonsWrapper>
+        <SaveToMyMapButton variant="primary" onClick={openModalWithToken}>
+          내 지도에 저장하기
+        </SaveToMyMapButton>
+        <Space size={3} />
+        <ShareButton variant="secondary" onClick={copyContent}>
+          공유하기
+        </ShareButton>
+      </ButtonsWrapper>
+
+      <Space size={8} />
+
       {/*  Comment Section */}
 
       <Text color="black" $fontSize="large" $fontWeight="bold">