Merge pull request #499 from ttaerrim/usemap-refactor

[Refactor] MapModal과 hooks에서 작성된 useMap 훅을 하나로 사용하도록 리팩토링

app/frontend/src/components/Map/index.tsx

@@ -35,21 +35,21 @@ type UpdateMarker = (
   labelText: string,
 ) => void;
 
-const setMyLocation = (updateMarker: UpdateMarker) => {
+const setMyLocation = (makeMarker: UpdateMarker) => {
   const onSuccess = (position: Geolocation) => {
     const { latitude, longitude } = position.coords;
-    updateMarker({ latitude, longitude }, 'red', '현 위치');
+    makeMarker({ latitude, longitude }, 'red', '현 위치');
   };
   navigator.geolocation.getCurrentPosition(onSuccess);
 };
 
 export function Map({ onClickMarker, closeSidebar }: MapProps) {
   const { data: mogacoList } = useQuery(queryKeys.mogaco.list());
   const mapRef = useRef<HTMLDivElement>(null);
-  const { mapInstance, updateMarker } = useMap(mapRef);
+  const { mapInstance, makeMarker } = useMap(mapRef);
   const onClickMyLocation = () => {
     closeSidebar();
-    setMyLocation(updateMarker);
+    setMyLocation(makeMarker);
   };
 
   useEffect(() => {

app/frontend/src/components/Modal/MapModal/index.tsx

@@ -5,13 +5,12 @@ import { Button } from '@morak/ui';
 import { keepPreviousData, useQuery } from '@tanstack/react-query';
 
 import { FormInput } from '@/components';
-import { useDebounce } from '@/hooks';
+import { useDebounce, useMap } from '@/hooks';
 import { queryKeys } from '@/queries';
 import { useModalAtom } from '@/stores';
 import { sansBold14, sansRegular12, sansRegular14 } from '@/styles/font.css';
 
 import * as styles from './index.css';
-import { useMap } from './useMap';
 
 type MapModalProps = {
   saveAddress: ({
@@ -35,7 +34,7 @@ export function MapModal({ saveAddress }: MapModalProps) {
     setCoord,
     currentAddress: selectedAddress,
     initMapModal,
-  } = useMap(mapRef);
+  } = useMap(mapRef, true);
 
   const { data: tmapResponse } = useQuery({
     ...queryKeys.tmap.searchAddress({

app/frontend/src/hooks/useMap.ts

@@ -1,6 +1,8 @@
 /* eslint-disable no-underscore-dangle */
 import { useCallback, useEffect, useState } from 'react';
 
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+
 import { Marker } from '@/components/Map/Marker';
 import {
   DEFAULT_ZOOM_LEVEL,
@@ -9,13 +11,58 @@ import {
   INITIAL_LATITUDE,
   INITIAL_LONGITUDE,
 } from '@/constants';
-import { TMap, TMapMarker } from '@/types';
+import { queryKeys } from '@/queries';
+import { TMap, TMapEvent, TMapLatLng, TMapMarker } from '@/types';
 
 const { Tmapv3 } = window;
 
-export const useMap = (mapRef: React.RefObject<HTMLDivElement>) => {
+export const useMap = (
+  mapRef: React.RefObject<HTMLDivElement>,
+  useOnClick: boolean = false,
+) => {
   const [mapInstance, setMapInstance] = useState<TMap | null>(null);
   const [currentMarker, setCurrentMarker] = useState<TMapMarker | null>(null);
+  const [currentCoord, setCurrentCoord] = useState<TMapLatLng | null>(null);
+
+  const coord = {
+    latitude: currentCoord?.lat() || 0,
+    longitude: currentCoord?.lng() || 0,
+  };
+
+  const { data: addressData } = useQuery({
+    ...queryKeys.tmap.getAddressFromCoord({
+      latitude: coord.latitude,
+      longitude: coord.longitude,
+    }),
+
+    placeholderData: keepPreviousData,
+  });
+  const currentAddress = addressData?.addressInfo.fullAddress || '';
+
+  useEffect(() => {
+    if (!currentCoord) {
+      return;
+    }
+
+    const makeMarker = (position: TMapLatLng) => {
+      if (!mapInstance) {
+        return;
+      }
+
+      currentMarker?.setMap(null);
+
+      const marker = Marker({
+        mapContent: mapInstance,
+        position,
+        theme: 'green',
+      });
+
+      setCurrentMarker(marker);
+    };
+
+    makeMarker(currentCoord);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentCoord, mapInstance]);
 
   useEffect(() => {
     if (mapRef.current?.firstChild || mapInstance) {
@@ -32,13 +79,46 @@ export const useMap = (mapRef: React.RefObject<HTMLDivElement>) => {
     setMapInstance(map);
   }, [mapRef, mapInstance]);
 
+  useEffect(() => {
+    if (!mapInstance || !useOnClick) {
+      return;
+    }
+
+    const renderMarker = (e: TMapEvent) => {
+      const { lngLat } = e.data;
+      const position = new Tmapv3.LatLng(lngLat._lat, lngLat._lng);
+
+      setCurrentCoord(position);
+    };
+
+    mapInstance.on('Click', renderMarker);
+  }, [mapInstance, currentCoord, useOnClick]);
+
   const updateMarker = useCallback(
+    (tempCoord: {
+      latitude: number | undefined;
+      longitude: number | undefined;
+    }) => {
+      const { latitude, longitude } = tempCoord;
+      if (!(latitude && longitude) || !mapInstance) {
+        return;
+      }
+
+      const position = new Tmapv3.LatLng(latitude, longitude);
+
+      setCurrentCoord(position);
+      mapInstance?.setCenter(position);
+    },
+    [mapInstance],
+  );
+
+  const makeMarker = useCallback(
     (
-      coord: { latitude: number | null; longitude: number | null },
+      tempCoord: { latitude: number | null; longitude: number | null },
       theme: 'green' | 'red',
       labelText?: string,
     ) => {
-      const { latitude, longitude } = coord;
+      const { latitude, longitude } = tempCoord;
       if (!(latitude && longitude) || !mapInstance) {
         return;
       }
@@ -69,5 +149,30 @@ export const useMap = (mapRef: React.RefObject<HTMLDivElement>) => {
     [mapInstance, currentMarker],
   );
 
-  return { mapInstance, updateMarker, currentMarker };
+  const setCenterToSelectedCoord = (position: TMapLatLng) => {
+    mapInstance?.setCenter(position);
+  };
+
+  const setCoord = (currCoord: { latitude: number; longitude: number }) => {
+    const position = new Tmapv3.LatLng(currCoord.latitude, currCoord.longitude);
+    setCurrentCoord(position);
+    setCenterToSelectedCoord(position);
+  };
+
+  const initMapModal = () => {
+    currentMarker?.setMap(null);
+    setCurrentCoord(null);
+    setCurrentMarker(null);
+  };
+
+  return {
+    mapInstance,
+    updateMarker,
+    makeMarker,
+    currentMarker,
+    currentAddress,
+    coord,
+    setCoord,
+    initMapModal,
+  };
 };