diff --git a/public/css/custom.css b/public/css/custom.css index af17624..94e4977 100644 --- a/public/css/custom.css +++ b/public/css/custom.css @@ -67,6 +67,25 @@ opacity: 0.6; /* 흐려 보이게 */ cursor: not-allowed !important; opacity: 0.6; /* 흐려 보이게 */ } +/* 기본 이벤트 스타일 */ +.fc-daygrid-event { + border: none !important; + border-radius: 4px; +} +/* 오전 반차 (왼쪽 절반) */ +.selected-event.half-day-am { + width: 50% !important; + left: 0 !important; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; +} +/* 오후 반차 (오른쪽 절반) */ +.selected-event.half-day-pm { + width: 50% !important; + margin-left: auto !important; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} /* 본인 모달 */ diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue index f2c5856..9bb125f 100644 --- a/src/components/button/HalfDayButtons.vue +++ b/src/components/button/HalfDayButtons.vue @@ -1,6 +1,6 @@ + + diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue index 0f724d6..d3baa12 100644 --- a/src/components/modal/VacationGrantModal.vue +++ b/src/components/modal/VacationGrantModal.vue @@ -25,7 +25,9 @@ diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue index 08b511b..6c26514 100644 --- a/src/views/vacation/VacationManagement.vue +++ b/src/views/vacation/VacationManagement.vue @@ -79,7 +79,9 @@ import { useUserStore } from "@s/userList"; import { useUserInfoStore } from "@s/useUserInfoStore"; import { fetchHolidays } from "@c/calendar/holiday.js"; + import { useToastStore } from '@s/toastStore'; + const toastStore = useToastStore(); const userStore = useUserInfoStore(); const userListStore = useUserStore(); const userList = ref([]); @@ -102,6 +104,7 @@ const vacationCodeMap = ref({}); const holidayDates = ref(new Set()); const fetchedEvents = ref([]); + const halfDayButtonsRef = ref(null); // 데이트피커 인풋 ref const calendarDatepicker = ref(null); @@ -163,6 +166,10 @@ function handleDateClick(info) { selectedDates.value.set(clickedDateStr, type); halfDayType.value = null; updateCalendarEvents(); + // ✅ 날짜 선택 후 버튼 초기화 + if (halfDayButtonsRef.value) { + halfDayButtonsRef.value.resetHalfDay(); + } } const calendarOptions = reactive({ @@ -342,7 +349,6 @@ function handleDateClick(info) { const selectedEvents = Array.from(selectedDates.value) .filter(([date, type]) => type !== "delete") .map(([date, type]) => ({ - title: getVacationType(type), start: date, backgroundColor: "rgb(113 212 243 / 76%)", textColor: "#fff", @@ -435,7 +441,7 @@ function handleDateClick(info) { delete: vacationsToDelete }); if (response.data && response.data.status === "OK") { - alert("✅ 휴가 변경 사항이 저장되었습니다."); + toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's'); await fetchRemainingVacation(); if (isModalOpen.value) { await fetchVacationHistory(lastRemainingYear.value); @@ -445,11 +451,11 @@ function handleDateClick(info) { selectedDates.value.clear(); updateCalendarEvents(); } else { - alert("❌ 휴가 저장 중 오류가 발생했습니다."); + toastStore.onToast('휴가 저장 중 오류가 발생했습니다.', 'e'); } } catch (error) { console.error("🚨 휴가 변경 저장 실패:", error); - alert("❌ 휴가 저장 요청에 실패했습니다."); + toastStore.onToast('휴가 저장 요청에 실패했습니다.', 'e'); } } @@ -531,5 +537,4 @@ watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {