From db4cf67751d7ee6b7315dff9695f56a1cec15127 Mon Sep 17 00:00:00 2001
From: KimGaeun <greencloud11@hanyang.ac.kr>
Date: Wed, 28 Feb 2024 14:34:04 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20MainPage=20=ED=81=B4=EB=A6=AD?=
 =?UTF-8?q?=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EB=A7=89=EB=8A=94=20=EB=B0=A9?=
 =?UTF-8?q?=EC=8B=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/MainPage.tsx   | 16 +++++++++++++++-
 src/utils/tmap/tmapModule.tsx | 28 +++++++++++-----------------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/pages/main/MainPage.tsx b/src/pages/main/MainPage.tsx
index 36110138..0c7f24b4 100644
--- a/src/pages/main/MainPage.tsx
+++ b/src/pages/main/MainPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import AddIcon from '@/assets/icons/add.svg?react';
 import AsyncBoundary from '@/components/async-boundary';
@@ -28,6 +28,20 @@ const MainPage = () => {
         openModal(<MakeNewCourseModal />);
     };
 
+    useEffect(() => {
+        const handleMapContainerClick = (event: MouseEvent) => {
+            event.stopPropagation();
+        };
+
+        const mapContainer = mapContainerRef.current;
+
+        mapContainer?.addEventListener('click', handleMapContainerClick, true);
+
+        return () => {
+            mapContainer?.removeEventListener('click', handleMapContainerClick);
+        };
+    }, [mapContainerRef]);
+
     return (
         <>
             <GlobalNavigationBar />
diff --git a/src/utils/tmap/tmapModule.tsx b/src/utils/tmap/tmapModule.tsx
index 062443f0..596cebb9 100644
--- a/src/utils/tmap/tmapModule.tsx
+++ b/src/utils/tmap/tmapModule.tsx
@@ -25,9 +25,6 @@ export interface TmapConstructorType {
 
 const { Tmapv3 } = window;
 
-const pathname = window.location.pathname;
-const isCoursePage = pathname.split('/')[1] === 'course';
-
 export class TMapModule {
     #mapInstance: typeof Tmapv3.Map;
     #markers: MarkerType[] = [];
@@ -93,22 +90,19 @@ export class TMapModule {
             });
         };
 
-        if (isCoursePage)
-            (() => {
-                this.#mapInstance.on('Click', handleMapClick);
+        this.#mapInstance.on('Click', handleMapClick);
 
-                let throttleTimeout: NodeJS.Timeout | null = null;
-                const THROTTLE_TIME = 800;
+        let throttleTimeout: NodeJS.Timeout | null = null;
+        const THROTTLE_TIME = 800;
 
-                this.#mapInstance.on('Zoom', () => {
-                    if (!throttleTimeout) {
-                        throttleTimeout = setTimeout(() => {
-                            this.clusterMarkers();
-                            throttleTimeout = null;
-                        }, THROTTLE_TIME);
-                    }
-                });
-            })();
+        this.#mapInstance.on('Zoom', () => {
+            if (!throttleTimeout) {
+                throttleTimeout = setTimeout(() => {
+                    this.clusterMarkers();
+                    throttleTimeout = null;
+                }, THROTTLE_TIME);
+            }
+        });
     }
 
     // 마커 생성