휴가 수정

src/components/modal/VacationModal.vue

@@ -58,19 +58,15 @@ const emit = defineEmits(["close"]);
 // 사용한 휴가(선물,연차사용)
 let globalCounter = 0;
 const usedVacations = computed(() => {
-    const result = [];
+    return props.myVacations.flatMap((v) => {
-    props.myVacations.forEach((v) => {
         const count = v.used_quota || 1;
-        for (let i = 0; i < count; i++) {
+        return Array.from({ length: count }, (_, i) => ({
-            result.push({
             ...v,
             category: "used",
             code: v.LOCVACTYP,
             _expandIndex: globalCounter++,
+        }));
     });
-        }
-    });
-    return result;
 });
 
 // 받은 휴가

src/components/vacation/ProfileList.vue

@@ -100,11 +100,11 @@ if (windowWidth.value >= 1650) {
     if (totalUsers <= 15) return "30px";
     return "20px";
 } else if (windowWidth.value >= 1024) {
-    if (totalUsers <= 10) return "35px";
+    if (totalUsers <= 10) return "40px";
     if (totalUsers <= 15) return "30px";
     return "20px";
 } else {
-    return "20px";
+    return "30px";
 }
 });
 

src/views/vacation/VacationManagement.vue

@@ -323,13 +323,10 @@ const filteredReceivedVacations = computed(() => {
 // 휴가 변경사항 저장
 async function saveVacationChanges() {
     if (!hasChanges.value) return;
-
     const selectedDatesArray = Array.from(selectedDates.value);
-
     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 {
@@ -340,23 +337,28 @@ async function saveVacationChanges() {
     try {
         for (const year of Object.keys(vacationChangesByYear)) {
             const vacationsToAdd = vacationChangesByYear[year].add;
-
+            // 즉시 삭제 반영을 위해 삭제 대상 id 가져오기
             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);
+            const vacationIdsToDelete = vacationsToDeleteForYear.map(vac => vac.id);
-            if (vacationsToAdd.length > 0 || vacationsToDeleteForYear.length > 0) {
+            if (vacationsToAdd.length > 0 || vacationIdsToDelete.length > 0) {
                 const response = await axios.post("vacation/batchUpdate", {
                     add: vacationsToAdd,
-                    delete: vacationsToDeleteForYear,
+                    delete: vacationIdsToDelete,
                 });
-
                 if (response.data && response.data.status === "OK") {
                     toastStore.onToast(`휴가 변경 사항이 저장되었습니다.`, 's');
-                    await fetchVacationHistory(year);
+                    // 즉시 삭제 반영: myVacations에서 해당 ID 삭제
+                    myVacations.value = myVacations.value.filter(vac => !vacationIdsToDelete.includes(vac.id));
+                    // 서버에서 최신 데이터 가져와 반영
+                    const updatedVacations = await fetchVacationHistory(year);
+                    if (updatedVacations) {
+                        myVacations.value = updatedVacations; // 최신 데이터 적용
+                    }
                 } else {
                     toastStore.onToast(`휴가 변경 중 오류가 발생했습니다.`, 'e');
                 }
@@ -365,6 +367,7 @@ async function saveVacationChanges() {
         await fetchRemainingVacation();
         selectedDates.value.clear();
         updateCalendarEvents();
+        // 현재 보고 있는 연도의 데이터 새로고침
         const currentDate = fullCalendarRef.value.getApi().getDate();
         await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
     } catch (error) {
@@ -379,8 +382,14 @@ async function fetchVacationHistory(year) {
     try {
         const response = await axios.get(`vacation/history?year=${year}`);
         if (response.status === 200 && response.data) {
-            // 기존 데이터 유지 + 새로운 연도 데이터 추가
+            const newVacations = response.data.data.usedVacations || [];
-            myVacations.value = [...myVacations.value, ...response.data.data.usedVacations || []];
+
+            const uniqueVacations = Array.from(
+                new Map([...myVacations.value, ...newVacations].map(v => [`${v.date}-${v.type}`, v]))
+                .values()
+            );
+
+            myVacations.value = uniqueVacations;
         }
     } catch (error) {
         console.error(`🚨 ${year}년 휴가 데이터 불러오기 실패:`, error);
@@ -474,16 +483,20 @@ function toggleHalfDay(type) {
 /* 페이지 이동 시 변경 사항 확인 */
 router.beforeEach((to, from, next) => {
     if (hasChanges.value) {
+        console.log('휴가!!!!!');
         const answer = window.confirm("저장하지 않은 변경 사항이 있습니다. 이동하시겠습니까?");
         if (!answer) {
             return next(false);
         }
     }
+    selectedDates.value.clear();
     next();
 });
 onBeforeUnmount(() => {
     window.removeEventListener("beforeunload", preventUnsavedChanges);
+
 });
+/* 새로고침 또는 페이지 종료 시 알림 */
 function preventUnsavedChanges(event) {
     if (hasChanges.value) {
         event.preventDefault();
@@ -547,6 +560,9 @@ onMounted(async () => {
                 altFormat: "F Y"
             })
         ],
+        onOpen: function() {
+            document.querySelector('.flatpickr-input').style.visibility = 'hidden';
+        },
         onChange: function(selectedDatesArr, dateStr) {
             // 선택한 달의 첫날로 달력을 이동
             fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");