From 3ac834dd4a78a414c4785bea8e8ed619b1756765 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 10 Mar 2025 10:21:23 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9C=B4=EA=B0=80=20=EC=97=AC=EB=A0=A4?=
 =?UTF-8?q?=EB=85=84=EB=8F=84=20=EC=82=AD=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css                     |   3 +
 src/components/modal/VacationModal.vue    |   8 +-
 src/components/vacation/ProfileList.vue   |  14 ++-
 src/views/vacation/VacationManagement.vue | 138 ++++++++++++----------
 4 files changed, 93 insertions(+), 70 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index e9d477a..8127a4c 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -3,6 +3,9 @@
 
 /* 휴가 */
 
+.fc-daygrid-event {
+  pointer-events: none !important;
+}
 /* 이벤트 선 없게 */
 .fc-event {
   border: none;
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index 2592d53..7991267 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
         <div class="vac-modal-content p-5 modal-scroll">
-            <h5 class="vac-modal-title">📅 내 연차 사용 내역</h5>
+            <h5 class="vac-modal-title">📅 내 연차 상세 내역</h5>
             <button class="close-btn" @click="closeModal">✖</button>
             <!-- 연차 목록 -->
             <div class="vac-modal-body" v-if="mergedVacations.length > 0">
@@ -26,8 +26,8 @@
                 </ol>
             </div>
             <!-- 연차 데이터 없음 -->
-            <p v-else class="text-sm-center mt-10 text-gray">
-                🚫 사용한 연차가 없습니다.
+            <p v-else class="text-sm-center mt-10 text-gray vac-modal-title">
+                🚫 연차 내역이 없습니다.
             </p>
         </div>
     </div>
@@ -114,7 +114,7 @@ const mergedVacations = computed(() => {
 
 // 모달 닫기
 const closeModal = () => {
-  emit("close");
+    emit("close");
 };
 </script>
 <style scoped>
diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index 1d7b593..97db79d 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -69,12 +69,18 @@ nextTick(() => {
 });
 
 const sortedUserList = computed(() => {
-if (!employeeId.value) return userList.value;
-const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
-const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
-return myProfile ? [myProfile, ...otherUsers] : userList.value;
+    if (!employeeId.value) return [];
+
+    // 관리자가 아닌 사용자만 필터링
+    const nonAdminUsers = userList.value.filter(user => user.MEMBERROL !== "ROLE_ADMIN");
+
+    const myProfile = nonAdminUsers.find(user => user.MEMBERSEQ === employeeId.value);
+    const otherUsers = nonAdminUsers.filter(user => user.MEMBERSEQ !== employeeId.value);
+
+    return myProfile ? [myProfile, ...otherUsers] : otherUsers;
 });
 
+
 const getUserProfileImage = (profilePath) =>
 profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
 
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 4031c79..504df7f 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -142,7 +142,7 @@ const calendarOptions = reactive({
     datesSet: handleMonthChange,
     events: calendarEvents,
 });
-// 캘린더 월 변경경
+// 캘린더 월 변경
 function handleMonthChange(viewInfo) {
     const currentDate = viewInfo.view.currentStart;
     const year = currentDate.getFullYear();
@@ -154,16 +154,17 @@ function handleDateClick(info) {
     const clickedDateStr = info.dateStr;
     const clickedDate = info.date;
     const todayStr = new Date().toISOString().split("T")[0];
+
     if (
         clickedDate.getDay() === 0 ||
         clickedDate.getDay() === 6 ||
         holidayDates.value.has(clickedDateStr) ||
         clickedDateStr < todayStr
-    ){
+    ) {
         return;
     }
     const isMyVacation = myVacations.value.some(vac => {
-        const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
+        const vacDate = vac.date ? vac.date.substring(0, 10) : "";
         return vacDate === clickedDateStr && !vac.receiverId;
     });
     if (isMyVacation) {
@@ -186,7 +187,6 @@ function handleDateClick(info) {
     selectedDates.value.set(clickedDateStr, type);
     halfDayType.value = null;
     updateCalendarEvents();
-    // 날짜 선택 후 반차버튼 초기화
     if (halfDayButtonsRef.value) {
         halfDayButtonsRef.value.resetHalfDay();
     }
@@ -266,15 +266,24 @@ const handleProfileClick = async (user) => {
 const fetchUserList = async () => {
     try {
         await userListStore.fetchUserList();
-        userList.value = userListStore.userList;
+
+        // "ROLE_ADMIN"을 제외하고 필터링
+        const filteredUsers = userListStore.userList.filter(user => user.MEMBERROL !== "ROLE_ADMIN");
+
+        // 필터링된 리스트를 userList에 반영
+        userList.value = [...filteredUsers];
+
         if (!userList.value.length) {
             console.warn("📌 사용자 목록이 비어 있음!");
             return;
         }
+
+        // 사용자별 색상 저장
         userColors.value = {};
         userList.value.forEach((user) => {
-        userColors.value[user.MEMBERSEQ] = user.usercolor;
+            userColors.value[user.MEMBERSEQ] = user.usercolor;
         });
+
     } catch (error) {
         console.error("📌 사용자 목록 불러오기 오류:", error);
     }
@@ -310,47 +319,54 @@ const filteredReceivedVacations = computed(() => {
     });
 });
 
-
-/* 휴가 변경사항 저장 */
+/* 휴가 저장 */
+// 휴가 변경사항 저장
 async function saveVacationChanges() {
     if (!hasChanges.value) return;
+
     const selectedDatesArray = Array.from(selectedDates.value);
-    const vacationsToAdd = selectedDatesArray
-        .filter(([date, type]) => type !== "delete")
-        .filter(([date, type]) =>
-            !myVacations.value.some(vac => vac.date && vac.date.startsWith(date)) ||
-            myVacations.value.some(vac => vac.date && vac.date.startsWith(date) && vac.receiverId)
-        )
-        .map(([date, type]) => ({ date, type }));
-    const vacationsToDelete = myVacations.value
-        .filter(vac => {
-            if (!vac.date) return false;
-            const date = vac.date.split("T")[0];
-            return selectedDates.value.get(date) === "delete" && !vac.receiverId;
-        })
-        .map(vac => {
-            const id = vac.id;
-            return typeof id === "number" ? Number(id) : id;
-        });
-    try {
-        const response = await axios.post("vacation/batchUpdate", {
-            add: vacationsToAdd,
-            delete: vacationsToDelete
-        });
-        if (response.data && response.data.status === "OK") {
-            toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's');
-            await fetchVacationHistory(lastRemainingYear.value);
-            await fetchRemainingVacation();
-            if (isModalOpen.value) {
-                await fetchVacationHistory(lastRemainingYear.value);
-            }
-            const currentDate = fullCalendarRef.value.getApi().getDate();
-            await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
-            selectedDates.value.clear();
-            updateCalendarEvents();
+
+    const vacationChangesByYear = selectedDatesArray.reduce((acc, [date, type]) => {
+        const year = date.split("-")[0]; // YYYY-MM-DD에서 YYYY 추출
+        if (!acc[year]) acc[year] = { add: [], delete: [] };
+
+        if (type !== "delete") {
+            acc[year].add.push({ date, type });
         } else {
-            toastStore.onToast('휴가 저장 중 오류가 발생했습니다.', 'e');
+            acc[year].delete.push(date);
         }
+        return acc;
+    }, {});
+    try {
+        for (const year of Object.keys(vacationChangesByYear)) {
+            const vacationsToAdd = vacationChangesByYear[year].add;
+
+            const vacationsToDeleteForYear = myVacations.value
+                .filter(vac => {
+                    if (!vac.date) return false;
+                    const vacDate = vac.date.split("T")[0];
+                    return vacationChangesByYear[year].delete.includes(vacDate);
+                })
+                .map(vac => vac.id);
+            if (vacationsToAdd.length > 0 || vacationsToDeleteForYear.length > 0) {
+                const response = await axios.post("vacation/batchUpdate", {
+                    add: vacationsToAdd,
+                    delete: vacationsToDeleteForYear,
+                });
+
+                if (response.data && response.data.status === "OK") {
+                    toastStore.onToast(`휴가 변경 사항이 저장되었습니다.`, 's');
+                    await fetchVacationHistory(year);
+                } else {
+                    toastStore.onToast(`휴가 변경 중 오류가 발생했습니다.`, 'e');
+                }
+            }
+        }
+        await fetchRemainingVacation();
+        selectedDates.value.clear();
+        updateCalendarEvents();
+        const currentDate = fullCalendarRef.value.getApi().getDate();
+        await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
     } catch (error) {
         console.error("🚨 휴가 변경 저장 실패:", error);
         toastStore.onToast('휴가 저장 요청에 실패했습니다.', 'e');
@@ -363,15 +379,11 @@ async function fetchVacationHistory(year) {
     try {
         const response = await axios.get(`vacation/history?year=${year}`);
         if (response.status === 200 && response.data) {
-            myVacations.value = response.data.data.usedVacations || [];
-            receivedVacations.value = response.data.data.receivedVacations || [];
-        } else {
-            console.warn("❌ 연차 내역을 불러오지 못했습니다.");
-            myVacations.value = [];
-            receivedVacations.value = [];
+            // 기존 데이터 유지 + 새로운 연도 데이터 추가
+            myVacations.value = [...myVacations.value, ...response.data.data.usedVacations || []];
         }
     } catch (error) {
-        console.error("🚨 연차 데이터 불러오기 실패:", error);
+        console.error(`🚨 ${year}년 휴가 데이터 불러오기 실패:`, error);
     }
 }
 // 모든 사원 연차 내역 및 그래프화
@@ -480,8 +492,10 @@ function preventUnsavedChanges(event) {
 }
 
 /* watch */
-watch(lastRemainingYear, async (newYear, oldYear) => {
-    await fetchVacationHistory(newYear);
+watch(() => lastRemainingYear.value, async (newYear, oldYear) => {
+    if (newYear !== oldYear) {
+        await fetchVacationHistory(newYear);
+    }
 });
 // `selectedDates` 변경 시 반차 버튼 초기화
 watch(
@@ -551,17 +565,17 @@ onMounted(async () => {
         if (titleEl) {
             titleEl.style.cursor = 'pointer';
             titleEl.addEventListener('click', () => {
-            const dpEl = calendarDatepicker.value;
-            dpEl.style.display = 'block';
-            dpEl.style.position = 'fixed';
-            dpEl.style.top = '25%';
-            dpEl.style.left = '50%';
-            dpEl.style.transform = 'translate(-50%, -50%)';
-            dpEl.style.zIndex = '9999';
-            dpEl.style.border = 'none';
-            dpEl.style.outline = 'none';
-            dpEl.style.backgroundColor = 'transparent';
-            fpInstance.open();
+                const dpEl = calendarDatepicker.value;
+                dpEl.style.display = 'block';
+                dpEl.style.position = 'fixed';
+                dpEl.style.top = '25%';
+                dpEl.style.left = '50%';
+                dpEl.style.transform = 'translate(-50%, -50%)';
+                dpEl.style.zIndex = '9999';
+                dpEl.style.border = 'none';
+                dpEl.style.outline = 'none';
+                dpEl.style.backgroundColor = 'transparent';
+                fpInstance.open();
             });
         }
     });