[FE] Refactor/#481 개발 서버 QA 후 발생한 이슈 해결 (#486)

* refactor: 추가하기 모달 위치 왼쪽 하단으로 고정되는 이슈 해결 * refactor: 1078px 이하에서 이미지 숨겨지던 오류 해결 * refactor: 핀 내 지도에 저장 기능 에러 해결
woowacourse-teams · Sep 21, 2023 · 7d9906d · 7d9906d
1 parent ec5ae7f
commit 7d9906d
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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,15 +112,34 @@ 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;
       `;
   }
 };
 
+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
@@ -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
@@ -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`