출퇴근

package-lock.json

@@ -15,6 +15,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",
@@ -938,6 +939,12 @@
             "license": "MIT",
             "optional": true
         },
+        "node_modules/@types/web-bluetooth": {
+            "version": "0.0.21",
+            "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+            "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+            "license": "MIT"
+        },
         "node_modules/@vitejs/plugin-vue": {
             "version": "5.2.1",
             "dev": true,
@@ -1129,6 +1136,44 @@
                 "node": ">=0.10"
             }
         },
+        "node_modules/@vueuse/core": {
+            "version": "13.0.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.0.0.tgz",
+            "integrity": "sha512-rkgb4a8/0b234lMGCT29WkCjPfsX0oxrIRR7FDndRoW3FsaC9NBzefXg/9TLhAgwM11f49XnutshM4LzJBrQ5g==",
+            "license": "MIT",
+            "dependencies": {
+                "@types/web-bluetooth": "^0.0.21",
+                "@vueuse/metadata": "13.0.0",
+                "@vueuse/shared": "13.0.0"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "vue": "^3.5.0"
+            }
+        },
+        "node_modules/@vueuse/metadata": {
+            "version": "13.0.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.0.0.tgz",
+            "integrity": "sha512-TRNksqmvtvqsuHf7bbgH9OSXEV2b6+M3BSN4LR5oxWKykOFT9gV78+C2/0++Pq9KCp9KQ1OQDPvGlWNQpOb2Mw==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            }
+        },
+        "node_modules/@vueuse/shared": {
+            "version": "13.0.0",
+            "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.0.0.tgz",
+            "integrity": "sha512-9MiHhAPw+sqCF/RLo8V6HsjRqEdNEWVpDLm2WBRW2G/kSQjb8X901sozXpSCaeLG0f7TEfMrT4XNaA5m1ez7Dg==",
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "vue": "^3.5.0"
+            }
+        },
         "node_modules/acorn": {
             "version": "8.14.0",
             "dev": true,

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

@@ -423,3 +423,11 @@ cursor: not-allowed !important;
   background-color: #ddd !important;
 }
 /* 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;`"