diff --git a/client/src/components/map/Map.tsx b/client/src/components/map/Map.tsx index 6c4a4a6..c64b099 100644 --- a/client/src/components/map/Map.tsx +++ b/client/src/components/map/Map.tsx @@ -4,17 +4,17 @@ import Marker from '@components/common/Marker'; import TaxiMarker from '@components/common/TaxiMarker'; import { Location, PathPoint } from '@custom-types'; import { updatePath } from '@stores/modules/preData'; -import { useDispatch } from 'react-redux'; +import { useDispatch, useSelector, shallowEqual } from 'react-redux'; import { useGoogleMapApiState, useGoogleMapApiDispatch } from '../../contexts/GoogleMapProvider'; const Map: React.FC<{ - center: Location; location: Location; pathPoint: PathPoint; isMatched: boolean; taxiLocation: Location; -}> = ({ center, location, pathPoint, isMatched, taxiLocation }) => { +}> = ({ location, pathPoint, isMatched, taxiLocation }) => { const { directionRenderer, maps } = useGoogleMapApiState(); + const center = useSelector((state: { center: Location }) => state.center, shallowEqual); const mapDispatch = useGoogleMapApiDispatch(); const dispatch = useDispatch(); const renderDirection: (result: google.maps.DirectionsResult, status: google.maps.DirectionsStatus) => void = ( diff --git a/client/src/containers/MapContainer.tsx b/client/src/containers/MapContainer.tsx index 6011f8e..d350df1 100644 --- a/client/src/containers/MapContainer.tsx +++ b/client/src/containers/MapContainer.tsx @@ -7,6 +7,7 @@ import getLocation from '@utils/getLocation'; import { Location, PathPoint } from '@custom-types'; import { Toast } from 'antd-mobile'; import styled from 'styled-components'; +import { updateCenter } from '@stores/modules/center'; interface Props { isMatched?: boolean; @@ -17,7 +18,6 @@ const MapContainer: React.FC = ({ isMatched = false, taxiLocation = { lat const location = useSelector((state: { location: Location }) => state.location, shallowEqual); const pathPoint = useSelector((state: { pathPoint: PathPoint }) => state.pathPoint); const dispatch = useDispatch(); - const [center, setCenter] = useState(location); const [isGPSLoaded, setGPSLoaded] = useState(false); useEffect(() => { @@ -27,14 +27,14 @@ const MapContainer: React.FC = ({ isMatched = false, taxiLocation = { lat }, []); useEffect(() => { - if (taxiLocation) setCenter(taxiLocation); + if (isMatched) dispatch(updateCenter(taxiLocation)); }, [isMatched]); const initializeLocation = async () => { const startLocation: Location = await getLocation(); dispatch(updateLocation(startLocation)); if (!pathPoint.isSetStartPoint) { - setCenter(startLocation); + dispatch(updateCenter(startLocation)); } setGPSLoaded(true); }; @@ -52,13 +52,7 @@ const MapContainer: React.FC = ({ isMatched = false, taxiLocation = { lat return ( <> {isGPSLoaded ? ( - + ) : ( diff --git a/client/src/stores/modules/center.ts b/client/src/stores/modules/center.ts new file mode 100644 index 0000000..bbf7929 --- /dev/null +++ b/client/src/stores/modules/center.ts @@ -0,0 +1,23 @@ +import { Location } from '@custom-types'; + +const UPDATE_CENTER = 'center/UPDATE' as const; + +export const updateCenter = (location: Location) => ({ type: UPDATE_CENTER, payload: location }); + +const initialState: Location = { + lat: 37.5006226, + lng: 127.0231786, +}; + +type LocationAction = ReturnType; + +const center = (state = initialState, action: LocationAction): Location => { + switch (action.type) { + case UPDATE_CENTER: + return { ...state, ...action.payload }; + default: + return state; + } +}; + +export default center; diff --git a/client/src/stores/modules/index.ts b/client/src/stores/modules/index.ts index b2311c5..33067a3 100644 --- a/client/src/stores/modules/index.ts +++ b/client/src/stores/modules/index.ts @@ -3,10 +3,12 @@ import location from './location'; import pathPoint from './pathPoint'; import preData from './preData'; import driverMatchingInfo from './driverMatchingInfo'; +import center from './center'; export default combineReducers({ location, pathPoint, preData, driverMatchingInfo, + center, });