map

src/components/commuters/CommuterCalendar.vue

@@ -70,6 +70,8 @@
                                 출근 :
                                 <MapPopover
                                     :address="commuter.projectAddress"
+                                    :is-visible="visiblePopover.type === 'project' && visiblePopover.index === index"
+                                    @update-visible="updatePopover('project', index)"
                                     v-if="commuter.projectAddress"
                                 >
                                     <template #trigger>
@@ -90,6 +92,8 @@
                                 퇴근 :
                                 <MapPopover
                                     :address="commuter.leaveProjectAddress"
+                                    :is-visible="visiblePopover.type === 'leave' && visiblePopover.index === index"
+                                    @update-visible="updatePopover('leave', index)"
                                     v-if="commuter.leaveProjectAddress"
                                 >
                                     <template #trigger>
@@ -154,6 +158,12 @@ const checkedInProject = ref(null);
 
 const isModalOpen = ref(false);
 
+const visiblePopover = ref({
+  type: null,  // 'project' 또는 'leave'
+  index: null  // 팝오버 인덱스
+});
+
+
 const commuters = ref([]);
 const monthlyCommuters = ref([]);
 
@@ -429,6 +439,17 @@ const closeModal = () => {
     isModalOpen.value = false;
 };
 
+// MapPopover에서 visible 상태 변경 이벤트 처리
+const updatePopover = (popoverType, index) => {
+    if (visiblePopover.value.type === popoverType && visiblePopover.value.index === index) {
+        // 같은 팝오버를 클릭하면 닫기
+        visiblePopover.value = { type: null, index: null };
+    } else {
+        // 다른 팝오버를 클릭하면 기존 것 닫고 새로운 것 열기
+        visiblePopover.value = { type: popoverType, index: index };
+    }
+};
+
 const selectedDateCommuters = computed(() => {
     return monthlyCommuters.value.filter(commuter =>
         commuter.COMMUTDAY === eventDate.value

src/components/list/ProjectCard.vue

@@ -34,7 +34,8 @@
                 <div class="d-flex flex-sm-row align-items-center pb-2">
                     <MapPopover
                         :address="address"
-                        :ref="mapIconRef"
+                        :is-visible="isMapVisible"
+                        @update-visible="updatePopover"
                     >
                         <template #trigger>
                             <div class="d-flex align-items-center cursor-pointer">
@@ -253,7 +254,7 @@ const emit = defineEmits(['update']);
 const isModalOpen = ref(false);
 const logData = ref([]);
 
-const mapIconRef = ref(null);
+const isMapVisible = ref(null);
 
 // 수정 모달 상태
 const isEditModalOpen = ref(false);
@@ -291,6 +292,9 @@ const openEndDatePicker = () => {
     }
 };
 
+const updatePopover = (visible) => {
+    isMapVisible.value = visible;
+};
 
 // 사용자 목록 업데이트 핸들러
 const handleEditUserListUpdate = (userLists) => {

src/components/map/MapPopover.vue

@@ -47,12 +47,17 @@
 
     const props = defineProps({
         address: {
-        type: String,
+            type: String,
-        required: true
+            required: true
+        },
+        isVisible: {
+            type: Boolean,
+            required: false
         }
     });
 
-    const isVisible = ref(false);
+    const emit = defineEmits(['update-visible']);
+
     const coordinates = ref(null);
     const map = ref(null);
 
@@ -79,7 +84,7 @@
     };
 
     const togglePopover = () => {
-        isVisible.value = !isVisible.value;
+        emit('update-visible', !props.isVisible);
     };
 
     const onLoadKakaoMap = (mapRef) => {