diff --git a/public/css/custom.css b/public/css/custom.css index af34e46..af17624 100644 --- a/public/css/custom.css +++ b/public/css/custom.css @@ -44,6 +44,30 @@ .flatpickr-calendar:after { display: none !important; } + /* 기본 스타일은 그대로 두고, 데이트피커 인풋의 추가 스타일 정의 */ + .fc-toolbar-title { + cursor: pointer; +} +/* 클릭 가능한 날짜 (오늘 + 미래) */ +.fc-daygrid-day.clickable { +cursor: pointer; +transition: background-color 0.2s ease-in-out; +} +/* 마우스를 올렸을 때 효과 */ +.fc-daygrid-day.clickable:hover { +background-color: rgba(0, 0, 0, 0.05); /* 연한 배경 효과 */ +} +/* 주말 (토요일, 일요일) 및 공휴일 */ +.fc-day-sat-sun { +cursor: not-allowed !important; +opacity: 0.6; /* 흐려 보이게 */ +} +/* 과거 날짜 (오늘 이전) */ +.fc-daygrid-day.past { +cursor: not-allowed !important; +opacity: 0.6; /* 흐려 보이게 */ +} + /* 본인 모달 */ @@ -116,12 +140,32 @@ /* 버튼 호버 효과 */ .custom-button:hover i { - color: #007BFF; /* 호버 시 아이콘 색상 변경 (파란색) */ + color: #ff0800; /* 호버 시 아이콘 색상 변경 */ } +/* 모달 배경 투명하게 */ +.modal-dialog { + background: none !important; /* 배경 제거 */ + box-shadow: none !important; /* 음영 제거 */ + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +/* 모달 내용 스타일 */ +.modal-content { + background: #fff; /* 기존 흰색 배경 유지 */ + border-radius: 8px; + box-shadow: none !important; /* 내부 음영 제거 */ + padding: 20px; + max-width: 500px; + width: 100%; +} .grayscaleImg { filter: grayscale(100%); diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue index 8c77ed2..f2c5856 100644 --- a/src/components/button/HalfDayButtons.vue +++ b/src/components/button/HalfDayButtons.vue @@ -2,21 +2,21 @@
-
@@ -26,6 +26,10 @@ - diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue index fa4867d..0f724d6 100644 --- a/src/components/modal/VacationGrantModal.vue +++ b/src/components/modal/VacationGrantModal.vue @@ -7,7 +7,7 @@

선물할 연차 개수를 선택하세요.

-
+
{{ grantCount }} diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue index 816940b..4dbe9ce 100644 --- a/src/components/modal/VacationModal.vue +++ b/src/components/modal/VacationModal.vue @@ -31,7 +31,7 @@
-

+

🚫 사용한 연차가 없습니다.

diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue index faa458a..08b511b 100644 --- a/src/views/vacation/VacationManagement.vue +++ b/src/views/vacation/VacationManagement.vue @@ -9,6 +9,7 @@
{ + return ( + selectedDates.value.size > 0 || + myVacations.value.some(vac => selectedDates.value.has(vac.date.split("T")[0])) + ); +}); + + +/** ✅ selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */ +watch( + () => Array.from(selectedDates.value.keys()), // keys()를 Array로 변환해서 감시 + (newKeys) => { + }, + { deep: true } +); + +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) : ""; + return vacDate === clickedDateStr && !vac.receiverId; + }); + + if (isMyVacation) { + if (selectedDates.value.get(clickedDateStr) === "delete") { + selectedDates.value.delete(clickedDateStr); + } else { + selectedDates.value.set(clickedDateStr, "delete"); + } + updateCalendarEvents(); + return; + } + + if (selectedDates.value.has(clickedDateStr)) { + selectedDates.value.delete(clickedDateStr); + updateCalendarEvents(); + return; + } + const type = halfDayType.value + ? (halfDayType.value === "AM" ? "700101" : "700102") + : "700103"; + selectedDates.value.set(clickedDateStr, type); + halfDayType.value = null; + updateCalendarEvents(); + } + const calendarOptions = reactive({ plugins: [dayGridPlugin, interactionPlugin], initialView: "dayGridMonth", @@ -309,47 +368,6 @@ return "full-day"; }; - 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) : ""; - return vacDate === clickedDateStr && !vac.receiverId; - }); - - if (isMyVacation) { - if (selectedDates.value.get(clickedDateStr) === "delete") { - selectedDates.value.delete(clickedDateStr); - } else { - selectedDates.value.set(clickedDateStr, "delete"); - } - updateCalendarEvents(); - return; - } - - if (selectedDates.value.has(clickedDateStr)) { - selectedDates.value.delete(clickedDateStr); - updateCalendarEvents(); - return; - } - const type = halfDayType.value - ? (halfDayType.value === "AM" ? "700101" : "700102") - : "700103"; - selectedDates.value.set(clickedDateStr, type); - halfDayType.value = null; - updateCalendarEvents(); - } - function toggleHalfDay(type) { halfDayType.value = halfDayType.value === type ? null : type; } @@ -392,6 +410,7 @@ } async function saveVacationChanges() { + if (!hasChanges.value) return; const selectedDatesArray = Array.from(selectedDates.value); const vacationsToAdd = selectedDatesArray .filter(([date, type]) => type !== "delete") @@ -458,6 +477,46 @@ await nextTick(); fullCalendarRef.value.getApi().refetchEvents(); } + /** ✅ 오늘 이후의 날짜만 클릭 가능하도록 설정 */ +function markClickableDates() { + nextTick(() => { + const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD + const todayObj = new Date(todayStr); + + document.querySelectorAll(".fc-daygrid-day").forEach((cell) => { + const dateStr = cell.getAttribute("data-date"); + if (!dateStr) return; // 날짜가 없으면 스킵 + + const dateObj = new Date(dateStr); + + // 주말 (토요일, 일요일) + if (dateObj.getDay() === 0 || dateObj.getDay() === 6 || holidayDates.value.has(dateStr)) { + cell.classList.remove("clickable"); + cell.classList.add("fc-day-sat-sun"); + } + // 과거 날짜 (오늘 이전) + else if (dateObj < todayObj) { + cell.classList.remove("clickable"); + cell.classList.add("past"); // 과거 날짜 비활성화 + } + // 오늘 & 미래 날짜 (클릭 가능) + else { + cell.classList.add("clickable"); + cell.classList.remove("past", "fc-day-sat-sun"); + } + }); + }); +} + +/** ✅ onMounted 및 달력 변경 시 실행 */ +onMounted(() => { + markClickableDates(); +}); + +watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => { + markClickableDates(); +}); + onMounted(async () => { await fetchUserList(); @@ -471,10 +530,6 @@