[FE] Refactor/#513 지도 생성 및 핀 생성 페이지 지도 위치 조정 (#514)

* design: 모든페이지에서 지도 상, 사이드바 하 고정 * refactor: 지도 생성 및 핀 생성 페이지에서 기존 잔류 핀 초기화 * design: 모아보기 페이지 반응형시 중앙 정렬
woowacourse-teams · Sep 27, 2023 · 0c5bf0d · 0c5bf0d
1 parent 551217f
commit 0c5bf0d
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 7 deletions.
diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx
@@ -97,7 +97,6 @@ const MediaWrapper = styled.section<{
   overflow: hidden;
   @media (max-width: 1076px) {
     flex-direction: ${({ $isAddPage, $layoutWidth }) => {
-      if ($isAddPage) return 'column';
       if ($layoutWidth === '372px') return 'column-reverse';
     }};
   }

diff --git a/frontend/src/pages/NewPin.tsx b/frontend/src/pages/NewPin.tsx
@@ -37,7 +37,8 @@ const NewPin = () => {
   const [topic, setTopic] = useState<any>(null);
   const [selectedTopic, setSelectedTopic] = useState<any>(null);
   const [showedImages, setShowedImages] = useState<string[]>([]);
-  const { clickedMarker } = useContext(MarkerContext);
+  const { clickedMarker, markers, removeMarkers, removeInfowindows } =
+    useContext(MarkerContext);
   const { clickedCoordinate, setClickedCoordinate } =
     useContext(CoordinatesContext);
   const { formValues, errorMessages, onChangeInput } =
@@ -228,6 +229,11 @@ const NewPin = () => {
       }
     };
 
+    if (!topicId && markers && markers.length > 0) {
+      removeMarkers();
+      removeInfowindows();
+    }
+
     getTopicId();
   }, []);
 
@@ -307,7 +313,6 @@ const NewPin = () => {
             onChangeInput={onChangeInput}
             tabIndex={1}
             errorMessage={errorMessages.name}
-            autoFocus
             maxLength={50}
           />
 
@@ -364,6 +369,7 @@ const NewPin = () => {
               추가하기
             </Button>
           </Flex>
+          <Space size={7} />
         </Wrapper>
       </form>
 

diff --git a/frontend/src/pages/NewTopic.tsx b/frontend/src/pages/NewTopic.tsx
@@ -1,4 +1,4 @@
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import Text from '../components/common/Text';
 import Flex from '../components/common/Flex';
 import Space from '../components/common/Space';
@@ -18,6 +18,7 @@ import usePost from '../apiHooks/usePost';
 import AuthorityRadioContainer from '../components/AuthorityRadioContainer';
 import styled from 'styled-components';
 import useCompressImage from '../hooks/useCompressImage';
+import { MarkerContext } from '../context/MarkerContext';
 
 type NewTopicFormValuesType = Omit<NewTopicFormProps, 'topics'>;
 
@@ -36,6 +37,8 @@ const NewTopic = () => {
       image: '',
     });
   const { compressImage } = useCompressImage();
+  const { markers, removeMarkers, removeInfowindows } =
+    useContext(MarkerContext);
 
   const [isPrivate, setIsPrivate] = useState(false); // 혼자 볼 지도 :  같이 볼 지도
   const [isAllPermissioned, setIsAllPermissioned] = useState(true); // 모두 : 지정 인원
@@ -137,10 +140,17 @@ const NewTopic = () => {
     setShowImage(URL.createObjectURL(file));
   };
 
+  useEffect(() => {
+    if (!pulledPinIds && markers && markers.length > 0) {
+      removeMarkers();
+      removeInfowindows();
+    }
+  }, []);
+
   return (
     <form onSubmit={onSubmit}>
       <Space size={4} />
-      <Flex
+      <Wrapper
         width={`calc(${width} - ${LAYOUT_PADDING})`}
         $flexDirection="column"
       >
@@ -237,11 +247,25 @@ const NewTopic = () => {
             생성하기
           </Button>
         </Flex>
-      </Flex>
+        <Space size={7} />
+      </Wrapper>
     </form>
   );
 };
 
+const Wrapper = styled(Flex)`
+  margin: 0 auto;
+
+  @media (max-width: 1076px) {
+    width: calc(50vw - 40px);
+  }
+
+  @media (max-width: 744px) {
+    width: ${({ width }) => width};
+    margin: 0 auto;
+  }
+`;
+
 const ImageInputLabel = styled.label`
   height: 40px;
   padding: 10px 10px;

diff --git a/frontend/src/pages/SeeTogetherTopics.tsx b/frontend/src/pages/SeeTogetherTopics.tsx
@@ -130,6 +130,8 @@ const Wrapper = styled.section<{ width: '372px' | '100vw' }>`
   height: 100%;
   display: flex;
   flex-direction: column;
+
+  margin: 0 auto;
 `;
 
 const WrapperWhenEmpty = styled.section<{ width: '372px' | '100vw' }>`
@@ -139,11 +141,13 @@ const WrapperWhenEmpty = styled.section<{ width: '372px' | '100vw' }>`
   flex-direction: column;
   justify-content: center;
   align-items: center;
+
+  margin: 0 auto;
 `;
 
 const ButtonsWrapper = styled.div`
   display: flex;
-  justify-content: center;
+  justify-content: end;
   align-items: center;
 `;