주소 지도 추가

src/components/list/ProjectCard.vue

@@ -26,25 +26,57 @@
                 </div>
                 <!-- 주소 -->
                 <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
-                    <i class="bx bxs-map"></i>
+                    <div class="d-flex" @click.stop="isPopoverVisible = !isPopoverVisible">
-                    <div class="ms-2">주소</div>
+                        <i
-                    <div class="ms-12">{{ address }}</div>
+                            class="bx bxs-map cursor-pointer"
+                            ref="mapIconRef"
+                        ></i>
+                        <div class="ms-2">주소</div>
+                    </div>
+                    <div class="ms-12 position-relative">
+                        {{ address }} {{ addressdtail }}
+                        <!-- 팝오버 -->
+                        <div
+                        v-if="isPopoverVisible"
+                        class="position-absolute w-100 map text-end"
+                        >
+                        <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"
+                                        :draggable="false"
+                                        class="w-100 h-px-200"
+                                        >
+                                        <KakaoMapMarker
+                                            :lat="coordinates.lat"
+                                            :lng="coordinates.lng"
+                                        />
+                                    </KakaoMap>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctCol} !important;`" @click.stop="openModal">log</button>
                 </div>
             </div>
         </div>
     </div>
-    <CenterModal :display="isModalOpen" @close="closeModal" >
+    <CenterModal :display="isModalOpen" @close="closeModal">
         <template #title> Log </template>
         <template #body>
-            <div class="border border-3 rounded p-5 ms-4 mt-2" v-if="logData">
+            <div class="ms-4 mt-2 border p-3" v-if="logData">
                 <p class="mb-1">{{ logData.createDate }}</p>
-                <strong class="">[{{ logData.creator }}] 프로젝트 등록</strong>
+                <strong>[{{ logData.creator }}] 프로젝트 등록</strong>
             </div>
 
-            <div class="border border-3 rounded p-5 ms-4 mt-2" v-if="logData?.updateDate">
+            <div class="log-item" v-if="logData?.updateDate">
-                <p class="mb-1">{{ logData.updateDate }}</p>
+                <div class="ms-4 mt-2 border p-3">
-                <strong>[{{ logData.updater }}] 프로젝트 수정</strong>
+                    <p class="mb-1">{{ logData.updateDate }}</p>
+                    <strong>[{{ logData.updater }}] 프로젝트 수정</strong>
+                </div>
             </div>
 
         </template>
@@ -55,10 +87,11 @@
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue';
+import { defineProps, onMounted, ref } from 'vue';
 import UserList from '@c/user/UserList.vue';
 import CenterModal from '@c/modal/CenterModal.vue';
 import $api from '@api';
+import { KakaoMap, KakaoMapMarker } from 'vue3-kakao-maps';
 
 // Props 정의
 const props = defineProps({
@@ -83,6 +116,10 @@ const props = defineProps({
         type: String,
         required: true,
     },
+    addressdtail: {
+        type: String,
+        required: true,
+    },
     projctSeq: {
         type: Number,
         required: false
@@ -98,13 +135,13 @@ defineEmits(['click']);
 const isModalOpen = ref(false);
 const logData = ref(null);
 
+const isPopoverVisible = ref(false);
+const mapIconRef = ref(null);
+const coordinates = ref(null);
+
 const fetchLogData = async () => {
-    try {
+    const response = await $api.get(`project/log/${props.projctSeq}`);
-        const response = await $api.get(`project/log/${props.projctSeq}`);
+    logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
-        logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
-    } catch (error) {
-        console.error('로그 정보 조회 실패:', error);
-    }
 };
 
 const openModal = async () => {
@@ -116,5 +153,32 @@ const closeModal = () => {
     isModalOpen.value = false;
 };
 
+
+// 주소를 좌표로 변환하는 함수
+const convertAddressToCoordinates = () => {
+    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)
+            };
+        } else {
+            // 기본 좌표 설정 (본사)
+            coordinates.value = {
+                lat: 37.2108651707078,
+                lng: 127.089445559923
+            };
+        }
+    });
+};
+
+// 컴포넌트 마운트 시 주소 변환
+onMounted(() => {
+    convertAddressToCoordinates();
+});
+
+
 </script>
 

src/components/projectlist/ProjectList.vue

@@ -17,7 +17,8 @@
                 :description="post.PROJCTDES"
                 :strdate="post.PROJCTSTR"
                 :enddate="post.PROJCTEND"
-                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
+                :address="post.PROJCTARR"
+                :addressdtail="post.PROJCTDTL"
                 :projctSeq="post.PROJCTSEQ"
                 :projctCol="post.projctcolor"
             />
@@ -258,6 +259,7 @@ const handleAddressUpdate = addressData => {
     postcode.value = addressData.postcode;
 };
 
+// 프로젝트 등록
 const handleCreate = async () => {
     nameAlert.value = name.value.trim() === '';
     addressAlert.value = address.value.trim() === '';
@@ -330,6 +332,7 @@ const updateAddress = (addressData) => {
     };
 };
 
+// 프로젝트 수정
 const handleUpdate = () => {
     if (!hasChanges.value) {
         toastStore.onToast('변경된 내용이 없습니다.', 'e');
@@ -345,7 +348,7 @@ const handleUpdate = () => {
         projctZip: selectedProject.value.PROJCTZIP,
         projctStr: selectedProject.value.PROJCTSTR,
         projctEnd: selectedProject.value.PROJCTEND || null,
-        projctDes: selectedProject.value.PROJCTDES,
+        projctDes: selectedProject.value.PROJCTDES || null,
         projctUmb: user.value.name,
         originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
     }).then(res => {