From 6904902755692efacf221caba490e5ab76c65a96 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 6 Mar 2025 15:02:15 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9C=B4=EA=B0=80=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css                     |    5 +-
 src/layouts/NormalLayout.vue              |   13 +-
 src/layouts/TheChat.vue                   |   43 +
 src/layouts/TheTop.vue                    |    3 +-
 src/views/vacation/VacationManagement.vue | 1018 ++++++++++-----------
 5 files changed, 565 insertions(+), 517 deletions(-)
 create mode 100644 src/layouts/TheChat.vue

diff --git a/public/css/custom.css b/public/css/custom.css
index b950985..2003a9d 100644
--- a/public/css/custom.css
+++ b/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;
diff --git a/src/layouts/NormalLayout.vue b/src/layouts/NormalLayout.vue
index 08cef90..eb86bbe 100644
--- a/src/layouts/NormalLayout.vue
+++ b/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>
diff --git a/src/layouts/TheChat.vue b/src/layouts/TheChat.vue
new file mode 100644
index 0000000..21beb52
--- /dev/null
+++ b/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>
diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
index 2e530ef..4c1d281 100644
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@@ -265,4 +265,5 @@
         router.push('/login');
     };
 </script>
-<style></style>
+<style scoped>
+</style>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index d5fa758..ee00125 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -1,569 +1,518 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
-      <div class="card app-calendar-wrapper">
-        <div class="row g-0">
-          <!-- Sidebar: 사이드바 영역 -->
-          <div class="col-3 app-calendar-sidebar border-end" id="app-calendar-sidebar">
-            <div class="sidebar-content">
-              <div class="sidebar-actions text-center my-3">
-                <HalfDayButtons
-                    ref="halfDayButtonsRef"
-                    @toggleHalfDay="toggleHalfDay"
-                    @addVacationRequests="saveVacationChanges"
-                    :isDisabled="!hasChanges"
-                    :selectedDate="selectedDate"
-                />
-              </div>
-              <ProfileList
-                @profileClick="handleProfileClick"
-                :remainingVacationData="remainingVacationData"
-              />
-              <VacationModal
-                v-if="isModalOpen"
-                :isOpen="isModalOpen"
-                :myVacations="filteredMyVacations"
-                :receivedVacations="filteredReceivedVacations"
-                :userColors="userColors"
-                @close="isModalOpen = false"
-              />
-              <VacationGrantModal
-                v-if="isGrantModalOpen"
-                :isOpen="isGrantModalOpen"
-                :targetUser="selectedUser"
-                :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
-                @close="isGrantModalOpen = false"
-                @updateVacation="fetchRemainingVacation"
-              />
-            </div>
-          </div>
+        <div class="card app-calendar-wrapper">
+            <div class="row g-0">
+                <!-- Sidebar: 사이드바 영역 -->
+                <div class="col-3 app-calendar-sidebar border-end" id="app-calendar-sidebar">
+                    <div class="sidebar-content">
+                        <div class="sidebar-actions text-center my-3">
+                        <HalfDayButtons
+                            ref="halfDayButtonsRef"
+                            @toggleHalfDay="toggleHalfDay"
+                            @addVacationRequests="saveVacationChanges"
+                            :isDisabled="!hasChanges"
+                            :selectedDate="selectedDate"
+                        />
+                        </div>
+                        <ProfileList
+                        @profileClick="handleProfileClick"
+                        :remainingVacationData="remainingVacationData"
+                        />
+                        <VacationModal
+                        v-if="isModalOpen"
+                        :isOpen="isModalOpen"
+                        :myVacations="filteredMyVacations"
+                        :receivedVacations="filteredReceivedVacations"
+                        :userColors="userColors"
+                        @close="isModalOpen = false"
+                        />
+                        <VacationGrantModal
+                        v-if="isGrantModalOpen"
+                        :isOpen="isGrantModalOpen"
+                        :targetUser="selectedUser"
+                        :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
+                        @close="isGrantModalOpen = false"
+                        @updateVacation="fetchRemainingVacation"
+                        />
+                    </div>
+                </div>
 
-          <!-- Main Content: 캘린더 영역 -->
-          <div class="col app-calendar-content">
-            <div class="card shadow-none border-0">
-              <div class="card-body pb-0" style="position: relative;">
-                <full-calendar
-                  ref="fullCalendarRef"
-                  :options="calendarOptions"
-                  class="flatpickr-calendar-only"
-                />
-                <!-- 숨겨진 데이트피커 인풋 -->
-                <input
-                  ref="calendarDatepicker"
-                  type="text"
-                  style="display: none; position: absolute;"
-                />
-              </div>
+                <!-- Main Content: 캘린더 영역 -->
+                <div class="col app-calendar-content">
+                    <div class="card shadow-none border-0">
+                        <div class="card-body pb-0" style="position: relative;">
+                        <full-calendar
+                            ref="fullCalendarRef"
+                            :options="calendarOptions"
+                            class="flatpickr-calendar-only"
+                        />
+                        <!-- 숨겨진 데이트피커 인풋 -->
+                        <input
+                            ref="calendarDatepicker"
+                            type="text"
+                            style="display: none; position: absolute;"
+                        />
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
         </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 ||
