퇴근지 추가

src/components/commuters/CommuterBtn.vue

@@ -13,8 +13,10 @@
 
         <div class="col-6 ps-1">
             <button
-            class="btn btn-outline-secondary border-3 w-100 py-0 h-px-50"
+            class="btn border-3 w-100 py-0 h-px-50"
+            :class="!workTime ? 'btn-outline-secondary pe-none disabled' : 'btn-outline-secondary'"
             @click="setLeaveTime"
+            :disabled="!workTime"
             >
                 <i v-if="!leaveTime" class='bx bxs-door-open fs-2'></i>
                 <span v-if="leaveTime" class="ql-size-12px">{{ leaveTime }}</span>
@@ -36,10 +38,14 @@ const props = defineProps({
     checkedInProject: {
         type: Object,
         required: false
+    },
+    pendingProjectChange: {
+        type: Object,
+        default: null
     }
 });
 
-const emit = defineEmits(['workTimeUpdated', 'leaveTimeUpdated']);
+const emit = defineEmits(['workTimeUpdated', 'leaveTimeUpdated', 'projectChangeComplete']);
 
 const workTime = ref(null);
 const leaveTime  = ref(null)
@@ -128,7 +134,7 @@ const setWorkTime = async () => {
     $api.post('commuters/insert', {
         memberSeq: props.userId,
         projctSeq: props.checkedInProject.PROJCTSEQ,
-        commutLvt: null,
+        commutLve: null,
         commutArr: address,
     }).then(res => {
         if (res.status === 200) {
@@ -144,11 +150,11 @@ const setLeaveTime = () => {
     $api.patch('commuters/updateLve', {
         memberSeq: props.userId,
         commutLve: leaveTime.value || null,
+        projctLve: props.pendingProjectChange ? props.pendingProjectChange.projctSeq : props.checkedInProject.PROJCTSEQ
     }).then(res => {
         if (res.status === 200) {
             todayCommuterInfo();
-            // 부모 컴포넌트에 업데이트 이벤트 발생
-            emit('leaveTimeUpdated', true);
+            emit('leaveTimeUpdated');
         }
     });
 };

src/components/commuters/CommuterCalendar.vue

@@ -12,6 +12,7 @@
                         <CommuterBtn
                             :userId="user.id"
                             :checkedInProject="checkedInProject || {}"
+                            :pendingProjectChange="pendingProjectChange"
                             @workTimeUpdated="handleWorkTimeUpdate"
                             @leaveTimeUpdated="handleLeaveTimeUpdate"
                             ref="workTimeComponentRef"
@@ -116,6 +117,9 @@ const monthlyCommuters = ref([]);
 
 const calendarDatepicker = ref(null);
 
+const pendingProjectChange = ref(null);
+
+
 // 출퇴근 컴포넌트 이벤트 핸들러
 const handleWorkTimeUpdate = () => {
     todaysCommuter();
@@ -126,32 +130,41 @@ const handleLeaveTimeUpdate = () => {
     todaysCommuter();
 };
 
+const handleResetProjectState = () => {
+    // 이전에 체크인했던 프로젝트로 복귀
+    const storedProject = projectStore.getSelectedProject();
+    if (storedProject) {
+        checkedInProject.value = storedProject;
+        selectedProject.value = storedProject.PROJCTSEQ;
+        projectStore.setSelectedProject(storedProject);
+        pendingProjectChange.value = null;
+    }
+};
+
 // 프로젝트 드롭 이벤트 핸들러 (ProjectList 컴포넌트에서 전달받음)
 const handleProjectDrop = ({ event, targetProject }) => {
-    // 드래그된 프로젝트 데이터 가져오기
     const draggedProjectData = JSON.parse(event.dataTransfer.getData('application/json'));
 
-    // 드래그한 프로젝트와 드롭한 프로젝트가 같으면 아무 동작 안 함
+    // 기존 프로젝트와 동일한 경우 변경 안 함
     if (draggedProjectData.PROJCTSEQ === targetProject.PROJCTSEQ) {
         return;
     }
 
-    // 선택된 프로젝트 변경
+    pendingProjectChange.value = {
+        projctSeq: targetProject.PROJCTSEQ,
+        memberSeq: user.value.id
+    };
+
     checkedInProject.value = targetProject;
+    selectedProject.value = targetProject.PROJCTSEQ;
     projectStore.setSelectedProject(targetProject);
 
-    // select 값도 변경
-    selectedProject.value = targetProject.PROJCTSEQ;
-
-    $api.patch('commuters/update', {
-        projctSeq: targetProject.PROJCTSEQ,
-        memberSeq: user.value.id,
-    }).then(res => {
-        if (res.status === 200) {
-            todaysCommuter();
-            loadCommuters();
-        }
-    });
+    // 기존 UI 업데이트
+    commuters.value = commuters.value.map(commuter =>
+        commuter.MEMBERSEQ === user.value.id
+            ? { ...commuter, PROJCTNAM: targetProject.PROJCTNAM, PROJCTLVE: targetProject.PROJCTSEQ }
+            : commuter
+    );
 };
 
 // 오늘 출근 모든 사용자 조회

src/components/commuters/CommuterProjectList.vue

@@ -13,8 +13,10 @@
             </p>
             <div class="row gx-2">
                 <div
-                    v-for="commuter in commuters.filter(c => c.PROJCTNAM === post.PROJCTNAM)"
-                    :key="commuter.COMMUTCMT"
+                    v-for="commuter in commuters.filter(c =>
+                        (c.PROJCTLVE ? c.PROJCTLVE === post.PROJCTSEQ : c.PROJCTNAM === post.PROJCTNAM)
+                    )"
+                    :key="commuter.MEMBERSEQ"
                     class="col-4"
                 >
                     <div class="ratio ratio-1x1">
@@ -77,7 +79,14 @@ const sortedProjects = computed(() => {
 });
 // 현재 사용자 확인
 const isCurrentUser = (commuter) => {
-    return props.user && commuter && commuter.MEMBERSEQ === props.user.id;
+    // 현재 사용자인지 확인
+    const isCurrentUserCheck = props.user && commuter && commuter.MEMBERSEQ === props.user.id;
+
+    // 퇴근 기록이 없는지 확인
+    const hasNoCheckRecord = !commuter.COMMUTLVE;
+
+    // 현재 사용자이면서 퇴근 기록이 없는 경우에만 true 반환
+    return isCurrentUserCheck && hasNoCheckRecord;
 };
 
 // 드래그 시작 이벤트 핸들러