From 7d9906da859c54d4886b8c890c31a178072cc64f Mon Sep 17 00:00:00 2001
From: ParkGeunCheol <72205402+GC-Park@users.noreply.github.com>
Date: Thu, 21 Sep 2023 22:14:29 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20Refactor/#481=20=EA=B0=9C=EB=B0=9C=20?=
 =?UTF-8?q?=EC=84=9C=EB=B2=84=20QA=20=ED=9B=84=20=EB=B0=9C=EC=83=9D?=
 =?UTF-8?q?=ED=95=9C=20=EC=9D=B4=EC=8A=88=20=ED=95=B4=EA=B2=B0=20(#486)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 추가하기 모달 위치 왼쪽 하단으로 고정되는 이슈 해결

* refactor: 1078px 이하에서 이미지 숨겨지던 오류 해결

* refactor: 핀 내 지도에 저장 기능 에러 해결
---
 frontend/src/apiHooks/usePost.ts              |  2 +-
 frontend/src/apis/postApi.ts                  |  2 +-
 frontend/src/components/Modal/index.tsx       | 29 +++++++++++++++----
 .../ModalMyTopicList/addToMyTopicList.tsx     | 12 +-------
 .../components/PinImageContainer/index.tsx    | 25 ++++++++--------
 5 files changed, 40 insertions(+), 30 deletions(-)

diff --git a/frontend/src/apiHooks/usePost.ts b/frontend/src/apiHooks/usePost.ts
index 73e1f4ad..70cbda53 100644
--- a/frontend/src/apiHooks/usePost.ts
+++ b/frontend/src/apiHooks/usePost.ts
@@ -4,7 +4,7 @@ import { ContentTypeType } from '../types/Api';
 
 interface fetchPostProps {
   url: string;
-  payload: {};
+  payload?: {} | FormData;
   contentType?: ContentTypeType;
   errorMessage: string;
   onSuccess?: () => void;
diff --git a/frontend/src/apis/postApi.ts b/frontend/src/apis/postApi.ts
index f05dec3d..8df139ce 100644
--- a/frontend/src/apis/postApi.ts
+++ b/frontend/src/apis/postApi.ts
@@ -4,7 +4,7 @@ import withTokenRefresh from './utils';
 
 export const postApi = async (
   url: string,
-  payload: {} | FormData,
+  payload?: {} | FormData,
   contentType?: ContentTypeType,
 ) => {
   return await withTokenRefresh(async () => {
diff --git a/frontend/src/components/Modal/index.tsx b/frontend/src/components/Modal/index.tsx
index 3db2abbd..f3acc519 100644
--- a/frontend/src/components/Modal/index.tsx
+++ b/frontend/src/components/Modal/index.tsx
@@ -3,10 +3,8 @@ import ReactDOM from 'react-dom';
 import { css, keyframes, styled } from 'styled-components';
 import { ModalContext } from '../../context/ModalContext';
 import Box from '../common/Box';
-type ModalWrapperType = Omit<
-  ModalProps,
-  'modalKey' | 'children' | '$dimmedColor'
->;
+
+type ModalWrapperType = Omit<ModalProps, 'children' | '$dimmedColor'>;
 
 interface ModalProps {
   modalKey: string;
@@ -61,6 +59,7 @@ const Modal = ({
           onClick={onClickDimmedCloseModal}
         />
         <Wrapper
+          modalKey={modalKey}
           position={position}
           width={width}
           height={height}
@@ -113,8 +112,8 @@ const getModalPosition = (position: 'center' | 'bottom') => {
       return css`
         position: fixed;
         left: 50%;
-        transform: translate(-50%, 0);
         bottom: 0;
+        transform: translate(-50%, 0);
         border-top-left-radius: ${({ theme }) => theme.radius.medium};
         border-top-right-radius: ${({ theme }) => theme.radius.medium};
         animation: ${translateModalAnimation} 0.3s ease 1;
@@ -122,6 +121,25 @@ const getModalPosition = (position: 'center' | 'bottom') => {
   }
 };
 
+const addMapOrPinPostion = (modalKey: string) => {
+  console.log(modalKey);
+  if (modalKey === 'addMapOrPin') {
+    return css`
+      width: 252px;
+      height: inherit;
+
+      transform: translate(-50%, -30%);
+    `;
+  } else {
+    return css`
+      width: 100%;
+      height: inherit;
+
+      transform: translate(-50%, 0);
+    `;
+  }
+};
+
 const Wrapper = styled.div<ModalWrapperType>`
   width: ${({ width }) => width || '400px'};
   height: ${({ height }) => height || '400px'};
@@ -134,6 +152,7 @@ const Wrapper = styled.div<ModalWrapperType>`
     ${getModalPosition('bottom')};
     width: 100%;
     height: inherit;
+    ${({ modalKey }) => addMapOrPinPostion(modalKey)};
   }
 `;
 
diff --git a/frontend/src/components/ModalMyTopicList/addToMyTopicList.tsx b/frontend/src/components/ModalMyTopicList/addToMyTopicList.tsx
index a62aa88f..7fb88f69 100644
--- a/frontend/src/components/ModalMyTopicList/addToMyTopicList.tsx
+++ b/frontend/src/components/ModalMyTopicList/addToMyTopicList.tsx
@@ -35,20 +35,10 @@ const AddToMyTopicList = ({ pin }: any) => {
   }, []);
 
   const addPinToTopic = async (topic: OnClickDesignatedProps) => {
-    const url = '/pins';
-    const payload = {
-      topicId: topic.topicId,
-      name: pin.name,
-      description: pin.description,
-      address: pin.address,
-      latitude: pin.latitude,
-      longitude: pin.longitude,
-      legalDongCode: '',
-    };
+    const url = `/topics/${topic.topicId}/copy?pinIds=${pin.id}`;
 
     fetchPost({
       url,
-      payload,
       errorMessage:
         '내 지도에 핀 추가를 실패하였습니다. 잠시 후 다시 시도해주세요.',
       onSuccess: () => {
diff --git a/frontend/src/components/PinImageContainer/index.tsx b/frontend/src/components/PinImageContainer/index.tsx
index 8b2b5f96..a62b9ff4 100644
--- a/frontend/src/components/PinImageContainer/index.tsx
+++ b/frontend/src/components/PinImageContainer/index.tsx
@@ -10,16 +10,19 @@ const PinImageContainer = ({ images }: PinImageContainerProps) => {
   return (
     <>
       <FilmList>
-        {images.map((image, index) => (
-          <ImageWrapper>
-            <Image
-              key={index}
-              height="100px"
-              width="100px"
-              src={image.imageUrl}
-            />
-          </ImageWrapper>
-        ))}
+        {images.map(
+          (image, index) =>
+            index < 3 && (
+              <ImageWrapper>
+                <Image
+                  key={index}
+                  height="100px"
+                  width="100px"
+                  src={image.imageUrl}
+                />
+              </ImageWrapper>
+            ),
+        )}
       </FilmList>
     </>
   );
@@ -29,8 +32,6 @@ const FilmList = styled.ul`
   width: 330px;
   display: flex;
   flex-direction: row;
-
-  overflow: hidden;
 `;
 
 const ImageWrapper = styled.li`