Refactor: 마커 업데이트 로직 리팩토링

src/assets/index.ts

@@ -21,3 +21,5 @@ export { default as ReasonableColoredIcon } from './img/ReasonableColoredIcon.pn
 export { default as ReasonableGrayIcon } from './img/ReasonableGrayIcon.png';
 export { default as StudyColoredIcon } from './img/StudyColoredIcon.png';
 export { default as StudyGrayIcon } from './img/StudyGrayIcon.png';
+export { default as FavoirteColoredIcon } from './img/FavoriteColoredIcon.png';
+export { default as FavoriteGrayIcon } from './img/FavoriteGrayIcon.png';

src/components/MapComp/hooks/useActivateCafeMarker.ts

@@ -0,0 +1,37 @@
+import { useRecoilValue } from 'recoil';
+import useMap from './useMap';
+import { useEffect } from 'react';
+import { activatedCafeIdAtom } from '@states/infoWindow';
+import { CustomGeoJSONFeatures } from '@libs/types/map';
+
+interface UseActivateCafeMarkerHookProps {
+  add: (features: CustomGeoJSONFeatures) => void;
+  remove: () => void;
+  features: CustomGeoJSONFeatures[] | CustomGeoJSONFeatures[][];
+  removeCondition?: boolean[];
+}
+
+function useActivateCafeMarker({ add, remove, features, removeCondition }: UseActivateCafeMarkerHookProps) {
+  const activatedCafeId = useRecoilValue(activatedCafeIdAtom);
+  const allFeatures = features.flat();
+  const mapRef = useMap();
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+
+    const activatedCafeFeature = allFeatures.find((feature) => feature.properties.cafeId === activatedCafeId);
+    if (!activatedCafeFeature) return;
+
+    add(activatedCafeFeature);
+
+    return () => {
+      remove();
+    };
+  }, [activatedCafeId]);
+
+  useEffect(() => {
+    if (removeCondition && removeCondition.find((value) => value === true)) remove();
+  }, [removeCondition]);
+}
+export default useActivateCafeMarker;

src/components/MapComp/hooks/useAddSource.ts

@@ -0,0 +1,80 @@
+import { MAP_SOURCE_RENDER_CAFE_LIST } from '@constants/map';
+import { CustomGeoJSONFeatures } from '@libs/types/map';
+import { FeatureCollection } from 'geojson';
+import { MapboxEvent } from 'mapbox-gl';
+import useMapEventListner from './useMapEventListner';
+import { useEffect, useState } from 'react';
+import useMap from './useMap';
+
+interface UseMapSourceProps {
+  filteredFeatures: CustomGeoJSONFeatures[];
+}
+function useMapSourceAndLayer({ filteredFeatures }: UseMapSourceProps, deps: any[]) {
+  const mapRef = useMap();
+  const [loaded, setLoaded] = useState(false);
+  const onMapLoad = ({ target: targetMap }: MapboxEvent) => {
+    useMapSourceAndLayer.addSourceAndLayer({
+      map: targetMap,
+      sourceFeatures: filteredFeatures,
+      name: MAP_SOURCE_RENDER_CAFE_LIST,
+    });
+    setLoaded(true);
+  };
+
+  useMapEventListner(
+    {
+      type: 'load',
+      callback: onMapLoad,
+      effect: (map) => {
+        if (map.getLayer(MAP_SOURCE_RENDER_CAFE_LIST)) {
+          map.removeLayer(MAP_SOURCE_RENDER_CAFE_LIST);
+          map.removeSource(MAP_SOURCE_RENDER_CAFE_LIST);
+        }
+      },
+    },
+    []
+  );
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!(map && loaded)) return;
+    if (map.getLayer(MAP_SOURCE_RENDER_CAFE_LIST)) {
+      map.removeLayer(MAP_SOURCE_RENDER_CAFE_LIST);
+      map.removeSource(MAP_SOURCE_RENDER_CAFE_LIST);
+    }
+    useMapSourceAndLayer.addSourceAndLayer({
+      map,
+      sourceFeatures: filteredFeatures,
+      name: MAP_SOURCE_RENDER_CAFE_LIST,
+    });
+  }, [...deps, loaded]);
+}
+
+export default useMapSourceAndLayer;
+
+interface AddSourceAndLayerProps {
+  map: mapboxgl.Map;
+  sourceFeatures: CustomGeoJSONFeatures[];
+  name: string;
+}
+
+useMapSourceAndLayer.addSourceAndLayer = ({ map, sourceFeatures, name }: AddSourceAndLayerProps) => {
+  map.addSource(name, {
+    type: 'geojson',
+    data: {
+      type: 'FeatureCollection',
+      features: sourceFeatures,
+    } as FeatureCollection,
+    cluster: true,
+    clusterMaxZoom: 18,
+    clusterRadius: 60,
+  });
+  map.addLayer({
+    id: name,
+    type: 'circle',
+    source: name,
+    paint: {
+      'circle-opacity': 0,
+    },
+  });
+};

