휴가 css 수정

public/css/custom.css

@@ -113,18 +113,17 @@ opacity: 0.6; /* 흐려 보이게 */
   background: none !important;
   box-shadow: none !important;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   justify-content: center;
   width: 100%;
   height: 100%;
+  padding-bottom: 20px;
   }
-  
   /* 모달 본문 스타일 */
   .vac-modal-content {
   background: #fff;
   border-radius: 8px;
   box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
-  padding: 20px;
   max-width: 500px;
   width: 100%;
   position: relative;

src/layouts/NormalLayout.vue

@@ -14,6 +14,7 @@
                     <div class="content-backdrop fade"></div>
                 </div>
             </div>
+            <TheChat />
         </div>
 
         <!-- Overlay -->
@@ -27,6 +28,7 @@
     import TheTop from './TheTop.vue';
     import TheFooter from './TheFooter.vue';
     import TheMenu from './TheMenu.vue';
+    import TheChat from './TheChat.vue';
     import { nextTick } from 'vue';
     import { wait } from '@/common/utils';
 
@@ -45,4 +47,13 @@
         loadScript('/js/main.js');
     });
 </script>
-<style></style>
+<style>
+
+/* ✅ 중앙 콘텐츠 자동 조정 */
+.layout-page {
+    flex-grow: 1;
+    min-width: 0; /* flexbox 내에서 올바른 크기 계산 */
+    margin-right: 350px; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
+}
+
+</style>

src/layouts/TheChat.vue

@@ -0,0 +1,43 @@
+<template>
+    <!-- Chat Sidebar -->
+    <aside id="chat-sidebar" class="chat-sidebar">
+    </aside>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+// 채팅 메시지 리스트
+const messages = ref([
+    { user: "사용자1", text: "안녕하세요!" },
+    { user: "사용자2", text: "안녕하세요. 반갑습니다." }
+]);
+
+const newMessage = ref("");
+
+// 메시지 전송
+const sendMessage = () => {
+    if (newMessage.value.trim() !== "") {
+        messages.value.push({ user: "나", text: newMessage.value });
+        newMessage.value = "";
+    }
+};
+</script>
+
+<style scoped>
+/* ✅ 채팅 사이드바 고정 */
+.chat-sidebar {
+    width: 350px;
+    height: 100vh;
+    position: fixed;
+    right: 0;
+    top: 0;
+    background: #fff;
+    border-left: 1px solid #ddd;
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+}
+
+</style>

src/layouts/TheTop.vue

@@ -265,4 +265,5 @@
         router.push('/login');
     };
 </script>
-<style></style>
+<style scoped>
+</style>

src/views/vacation/VacationManagement.vue

@@ -58,97 +58,68 @@
             </div>
         </div>
     </div>
-  </template>
+</template>
 
 <script setup>
 import { reactive, ref, onMounted, nextTick, computed, watch, onBeforeUnmount  } from "vue";
 import axios from "@api";
+import "bootstrap-icons/font/bootstrap-icons.css";
+// 달력
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
-// Flatpickr 및 MonthSelect 플러그인 임포트
+import "@/assets/css/app-calendar.css";
+// Flatpickr, MonthSelect
 import flatpickr from "flatpickr";
 import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index";
 import "flatpickr/dist/flatpickr.min.css";
 import "flatpickr/dist/plugins/monthSelect/style.css";
-
+// 컴포넌트
-import "@/assets/css/app-calendar.css";
-import "bootstrap-icons/font/bootstrap-icons.css";
 import HalfDayButtons from "@c/button/HalfDayButtons.vue";
 import ProfileList from "@c/vacation/ProfileList.vue";
 import VacationModal from "@c/modal/VacationModal.vue";
 import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
+import { fetchHolidays } from "@c/calendar/holiday.js";
+// 스토어
 import { useUserStore } from "@s/userList";
 import { useUserInfoStore } from "@s/useUserInfoStore";
-import { fetchHolidays } from "@c/calendar/holiday.js";
 import { useToastStore } from '@s/toastStore';
