출퇴근

package.json

@@ -19,6 +19,7 @@
         "@popperjs/core": "^2.11.8",
         "@tinymce/tinymce-vue": "^5.1.1",
         "@vueup/vue-quill": "^1.2.0",
+        "@vueuse/core": "^13.0.0",
         "axios": "^1.7.9",
         "bootstrap": "^5.3.3",
         "bootstrap-icons": "^1.11.3",

public/css/custom.css

@@ -422,4 +422,12 @@ cursor: not-allowed !important;
 .end-project {
   background-color: #ddd !important;
 }
-/* project list end */
+/* project list end */
+
+/* commuters project list */
+.commuter-list {
+  max-height: 358px;
+  overflow-y: auto;
+  scrollbar-width: none; 
+}
+/* commuters project list end */

src/components/commuters/CommuterBtn.vue

@@ -28,11 +28,12 @@
 <script setup>
 import { ref, defineProps, defineEmits, onMounted, watch } from 'vue';
 import $api from '@api';
+import { useGeolocation } from '@vueuse/core';
 import { useToastStore } from '@/stores/toastStore';
 
 const props = defineProps({
     userId: {
-        type: [Number],
+        type: Number,
         required: false
     },
     checkedInProject: {
@@ -44,9 +45,62 @@ const props = defineProps({
 const emit = defineEmits(['workTimeUpdated', 'leaveTimeUpdated']);
 
 const workTime = ref(null);
-const leaveTime = ref(null);
+const leaveTime  = ref(null)
+const userLocation = ref(null);
 const toastStore = useToastStore();
 
+// 위치 정보 가져오기 설정
+const { coords, isSupported, error } = useGeolocation({
+    enableHighAccuracy: true,
+});
+
+// 주소 변환 함수
+const getAddress = (lat, lng) => {
+    return new Promise((resolve, reject) => {
+        const geocoder = new kakao.maps.services.Geocoder();
+        const coord = new kakao.maps.LatLng(lat, lng);
+
+        geocoder.coord2Address(coord.getLng(), coord.getLat(), (result, status) => {
+        if (status === kakao.maps.services.Status.OK) {
+            const address = result[0].address.address_name;
+            resolve(address);
+        } else {
+            reject('주소를 가져올 수 없습니다.');
+        }
+        });
+    });
+};
+
+// 위치 정보 가져오기 함수
+const getLocation = async () => {
+    if (!isSupported.value) {
+        toastStore.onToast('브라우저가 위치 정보를 지원하지 않습니다.', 'e');
+        return null;
+    }
+
+    if (error.value) {
+        toastStore.onToast(`위치 정보를 가져오는데 실패했습니다: ${error.value.message}`, 'e');
+        return null;
+    }
+
+    if (coords.value) {
+        userLocation.value = {
+            lat: coords.value.latitude,
+            lng: coords.value.longitude,
+        };
+
+        try {
+            const address = await getAddress(coords.value.latitude, coords.value.longitude);
+            return address;
+        } catch (error) {
+            toastStore.onToast(error, 'e');
+            return null;
+        }
+    }
+
+    return null;
+};
+
 // 오늘 사용자의 출근 정보 조회
 const todayCommuterInfo = async () => {
     if (!props.userId) return;
@@ -67,10 +121,17 @@ const todayCommuterInfo = async () => {
 };
 
 // 출근 시간
-const setWorkTime = () => {
+const setWorkTime = async () => {
     // 이미 출근 시간이 설정된 경우 중복 실행 방지
     if (workTime.value) return;
 
+    // 현재 위치 주소 가져오기
+    const address = await getLocation();
+
+    console.log(address);
+
+    return;
+
     $api.post('commuters/insert', {
         memberSeq: props.userId,
         projctSeq: props.checkedInProject.PROJCTSEQ,

src/components/commuters/CommuterProjectList.vue

@@ -1,5 +1,5 @@
 <template>
-    <div style="max-height: 590px; overflow-y: auto;">
+    <div class="commuter-list">
         <div v-for="post in project" :key="post.PROJCTSEQ"
             class="border border-2 mt-3 card p-2"
             :style="`border-color: ${post.projctcolor} !important; color: ${post.projctcolor} !important;`"