From 75a199934a88b0d591157eb784c5f8786004d214 Mon Sep 17 00:00:00 2001
From: GC-Park <kuyt3122@naver.com>
Date: Thu, 19 Oct 2023 11:23:14 +0900
Subject: [PATCH 1/7] =?UTF-8?q?refactor:=20PinDetail=20=EB=B9=BC=EB=A8=B9?=
 =?UTF-8?q?=EC=97=88=EB=8D=98=20=EB=B6=80=EB=B6=84=20=EB=8B=A4=EC=8B=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/PinDetail.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx
index 1ae547da..f42500eb 100644
--- a/frontend/src/pages/PinDetail.tsx
+++ b/frontend/src/pages/PinDetail.tsx
@@ -234,7 +234,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">

From 428e3ead134fbbb4edacde8cc7e492eae152cde6 Mon Sep 17 00:00:00 2001
From: GC-Park <kuyt3122@naver.com>
Date: Thu, 19 Oct 2023 13:48:55 +0900
Subject: [PATCH 2/7] =?UTF-8?q?refactor:=20image=20wrapper=EC=97=90=20key?=
 =?UTF-8?q?=EA=B0=92=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PinImageContainer/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/PinImageContainer/index.tsx b/frontend/src/components/PinImageContainer/index.tsx
index 9652ec80..fbaf952d 100644
--- a/frontend/src/components/PinImageContainer/index.tsx
+++ b/frontend/src/components/PinImageContainer/index.tsx
@@ -49,7 +49,7 @@ const PinImageContainer = ({ images, getPinData }: PinImageContainerProps) => {
         {images.map(
           (image, index) =>
             index < 3 && (
-              <ImageWrapper>
+              <ImageWrapper key={`image-${index}`}>
                 <div onClick={() => onImageOpen(image.imageUrl)}>
                   <Image
                     key={image.id}

From 21b637ffbd7d02be1cbfdd6c0dacacacb91c98b3 Mon Sep 17 00:00:00 2001
From: GC-Park <kuyt3122@naver.com>
Date: Thu, 19 Oct 2023 14:07:26 +0900
Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=ED=95=80=20=EB=94=94=ED=85=8C?=
 =?UTF-8?q?=EC=9D=BC=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EC=97=90=20=EC=8A=A4?=
 =?UTF-8?q?=EC=99=80=EC=9D=B4=ED=8D=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PinImageContainer/index.tsx    | 90 +++++++++++--------
 1 file changed, 52 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/PinImageContainer/index.tsx b/frontend/src/components/PinImageContainer/index.tsx
index fbaf952d..d36b8881 100644
--- 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[];
@@ -44,49 +46,61 @@ const PinImageContainer = ({ images, getPinData }: PinImageContainerProps) => {
   };
 
   return (
-    <>
-      <FilmList>
-        {images.map(
-          (image, index) =>
-            index < 3 && (
-              <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>
-            ),
-        )}
-        {isModalOpen && (
-          <ImageModal closeModalHandler={closeModal}>
-            <ModalImageWrapper>
-              <ModalImage src={modalImage} />
-              <Space size={3} />
-              <Button variant="custom" onClick={closeModal}>
-                닫기
-              </Button>
-            </ModalImageWrapper>
-          </ImageModal>
-        )}
-      </FilmList>
-    </>
+    <Wrapper>
+      {images.length !== 0 && (
+        <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}
+                      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>
+            )}
+        </Swiper>
+      )}
+    </Wrapper>
   );
 };
 
-const FilmList = styled.ul`
+const Wrapper = styled.div`
   width: 330px;
+`;
+
+const FilmList = styled.ul`
   display: flex;
-  flex-direction: row;
+  /* overflow-y: scroll; */
 `;
 
 const ImageWrapper = styled.li`

From c78996532adcba3982184eb29bcea3312b6d8885 Mon Sep 17 00:00:00 2001
From: GC-Park <kuyt3122@naver.com>
Date: Thu, 19 Oct 2023 15:14:41 +0900
Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=203?=
 =?UTF-8?q?=EA=B0=9C=20=EC=9D=B4=ED=95=98=EB=A9=B4=20=EC=8A=A4=EC=99=80?=
 =?UTF-8?q?=EC=9D=B4=ED=94=84=20=EC=95=88=20=EB=82=98=EC=98=A4=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/PinImageContainer/index.tsx    | 104 ++++++++++++------
 1 file changed, 71 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/PinImageContainer/index.tsx b/frontend/src/components/PinImageContainer/index.tsx
index d36b8881..60905915 100644
--- a/frontend/src/components/PinImageContainer/index.tsx
+++ b/frontend/src/components/PinImageContainer/index.tsx
@@ -45,9 +45,47 @@ const PinImageContainer = ({ images, getPinData }: PinImageContainerProps) => {
     openModal();
   };
 
+  if (images.length <= 3) {
+    return (
+      <FilmList>
+        {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>
-      {images.length !== 0 && (
+      {
         <Swiper
           as="ul"
           width={330}
@@ -57,39 +95,39 @@ const PinImageContainer = ({ images, getPinData }: PinImageContainerProps) => {
           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}
-                      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>
-            )}
+          {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>
+          )}
         </Swiper>
-      )}
+      }
     </Wrapper>
   );
 };

From d7f5fa6cea67f4535a7f15337ed7eadf76dcd957 Mon Sep 17 00:00:00 2001
From: GC-Park <kuyt3122@naver.com>
Date: Thu, 19 Oct 2023 16:12:42 +0900
Subject: [PATCH 5/7] =?UTF-8?q?refactor:=20=EB=B9=84=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B2=84=ED=8A=BC=20=EC=95=88=20=EB=B3=B4=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=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/PinDetail.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/PinDetail.tsx b/frontend/src/pages/PinDetail.tsx
index f42500eb..0e909fa3 100644
--- 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"

From 32e0aa51e698babbd7a44252e73404ee24938e16 Mon Sep 17 00:00:00 2001
From: GC-Park <kuyt3122@naver.com>
Date: Thu, 19 Oct 2023 16:48:40 +0900
Subject: [PATCH 6/7] =?UTF-8?q?feat:=20=ED=86=A0=ED=94=BD=20=EC=82=AC?=
 =?UTF-8?q?=EC=A7=84=20=EC=B6=94=EA=B0=80=ED=95=A0=20=EB=95=8C=20=EC=82=AC?=
 =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=A0=9C=ED=95=9C=20=EC=A3=BC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TopicInfo/UpdatedTopicInfo.tsx | 27 +++++++++++++------
 frontend/src/pages/NewTopic.tsx               | 18 ++++++++++---
 2 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/TopicInfo/UpdatedTopicInfo.tsx b/frontend/src/components/TopicInfo/UpdatedTopicInfo.tsx
index 930a089a..f58dcbf2 100644
--- 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
index d2a54de1..80986cdf 100644
--- 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(() => {

From 687d5d1a337494ba2df99343314093a3c3cdc110 Mon Sep 17 00:00:00 2001
From: GC-Park <kuyt3122@naver.com>
Date: Thu, 19 Oct 2023 16:59:21 +0900
Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/PinImageContainer/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/PinImageContainer/index.tsx b/frontend/src/components/PinImageContainer/index.tsx
index 60905915..b663c5ed 100644
--- a/frontend/src/components/PinImageContainer/index.tsx
+++ b/frontend/src/components/PinImageContainer/index.tsx
@@ -138,7 +138,6 @@ const Wrapper = styled.div`
 
 const FilmList = styled.ul`
   display: flex;
-  /* overflow-y: scroll; */
 `;
 
 const ImageWrapper = styled.li`