+// 라우터
 import { useRouter } from "vue-router";
 
 const router = useRouter();
+// 스토어
+const toastStore = useToastStore();
+const userStore = useUserInfoStore();
+const userListStore = useUserStore();
+// 프로필
+const userList = ref([]);
+const userColors = ref({});
+// 휴가정보
+const myVacations = ref([]);
+const receivedVacations = ref([]);
+const remainingVacationData = ref({});
+// 모달상태
+const isModalOpen = ref(false);
+const isGrantModalOpen = ref(false);
+// FullCalendar 및 이벤트 관련
+const fullCalendarRef = ref(null);
+const calendarEvents = ref([]);
+const selectedDates = ref(new Map());
+const halfDayType = ref(null);
+const vacationCodeMap = ref({});
+const holidayDates = ref(new Set());
+const fetchedEvents = ref([]);
+const halfDayButtonsRef = ref(null);
+const selectedDate = ref(null);
+const selectedUser = ref(null);
+const lastRemainingYear = ref(new Date().getFullYear());
+const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
+// 데이트피커 인풋 ref
+const calendarDatepicker = ref(null);
+let fpInstance = null;
 
-  const toastStore = useToastStore();
+/* 변경사항 여부 확인 */
-  const userStore = useUserInfoStore();
-  const userListStore = useUserStore();
-  const userList = ref([]);
-  const userColors = ref({});
-  const myVacations = ref([]); // 로그인한 사원의 휴가
-  const receivedVacations = ref([]);
-  const isModalOpen = ref(false);
-  const remainingVacationData = ref({});
-  const selectedDate = ref(null);
-  const lastRemainingYear = ref(new Date().getFullYear());
-  const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
-  const isGrantModalOpen = ref(false);
-  const selectedUser = ref(null);
-
-  // FullCalendar 관련
-  const fullCalendarRef = ref(null);
-  const calendarEvents = ref([]);
-  const selectedDates = ref(new Map());
-  const halfDayType = ref(null);
-  const vacationCodeMap = ref({});
-  const holidayDates = ref(new Set());
-  const fetchedEvents = ref([]);
-  const halfDayButtonsRef = ref(null);
-
-  // 페이지 이동 시 변경 사항 확인
-router.beforeEach((to, from, next) => {
-  if (hasChanges.value) {
-    const answer = window.confirm("저장하지 않은 변경 사항이 있습니다. 이동하시겠습니까?");
-    if (!answer) {
-      return next(false); // 이동 취소
-    }
-  }
-  next();
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("beforeunload", preventUnsavedChanges);
-});
-
-function preventUnsavedChanges(event) {
-  if (hasChanges.value) {
-    event.preventDefault();
-    event.returnValue = ""; // 대부분의 브라우저에서 경고 메시지 표시됨
-  }
-}
-
-// `selectedDates` 변경 시 반차 버튼 초기화
-watch(
-  () => Array.from(selectedDates.value.keys()), // 선택된 날짜 리스트 감시
-  (newKeys) => {
-    if (halfDayButtonsRef.value) {
-      halfDayButtonsRef.value.resetHalfDay();
-    }
-  },
-  { deep: true }
-);
-
-  // 데이트피커 인풋 ref
-  const calendarDatepicker = ref(null);
-  let fpInstance = null;
-
-/** 변경사항 여부 확인 */
 const hasChanges = computed(() => {
     return (
         selectedDates.value.size > 0 ||
@@ -156,61 +127,9 @@ const hasChanges = computed(() => {
     );
 });
 
-
+/* 캘린더 설정 */
-/** selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
+// 풀 캘린더 옵션,이벤트
-watch(
+const calendarOptions = reactive({
-  () => 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();
-    // 날짜 선택 후 버튼 초기화
-    if (halfDayButtonsRef.value) {
-        halfDayButtonsRef.value.resetHalfDay();
-    }
-  }
-
-  const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
     initialView: "dayGridMonth",
     headerToolbar: {
@@ -223,99 +142,113 @@ function handleDateClick(info) {
     dateClick: handleDateClick,
     datesSet: handleMonthChange,
     events: calendarEvents,
-  });
+});
-
+// 캘린더 월 변경경
-  onMounted(async () => {
+function handleMonthChange(viewInfo) {
-    await userStore.userInfo();
+    const currentDate = viewInfo.view.currentStart;
-    await fetchRemainingVacation();
+    const year = currentDate.getFullYear();
-    const currentYear = new Date().getFullYear();
+    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
-    await fetchVacationHistory(currentYear);
+    loadCalendarData(year, month);
-    window.addEventListener("beforeunload", preventUnsavedChanges);
-
-    // Flatpickr 초기화 (달 선택 모드)
-    fpInstance = flatpickr(calendarDatepicker.value, {
-      dateFormat: "Y-m",
-      plugins: [
-        new monthSelectPlugin({
-          shorthand: true,
-          dateFormat: "Y-m",
-          altFormat: "F Y"
-        })
-      ],
-      onChange: function(selectedDatesArr, dateStr) {
-        // 선택한 달의 첫날로 달력을 이동
-        fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
-        const [year, month] = dateStr.split("-");
-        lastRemainingYear.value = parseInt(year, 10);
-        lastRemainingMonth.value = month;
-        loadCalendarData(lastRemainingYear.value, lastRemainingMonth.value);
-      },
-      onClose: function() {
-        calendarDatepicker.value.style.display = "none";
   }
-    });
+// 캘린더 클릭
-
+function handleDateClick(info) {
-   // FullCalendar 헤더 제목(.fc-toolbar-title) 클릭 시 데이트피커 열기
+    const clickedDateStr = info.dateStr;
-    nextTick(() => {
+    const clickedDate = info.date;
-    const titleEl = document.querySelector('.fc-toolbar-title');
+    const todayStr = new Date().toISOString().split("T")[0];
-    if (titleEl) {
+    if (
-        titleEl.style.cursor = 'pointer';
+        clickedDate.getDay() === 0 ||
-        titleEl.addEventListener('click', () => {
+        clickedDate.getDay() === 6 ||
-        // 화면 중앙 정렬을 위한 스타일 조정
+        holidayDates.value.has(clickedDateStr) ||
-        const dpEl = calendarDatepicker.value;
+        clickedDateStr < todayStr
-        dpEl.style.display = 'block';
+    ){
-        dpEl.style.position = 'fixed';
+        return;
-        dpEl.style.top = '22%';
-        dpEl.style.left = '66%';
-        dpEl.style.transform = 'translate(-50%, -50%)';
-        dpEl.style.zIndex = '9999';
-        dpEl.style.border = 'none';
-        dpEl.style.outline = 'none';
-        dpEl.style.backgroundColor = 'transparent';
-        fpInstance.open();
-        });
     }
+    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") {
-  // 연차 내역 API (초기 호출용)
+            selectedDates.value.delete(clickedDateStr);
-  async function fetchVacationHistory(year) {
-    try {
-      const response = await axios.get(`vacation/history?year=${year}`);
-      if (response.status === 200 && response.data) {
-        myVacations.value = response.data.data.usedVacations || [];
-        receivedVacations.value = response.data.data.receivedVacations || [];
         } else {
-        console.warn("❌ 연차 내역을 불러오지 못했습니다.");
+            selectedDates.value.set(clickedDateStr, "delete");
-        myVacations.value = [];
-        receivedVacations.value = [];
         }
-    } catch (error) {
+        updateCalendarEvents();
-      console.error("🚨 연차 데이터 불러오기 실패:", error);
+        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();
+    // 날짜 선택 후 반차버튼 초기화
+    if (halfDayButtonsRef.value) {
+        halfDayButtonsRef.value.resetHalfDay();
+    }
+}
+// 오늘 이후의 날짜만 클릭 가능하도록 설정
+function markClickableDates() {
+    nextTick(() => {
+        const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD
+        const todayObj = new Date(todayStr);
 
-  watch(lastRemainingYear, async (newYear, oldYear) => {
+        document.querySelectorAll(".fc-daygrid-day").forEach((cell) => {
-    await fetchVacationHistory(newYear);
+            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");
+            }
         });
-
+    });
-  const fetchRemainingVacation = async () => {
+}
-    try {
+//캘린더에 데이터 로드
-      const response = await axios.get("vacation/remaining");
+async function loadCalendarData(year, month) {
-      if (response.status === 200) {
+    if (lastRemainingYear.value !== year || lastRemainingMonth.value !== month) {
-        remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
+        await fetchRemainingVacation();
-          acc[vacation.employeeId] = vacation.remainingQuota;
+        lastRemainingYear.value = year;
-          return acc;
+        lastRemainingMonth.value = month;
-        }, {});
     }
-    } catch (error) {
+    fetchedEvents.value = [];
-      console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
+    const [vacationEvents, holidayEvents] = await Promise.all([
-    }
+        fetchVacationData(year, month),
-  };
+        fetchHolidays(year, month),
+    ]);
+    holidayDates.value = new Set(holidayEvents.map((event) => event.start));
+    fetchedEvents.value = [...vacationEvents, ...holidayEvents];
+    updateCalendarEvents();
+    await nextTick();
+    fullCalendarRef.value.getApi().refetchEvents();
+}
 
-  const handleProfileClick = async (user) => {
+/* 프로필 구역 */
+// 프로필 클릭 시 모달 열기
+const handleProfileClick = async (user) => {
     try {
-      // 열린 모달이 있으면 모두 닫음 후 새 모달 열기
+        if (isModalOpen.value && user.MEMBERSEQ === userStore.user.id) {
+            return;
+        }
+        if (isGrantModalOpen.value && selectedUser.value?.MEMBERSEQ === user.MEMBERSEQ) {
+            return;
+        }
         isModalOpen.value = false;
         isGrantModalOpen.value = false;
         if (user.MEMBERSEQ === userStore.user.id) {
@@ -329,9 +262,9 @@ function handleDateClick(info) {
     } catch (error) {
         console.error("🚨 연차 데이터 불러오기 실패:", error);
     }
-  };
+};
-
+// 프로필 사원 리스트
-  const fetchUserList = async () => {
+const fetchUserList = async () => {
     try {
         await userListStore.fetchUserList();
         userList.value = userListStore.userList;
@@ -341,120 +274,46 @@ function handleDateClick(info) {
         }
         userColors.value = {};
         userList.value.forEach((user) => {
-        userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
+        userColors.value[user.MEMBERSEQ] = user.usercolor;
         });
     } catch (error) {
         console.error("📌 사용자 목록 불러오기 오류:", error);
     }
-  };
+};
-
+// 사원별 남은 연차 개수
-  const fetchVacationCodes = async () => {
+const fetchRemainingVacation = async () => {
     try {
-      const response = await axios.get("vacation/codes");
+        const response = await axios.get("vacation/remaining");
-      if (response.status === 200 && response.data) {
+        if (response.status === 200) {
-        vacationCodeMap.value = response.data.data.reduce((acc, item) => {
+            remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
-          acc[item.code] = item.name;
+                acc[vacation.employeeId] = vacation.remainingQuota;
                 return acc;
             }, {});
-      } else {
-        console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
         }
     } catch (error) {
-      console.error("🚨 공통 코드 API 호출 실패:", error);
+        console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
     }
-  };
+};
-
+// 로그인한 사원이 사용한 휴가 필터링
-  const getVacationType = (typeCode) => {
+const filteredMyVacations = computed(() => {
-    return vacationCodeMap.value[typeCode] || "기타";
-  };
-
-  const filteredMyVacations = computed(() => {
     return myVacations.value.filter(vac => {
         const dateStr = vac.date;
         const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
         return year === String(lastRemainingYear.value);
     });
-  });
+});
-
+// 로그인한 사원이 받은 휴가 필터링
-  const filteredReceivedVacations = computed(() => {
+const filteredReceivedVacations = computed(() => {
     return receivedVacations.value.filter(vac => {
         const dateStr = vac.date;
         const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
         return dateStr && year === String(lastRemainingYear.value);
     });
-  });
+});
 
-  function updateCalendarEvents() {
-    const selectedEvents = Array.from(selectedDates.value)
-      .filter(([date, type]) => type !== "delete")
-      .map(([date, type]) => ({
-        start: date,
-        backgroundColor: "rgb(113 212 243 / 76%)",
-        textColor: "#fff",
-        display: "background",
-        classNames: [getVacationTypeClass(type), "selected-event"]
-      }));
 
-    const filteredFetchedEvents = fetchedEvents.value.filter(event => {
+/* 휴가 변경사항 저장 */
-      if (event.saved && selectedDates.value.get(event.start) === "delete") {
+async function saveVacationChanges() {
-        if (event.memberSeq === userStore.user.id) {
-          return false;
-        }
-      }
-      return true;
-    });
-
-    calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
-  }
-
-  const getVacationTypeClass = (type) => {
-    if (type === "700101") return "half-day-am";
-    if (type === "700102") return "half-day-pm";
-    return "full-day";
-  };
-
-  function toggleHalfDay(type) {
-    halfDayType.value = halfDayType.value === type ? null : type;
-  }
-
-// 연차 리스트 조회회
-async function fetchVacationData(year, month) {
-  try {
-    const response = await axios.get(`vacation/list/${year}/${month}`);
-    if (response.status === 200) {
-      const vacationList = response.data;
-
-      // 회원 정보가 없거나 색상 정보가 없는 데이터는 제외
-      const filteredVacations = vacationList.filter(vac =>
-        userColors.value[vac.MEMBERSEQ] && userColors.value[vac.MEMBERSEQ] !== "#FFFFFF"
-      );
-
-      const events = filteredVacations.map(vac => {
-        let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
-        let backgroundColor = userColors.value[vac.MEMBERSEQ];
-
-        return {
-          title: getVacationType(vac.LOCVACTYP),
-          start: dateStr,
-          backgroundColor,
-          classNames: [getVacationTypeClass(vac.LOCVACTYP)],
-          saved: true,
-          memberSeq: vac.MEMBERSEQ,
-        };
-      }).filter(event => event.start);
-
-      return events;
-    } else {
-      console.warn("📌 휴가 데이터를 불러오지 못함");
-      return [];
-    }
-  } catch (error) {
-    console.error("Error fetching vacation data:", error);
-    return [];
-  }
-}
-
-  async function saveVacationChanges() {
     if (!hasChanges.value) return;
     const selectedDatesArray = Array.from(selectedDates.value);
     const vacationsToAdd = selectedDatesArray
@@ -481,6 +340,7 @@ async function fetchVacationData(year, month) {
         });
         if (response.data && response.data.status === "OK") {
             toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's');
+            await fetchVacationHistory(lastRemainingYear.value);
             await fetchRemainingVacation();
             if (isModalOpen.value) {
                 await fetchVacationHistory(lastRemainingYear.value);
@@ -496,74 +356,163 @@ async function fetchVacationData(year, month) {
         console.error("🚨 휴가 변경 저장 실패:", error);
         toastStore.onToast('휴가 저장 요청에 실패했습니다.', 'e');
     }
-  }
-
-  function handleMonthChange(viewInfo) {
-    const currentDate = viewInfo.view.currentStart;
-    const year = currentDate.getFullYear();
-    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
-    loadCalendarData(year, month);
-  }
-
-  async function loadCalendarData(year, month) {
-    if (lastRemainingYear.value !== year || lastRemainingMonth.value !== month) {
-      await fetchRemainingVacation();
-      lastRemainingYear.value = year;
-      lastRemainingMonth.value = month;
-    }
-    fetchedEvents.value = [];
-    const [vacationEvents, holidayEvents] = await Promise.all([
-      fetchVacationData(year, month),
-      fetchHolidays(year, month),
-    ]);
-    holidayDates.value = new Set(holidayEvents.map((event) => event.start));
-    fetchedEvents.value = [...vacationEvents, ...holidayEvents];
-    updateCalendarEvents();
-    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();
+async function fetchVacationHistory(year) {
-});
+    try {
+        const response = await axios.get(`vacation/history?year=${year}`);
+        if (response.status === 200 && response.data) {
+            myVacations.value = response.data.data.usedVacations || [];
+            receivedVacations.value = response.data.data.receivedVacations || [];
+        } else {
+            console.warn("❌ 연차 내역을 불러오지 못했습니다.");
+            myVacations.value = [];
+            receivedVacations.value = [];
+        }
+    } catch (error) {
+        console.error("🚨 연차 데이터 불러오기 실패:", error);
+    }
+}
+// 모든 사원 연차 내역 및 그래프화
+async function fetchVacationData(year, month) {
+    try {
+        const response = await axios.get(`vacation/list/${year}/${month}`);
+        if (response.status === 200) {
+            const vacationList = response.data;
+            // 회원 정보가 없거나 색상 정보가 없는 데이터는 제외
+            const filteredVacations = vacationList.filter(vac =>
+                userColors.value[vac.MEMBERSEQ] && userColors.value[vac.MEMBERSEQ]
+            );
+            const events = filteredVacations.map(vac => {
+                let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
+                let backgroundColor = userColors.value[vac.MEMBERSEQ];
+                return {
+                    title: getVacationType(vac.LOCVACTYP),
+                    start: dateStr,
+                    backgroundColor,
+                    classNames: [getVacationTypeClass(vac.LOCVACTYP)],
+                    saved: true,
+                    memberSeq: vac.MEMBERSEQ,
+                };
+            }).filter(event => event.start);
+            return events;
+        } else {
+            console.warn("📌 휴가 데이터를 불러오지 못함");
+            return [];
+        }
+        } catch (error) {
+        console.error("Error fetching vacation data:", error);
+        return [];
+    }
+}
+// 캘린더 이벤트 업데이트
+function updateCalendarEvents() {
+    const selectedEvents = Array.from(selectedDates.value)
+        .filter(([date, type]) => type !== "delete")
+        .map(([date, type]) => ({
+            start: date,
+            backgroundColor: "rgb(113 212 243 / 76%)",
+            textColor: "#fff",
+            display: "background",
+            classNames: [getVacationTypeClass(type), "selected-event"]
+        }));
+    const filteredFetchedEvents = fetchedEvents.value.filter(event => {
+        if (event.saved && selectedDates.value.get(event.start) === "delete") {
+            if (event.memberSeq === userStore.user.id) {
+                return false;
+            }
+        }
+        return true;
+    });
+    calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
+}
+// 휴가 종류에 따른 클래스명
+const getVacationTypeClass = (type) => {
+    if (type === "700101") return "half-day-am";
+    if (type === "700102") return "half-day-pm";
+    return "full-day";
+};
+// 휴가종류
+const fetchVacationCodes = async () => {
+    try {
+        const response = await axios.get("vacation/codes");
+        if (response.status === 200 && response.data) {
+            vacationCodeMap.value = response.data.data.reduce((acc, item) => {
+                acc[item.code] = item.name;
+                return acc;
+            }, {});
+        } else {
+            console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
+        }
+    } catch (error) {
+        console.error("🚨 공통 코드 API 호출 실패:", error);
+    }
+};
+const getVacationType = (typeCode) => {
+    return vacationCodeMap.value[typeCode] || "기타";
+};
 
+/* 버튼 */
+// 반차버튼 토글
+function toggleHalfDay(type) {
+    halfDayType.value = halfDayType.value === type ? null : type;
+}
+
+/* 페이지 이동 시 변경 사항 확인 */
+router.beforeEach((to, from, next) => {
+    if (hasChanges.value) {
+        const answer = window.confirm("저장하지 않은 변경 사항이 있습니다. 이동하시겠습니까?");
+        if (!answer) {
+            return next(false);
+        }
+    }
+    next();
+});
+onBeforeUnmount(() => {
+    window.removeEventListener("beforeunload", preventUnsavedChanges);
+});
+function preventUnsavedChanges(event) {
+    if (hasChanges.value) {
+        event.preventDefault();
+        event.returnValue = "";
+    }
+}
+
+/* watch */
+watch(lastRemainingYear, async (newYear, oldYear) => {
+    await fetchVacationHistory(newYear);
+});
+// `selectedDates` 변경 시 반차 버튼 초기화
+watch(
+    () => Array.from(selectedDates.value.keys()), // 선택된 날짜 리스트 감시
+    (newKeys) => {
+        if (halfDayButtonsRef.value) {
+            halfDayButtonsRef.value.resetHalfDay();
+        }
+    },
+    { deep: true }
+);
+// selectedDates가 변경될 때 버튼 상태 즉시 업데이트
+watch(
+    () => Array.from(selectedDates.value.keys()),
+    (newKeys) => {
+    },
+    { deep: true }
+);
 watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
     markClickableDates();
 });
 
-
+/* onMounted */
-  onMounted(async () => {
+// onMounted 및 달력 변경 시 실행
+onMounted(() => {
+    markClickableDates();
+});
+// onMounted 시 데이터 로드
+onMounted(async () => {
+    await userStore.userInfo();
     await fetchUserList();
     await fetchVacationCodes();
     const today = new Date();
@@ -571,13 +520,58 @@ watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
     const month = String(today.getMonth() + 1).padStart(2, "0");
     await fetchVacationData(year, month);
     await loadCalendarData(year, month);
+    await fetchRemainingVacation();
+    const currentYear = new Date().getFullYear();
+    await fetchVacationHistory(currentYear);
+    window.addEventListener("beforeunload", preventUnsavedChanges);
+    // Flatpickr 초기화 (달 선택)
+    fpInstance = flatpickr(calendarDatepicker.value, {
+        dateFormat: "Y-m",
+        plugins: [
+            new monthSelectPlugin({
+                shorthand: true,
+                dateFormat: "Y-m",
+                altFormat: "F Y"
+            })
+        ],
+        onChange: function(selectedDatesArr, dateStr) {
+            // 선택한 달의 첫날로 달력을 이동
+            fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
+            const [year, month] = dateStr.split("-");
+            lastRemainingYear.value = parseInt(year, 10);
+            lastRemainingMonth.value = month;
+            loadCalendarData(lastRemainingYear.value, lastRemainingMonth.value);
+        },
+        onClose: function() {
+            calendarDatepicker.value.style.display = "none";
+        }
     });
-  </script>
+    // FullCalendar 년월월(.fc-toolbar-title) 클릭 시 데이트피커 열기
-
+    nextTick(() => {
-  <style>
+        const titleEl = document.querySelector('.fc-toolbar-title');
-/* 모달 본문 스크롤 */
+        if (titleEl) {
-.modal-body {
+            titleEl.style.cursor = 'pointer';
-  max-height: 130px;
+            titleEl.addEventListener('click', () => {
+            const dpEl = calendarDatepicker.value;
+            dpEl.style.display = 'block';
+            dpEl.style.position = 'fixed';
+            dpEl.style.top = '22%';
+            dpEl.style.left = '66%';
+            dpEl.style.transform = 'translate(-50%, -50%)';
+            dpEl.style.zIndex = '9999';
+            dpEl.style.border = 'none';
+            dpEl.style.outline = 'none';
+            dpEl.style.backgroundColor = 'transparent';
+            fpInstance.open();
+            });
+        }
+    });
+})
+</script>
+<style>
+  /* 모달 본문 스크롤 */
+  .modal-body {
+  max-height: 140px;
   overflow-y: auto;
-}
+  }
-  </style>
+</style>