diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue index a618e19..e45b497 100644 --- a/src/views/vacation/VacationManagement.vue +++ b/src/views/vacation/VacationManagement.vue @@ -586,30 +586,45 @@ function updateCalendarEvents() { const todayElement = document.querySelector(`.fc-daygrid-day[data-date="${todayStr}"]`); if (todayElement) { - // 오늘 날짜가 선택된 경우 배경 제거 if (selectedDates.value.has(todayStr)) { - todayElement.classList.remove("fc-day-today"); // 기본 스타일 제거 - todayElement.classList.add("selected-event"); // 선택된 날짜 스타일 적용 + todayElement.style.backgroundColor = 'transparent'; // 노란 배경 제거 + todayElement.classList.add("selected-event"); - // 🔹 오전 반차일 경우 'half-day-am' 클래스 추가 - if (selectedDates.value.get(todayStr) === "700101") { - todayElement.classList.add("half-day-am"); - todayElement.classList.remove("half-day-pm"); + // 기존 오버레이 제거 + const existingOverlay = todayElement.querySelector('.half-day-overlay'); + if (existingOverlay) { + todayElement.removeChild(existingOverlay); } - // 🔹 오후 반차일 경우 'half-day-pm' 클래스 추가 - else if (selectedDates.value.get(todayStr) === "700102") { - todayElement.classList.add("half-day-pm"); - todayElement.classList.remove("half-day-am"); + + const overlay = document.createElement('div'); + overlay.classList.add('half-day-overlay'); + + const type = selectedDates.value.get(todayStr); + if (type === "700101") { + overlay.classList.add('am'); + } else if (type === "700102") { + overlay.classList.add('pm'); } else { - todayElement.classList.remove("half-day-am", "half-day-pm"); + // 전체 연차는 배경 전체 덮기 + overlay.style.width = '100%'; + overlay.style.borderRadius = '4px'; } + + todayElement.appendChild(overlay); } else { - todayElement.classList.add("fc-day-today"); // 기본 스타일 복원 - todayElement.classList.remove("selected-event", "half-day-am", "half-day-pm"); // 선택된 상태 해제 + // 선택 해제 시 원상복구 + todayElement.classList.remove("selected-event", "half-day-am", "half-day-pm"); + todayElement.style.backgroundColor = ''; // 배경 복원 + + const existingOverlay = todayElement.querySelector('.half-day-overlay'); + if (existingOverlay) { + todayElement.removeChild(existingOverlay); + } } } }); } + // 휴가 종류에 따른 클래스명 const getVacationTypeClass = (type) => { if (type === "700101") return "half-day-am";