diff --git a/frontend/src/components/Layout/index.tsx b/frontend/src/components/Layout/index.tsx index 39af46f4e..0cfa57fa4 100644 --- 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 index c639f2e3f..ff2b5c3c7 100644 --- a/frontend/src/pages/NewPin.tsx +++ b/frontend/src/pages/NewPin.tsx @@ -37,7 +37,8 @@ const NewPin = () => { const [topic, setTopic] = useState(null); const [selectedTopic, setSelectedTopic] = useState(null); const [showedImages, setShowedImages] = useState([]); - 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 = () => { 추가하기 + diff --git a/frontend/src/pages/NewTopic.tsx b/frontend/src/pages/NewTopic.tsx index bd927fcb4..11de14312 100644 --- 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; @@ -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 (
- @@ -237,11 +247,25 @@ const NewTopic = () => { 생성하기 - + + ); }; +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 index c949b83c0..a4c5a0af6 100644 --- 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; `;