공휴일js 공통으로뻄

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 [];
+  }
+}

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);
 </script>
 
 <style>
-.fc-bg-event{
 
-}
 </style>