-    myVacations.value.some(vac => selectedDates.value.has(vac.date.split("T")[0]))
-  );
+    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();
-    // 날짜 선택 후 버튼 초기화
-    if (halfDayButtonsRef.value) {
-        halfDayButtonsRef.value.resetHalfDay();
-    }
-  }
-
-  const calendarOptions = reactive({
+/* 캘린더 설정 */
+// 풀 캘린더 옵션,이벤트
+const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
     initialView: "dayGridMonth",
     headerToolbar: {
-      left: "today",
-      center: "title",
-      right: "prev,next",
+        left: "today",
+        center: "title",
+        right: "prev,next",
     },
     locale: "ko",
     selectable: false,
     dateClick: handleDateClick,
     datesSet: handleMonthChange,
     events: calendarEvents,
-  });
-
-  onMounted(async () => {
-    await userStore.userInfo();
-    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";
-      }
-    });
-
-   // FullCalendar 헤더 제목(.fc-toolbar-title) 클릭 시 데이트피커 열기
-    nextTick(() => {
-    const titleEl = document.querySelector('.fc-toolbar-title');
-    if (titleEl) {
-        titleEl.style.cursor = 'pointer';
-        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();
-        });
-    }
-    });
-  })
-
-  // 연차 내역 API (초기 호출용)
-  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);
-    }
-  }
-
-  watch(lastRemainingYear, async (newYear, oldYear) => {
-    await fetchVacationHistory(newYear);
-  });
-
-  const fetchRemainingVacation = async () => {
-    try {
-      const response = await axios.get("vacation/remaining");
-      if (response.status === 200) {
-        remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
-          acc[vacation.employeeId] = vacation.remainingQuota;
-          return acc;
-        }, {});
-      }
-    } catch (error) {
-      console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
-    }
-  };
-
-  const handleProfileClick = async (user) => {
-    try {
-      // 열린 모달이 있으면 모두 닫음 후 새 모달 열기
-      isModalOpen.value = false;
-      isGrantModalOpen.value = false;
-      if (user.MEMBERSEQ === userStore.user.id) {
-        const displayedYear = lastRemainingYear.value;
-        await fetchVacationHistory(displayedYear);
-        isModalOpen.value = true;
-      } else {
-        selectedUser.value = user;
-        isGrantModalOpen.value = true;
-      }
-    } catch (error) {
-      console.error("🚨 연차 데이터 불러오기 실패:", error);
-    }
-  };
-
-  const fetchUserList = async () => {
-    try {
-      await userListStore.fetchUserList();
-      userList.value = userListStore.userList;
-      if (!userList.value.length) {
-        console.warn("📌 사용자 목록이 비어 있음!");
-        return;
-      }
-      userColors.value = {};
-      userList.value.forEach((user) => {
-        userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
-      });
-    } catch (error) {
-      console.error("📌 사용자 목록 불러오기 오류:", error);
-    }
-  };
-
-  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] || "기타";
-  };
-
-  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(() => {
-    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") {
-        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
-      .filter(([date, type]) => type !== "delete")
-      .filter(([date, type]) =>
-        !myVacations.value.some(vac => vac.date && vac.date.startsWith(date)) ||
-        myVacations.value.some(vac => vac.date && vac.date.startsWith(date) && vac.receiverId)
-      )
-      .map(([date, type]) => ({ date, type }));
-    const vacationsToDelete = myVacations.value
-      .filter(vac => {
-        if (!vac.date) return false;
-        const date = vac.date.split("T")[0];
-        return selectedDates.value.get(date) === "delete" && !vac.receiverId;
-      })
-      .map(vac => {
-        const id = vac.id;
-        return typeof id === "number" ? Number(id) : id;
-      });
-    try {
-      const response = await axios.post("vacation/batchUpdate", {
-        add: vacationsToAdd,
-        delete: vacationsToDelete
-      });
-      if (response.data && response.data.status === "OK") {
-        toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's');
-        await fetchRemainingVacation();
-        if (isModalOpen.value) {
-          await fetchVacationHistory(lastRemainingYear.value);
-        }
-        const currentDate = fullCalendarRef.value.getApi().getDate();
-        await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
-        selectedDates.value.clear();
-        updateCalendarEvents();
-      } else {
-        toastStore.onToast('휴가 저장 중 오류가 발생했습니다.', 'e');
-      }
-    } catch (error) {
-      console.error("🚨 휴가 변경 저장 실패:", error);
-      toastStore.onToast('휴가 저장 요청에 실패했습니다.', 'e');
-    }
-  }
-
-  function handleMonthChange(viewInfo) {
+});
+// 캘린더 월 변경경
+function handleMonthChange(viewInfo) {
     const currentDate = viewInfo.view.currentStart;
     const year = currentDate.getFullYear();
     const month = String(currentDate.getMonth() + 1).padStart(2, "0");
     loadCalendarData(year, month);
   }
