From b8a6b027b7c1706bee2e343608d26fa4b0499627 Mon Sep 17 00:00:00 2001 From: jeong57281 Date: Tue, 13 Dec 2022 14:14:54 +0900 Subject: [PATCH 1/7] =?UTF-8?q?chore:=20=EC=A7=80=EB=8F=84=20=EA=B0=9D?= =?UTF-8?q?=EC=B2=B4=EB=A5=BC=20=EC=A0=84=EC=97=AD=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=ED=95=98=EA=B8=B0=20=EC=9C=84=ED=95=9C=20?= =?UTF-8?q?=EC=A0=80=EC=9E=A5=EC=86=8C=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/store/index.tsx | 44 +++++++++++++++++++++++++++++++------- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/client/src/store/index.tsx b/client/src/store/index.tsx index e6f56d03..7f5f8ead 100644 --- a/client/src/store/index.tsx +++ b/client/src/store/index.tsx @@ -2,6 +2,9 @@ import create from 'zustand'; import { RESTAURANT_LIST_TYPES, RESTAURANT_DETAIL_TYPES } from '@constants/modal'; import { CATEGORY_TYPE } from '@constants/category'; +/** + * <유저의 현재 위치정보를 관리하는 저장소> + */ interface UserLocationStoreType { userLocation: LocationType | null; updateUserLocation: (location: LocationType | null) => void; @@ -13,6 +16,9 @@ export const useUserLocationStore = create((set) => ({ set((state) => ({ ...state, userLocation: location })), })); +/** + * <방의 모임 장소 위치를 관리하는 저장소> + */ interface MeetLocationStoreType { meetLocation: LocationType | null; updateMeetLocation: (location: LocationType | null) => void; @@ -23,7 +29,9 @@ export const useMeetLocationStore = create((set) => ({ updateMeetLocation: (location: LocationType | null) => set(() => ({ meetLocation: location })), })); -// 식당 목록 레이어(RestaurantListLayer)의 화면 상태를 관리하는 전역 저장소 +/** + * <식당 목록 레이어(RestaurantListLayer)의 화면 상태를 관리하는 저장소> + */ interface RestaurantListLayerStatusStore { restaurantListLayerStatus: RESTAURANT_LIST_TYPES; updateRestaurantListLayerStatus: (restaurantListType: RESTAURANT_LIST_TYPES) => void; @@ -35,7 +43,9 @@ export const useRestaurantListLayerStatusStore = create ({ restaurantListLayerStatus: restaurantListType })), })); -// 식당 상세정보 레이어(RestaurantDetailLayer)의 화면 상태를 관리하는 전역 저장소 +/** + * <식당 상세정보 레이어(RestaurantDetailLayer)의 화면 상태를 관리하는 저장소> + */ interface RestaurantDetailLayerStatusStore { restaurantDetailLayerStatus: RESTAURANT_DETAIL_TYPES; updateRestaurantDetailLayerStatus: (restaurantDetailType: RESTAURANT_DETAIL_TYPES) => void; @@ -49,7 +59,9 @@ export const useRestaurantDetailLayerStatusStore = create + */ interface SelectedRestaurantDataStore { selectedRestaurantData: RestaurantType | null; updateSelectedRestaurantData: (restaurantType: RestaurantType | null) => void; @@ -62,10 +74,9 @@ export const useSelectedRestaurantDataStore = create + * Set이 비어있으면 전체선택을 의미하고, + * 비어있지 않으면 들어있는 값은 필터링 할 카테고리들을 의미한다. */ interface SelectedCategoryDataStore { selectedCategoryData: Set; @@ -78,10 +89,14 @@ export const useSelectedCategoryStore = create((set) set(() => ({ selectedCategoryData: categoryData })), })); +/** + * + * bottom: 아래에서 몇 px 띄울건지 지정 + */ interface ToastStoreType { isOpen: boolean; content: string; - bottom: number; // 아래에서 몇 px 띄울건지 지정 + bottom: number; duration: number; updateIsOpen: (isOpen: boolean) => void; updateToast: (content: string, bottom?: number, duration?: number) => void; @@ -95,3 +110,16 @@ export const useToastStore = create((set) => ({ updateIsOpen: (isOpen) => set(() => ({ isOpen })), updateToast: (content, bottom, duration) => set(() => ({ content, bottom, duration })), })); + +/** + * <지도 Ref의 값을 공유하는 저장소> + */ +interface MapStoreType { + map: naver.maps.Map | null; + updateMap: (map: naver.maps.Map | null) => void; +} + +export const useMapStore = create((set) => ({ + map: null, + updateMap: (map: naver.maps.Map | null) => set(() => ({ map })), +})); From 65dcd629cdffdb89e580d117eae54f126155390b Mon Sep 17 00:00:00 2001 From: jeong57281 Date: Tue, 13 Dec 2022 14:17:36 +0900 Subject: [PATCH 2/7] =?UTF-8?q?chore:=20restaurantRow=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20import=EC=A0=9C=EA=B1=B0,=20box-shadow?= =?UTF-8?q?=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/RestaurantRow/index.tsx | 2 -- client/src/components/RestaurantRow/styles.tsx | 3 +-- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/client/src/components/RestaurantRow/index.tsx b/client/src/components/RestaurantRow/index.tsx index eec428b6..18a45041 100644 --- a/client/src/components/RestaurantRow/index.tsx +++ b/client/src/components/RestaurantRow/index.tsx @@ -7,8 +7,6 @@ import { RESTAURANT_LIST_TYPES } from '@constants/modal'; import RestaurantVoteButton from '@components/RestaurantVoteButton'; import { distanceToDisplay } from '@utils/distance'; -import { useEffect, useState } from 'react'; -import { NAVER_LAT, NAVER_LNG } from '@constants/map'; import { RestaurantRowBox, DistanceBox, diff --git a/client/src/components/RestaurantRow/styles.tsx b/client/src/components/RestaurantRow/styles.tsx index 7f1bab9d..0e10a0cc 100644 --- a/client/src/components/RestaurantRow/styles.tsx +++ b/client/src/components/RestaurantRow/styles.tsx @@ -8,8 +8,7 @@ export const RestaurantRowBox = styled(motion.div)` background-color: white; box-sizing: border-box; border-radius: 10px; - border: 0.1px solid ${palette.BORDER}; - box-shadow: 0 0 3px 3px ${palette.BORDER}; + box-shadow: 0 0 3px 2px ${palette.BORDER}; flex: none; display: flex; flex-direction: row; From c99056e300fc3003acc03af0098ae454b8ea4150 Mon Sep 17 00:00:00 2001 From: jeong57281 Date: Tue, 13 Dec 2022 14:18:30 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EC=8B=9D=EB=8B=B9=20=EB=AF=B8?= =?UTF-8?q?=EB=A6=AC=EB=B3=B4=EA=B8=B0=20=EB=AA=A8=EB=8B=AC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/RestaurantPreview/index.tsx | 62 +++++++++++++++++++ .../components/RestaurantPreview/styles.tsx | 14 +++++ 2 files changed, 76 insertions(+) create mode 100644 client/src/components/RestaurantPreview/index.tsx create mode 100644 client/src/components/RestaurantPreview/styles.tsx diff --git a/client/src/components/RestaurantPreview/index.tsx b/client/src/components/RestaurantPreview/index.tsx new file mode 100644 index 00000000..60c11d55 --- /dev/null +++ b/client/src/components/RestaurantPreview/index.tsx @@ -0,0 +1,62 @@ +import { useEffect, useRef } from 'react'; +import RestaurantRow from '@components/RestaurantRow'; +import { AnimatePresence } from 'framer-motion'; +import { useRestaurantDetailLayerStatusStore, useSelectedRestaurantDataStore } from '@store/index'; +import { RESTAURANT_LIST_TYPES, RESTAURANT_DETAIL_TYPES } from '@constants/modal'; +import { RestaurantPreviewBox, RestaurantPreviewLayout } from './styles'; + +function RestaurantPreview() { + const modalRef = useRef(null); + + const { updateRestaurantDetailLayerStatus } = useRestaurantDetailLayerStatusStore( + (state) => state + ); + const { selectedRestaurantData, updateSelectedRestaurantData } = useSelectedRestaurantDataStore( + (state) => state + ); + + useEffect(() => { + const modalCloseWindowEvent = (e: Event) => { + const { target } = e; + + if (modalRef.current && target instanceof HTMLElement && modalRef.current.contains(target)) { + return; + } + + updateSelectedRestaurantData(null); + }; + + window.addEventListener('click', modalCloseWindowEvent); + + return () => { + window.removeEventListener('click', modalCloseWindowEvent); + }; + }, []); + + return ( + + {selectedRestaurantData && ( + + { + updateRestaurantDetailLayerStatus(RESTAURANT_DETAIL_TYPES.show); + }} + > + + + + )} + + ); +} + +export default RestaurantPreview; diff --git a/client/src/components/RestaurantPreview/styles.tsx b/client/src/components/RestaurantPreview/styles.tsx new file mode 100644 index 00000000..89b3bad3 --- /dev/null +++ b/client/src/components/RestaurantPreview/styles.tsx @@ -0,0 +1,14 @@ +import styled from 'styled-components'; +import * as palette from '@styles/Variables'; +import { motion } from 'framer-motion'; + +export const RestaurantPreviewLayout = styled.div` + z-index: ${palette.MAP_CONTROLLER_Z_INDEX}; +`; + +export const RestaurantPreviewBox = styled(motion.div)` + width: 100%; + border-top-right-radius: 5px; + border-top-left-radius: 5px; + padding: 1% 3% 2% 3%; +`; From 9e440c889e8a2e2b57c541048211cf96188cef3f Mon Sep 17 00:00:00 2001 From: jeong57281 Date: Tue, 13 Dec 2022 14:19:23 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20MainMap=20=EC=97=90=20=EC=9E=88?= =?UTF-8?q?=EB=8D=98=20=EC=BB=A8=ED=8A=B8=EB=A1=A4=EB=9F=AC=20MainPage=20?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/MainMap/index.tsx | 55 ++++++---------- client/src/components/MainMap/styles.tsx | 23 ------- client/src/pages/MainPage/index.tsx | 82 +++++++++++++++++++----- client/src/pages/MainPage/styles.tsx | 41 +++++++++++- 4 files changed, 124 insertions(+), 77 deletions(-) diff --git a/client/src/components/MainMap/index.tsx b/client/src/components/MainMap/index.tsx index ecc4cb4e..a59a9597 100644 --- a/client/src/components/MainMap/index.tsx +++ b/client/src/components/MainMap/index.tsx @@ -10,10 +10,12 @@ import hamburgerImageSrc from '@assets/images/hamburger.svg'; import hotdogImageSrc from '@assets/images/hotdog.svg'; import userImageSrc from '@assets/images/user.svg'; -import { ReactComponent as GpsIcon } from '@assets/images/gps.svg'; -import { ReactComponent as PointCircleIcon } from '@assets/images/point-circle.svg'; - -import { useMeetLocationStore, useSelectedCategoryStore } from '@store/index'; +import { + useSelectedCategoryStore, + useMeetLocationStore, + useSelectedRestaurantDataStore, + useMapStore, +} from '@store/index'; import { useSocketStore } from '@store/socket'; import { CATEGORY_TYPE } from '@constants/category'; @@ -21,7 +23,6 @@ import { DEFAULT_ZOOM } from '@constants/map'; import LoadingScreen from '@components/LoadingScreen'; import { useNaverMaps } from '@hooks/useNaverMaps'; -import useCurrentLocation from '@hooks/useCurrentLocation'; import classes from '@styles/marker.module.css'; @@ -29,7 +30,7 @@ import '@utils/MarkerClustering.js'; import { Socket } from 'socket.io-client'; -import { MapControlBox, MapLayout, MapLoadingBox, MapBox } from './styles'; +import { MapLayout, MapLoadingBox, MapBox } from './styles'; interface RestaurantType { id: string; @@ -73,15 +74,14 @@ function MainMap({ restaurantData, joinList }: PropsType) { const joinListMarkersRef = useRef>(new Map()); const joinListInfoWindowsRef = useRef>(new Map()); - const infoWindowsRef = useRef([]); - const markerClusteringObjectsRef = useRef>(new Map()); const { selectedCategoryData } = useSelectedCategoryStore((state) => state); const { socket } = useSocketStore((state) => state); - const { userLocation, updateUserLocation, getCurrentLocation } = useCurrentLocation(); - const { meetLocation } = useMeetLocationStore(); + const { updateMap } = useMapStore((state) => state); + const { meetLocation } = useMeetLocationStore((state) => state); + const { updateSelectedRestaurantData } = useSelectedRestaurantDataStore((state) => state); const setMapLocation = (location: LocationType | naver.maps.Coord | null) => { const map = mapRef.current; @@ -305,8 +305,14 @@ function MainMap({ restaurantData, joinList }: PropsType) { infoWindowsRef.current.push(infoWindow); // 마커 클릭 이벤트 등록 - naver.maps.Event.addListener(marker, 'click', () => { + naver.maps.Event.addListener(marker, 'click', (event) => { infoWindow.open(map, marker); + + updateSelectedRestaurantData(restaurant); + + map.setCenter(marker.getPosition()); + + event.pointerEvent.stop(); }); }); @@ -340,6 +346,7 @@ function MainMap({ restaurantData, joinList }: PropsType) { closeAllRestaurantMarkerInfoWindow(); closeAllUserMarkerInfoWindow(); + updateSelectedRestaurantData(null); }); return onDragendListener; }; @@ -401,6 +408,7 @@ function MainMap({ restaurantData, joinList }: PropsType) { return; } + updateMap(mapRef.current); setMeetingBoundary(mapRef.current); const initListener = onInit(mapRef.current); const clickListener = onClick(mapRef.current); @@ -449,31 +457,6 @@ function MainMap({ restaurantData, joinList }: PropsType) { )} - - - - ); } diff --git a/client/src/components/MainMap/styles.tsx b/client/src/components/MainMap/styles.tsx index 360804c6..d152c0d1 100644 --- a/client/src/components/MainMap/styles.tsx +++ b/client/src/components/MainMap/styles.tsx @@ -29,26 +29,3 @@ export const MapBox = styled.div` outline: none; } `; - -export const MapControlBox = styled.div` - position: absolute; - left: 0; - bottom: 0; - margin: 0 0 18px 8px; - z-index: ${palette.MAP_CONTROLLER_Z_INDEX}; - gap: 10px; - display: flex; - flex-direction: column; - - button { - width: 40px; - height: 40px; - background-color: white; - border: none; - border-radius: 5px; - display: flex; - justify-content: center; - align-items: center; - box-shadow: 0px 0px 4px rgb(0 0 0 / 50%); - } -`; diff --git a/client/src/pages/MainPage/index.tsx b/client/src/pages/MainPage/index.tsx index a5b42fde..fd9d3d96 100644 --- a/client/src/pages/MainPage/index.tsx +++ b/client/src/pages/MainPage/index.tsx @@ -2,8 +2,10 @@ import { useEffect, useState, useRef } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { io, Socket } from 'socket.io-client'; import { useSocketStore } from '@store/socket'; -import { useMeetLocationStore, useRestaurantListLayerStatusStore } from '@store/index'; +import { useMeetLocationStore, useRestaurantListLayerStatusStore, useMapStore } from '@store/index'; +import { ReactComponent as GpsIcon } from '@assets/images/gps.svg'; +import { ReactComponent as PointCircleIcon } from '@assets/images/point-circle.svg'; import { ReactComponent as CandidateListIcon } from '@assets/images/candidate-list.svg'; import { ReactComponent as ListIcon } from '@assets/images/list-icon.svg'; import { ReactComponent as MapIcon } from '@assets/images/map-icon.svg'; @@ -22,10 +24,12 @@ import RestaurantListLayer from '@components/RestaurantListLayer'; import RestaurantDetailLayer from '@components/RestaurantDetailLayer'; import RestaurantCategory from '@components/RestaurantCategory'; import LoadingScreen from '@components/LoadingScreen'; +import RestaurantPreview from '@components/RestaurantPreview'; import { apiService } from '@apis/index'; import { + MapControlBox, ButtonInnerTextBox, CandidateListButton, CategoryBox, @@ -33,6 +37,8 @@ import { HeaderBox, MainPageLayout, MapOrListButton, + FooterBox, + ControllerBox, } from './styles'; function MainPage() { @@ -43,14 +49,15 @@ function MainPage() { const socketRef = useRef(null); const { setSocket } = useSocketStore((state) => state); + const { map } = useMapStore((state) => state); const { getCurrentLocation, updateUserLocation } = useCurrentLocation(); + const { meetLocation, updateMeetLocation } = useMeetLocationStore(); const [isRoomConnect, setRoomConnect] = useState(false); const [myId, setMyId] = useState(''); const [myName, setMyName] = useState(''); const [joinList, setJoinList] = useState>(new Map()); const [restaurantData, setRestaurantData] = useState([]); - const { meetLocation, updateMeetLocation } = useMeetLocationStore(); const { restaurantListLayerStatus, updateRestaurantListLayerStatus } = useRestaurantListLayerStatusStore((state) => state); @@ -196,20 +203,63 @@ function MainPage() { - {/* 식당 후보 목록 <-> 지도 화면 */} - {/* 식당 후보 목록 <-- 전체 식당 목록 */} - - {isRestaurantCandidateList() ? : } - - - {/* 전체 식당 목록 <-> 지도 화면 */} - {/* 전체 식당 목록 <-- 식당 후보 목록 */} - - {isRestaurantFilteredList() ? : } - - {isRestaurantFilteredList() ? '지도보기' : '목록보기'} - - + + + {/* 식당 후보 목록 <-> 지도 화면 */} + {/* 식당 후보 목록 <-- 전체 식당 목록 */} + + {isRestaurantCandidateList() ? : } + + + {/* 전체 식당 목록 <-> 지도 화면 */} + {/* 전체 식당 목록 <-- 식당 후보 목록 */} + + {isRestaurantFilteredList() ? : } + + {isRestaurantFilteredList() ? '지도보기' : '목록보기'} + + + + + + + + + + + {/* 식당 리스트 & 식당 상세정보 Full-Screen 모달 컴포넌트 */} diff --git a/client/src/pages/MainPage/styles.tsx b/client/src/pages/MainPage/styles.tsx index 86358f01..83809662 100644 --- a/client/src/pages/MainPage/styles.tsx +++ b/client/src/pages/MainPage/styles.tsx @@ -53,8 +53,9 @@ export const CategoryBox = styled.div` export const CandidateListButton = styled.button` background-color: ${palette.PRIMARY}; position: absolute; - z-index: ${palette.CONTROLER_Z_INDEX}; + z-index: ${palette.CONTROLLER_Z_INDEX}; margin-bottom: 10px; + left: calc(50% - 55px / 2); bottom: 0px; width: 55px; height: 55px; @@ -70,7 +71,7 @@ export const CandidateListButton = styled.button` export const MapOrListButton = styled.button` background-color: white; position: absolute; - z-index: ${palette.CONTROLER_Z_INDEX}; + z-index: ${palette.CONTROLLER_Z_INDEX}; display: flex; justify-content: center; align-items: center; @@ -94,3 +95,39 @@ export const ButtonInnerTextBox = styled.div` font-size: 14px; font-weight: 500; `; + +export const FooterBox = styled.div` + position: absolute; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; +`; + +export const ControllerBox = styled.div` + position: relative; +`; + +export const MapControlBox = styled.div` + position: absolute; + left: 0; + bottom: 0; + margin: 0 0 18px 8px; + z-index: ${palette.MAP_CONTROLLER_Z_INDEX}; + gap: 10px; + display: flex; + flex-direction: column; + + button { + width: 40px; + height: 40px; + background-color: white; + border: none; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0px 0px 4px rgb(0 0 0 / 50%); + } +`; From e83e54301723ce6649642d6fcd9ea4befbf00bbf Mon Sep 17 00:00:00 2001 From: jeong57281 Date: Tue, 13 Dec 2022 14:19:51 +0900 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20=EC=83=81=EC=84=B8=EB=B3=B4=EA=B8=B0?= =?UTF-8?q?=20=ED=99=94=EB=A9=B4=EC=97=90=EC=84=9C=20=EC=9D=B4=EB=B2=A4?= =?UTF-8?q?=ED=8A=B8=20=EB=B2=84=EB=B8=94=EB=A7=81=20=EC=9D=BC=EC=9C=BC?= =?UTF-8?q?=ED=82=A4=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/RestaurantDetailLayer/index.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/src/components/RestaurantDetailLayer/index.tsx b/client/src/components/RestaurantDetailLayer/index.tsx index ff02fd0d..d520d210 100644 --- a/client/src/components/RestaurantDetailLayer/index.tsx +++ b/client/src/components/RestaurantDetailLayer/index.tsx @@ -15,6 +15,14 @@ function RestaurantDetailLayer() { animate={{ opacity: 1, x: 0 }} exit={{ opacity: 0, x: 999 }} transition={{ duration: 1 }} + /** + * 식당 요약정보 -> 식당 상세정보 경로로 레이어가 열렸을 때 + * 다시 돌아갔을 경우에도 식당 요약정보가 닫히지 않도록 하기 위함. + * window에 등록한 이벤트 리스너를 실행시키지 않는다. + */ + onClick={(event) => { + event.stopPropagation(); + }} > Date: Tue, 13 Dec 2022 14:20:06 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore:=20=EC=83=81=EC=88=98=EB=AA=85=20?= =?UTF-8?q?=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/styles/Variables.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/styles/Variables.ts b/client/src/styles/Variables.ts index 476a7a36..45de318d 100644 --- a/client/src/styles/Variables.ts +++ b/client/src/styles/Variables.ts @@ -24,7 +24,7 @@ export const RESTAURANT_CANDIDATE_LIST_LAYER_Z_INDEX = 7; export const HEADER_Z_INDEX = 8; -export const CONTROLER_Z_INDEX = 8; +export const CONTROLLER_Z_INDEX = 8; export const RESTAURANT_DETAIL_LAYER_Z_INDEX = 10; export const DETAIL_MODAL_HEADER_BUTTON_LAYOUT_Z_INDEX = 999; From a477a4c5ba7fb20cbdc10de0d3e3d3b43cd6945a Mon Sep 17 00:00:00 2001 From: jeong57281 Date: Tue, 13 Dec 2022 17:44:25 +0900 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20map=20controller=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/MapController/index.tsx | 53 +++++++++++++++++++ .../src/components/MapController/styles.tsx | 25 +++++++++ client/src/pages/MainPage/index.tsx | 47 ++-------------- client/src/pages/MainPage/styles.tsx | 23 -------- 4 files changed, 83 insertions(+), 65 deletions(-) create mode 100644 client/src/components/MapController/index.tsx create mode 100644 client/src/components/MapController/styles.tsx diff --git a/client/src/components/MapController/index.tsx b/client/src/components/MapController/index.tsx new file mode 100644 index 00000000..5611f54c --- /dev/null +++ b/client/src/components/MapController/index.tsx @@ -0,0 +1,53 @@ +import { Socket } from 'socket.io-client'; + +import { ReactComponent as GpsIcon } from '@assets/images/gps.svg'; +import { ReactComponent as PointCircleIcon } from '@assets/images/point-circle.svg'; + +import useCurrentLocation from '@hooks/useCurrentLocation'; + +import { useSocketStore } from '@store/socket'; +import { useMeetLocationStore, useMapStore } from '@store/index'; + +import { MapControlBox } from './styles'; + +function MapController() { + const { getCurrentLocation, updateUserLocation } = useCurrentLocation(); + const { socket } = useSocketStore((state) => state); + const { map } = useMapStore((state) => state); + const { meetLocation } = useMeetLocationStore(); + + return ( + + + + + ); +} + +export default MapController; diff --git a/client/src/components/MapController/styles.tsx b/client/src/components/MapController/styles.tsx new file mode 100644 index 00000000..23fa5f60 --- /dev/null +++ b/client/src/components/MapController/styles.tsx @@ -0,0 +1,25 @@ +import styled from 'styled-components'; +import * as palette from '@styles/Variables'; + +export const MapControlBox = styled.div` + position: absolute; + left: 0; + bottom: 0; + margin: 0 0 18px 8px; + z-index: ${palette.MAP_CONTROLLER_Z_INDEX}; + gap: 10px; + display: flex; + flex-direction: column; + + button { + width: 40px; + height: 40px; + background-color: white; + border: none; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0px 0px 4px rgb(0 0 0 / 50%); + } +`; diff --git a/client/src/pages/MainPage/index.tsx b/client/src/pages/MainPage/index.tsx index fd9d3d96..c903dc3f 100644 --- a/client/src/pages/MainPage/index.tsx +++ b/client/src/pages/MainPage/index.tsx @@ -2,10 +2,8 @@ import { useEffect, useState, useRef } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import { io, Socket } from 'socket.io-client'; import { useSocketStore } from '@store/socket'; -import { useMeetLocationStore, useRestaurantListLayerStatusStore, useMapStore } from '@store/index'; +import { useMeetLocationStore, useRestaurantListLayerStatusStore } from '@store/index'; -import { ReactComponent as GpsIcon } from '@assets/images/gps.svg'; -import { ReactComponent as PointCircleIcon } from '@assets/images/point-circle.svg'; import { ReactComponent as CandidateListIcon } from '@assets/images/candidate-list.svg'; import { ReactComponent as ListIcon } from '@assets/images/list-icon.svg'; import { ReactComponent as MapIcon } from '@assets/images/map-icon.svg'; @@ -25,11 +23,11 @@ import RestaurantDetailLayer from '@components/RestaurantDetailLayer'; import RestaurantCategory from '@components/RestaurantCategory'; import LoadingScreen from '@components/LoadingScreen'; import RestaurantPreview from '@components/RestaurantPreview'; +import MapController from '@components/MapController'; import { apiService } from '@apis/index'; import { - MapControlBox, ButtonInnerTextBox, CandidateListButton, CategoryBox, @@ -49,9 +47,8 @@ function MainPage() { const socketRef = useRef(null); const { setSocket } = useSocketStore((state) => state); - const { map } = useMapStore((state) => state); const { getCurrentLocation, updateUserLocation } = useCurrentLocation(); - const { meetLocation, updateMeetLocation } = useMeetLocationStore(); + const { updateMeetLocation } = useMeetLocationStore(); const [isRoomConnect, setRoomConnect] = useState(false); const [myId, setMyId] = useState(''); @@ -220,42 +217,8 @@ function MainPage() { - - - - + {/* 지도 컨트롤러 */} + diff --git a/client/src/pages/MainPage/styles.tsx b/client/src/pages/MainPage/styles.tsx index 83809662..a9525d40 100644 --- a/client/src/pages/MainPage/styles.tsx +++ b/client/src/pages/MainPage/styles.tsx @@ -108,26 +108,3 @@ export const FooterBox = styled.div` export const ControllerBox = styled.div` position: relative; `; - -export const MapControlBox = styled.div` - position: absolute; - left: 0; - bottom: 0; - margin: 0 0 18px 8px; - z-index: ${palette.MAP_CONTROLLER_Z_INDEX}; - gap: 10px; - display: flex; - flex-direction: column; - - button { - width: 40px; - height: 40px; - background-color: white; - border: none; - border-radius: 5px; - display: flex; - justify-content: center; - align-items: center; - box-shadow: 0px 0px 4px rgb(0 0 0 / 50%); - } -`;