diff --git a/src/components/calendar/holiday.js b/src/components/calendar/holiday.js new file mode 100644 index 0000000..d80b03a --- /dev/null +++ b/src/components/calendar/holiday.js @@ -0,0 +1,18 @@ +// src/api/holiday.js +import axios from "@api"; + +export async function fetchHolidays(year, month) { + try { + const response = await axios.get(`vacation/${year}/${month}`); + const holidayEvents = response.data.map((holiday) => ({ + title: holiday.name, + start: holiday.date, // "YYYY-MM-DD" 형식 + backgroundColor: "#ff6666", + classNames: ["holiday-event"], + })); + return holidayEvents; + } catch (error) { + console.error("공휴일 정보를 불러오지 못했습니다.", error); + return []; + } +} diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue index 1d6eda5..80e4fc8 100644 --- a/src/views/vacation/VacationManagement.vue +++ b/src/views/vacation/VacationManagement.vue @@ -60,6 +60,7 @@ import { useUserStore } from "@s/userList"; import VacationModal from "@c/modal/VacationModal.vue" import { useUserInfoStore } from "@s/useUserInfoStore"; import VacationGrantModal from "@c/modal/VacationGrantModal.vue"; +import { fetchHolidays } from "@c/calendar/holiday.js"; const userStore = useUserInfoStore(); const userListStore = useUserStore(); @@ -73,6 +74,32 @@ const remainingVacationData = ref({}); const isGrantModalOpen = ref(false); const selectedUser = ref(null); +// FullCalendar 관련 참조 및 데이터 +const fullCalendarRef = ref(null); +const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트) +const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입 +const halfDayType = ref(null); +const vacationCodeMap = ref({}); // 휴가 코드명 저장용 + +// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용) +const holidayDates = ref(new Set()); +const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일) + +// FullCalendar 옵션 객체 (events에 calendarEvents를 지정) +const calendarOptions = reactive({ +plugins: [dayGridPlugin, interactionPlugin], +initialView: "dayGridMonth", +headerToolbar: { + left: "today", + center: "title", + right: "prev,next", +}, +locale: "ko", +selectable: false, +dateClick: handleDateClick, +datesSet: handleMonthChange, +events: calendarEvents, +}); onMounted(async () => { await userStore.userInfo(); @@ -138,33 +165,6 @@ const fetchUserList = async () => { } }; -// FullCalendar 관련 참조 및 데이터 -const fullCalendarRef = ref(null); -const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트) -const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일) -const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입 -const halfDayType = ref(null); -const vacationCodeMap = ref({}); // 휴가 코드명 저장용 - -// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용) -const holidayDates = ref(new Set()); - -// FullCalendar 옵션 객체 (events에 calendarEvents를 지정) -const calendarOptions = reactive({ -plugins: [dayGridPlugin, interactionPlugin], -initialView: "dayGridMonth", -headerToolbar: { - left: "today", - center: "title", - right: "prev,next", -}, -locale: "ko", -selectable: false, -dateClick: handleDateClick, -datesSet: handleMonthChange, -events: calendarEvents, -}); - const fetchVacationCodes = async () => { try { const response = await axios.get("vacation/codes"); @@ -363,29 +363,10 @@ halfDayType.value = halfDayType.value === type ? null : type; } } -/** - * 공휴일 데이터 요청 및 이벤트 변환 - */ -async function fetchHolidays(year, month) { -try { - const response = await axios.get(`vacation/${year}/${month}`); - const holidayEvents = response.data.map((holiday) => ({ - title: holiday.name, - start: holiday.date, // "YYYY-MM-DD" 형식 - backgroundColor: "#ff6666", - classNames: ["holiday-event"], - })); - return holidayEvents; -} catch (error) { - console.error("공휴일 정보를 불러오지 못했습니다.", error); - return []; -} -} - /** * 달력 월 변경 시 호출 (FullCalendar의 datesSet 옵션) */ -function handleMonthChange(viewInfo) { + function handleMonthChange(viewInfo) { const currentDate = viewInfo.view.currentStart; const year = currentDate.getFullYear(); const month = String(currentDate.getMonth() + 1).padStart(2, "0"); @@ -421,7 +402,5 @@ await loadCalendarData(year, month);