diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue index 7991267..59f0380 100644 --- a/src/components/modal/VacationModal.vue +++ b/src/components/modal/VacationModal.vue @@ -58,19 +58,15 @@ const emit = defineEmits(["close"]); // 사용한 휴가(선물,연차사용) let globalCounter = 0; const usedVacations = computed(() => { - const result = []; - props.myVacations.forEach((v) => { + return props.myVacations.flatMap((v) => { const count = v.used_quota || 1; - for (let i = 0; i < count; i++) { - result.push({ - ...v, - category: "used", - code: v.LOCVACTYP, - _expandIndex: globalCounter++, - }); - } + return Array.from({ length: count }, (_, i) => ({ + ...v, + category: "used", + code: v.LOCVACTYP, + _expandIndex: globalCounter++, + })); }); - return result; }); // 받은 휴가 diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue index 97db79d..69262d7 100644 --- a/src/components/vacation/ProfileList.vue +++ b/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"; } }); diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue index 504df7f..3374500 100644 --- a/src/views/vacation/VacationManagement.vue +++ b/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); - if (vacationsToAdd.length > 0 || vacationsToDeleteForYear.length > 0) { + }); + const vacationIdsToDelete = vacationsToDeleteForYear.map(vac => vac.id); + 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) { - // 기존 데이터 유지 + 새로운 연도 데이터 추가 - myVacations.value = [...myVacations.value, ...response.data.data.usedVacations || []]; + const newVacations = 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");