From da13750404a75a392e19420dcbeb0b5a02765cd7 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 28 Mar 2025 17:04:45 +0900
Subject: [PATCH] map

---
 src/components/commuters/CommuterCalendar.vue | 56 ++++++++++++++-----
 src/components/list/ProjectCard.vue           |  3 +-
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/components/commuters/CommuterCalendar.vue b/src/components/commuters/CommuterCalendar.vue
index 925d5df..cfd2005 100644
--- a/src/components/commuters/CommuterCalendar.vue
+++ b/src/components/commuters/CommuterCalendar.vue
@@ -56,27 +56,54 @@
         <template #body>
             <div v-if="selectedDateCommuters.length > 0">
                 <div v-for="(commuter, index) in selectedDateCommuters" :key="index">
-                    <div class="d-flex align-items-center my-2">
-                        <img :src="`${baseUrl}upload/img/profile/${commuter.profile}`"
-                        class="rounded-circle me-2 w-px-50 h-px-50"
-                        @error="$event.target.src = '/img/icons/icon.png'">
+                    <div class="row my-2 d-flex align-items-center">
+                        <div class="col-4">
+                            <img :src="`${baseUrl}upload/img/profile/${commuter.profile}`"
+                            class="rounded-circle me-2 w-px-50 h-px-50"
+                            @error="$event.target.src = '/img/icons/icon.png'">
 
-                        <span class="fw-bold">{{ commuter.memberName }}</span>
+                            <span class="fw-bold">{{ commuter.memberName }}</span>
+                        </div>
 
-                        <div class="ms-auto text-start fw-bold d-flex flex-column align-items-end">
+                        <div class="col-8">
                             <div class="d-flex gap-1 align-items-center">
                                 출근 :
-                                <div class="text-white rounded px-2" :style="`background: ${commuter.projctcolor} !important;`">
-                                    {{ commuter.PROJCTNAM }}
-                                </div>
-                                ({{ commuter.COMMUTCMT }})
+                                <MapPopover
+                                    :address="commuter.projectAddress"
+                                    v-if="commuter.projectAddress"
+                                >
+                                    <template #trigger>
+                                        <div
+                                            class="text-white rounded px-2 cursor-pointer"
+                                            :style="`background: ${commuter.projctcolor} !important;`"
+                                        >
+                                            {{ commuter.PROJCTNAM }}
+                                        </div>
+                                    </template>
+                                </MapPopover>
+                                <span class="ms-auto">
+                                    ({{ commuter.COMMUTCMT }})
+                                </span>
                             </div>
+
                             <div v-if="commuter.PROJCTLVE" class="d-flex gap-1 mt-1">
                                 퇴근 :
-                                <div class="text-white rounded px-2" :style="`background: ${commuter.leaveProjectColor} !important;`">
-                                    {{ commuter.leaveProjectName }}
-                                </div>
-                                ({{ commuter.COMMUTLVE || "00:00:00" }})
+                                <MapPopover
+                                    :address="commuter.leaveProjectAddress"
+                                    v-if="commuter.leaveProjectAddress"
+                                >
+                                    <template #trigger>
+                                        <div
+                                            class="text-white rounded px-2 cursor-pointer"
+                                            :style="`background: ${commuter.leaveProjectColor} !important;`"
+                                        >
+                                            {{ commuter.leaveProjectName }}
+                                        </div>
+                                    </template>
+                                </MapPopover>
+                                <span class="ms-auto">
+                                    ({{ commuter.COMMUTLVE || "00:00:00" }})
+                                </span>
                             </div>
                         </div>
                     </div>
@@ -105,6 +132,7 @@ import { useProjectStore } from '@/stores/useProjectStore';
 import CommuterBtn from '@c/commuters/CommuterBtn.vue';
 import CommuterProjectList from '@c/commuters/CommuterProjectList.vue';
 import BackBtn from '@c/button/BackBtn.vue';
+import MapPopover from '@c/map/MapPopover.vue';
 import { useDatePicker } from '@/stores/useDatePicker';
 
 const datePickerStore = useDatePicker();
diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index cf627fa..fe58a40 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -165,11 +165,10 @@
 </template>
 
 <script setup>
-import { defineProps, onMounted, ref, computed, watch, nextTick } from 'vue';
+import { defineProps, onMounted, ref, computed, watch } 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';
 import BackBtn from '@c/button/BackBtn.vue';
 import BackButton from '@c/button/BackBtn.vue';
 import SaveButton from '@c/button/SaveBtn.vue';