+// 캘린더 클릭
+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();
+    }
+}
+// 오늘 이후의 날짜만 클릭 가능하도록 설정
+function markClickableDates() {
+    nextTick(() => {
+        const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD
+        const todayObj = new Date(todayStr);
 
-  async function loadCalendarData(year, month) {
+        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");
+            }
+        });
+    });
+}
+//캘린더에 데이터 로드
+async function loadCalendarData(year, month) {
     if (lastRemainingYear.value !== year || lastRemainingMonth.value !== month) {
-      await fetchRemainingVacation();
-      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),
+        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();
+/* 프로필 구역 */
+// 프로필 클릭 시 모달 열기
+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) {
+            const displayedYear = lastRemainingYear.value;
+            await fetchVacationHistory(displayedYear);
+            isModalOpen.value = true;
+        } else {
+            selectedUser.value = user;
+            isGrantModalOpen.value = true;
+        }
+    } catch (error) {
+        console.error("🚨 연차 데이터 불러오기 실패:", error);
+    }
+};
+// 프로필 사원 리스트
+const fetchUserList = async () => {
+    try {
+        await userListStore.fetchUserList();
+        userList.value = userListStore.userList;
+        if (!userList.value.length) {
+            console.warn("📌 사용자 목록이 비어 있음!");
+            return;
+        }
+        userColors.value = {};
+        userList.value.forEach((user) => {
+        userColors.value[user.MEMBERSEQ] = user.usercolor;
+        });
+    } catch (error) {
+        console.error("📌 사용자 목록 불러오기 오류:", error);
+    }
+};
+// 사원별 남은 연차 개수
+const fetchRemainingVacation = async () => {
+    try {
+        const response = await axios.get("vacation/remaining");
+        if (response.status === 200) {
+            remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
+                acc[vacation.employeeId] = vacation.remainingQuota;
+                return acc;
+            }, {});
+        }
+    } catch (error) {
+        console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
+    }
+};
+// 로그인한 사원이 사용한 휴가 필터링
+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(() => {
+    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);
+    });
 });
 
+
+/* 휴가 변경사항 저장 */
+async function saveVacationChanges() {
+    if (!hasChanges.value) return;
+    const selectedDatesArray = Array.from(selectedDates.value);
+    const vacationsToAdd = selectedDatesArray
+        .filter(([date, type]) => type !== "delete")
+        .filter(([date, type]) =>
+            !myVacations.value.some(vac => vac.date && vac.date.startsWith(date)) ||
+            myVacations.value.some(vac => vac.date && vac.date.startsWith(date) && vac.receiverId)
+        )
+        .map(([date, type]) => ({ date, type }));
+    const vacationsToDelete = myVacations.value
+        .filter(vac => {
+            if (!vac.date) return false;
+            const date = vac.date.split("T")[0];
+            return selectedDates.value.get(date) === "delete" && !vac.receiverId;
+        })
+        .map(vac => {
+            const id = vac.id;
+            return typeof id === "number" ? Number(id) : id;
+        });
+    try {
+        const response = await axios.post("vacation/batchUpdate", {
+            add: vacationsToAdd,
+            delete: vacationsToDelete
+        });
+        if (response.data && response.data.status === "OK") {
+            toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's');
+            await fetchVacationHistory(lastRemainingYear.value);
+            await fetchRemainingVacation();
+            if (isModalOpen.value) {
+                await fetchVacationHistory(lastRemainingYear.value);
+            }
+            const currentDate = fullCalendarRef.value.getApi().getDate();
+            await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
+            selectedDates.value.clear();
+            updateCalendarEvents();
+        } else {
+            toastStore.onToast('휴가 저장 중 오류가 발생했습니다.', 'e');
+        }
+    } catch (error) {
+        console.error("🚨 휴가 변경 저장 실패:", error);
+        toastStore.onToast('휴가 저장 요청에 실패했습니다.', 'e');
+    }
+}
+
+/* 휴가 조회 */
+// 로그인 사용자의 연차 사용 내역
+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();
+    markClickableDates();
 });
 
-
-  onMounted(async () => {
+/* onMounted */
+// 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);
-  });
-  </script>
-
-  <style>
-/* 모달 본문 스크롤 */
-.modal-body {
-  max-height: 130px;
+    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";
+        }
+    });
+    // FullCalendar 년월월(.fc-toolbar-title) 클릭 시 데이트피커 열기
+    nextTick(() => {
+        const titleEl = document.querySelector('.fc-toolbar-title');
+        if (titleEl) {
+            titleEl.style.cursor = 'pointer';
+            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>