Merge pull request #144 from boostcamp-2020/dev

[fe] fix (#139) 히스토리 페이지에서 메인으로 돌아올 때 0, 0으로 설정되는 버그 수정

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 = (

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<Props> = ({ 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<Props> = ({ 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<Props> = ({ isMatched = false, taxiLocation = { lat
   return (
     <>
       {isGPSLoaded ? (
-        <Map
-          center={center}
-          location={location}
-          pathPoint={pathPoint}
-          isMatched={isMatched}
-          taxiLocation={taxiLocation}
-        />
+        <Map location={location} pathPoint={pathPoint} isMatched={isMatched} taxiLocation={taxiLocation} />
       ) : (
         <CenterDIV>
           <Loading />

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<typeof updateCenter>;
+
+const center = (state = initialState, action: LocationAction): Location => {
+  switch (action.type) {
+    case UPDATE_CENTER:
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+};
+
+export default center;

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,
 });