src/components/MapComp/hooks/useCameraMove.ts

@@ -45,9 +45,10 @@ function useCameraMove() {
 
     prevCameraState.current = currentCameraState.current;
     const nextState = { ...prevCameraState.current, ...tiltNextState({ coordinate }), ...option };
-    currentCameraState.current = nextState;
 
     map.flyTo(nextState);
+
+    currentCameraState.current = { ...nextState, pitch: 0, bearing: 0 };
   };
 
   const flyToPrev = () => {

src/components/MapComp/hooks/useFiltering.ts

@@ -0,0 +1,26 @@
+import { FilterId } from '@libs/types/filter';
+import { CustomGeoJSONFeatures } from '@libs/types/map';
+import { activeFilterIdAtom } from '@states/clusterList';
+import { geoJsonAtom } from '@states/map';
+import { useRecoilValue } from 'recoil';
+
+function useFiltering() {
+  const allFeatures = useRecoilValue(geoJsonAtom);
+  const activeFilterId = useRecoilValue(activeFilterIdAtom);
+
+  const filteredFeatures = useFiltering.filterFeatures({ features: allFeatures, filterId: activeFilterId });
+
+  return [activeFilterId, filteredFeatures] as [FilterId, CustomGeoJSONFeatures[]];
+}
+export default useFiltering;
+
+useFiltering.filterFeatures = ({ features, filterId }: { features: CustomGeoJSONFeatures[]; filterId: FilterId }) => {
+  const filteredFeatures: CustomGeoJSONFeatures[] = [];
+
+  features.forEach((feature: CustomGeoJSONFeatures) => {
+    if (feature.properties?.filterList.includes(filterId)) {
+      filteredFeatures.push(feature);
+    }
+  });
+  return filteredFeatures;
+};

src/components/MapComp/hooks/useMap.ts

@@ -1,3 +1,4 @@
+import detectDevice from '@libs/utils/detectDevice';
 import mapboxgl, { Map, MapboxOptions } from 'mapbox-gl';
 import { useEffect, useState } from 'react';
 
@@ -6,13 +7,19 @@ import { useEffect, useState } from 'react';
 // eslint-disable-next-line import/no-webpack-loader-syntax, @typescript-eslint/no-var-requires
 mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
 
-export const mapConfig: MapboxOptions = {
+const style = {
+  mobile: 'mapbox://styles/sangjun/cli3dxlnw00xl01rh67rm3rbf', // layer 53
+  desktop: 'mapbox://styles/sangjun/cli3dqu07007901rb6l456z76', // layer 104
+  origin: 'mapbox://styles/sangjun/clgwfbvxr003s01r88wfc14jo', // layer 134
+};
+
+export const mapConfig: (deviceType: 'mobile' | 'desktop') => MapboxOptions = (deviceType) => ({
   container: 'map',
-  style: 'mapbox://styles/sangjun/clgwfbvxr003s01r88wfc14jo',
+  style: `${style[deviceType]}?optimize=true`,
   center: [127.0770389, 37.6257614],
   zoom: 17,
   maxZoom: 18,
-  minZoom: 13,
+  minZoom: 15,
   maxBounds: [
     [127.05, 37.59],
     [127.09, 37.65],
@@ -21,7 +28,7 @@ export const mapConfig: MapboxOptions = {
     name: 'lambertConformalConic',
     parallels: [36, 35],
   },
-};
+});
 
 /**
  * mapboxgl.Map 인스턴스 저장 객체
@@ -33,19 +40,20 @@ const mapRef: { current: Map | null } = { current: null };
  * @returns Map | null
  *
  */
-function useMapRef() {
+function useMap() {
   const [, setLoad] = useState(false);
 
   useEffect(() => {
+    const device = detectDevice();
     if (mapRef.current instanceof Map) return;
     try {
       mapboxgl.accessToken = `${process.env.REACT_APP_MAPBOX_ACCESS_TOKKEN}`;
-      mapRef.current = new mapboxgl.Map(mapConfig);
+      mapRef.current = new mapboxgl.Map(mapConfig(device));
       setLoad(true);
     } catch (e) {
       /* empty */
     }
   }, []);
   return mapRef;
 }
-export default useMapRef;
+export default useMap;

src/components/MapComp/hooks/useMapEventListner.ts

@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+import useMap from './useMap';
+import mapboxgl, { EventData, MapEventType, MapboxEvent } from 'mapbox-gl';
+
+interface UseMapEventListnerProps {
+  type: keyof MapEventType;
+  callback: (e: MapboxEvent<undefined> & EventData) => void;
+  effect: (map: mapboxgl.Map) => void;
+}
+function useMapEventListner({ type, callback, effect }: UseMapEventListnerProps, dep: any[]) {
+  const mapRef = useMap();
+
+  useEffect(() => {
+    const map = mapRef.current;
+    if (!map) return;
+
+    effect(map);
+    map.on(type, callback);
+
+    return () => {
+      map.off(type, callback);
+    };
+  }, dep);
+}
+
+export default useMapEventListner;