refactor: 지역 마커 렌더링 훅 변경

[#914]
woowacourse-teams · Nov 9, 2023 · df5fcb6 · df5fcb6
1 parent 03cc375
commit df5fcb6
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 51 deletions.
diff --git a/...le-maps/marker/components/MaxDeltaAreaMarkerContainer/components/RegionMarkerRenderer.tsx b/...le-maps/marker/components/MaxDeltaAreaMarkerContainer/components/RegionMarkerRenderer.tsx
@@ -1,19 +1,20 @@
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
+
+import { useMarker } from '@marker/hooks/useRenderMarker';
 
-import { useRenderRegionMarker } from '../hooks/useRenderRegionMarker';
 import type { Region } from '../types';
 
 export interface RegionMarkerProps {
   region: Region;
 }
 
 const RegionMarkerRenderer = ({ region }: RegionMarkerProps) => {
-  const { renderRegionMarker } = useRenderRegionMarker();
+  const { renderRegionMarker } = useMarker();
 
-  useEffect(() => {
-    const unmountRegionMarker = renderRegionMarker(region);
+  useLayoutEffect(() => {
+    const unmount = renderRegionMarker(region);
 
-    return unmountRegionMarker;
+    return unmount;
   }, []);
 
   return <></>;

diff --git a/...google-maps/marker/components/MaxDeltaAreaMarkerContainer/hooks/useRenderRegionMarker.tsx b/...google-maps/marker/components/MaxDeltaAreaMarkerContainer/hooks/useRenderRegionMarker.tsx
diff --git a/...ponents/SmallMediumDeltaAreaMarkerContainer/components/marker/CarffeineMarkerRenderer.tsx b/...ponents/SmallMediumDeltaAreaMarkerContainer/components/marker/CarffeineMarkerRenderer.tsx
@@ -8,7 +8,6 @@ interface Props {
   station: StationMarker;
 }
 
-// TODO: 여기다가 옵셔널로 infoWindow 열리고 닫히는 속성 넣어서 한번 컨트롤 해보기
 const CarffeineMarkerRenderer = ({ station }: Props) => {
   const { renderCarffeineMarker } = useMarker();
 

diff --git a/frontend/src/components/google-maps/marker/hooks/useRenderMarker.tsx b/frontend/src/components/google-maps/marker/hooks/useRenderMarker.tsx
@@ -1,6 +1,8 @@
 import { createRoot } from 'react-dom/client';
 
 import StyledClusterMarker from '@marker/components/LargeDeltaAreaMarkerContainer/components/StyledClusterMarker';
+import RegionMarker from '@marker/components/MaxDeltaAreaMarkerContainer/components/RegionMarker';
+import type { Region } from '@marker/components/MaxDeltaAreaMarkerContainer/types';
 import CarFfeineMarker from '@marker/components/SmallMediumDeltaAreaMarkerContainer/components/CarFfeineMarker';
 import {
   addMarkerInstanceToExternalStore,
@@ -76,6 +78,23 @@ export const useMarker = () => {
     };
   };
 
+  const renderRegionMarker = (region: Region) => {
+    const { latitude, longitude, count, regionName } = region;
+
+    const markerInstance = createMarkerInstance(latitude, longitude);
+    const container = createMarkerDomElement();
+
+    markerInstance.title = regionName;
+    markerInstance.content = container;
+
+    bindRegionMarkerClickEvent(markerInstance, region);
+    createRoot(container).render(<RegionMarker count={count} regionName={regionName} />);
+
+    return () => {
+      markerInstance.map = null;
+    };
+  };
+
   const bindStationMarkerClickEvent = (
     markerInstance: google.maps.marker.AdvancedMarkerElement,
     stationId: string
@@ -102,9 +121,21 @@ export const useMarker = () => {
     });
   };
 
+  const bindRegionMarkerClickEvent = (
+    markerInstance: google.maps.marker.AdvancedMarkerElement,
+    region: Region
+  ) => {
+    const { latitude, longitude } = region;
+
+    markerInstance.addListener('click', () => {
+      googleMapActions.moveTo({ lat: latitude, lng: longitude }, 12);
+    });
+  };
+
   return {
     renderDefaultMarker,
     renderCarffeineMarker,
     renderClusterMarker,
+    renderRegionMarker,
   };
 };