diff --git a/app/frontend/src/components/Map/index.tsx b/app/frontend/src/components/Map/index.tsx
index 502e922bd..24153a18a 100644
--- a/app/frontend/src/components/Map/index.tsx
+++ b/app/frontend/src/components/Map/index.tsx
@@ -35,10 +35,10 @@ 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);
 };
@@ -46,10 +46,10 @@ const setMyLocation = (updateMarker: UpdateMarker) => {
 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(() => {
diff --git a/app/frontend/src/components/Modal/MapModal/index.tsx b/app/frontend/src/components/Modal/MapModal/index.tsx
index f807fda2e..849f30f99 100644
--- a/app/frontend/src/components/Modal/MapModal/index.tsx
+++ b/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({
diff --git a/app/frontend/src/components/Modal/MapModal/useMap.ts b/app/frontend/src/components/Modal/MapModal/useMap.ts
deleted file mode 100644
index fe5ae4172..000000000
--- a/app/frontend/src/components/Modal/MapModal/useMap.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-/* 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,
-  INITIAL_LATITUDE,
-  INITIAL_LONGITUDE,
-  MAX_ZOOM_LEVEL,
-  MIN_ZOOM_LEVEL,
-} from '@/constants';
-import { queryKeys } from '@/queries';
-import { TMap, TMapEvent, TMapLatLng, TMapMarker } from '@/types';
-
-const { Tmapv3 } = window;
-
-export const useMap = (mapRef: React.RefObject<HTMLDivElement>) => {
-  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 || '';
-
-  const setCenterToSelectedCoord = (position: TMapLatLng) => {
-    mapInstance?.setCenter(position);
-  };
-
-  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) {
-      return;
-    }
-
-    const map = new Tmapv3.Map('map', {
-      zoom: DEFAULT_ZOOM_LEVEL,
-      zoomControl: false,
-      center: new Tmapv3.LatLng(INITIAL_LATITUDE, INITIAL_LONGITUDE),
-    });
-
-    map.setZoomLimit(MIN_ZOOM_LEVEL, MAX_ZOOM_LEVEL);
-    setMapInstance(map);
-  }, [mapRef, mapInstance]);
-
-  useEffect(() => {
-    if (!mapInstance) {
-      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]);
-
-  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 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,
-    coord,
-    setCoord,
-    currentAddress,
-    initMapModal,
-  };
-};
diff --git a/app/frontend/src/hooks/useMap.ts b/app/frontend/src/hooks/useMap.ts
index 8aa07ea3a..a6d0a0a38 100644
--- a/app/frontend/src/hooks/useMap.ts
+++ b/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,
+  };
 };