Refactor: 변경된 모달 사용하도록 변경

GDSC-PKNU-Official · Jul 26, 2023 · 7f66c81 · 7f66c81
1 parent b7e070e
commit 7f66c81
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 23 deletions.
diff --git a/src/pages/Map/MapLevelObserver.tsx b/src/pages/Map/MapLevelObserver.tsx
@@ -1,6 +1,8 @@
-import MapLevetLimitModal from '@components/Modal/MapLevelLimitModal';
+import AlertModal from '@components/Modal/AlertModal';
+import { MODAL_MESSAGE } from '@constants/modal-messages';
 import { PKNU_MAP_LIMIT } from '@constants/pknu-map';
-import React, { useEffect, useState } from 'react';
+import useModals from '@hooks/useModals';
+import React, { useEffect } from 'react';
 
 interface MapLevelObserverProps {
   map: any;
@@ -12,27 +14,31 @@ const MapLevelObserver = ({ map, centerLocation }: MapLevelObserverProps) => {
     return null;
   }
 
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
-
+  const { openModal, closeModal } = useModals();
   useEffect(() => {
     const levelLimitHandler = () => {
       if (map.getLevel() <= PKNU_MAP_LIMIT.LEVEL) {
         return;
       }
       map.setLevel(PKNU_MAP_LIMIT.LEVEL);
       map.setCenter(centerLocation);
-      setIsModalOpen((prev) => !prev);
+      openModal(AlertModal, {
+        message: MODAL_MESSAGE.ALERT.OVER_MAP_LEVEL,
+        buttonMessage: '닫기',
+        onClose: () => closeModal(AlertModal),
+      });
     };
     window.kakao.maps.event.addListener(map, 'zoom_changed', levelLimitHandler);
+    return () => {
+      window.kakao.maps.event.removeListener(
+        map,
+        'zoom_changed',
+        levelLimitHandler,
+      );
+    };
   });
 
-  return (
-    <>
-      {isModalOpen && (
-        <MapLevetLimitModal onClose={() => setIsModalOpen((prev) => !prev)} />
-      )}
-    </>
-  );
+  return <></>;
 };
 
 export default MapLevelObserver;
diff --git a/src/pages/Map/MapboundaryObserver.tsx b/src/pages/Map/MapboundaryObserver.tsx
@@ -1,6 +1,8 @@
-import MapBoundsLimitModal from '@components/Modal/MapBoundsLimitModal';
+import AlertModal from '@components/Modal/AlertModal';
+import { MODAL_MESSAGE } from '@constants/modal-messages';
 import { PKNU_MAP_LIMIT } from '@constants/pknu-map';
-import React, { useEffect, useState } from 'react';
+import useModals from '@hooks/useModals';
+import React, { useEffect } from 'react';
 
 interface MapBounds {
   map: any;
@@ -12,7 +14,7 @@ const MapboundaryObserver = ({ map, centerLocation }: MapBounds) => {
     return null;
   }
 
-  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const { openModal, closeModal } = useModals();
   useEffect(() => {
     const boundayLimitHandler = () => {
       const { La, Ma } = map.getCenter();
@@ -22,9 +24,13 @@ const MapboundaryObserver = ({ map, centerLocation }: MapBounds) => {
         Ma <= PKNU_MAP_LIMIT.BOTTOM ||
         La <= PKNU_MAP_LIMIT.LEFT
       ) {
-        setIsModalOpen((prev) => !prev);
         map.setLevel(4);
         map.setCenter(centerLocation);
+        openModal(AlertModal, {
+          message: MODAL_MESSAGE.ALERT.OVER_MAP_LEVEL,
+          buttonMessage: '닫기',
+          onClose: () => closeModal(AlertModal),
+        });
       }
     };
     window.kakao.maps.event.addListener(map, 'dragend', boundayLimitHandler);
@@ -38,13 +44,7 @@ const MapboundaryObserver = ({ map, centerLocation }: MapBounds) => {
     };
   }, []);
 
-  return (
-    <>
-      {isModalOpen && (
-        <MapBoundsLimitModal onClose={() => setIsModalOpen((prev) => !prev)} />
-      )}
-    </>
-  );
+  return <></>;
 };
 
 export default MapboundaryObserver;