map 공통 파일 뺴기 미완성

public/css/custom.css

@@ -539,7 +539,7 @@
 
 .map {
     top: -160px;
-    left: -5px;
+    left: 90px;
 }
 
 @keyframes sparkle {

src/components/commuters/CommuterCalendar.vue

@@ -63,7 +63,7 @@
 
                         <span class="fw-bold">{{ commuter.memberName }}</span>
 
-                        <div class="ms-auto text-start fw-bold">
+                        <div class="ms-auto text-start fw-bold d-flex flex-column align-items-end">
                             <div class="d-flex gap-1 align-items-center">
                                 출근 :
                                 <div class="text-white rounded px-2" :style="`background: ${commuter.projctcolor} !important;`">

src/components/list/ProjectCard.vue

@@ -32,36 +32,19 @@
                 </div>
                 <!-- 주소 -->
                 <div class="d-flex flex-sm-row align-items-center pb-2">
-                    <div class="d-flex" @click.stop="isPopoverVisible = !isPopoverVisible">
+                    <MapPopover
-                        <i class="bx bxs-map cursor-pointer" ref="mapIconRef"></i>
+                        :address="address"
+                        :ref="mapIconRef"
+                    >
+                        <template #trigger>
+                            <div class="d-flex align-items-center cursor-pointer">
+                                <i class="bx bxs-map"></i>
                                 <div class="ms-2">주소</div>
                             </div>
-                    <div class="ms-12 position-relative">
+                        </template>
+                    </MapPopover>
+                    <div class="ms-12">
                         {{ address }} {{ addressdtail }}
-                        <!-- 팝오버 -->
-                        <div v-if="isPopoverVisible" class="position-absolute map ">
-                            <button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button>
-                            <div class="card">
-                                <div class="card-body p-1">
-                                    <KakaoMap
-                                        v-if="coordinates"
-                                        :lat="coordinates.lat"
-                                        :lng="coordinates.lng"
-                                        class="w-px-250 h-px-200"
-                                        @onLoadKakaoMap="onLoadKakaoMap"
-                                    >
-                                        <KakaoMapMarker
-                                            :lat="coordinates.lat"
-                                            :lng="coordinates.lng"
-                                        />
-                                    </KakaoMap>
-                                    <div class="position-absolute top-50 translate-middle-y end-0 me-3 z-1 d-flex flex-column gap-1">
-                                        <button class="btn-secondary border-none" @click="zoomOut">+</button>
-                                        <button class="btn-secondary border-none" @click="zoomIn">-</button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
                     </div>
                     <button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctColor} !important;`" @click.stop="openModal"><i class='bx bx-child'></i></button>
                 </div>
@@ -195,6 +178,7 @@ import DeleteBtn from '../button/DeleteBtn.vue';
 import FormInput from '@c/input/FormInput.vue';
 import FormSelect from '@c/input/FormSelect.vue';
 import ArrInput from '@c/input/ArrInput.vue';
+import MapPopover from '@c/map/MapPopover.vue';
 import { useToastStore } from '@s/toastStore';
 import { useUserInfoStore } from '@/stores/useUserInfoStore';
 import commonApi, { refreshColorList } from '@/common/commonApi';
@@ -270,11 +254,7 @@ const emit = defineEmits(['update']);
 const isModalOpen = ref(false);
 const logData = ref([]);
 
-// 주소 팝오버 상태
-const isPopoverVisible = ref(false);
-const map = ref();
 const mapIconRef = ref(null);
-const coordinates = ref(null);
 
 // 수정 모달 상태
 const isEditModalOpen = ref(false);
@@ -292,8 +272,6 @@ const selectedUsers = ref({
 });
 
 
-const isKakaoMapLoaded = ref(false);
-
 const startDateInput = ref(null);
 const endDateInput = ref(null);
 
@@ -538,43 +516,6 @@ const handleUpdate = async () => {
     }
 };
 
-// 주소를 좌표로 변환하는 함수
-const convertAddressToCoordinates = () => {
-    if (!window.kakao || !window.kakao.maps) {
-        return;
-    }
-
-    const geocoder = new window.kakao.maps.services.Geocoder();
-    geocoder.addressSearch(props.address, (result, status) => {
-        if (status === window.kakao.maps.services.Status.OK) {
-            coordinates.value = {
-                lat: parseFloat(result[0].y),
-                lng: parseFloat(result[0].x)
-            };
-        }
-    });
-};
-
-const onLoadKakaoMap = (mapRef) => {
-    map.value = mapRef;
-};
-
-// 지도 확대
-const zoomIn = () => {
-    if (map.value) {
-        const level = map.value.getLevel();
-        map.value.setLevel(level + 1);
-    }
-};
-
-// 지도 축소
-const zoomOut = () => {
-    if (map.value) {
-        const level = map.value.getLevel();
-        map.value.setLevel(level - 1);
-    }
-};
-
 // 프로젝트 삭제
 const handleDelete = () => {
     $api.patch('project/delete', {
@@ -605,13 +546,6 @@ onMounted(async () => {
         endInputElement = endDateInput.value.$el.querySelector('input[type="date"]');
     }
 
-    const checkKakaoMapsLoaded = () => {
-        if (window.kakao && window.kakao.maps && window.kakao.maps.services) {
-            convertAddressToCoordinates();
-        }
-    };
-
-    checkKakaoMapsLoaded();
 });
 
 

src/components/map/MapPopover.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="position-relative">
+        <div @click="togglePopover">
+            <slot name="trigger">
+            <i class="bx bxs-map"></i>
+            </slot>
+        </div>
+
+        <div
+            v-if="isVisible"
+            class="position-absolute map z-3"
+        >
+            <button
+            type="button"
+            class="btn-close popover-close"
+            @click="togglePopover"
+            ></button>
+
+            <div class="card">
+            <div class="card-body p-1">
+                <KakaoMap
+                v-if="coordinates"
+                :lat="coordinates.lat"
+                :lng="coordinates.lng"
+                class="w-px-250 h-px-200"
+                @onLoadKakaoMap="onLoadKakaoMap"
+                >
+                <KakaoMapMarker
+                    :lat="coordinates.lat"
+                    :lng="coordinates.lng"
+                />
+                </KakaoMap>
+
+                <div class="position-absolute top-50 translate-middle-y end-0 me-3 z-1 d-flex flex-column gap-1">
+                <button class="btn-secondary border-none" @click="zoomOut">+</button>
+                <button class="btn-secondary border-none" @click="zoomIn">-</button>
+                </div>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { ref, onMounted } from 'vue';
+    import { KakaoMap, KakaoMapMarker } from 'vue3-kakao-maps';
+
+    const props = defineProps({
+        address: {
+        type: String,
+        required: true
+        }
+    });
+
+    const isVisible = ref(false);
+    const coordinates = ref(null);
+    const map = ref(null);
+
+    // 주소를 좌표로 변환하는 함수
+    const convertAddressToCoordinates = () => {
+        return new Promise((resolve, reject) => {
+        if (!window.kakao || !window.kakao.maps) {
+            reject(new Error('Kakao Maps not loaded'));
+            return;
+        }
+
+        const geocoder = new window.kakao.maps.services.Geocoder();
+        geocoder.addressSearch(props.address, (result, status) => {
+            if (status === window.kakao.maps.services.Status.OK) {
+            resolve({
+                lat: parseFloat(result[0].y),
+                lng: parseFloat(result[0].x)
+            });
+            } else {
+            reject(new Error('Address conversion failed'));
+            }
+        });
+        });
+    };
+
+    const togglePopover = () => {
+        isVisible.value = !isVisible.value;
+    };
+
+    const onLoadKakaoMap = (mapRef) => {
+        map.value = mapRef;
+    };
+
+    // 지도 확대
+    const zoomIn = () => {
+        if (map.value) {
+        const level = map.value.getLevel();
+        map.value.setLevel(level + 1);
+        }
+    };
+
+    // 지도 축소
+    const zoomOut = () => {
+        if (map.value) {
+        const level = map.value.getLevel();
+        map.value.setLevel(level - 1);
+        }
+    };
+
+    // 컴포넌트 마운트 시 좌표 변환
+    onMounted(async () => {
+        coordinates.value = await convertAddressToCoordinates();
+    });
+</script>