diff --git a/public/css/custom.css b/public/css/custom.css
index a5afec2..be038c6 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -3,7 +3,6 @@
 
 /* 휴가 */
 
-
 /* 이벤트 선 없게 */
 .fc-event {
   border: none;
@@ -94,8 +93,72 @@ opacity: 0.6; /* 흐려 보이게 */
 }
 
 
-/* 본인 모달 */
-/* 닫기 버튼 */
+/* 휴가 모달 */
+.vac-modal-dialog {
+    background: none !important;
+    box-shadow: none !important;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 20px;
+}
+.vac-modal-content {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
+    max-width: 500px;
+    width: 100%;
+    position: relative;
+}
+.vac-modal-body {
+  max-height: 140px;
+  overflow-y: auto;
+  }
+.vac-modal-text {
+  font-size: 14px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+.count-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.count-value {
+  font-size: 23px;
+  font-weight: bold;
+  min-width: 50px;
+  text-align: center;
+}
+.custom-button {
+  background: none;
+  border: none;
+  width: 55px;
+  height: 55px;
+  font-size: 26px;
+  color: white;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.vac-modal-title {
+  margin-bottom: 10px;
+}
+.vacation-item {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  background: #f9f9f9;
+}
 .close-btn {
   position: absolute;
   top: 10px;
@@ -108,42 +171,6 @@ opacity: 0.6; /* 흐려 보이게 */
 .close-btn:hover {
   color: #525252;
 }
-/* 모달 배경 투명하게 */
-.vac-modal-dialog {
-  background: none !important;
-  box-shadow: none !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  }
-  
-  /* 모달 본문 스타일 */
-  .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;
-  }
-/* 리스트 아이템 */
-.vacation-item {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 8px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  background: #f9f9f9;
-}
-
-
-/* 선물하기 모달 */
-/* 연차 개수 버튼 */
 .count-btn {
   font-size: 18px;
   padding: 2px 10px;
@@ -160,29 +187,179 @@ opacity: 0.6; /* 흐려 보이게 */
   background: #cccccc;
   cursor: not-allowed;
 }
-/* 버튼 컨테이너 (우측 정렬) */
 .custom-button-container {
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
-/* 버튼 기본 스타일 */
 .custom-button {
-  background: none; /* 배경색 없음 */
-  border: none; /* 테두리 없음 */
-  padding: 10px; /* 크기 조정 */
-  cursor: pointer; /* 클릭 가능하도록 변경 */
+  background: none; 
+  border: none;
+  padding: 10px;
+  cursor: pointer;
 }
-/* 아이콘 색상 변경 (기본) */
 .custom-button i {
-  color: #282538; /* 기본 아이콘 색상 */
-  font-size: 25px; /* 아이콘 크기 */
+  color: #282538;
+  font-size: 25px;
 }
-/* 버튼 호버 효과 */
 .custom-button:hover i {
-  color: #ff0800; /* 호버 시 아이콘 색상 변경 */
+  color: #ff0800;
 }
 
+/* 휴가 사원프로필 */
+.profile-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  padding: 0;
+}
+.profile-img {
+  transition: all 0.2s ease-in-out;
+}
+
+/* 오전/오후반차,저장버튼 */
+/* 버튼 기본 스타일 */
+.vac-btn {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+  display: inline-block;
+  font-weight: 400;
+  line-height: 1.53;
+  color: #697a8d;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+/* 마우스를 올렸을 때 */
+  .vac-btn:hover {
+  filter: brightness(90%);
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+  transform: scale(1.05);
+}
+/* 버튼이 눌렸을 때 */
+  .vac-btn:active {
+  transform: scale(0.9);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+/* 선택된 (눌린) 버튼 */
+.vac-btn.active {
+  border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+}
+.vac-btn-warning{
+  color: #fff;
+  background-color: #ffab00;
+  border-color: #ffab00;
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 171, 0, 0.4);
+}
+/* AM 버튼 (선택된 상태) */
+.vac-btn-warning.active {
+  background-color: #ffca2c !important;
+  color: black;
+}
+.vac-btn-info {
+    color: #fff;
+    background-color: #03c3ec;
+    border-color: #03c3ec;
+    box-shadow: 0 0.125rem 0.25rem 0 rgba(3, 195, 236, 0.4);
+}
+/* PM 버튼 (선택된 상태) */
+.vac-btn-info.active {
+  background-color: #0b5ed7 !important;
+  color: white;
+}
+/* 버튼 기본 (비활성화일 때 기본 녹색) */
+.btn-success {
+  font-size: 24px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+  background-color: #871919 !important;
+  color: white;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+/* 버튼 활성화 */
+.btn-success.active {
+  background-color: #ff0000 !important;
+  color: white !important;
+  border: 3px solid #eb9f9f !important;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+}
+/* 버튼 비활성화 */
+.btn-success.disabled {
+  background-color: #bbb8b8 !important;
+  color: white !important;
+  cursor: not-allowed !important;
+  box-shadow: none;
+  transform: none;
+  opacity: 0.5;
+}
+
+/* 작은 화면에서 버튼 크기 조정 */
+@media (max-width: 1600px) {
+  .count-btn {
+      width: 28px;
+      height: 28px;
+      font-size: 15px;
+  }
+  .count-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0px;
+      margin-bottom: 8px;
+  }
+  .count-value {
+      font-size: 20px;
+  }
+  .custom-button {
+      width: 45px;
+      height: 45px;
+      font-size: 22px;
+  }
+  .vac-grant-modal-title {
+      font-size: 16px;
+  }
+  .vac-modal-text {
+      font-size: 11px;
+  }
+  .vac-modal-title {
+      font-size: 14px;
+      margin-bottom: 10px;
+  }
+  .vacation-item {
+      font-size: 12px;
+      text-align: center;
+      margin-bottom: 5px;
+  }
+  .vac-btn {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+  }
+  .btn-success {
+    font-size: 20px;
+    width: 40px;
+    height: 40px;
+  }
+}
+
+  
 
 .grayscaleImg {
   filter: grayscale(100%);
@@ -222,6 +399,9 @@ opacity: 0.6; /* 흐려 보이게 */
   right: 1rem;
   z-index: 2;
   background-color: #fff !important;
+  border-radius: 0.5rem;
+  opacity: 1;
+  padding: 0.635rem;
   box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4);
   transition: all 0.23s ease 0.1s;
   transform: translate(23px, -25px);
@@ -233,7 +413,4 @@ opacity: 0.6; /* 흐려 보이게 */
   transform: translate(20px, -20px);
 }
 
-.end-project {
-  background-color: #ddd !important;
-}
 /* project list end */
\ No newline at end of file
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index c4fa6ee..aeb2ed2 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -1,30 +1,28 @@
 <template>
     <div class="menu gap-4 justify-content-center mt-5">
-      <!-- 오전 반차 버튼 -->
-      <button
-        class="btn btn-warning"
-        :class="{ active: halfDayType === 'AM' }"
-        @click="toggleHalfDay('AM')"
-      >
+        <!-- 오전 반차 버튼 -->
+        <button
+            class="vac-btn vac-btn-warning"
+            :class="{ active: halfDayType === 'AM' }"
+            @click="toggleHalfDay('AM')"
+        >
         <i class="bi bi-sun"></i>
-      </button>
-
-      <!-- 오후 반차 버튼 -->
-      <button
-        class="btn btn-info"
-        :class="{ active: halfDayType === 'PM' }"
-        @click="toggleHalfDay('PM')"
-      >
-        <i class="bi bi-moon"></i>
-      </button>
-
-      <!-- 저장 버튼 -->
-      <div class="save-button-container">
-        <button class="btn btn-success" @click="addVacationRequests"
-                :class="{ active: !isDisabled, disabled: isDisabled }">
-          ✔
         </button>
-      </div>
+        <!-- 오후 반차 버튼 -->
+        <button
+            class="vac-btn vac-btn-info"
+            :class="{ active: halfDayType === 'PM' }"
+            @click="toggleHalfDay('PM')"
+        >
+        <i class="bi bi-moon"></i>
+        </button>
+        <!-- 저장 버튼 -->
+        <div class="save-button-container">
+            <button class="btn-success" @click="addVacationRequests"
+                    :class="{ active: !isDisabled, disabled: isDisabled }">
+                ✔
+            </button>
+        </div>
     </div>
 </template>
 
@@ -32,113 +30,37 @@
 import { defineEmits, ref, defineProps, watch } from "vue";
 
 const props = defineProps({
-  isDisabled: Boolean,
-  selectedDate: String // 날짜 선택 값을 props로 받음
+isDisabled: Boolean,
+selectedDate: String // 날짜 선택 값을 props로 받음
 });
 
 const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
 const halfDayType = ref(null);
 
 const toggleHalfDay = (type) => {
-  halfDayType.value = halfDayType.value === type ? null : type;
-  emit("toggleHalfDay", halfDayType.value);
+halfDayType.value = halfDayType.value === type ? null : type;
+emit("toggleHalfDay", halfDayType.value);
 };
 
 // `selectedDate`가 변경되면 반차 선택 초기화
 watch(() => props.selectedDate, (newDate) => {
-  if (newDate) {
-    resetHalfDay();
-  }
+if (newDate) {
+resetHalfDay();
+}
 });
 
 // 날짜 선택 후 반차 버튼 상태 초기화
 const resetHalfDay = () => {
-  halfDayType.value = null;
-  emit("resetHalfDay");
+halfDayType.value = null;
+emit("resetHalfDay");
 };
 
 const addVacationRequests = () => {
-  emit("addVacationRequests");
+emit("addVacationRequests");
 };
 
 defineExpose({ resetHalfDay });
 </script>
 
 <style scoped>
-/* 버튼 기본 스타일 */
-.btn {
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  font-size: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease-in-out;
-}
-
-/* 마우스를 올렸을 때 */
-.btn:hover {
-  filter: brightness(90%);
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
-  transform: scale(1.05);
-}
-
-/* 버튼이 눌렸을 때 */
-.btn:active {
-  transform: scale(0.9);
-  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-/* 선택된 (눌린) 버튼 */
-.btn.active {
-  border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
-  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
-  transform: scale(1.1);
-}
-
-/* AM 버튼 (선택된 상태) */
-.btn-warning.active {
-  background-color: #ffca2c !important;
-  color: black;
-}
-
-/* PM 버튼 (선택된 상태) */
-.btn-info.active {
-  background-color: #0b5ed7 !important;
-  color: white;
-}
-
-/* ✔ 버튼 기본 (비활성화일 때 기본 녹색) */
-.btn-success {
-  font-size: 24px;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: all 0.2s ease-in-out;
-  background-color: #871919 !important;
-  color: white;
-}
-
-/* ✔ 버튼 활성화 */
-.btn-success.active {
-  background-color: #ff0000 !important;
-  color: white !important;
-  border: 3px solid #eb9f9f !important;
-  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
-  transform: scale(1.1);
-}
-
-/* ✔ 버튼 비활성화 */
-.btn-success.disabled {
-  background-color: #bbb8b8 !important;
-  color: white !important;
-  cursor: not-allowed !important;
-  box-shadow: none;
-  transform: none;
-  opacity: 0.5;
-}
 </style>
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index 82f8f72..ac977fd 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -1,129 +1,117 @@
 <template>
     <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
-        <div class="vac-modal-content p-5">
-            <div class="modal-header">
-                <h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
+        <div class="vac-modal-content">
+            <div class="vac-modal-header">
+                <h5 class="vac-grant-modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
                 <button class="close-btn" @click="closeModal">✖</button>
             </div>
-
-            <div class="modal-body">
-                <p>선물할 연차 개수를 선택하세요.</p>
-
-                <div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center mt-8">
-                <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
-                <span class="text-dark fw-bold fs-4">{{ grantCount }}</span>
-                <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
+            <div class="vac-modal-body">
+                <p class="vac-modal-text">선물할 연차 개수를 선택하세요.</p>
+                <div class="count-container">
+                    <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
+                    <span class="count-value">{{ grantCount }}</span>
+                    <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
                 </div>
-
                 <div class="custom-button-container">
-                <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
-                    <i class="bx bx-gift"></i>
-                </button>
+                    <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
+                        <i class="bx bx-gift"></i>
+                    </button>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
-  <script setup>
-  import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
-  import axios from "@api";
-  import { useToastStore } from '@s/toastStore';
+<script setup>
+import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
+import axios from "@api";
+import { useToastStore } from '@s/toastStore';
 
-  const toastStore = useToastStore();
-  const props = defineProps({
+const toastStore = useToastStore();
+const props = defineProps({
     isOpen: Boolean,
     targetUser: Object,
-  });
+});
 
-  const emit = defineEmits(["close", "updateVacation"]);
-  const grantCount = ref(0);
-  const maxQuota = 2;
-  const sentCount = ref(0);
-  const availableQuota = ref(2);
+const emit = defineEmits(["close", "updateVacation"]);
+const grantCount = ref(0);
+const maxQuota = 2;
+const sentCount = ref(0);
+const availableQuota = ref(2);
 
-  const fetchSentVacationCount = async () => {
+// 사원 별 남은 보내기 개수
+const fetchSentVacationCount = async () => {
     try {
-      const payload = { receiverId: props.targetUser.MEMBERSEQ };
-      const response = await axios.get("vacation/sent", { params: payload });
-      sentCount.value = response.data.data[0].count || 0;
-      availableQuota.value = Math.max(maxQuota - sentCount.value, 0);
-      grantCount.value = availableQuota.value; // ✅ 남은 개수로 기본값 설정
+        const payload = { receiverId: props.targetUser.MEMBERSEQ };
+        const response = await axios.get("vacation/sent", { params: payload });
+        sentCount.value = response.data.data[0]?.count || 0;
+        availableQuota.value = Math.max(maxQuota - sentCount.value, 0);
+        grantCount.value = availableQuota.value;
     } catch (error) {
-      console.error("🚨 연차 전송 기록 조회 실패:", error);
-      availableQuota.value = maxQuota;
-      grantCount.value = maxQuota; // 기본값 설정
+        console.error("🚨 연차 전송 기록 조회 실패:", error);
+        availableQuota.value = maxQuota;
+        grantCount.value = maxQuota;
     }
-  };
+};
 
-  const increaseCount = () => {
+// 개수 증가
+const increaseCount = () => {
     if (grantCount.value < availableQuota.value) {
-      grantCount.value++;
+        grantCount.value++;
     }
-  };
-
-  const decreaseCount = () => {
+};
+// 개수 감소
+const decreaseCount = () => {
     if (grantCount.value > 0) {
-      grantCount.value--;
+        grantCount.value--;
     }
-  };
+};
 
-  const saveVacationGrant = async () => {
+// 연차 선물하기
+const saveVacationGrant = async () => {
     try {
-      const payload = [
-        {
-          date: new Date().toISOString().split("T")[0],
-          type: "700103",
-          receiverId: props.targetUser.MEMBERSEQ,
-          count: grantCount.value,
-        },
-      ];
-      const response = await axios.post("vacation", payload);
-      if (response.data && response.data.status === "OK") {
-        toastStore.onToast('연차가 선물되었습니다.', 's');
-        await fetchSentVacationCount();
-        emit("updateVacation");
-        closeModal();
-      } else {
-       toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
-      }
+        const payload = [{
+            date: new Date().toISOString().split("T")[0],
+            type: "700103",
+            receiverId: props.targetUser.MEMBERSEQ,
+            count: grantCount.value,
+        }];
+        const response = await axios.post("vacation", payload);
+        if (response.data?.status === "OK") {
+            toastStore.onToast('연차가 선물되었습니다.', 's');
+            await fetchSentVacationCount();
+            emit("updateVacation");
+            closeModal();
+        } else {
+            toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
+        }
     } catch (error) {
-      console.error("🚨 연차 추가 실패:", error);
-      toastStore.onToast(' 연차 선물 실패!!.', 'e');
+        toastStore.onToast(' 연차 선물 실패!!.', 'e');
     }
-  };
+};
 
-  const closeModal = () => {
+// 모달 닫기기
+const closeModal = () => {
     emit("close");
-  };
+};
 
-  watch(
-    () => props.isOpen,
-    async (newVal) => {
-      if (newVal && props.targetUser && props.targetUser.MEMBERSEQ) {
+watch(() => props.isOpen, async (newVal) => {
+    if (newVal && props.targetUser?.MEMBERSEQ) {
         await fetchSentVacationCount();
-      }
     }
-  );
-
-  watch(
-    () => props.targetUser,
-    async (newUser) => {
-      if (newUser && newUser.MEMBERSEQ) {
+});
+watch(() => props.targetUser, async (newUser) => {
+    if (newUser?.MEMBERSEQ) {
         await fetchSentVacationCount();
-      }
-    },
-    { deep: true }
-  );
-
-  onMounted(async () => {
-    if (props.isOpen && props.targetUser && props.targetUser.MEMBERSEQ) {
-      await fetchSentVacationCount();
     }
-  });
-  </script>
+}, { deep: true });
 
+onMounted(async () => {
+    if (props.isOpen && props.targetUser?.MEMBERSEQ) {
+        await fetchSentVacationCount();
+    }
+});
+</script>
 
 <style scoped>
-
 </style>
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index 22db837..2592d53 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,141 +1,122 @@
 <template>
     <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
-      <div class="vac-modal-content p-5 modal-scroll">
-        <h5 class="modal-title">📅 내 연차 사용 내역</h5>
-        <button class="close-btn" @click="closeModal">✖</button>
-
-        <!-- 연차 목록 -->
-        <div class="modal-body" v-if="mergedVacations.length > 0">
-          <ol class="list-group-numbered px-0 mt-4">
-            <li
-              v-for="(vac, index) in mergedVacations"
-              :key="vac._expandIndex"
-              class="vacation-item"
-            >
-              <!-- Used 항목만 인덱스 표시 -->
-              <span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
-                {{ usedVacationIndexMap[vac._expandIndex] }})
-              </span>
-
-              <span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
-                {{ vac.category === 'used' ? '-' : '+' }}
-              </span>
-
-              <span
-                :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
-              >
-                {{ formatDate(vac.date) }}
-              </span>
-            </li>
-          </ol>
+        <div class="vac-modal-content p-5 modal-scroll">
+            <h5 class="vac-modal-title">📅 내 연차 사용 내역</h5>
+            <button class="close-btn" @click="closeModal">✖</button>
+            <!-- 연차 목록 -->
+            <div class="vac-modal-body" v-if="mergedVacations.length > 0">
+                <ol class="list-group-numbered px-0 mt-4">
+                <li
+                    v-for="(vac, index) in mergedVacations"
+                    :key="vac._expandIndex"
+                    class="vacation-item"
+                >
+                    <span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
+                        {{ usedVacationIndexMap[vac._expandIndex] }})
+                    </span>
+                    <span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
+                        {{ vac.category === 'used' ? '-' : '+' }}
+                    </span>
+                    <span
+                    :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
+                    >
+                        {{ formatDate(vac.date) }}
+                    </span>
+                </li>
+                </ol>
+            </div>
+            <!-- 연차 데이터 없음 -->
+            <p v-else class="text-sm-center mt-10 text-gray">
+                🚫 사용한 연차가 없습니다.
+            </p>
         </div>
-
-        <!-- 연차 데이터 없음 -->
-        <p v-else class="text-sm-center mt-10 text-gray">
-          🚫 사용한 연차가 없습니다.
-        </p>
-      </div>
     </div>
-  </template>
+</template>
 
 <script setup>
 import { defineProps, defineEmits, computed } from "vue";
 import { formatDate } from '@/common/formattedDate.js';
 
 const props = defineProps({
-  isOpen: Boolean,
-  myVacations: {
-    type: Array,
-    default: () => [],
-  },
-  receivedVacations: {
-    type: Array,
-    default: () => [],
-  },
-  userColors: {
-    type: Object,
-    default: () => ({}),
-  },
+    isOpen: Boolean,
+    myVacations: {
+        type: Array,
+        default: () => [],
+    },
+    receivedVacations: {
+        type: Array,
+        default: () => [],
+    },
+    userColors: {
+        type: Object,
+        default: () => ({}),
+    },
 });
 
 const emit = defineEmits(["close"]);
 
-/**
- * 1) Used 휴가를 used_quota만큼 펼치기
- *    - category: "used"
- *    - code: 휴가 코드(예: LOCVACTYP)
- *    - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
- */
-let globalCounter = 0; // 확장 시 사용할 전역 카운터
+// 사용한 휴가(선물,연차사용)
+let globalCounter = 0;
 const usedVacations = computed(() => {
-  const result = [];
-  props.myVacations.forEach((v) => {
-    const count = v.used_quota || 1;
-    for (let i = 0; i < count; i++) {
-      result.push({
-        ...v,
-        category: "used",
-        code: v.LOCVACTYP,         // 휴가 코드 (700103 등)
-        _expandIndex: globalCounter++,
-      });
-    }
-  });
-  return result;
+    const result = [];
+    props.myVacations.forEach((v) => {
+        const count = v.used_quota || 1;
+        for (let i = 0; i < count; i++) {
+            result.push({
+                ...v,
+                category: "used",
+                code: v.LOCVACTYP,
+                _expandIndex: globalCounter++,
+            });
+        }
+    });
+    return result;
 });
 
-/**
- * 2) Received 휴가: category: "received"
- */
+// 받은 휴가
 const receivedVacations = computed(() =>
-  props.receivedVacations.map((v) => ({
-    ...v,
-    category: "received",
-  }))
+    props.receivedVacations.map((v) => ({
+        ...v,
+        category: "received",
+    }))
 );
 
-/**
- * 3) Used 휴가만 날짜 오름차순 정렬 → 누적 인덱스 계산
- *    - type === "700103"이면 +1
- *    - 그 외이면 +0.5
- */
+// 필터링
 const sortedUsedVacationsAsc = computed(() => {
-  return [...usedVacations.value].sort((a, b) => {
-    return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
-  });
+    return [...usedVacations.value].sort((a, b) => {
+        return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
+    });
 });
 
+// 누적 인덱스 계산 type === "700103"이면 +1 그 외이면 +0.5
 const usedVacationIndexMap = computed(() => {
-  let cumulative = 0;
-  const map = {};
-  sortedUsedVacationsAsc.value.forEach((item) => {
-    const increment = item.type === "700103" ? 1 : 0.5;
-    cumulative += increment;
-    map[item._expandIndex] = cumulative;
-  });
-  return map;
+    let cumulative = 0;
+    const map = {};
+    sortedUsedVacationsAsc.value.forEach((item) => {
+        const increment = item.type === "700103" ? 1 : 0.5;
+        cumulative += increment;
+        map[item._expandIndex] = cumulative;
+    });
+    return map;
 });
 
-/**
- * 4) 최종 표시할 merged 리스트 (Used + Received)
- *    - 날짜 내림차순 정렬 (최신 → 과거)
- */
+// 최종 표시할 merged 리스트 (Used + Received) 날짜 내림차순 정렬 (최신 → 과거)
 const mergedVacations = computed(() => {
-  const all = [...usedVacations.value, ...receivedVacations.value];
-  // 날짜 내림차순 + 확장 인덱스 내림차순
-  all.sort((a, b) => {
-    const dateDiff = new Date(b.date) - new Date(a.date);
-    if (dateDiff !== 0) return dateDiff;
-    return b._expandIndex - a._expandIndex;
-  });
-  return all;
+    const all = [...usedVacations.value, ...receivedVacations.value];
+    // 날짜 내림차순 + 확장 인덱스 내림차순
+    all.sort((a, b) => {
+        const dateDiff = new Date(b.date) - new Date(a.date);
+        if (dateDiff !== 0) return dateDiff;
+        return b._expandIndex - a._expandIndex;
+    });
+    return all;
 });
 
-
-/** 모달 닫기 */
+// 모달 닫기
 const closeModal = () => {
   emit("close");
 };
 </script>
+<style scoped>
+</style>
 
-  <style scoped>
-  </style>
diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index 9e06036..7fa0981 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -1,136 +1,115 @@
 <template>
     <div class="card-body d-flex justify-content-center m-n5">
-      <ul class="list-unstyled d-flex flex-wrap align-items-center gap-2 mb-0 mt-2">
-        <li
-          v-for="(user, index) in sortedUserList"
-          :key="index"
-          :class="{ disabled: user.disabled }"
-          @click="$emit('profileClick', user)"
-          data-bs-placement="top"
-          :aria-label="user.MEMBERSEQ"
-        >
-          <img
-            class="rounded-circle"
-            :src="getUserProfileImage(user.MEMBERPRF)"
-            alt="user"
-            :style="getDynamicStyle(user)"
-            @error="setDefaultImage"
-            @load="showImage"
-          />
-          <span class="remaining-vacation">
-            {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
-          </span>
-        </li>
-      </ul>
+        <ul class="list-unstyled profile-list">
+            <li
+                v-for="(user, index) in sortedUserList"
+                :key="index"
+                :class="{ disabled: user.disabled }"
+                @click="$emit('profileClick', user)"
+                data-bs-placement="top"
+                :aria-label="user.MEMBERSEQ"
+            >
+                <img
+                    class="rounded-circle profile-img"
+                    :src="getUserProfileImage(user.MEMBERPRF)"
+                    alt="user"
+                    :style="getDynamicStyle(user)"
+                    @error="setDefaultImage"
+                    @load="showImage"
+                />
+                <span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
+                    {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
+                </span>
+            </li>
+        </ul>
     </div>
-  </template>
+</template>
 
-  <script setup>
-  import { onMounted, ref, computed, nextTick } from "vue";
-  import { useUserInfoStore } from "@s/useUserInfoStore";
-  import { useUserStore } from "@s/userList";
-  import $api from "@api";
+<script setup>
+import { onMounted, ref, computed, nextTick } from "vue";
+import { useUserInfoStore } from "@s/useUserInfoStore";
+import { useUserStore } from "@s/userList";
+import $api from "@api";
 
-  defineEmits(["profileClick"]);
+defineEmits(["profileClick"]);
+defineProps({ remainingVacationData: Object });
 
-  defineProps({
-    remainingVacationData: Object,
-  });
+const userStore = useUserInfoStore();
+const userListStore = useUserStore();
 
-  const userStore = useUserInfoStore();
-  const userListStore = useUserStore();
+const userList = ref([]);
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
+const defaultProfile = "/img/icons/icon.png";
+const employeeId = ref(null);
+const userColors = ref({});
+const windowWidth = ref(window.innerWidth);
 
-  const userList = ref([]);
-  const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
-  const defaultProfile = "/img/icons/icon.png";
-  const employeeId = ref(null);
-  const userColors = ref({});
+const updateWindowWidth = () => {
+windowWidth.value = window.innerWidth;
+};
 
-  onMounted(async () => {
-    await userStore.userInfo();
-    if (userStore.user) {
-      employeeId.value = userStore.user.id;
-    } else {
-      console.error("❌ 로그인한 사용자 정보를 불러오지 못했습니다.");
-    }
+onMounted(async () => {
+window.addEventListener("resize", updateWindowWidth);
 
-    await userListStore.fetchUserList();
-    userList.value = userListStore.userList;
+await userStore.userInfo();
+employeeId.value = userStore.user?.id ?? null;
 
-    // 사용자별 색상 저장
-    userList.value.forEach(user => {
-      userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
+await userListStore.fetchUserList();
+userList.value = userListStore.userList;
+
+userList.value.forEach(user => {
+    userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
+});
+
+nextTick(() => {
+    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltip => {
+    new bootstrap.Tooltip(tooltip);
     });
+});
+});
 
-    nextTick(() => {
-      const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-      tooltips.forEach(tooltip => {
-        new bootstrap.Tooltip(tooltip);
-      });
-    });
-  });
+const sortedUserList = computed(() => {
+if (!employeeId.value) return userList.value;
+const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
+const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
+return myProfile ? [myProfile, ...otherUsers] : userList.value;
+});
 
-  const sortedUserList = computed(() => {
-    if (!employeeId.value) return userList.value; // 로그인한 사용자가 없으면 기존 리스트 반환
-    const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
-    const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
+const getUserProfileImage = (profilePath) =>
+profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
 
-    return myProfile ? [myProfile, ...otherUsers] : userList.value;
-  });
+const setDefaultImage = (event) => (event.target.src = defaultProfile);
+const showImage = (event) => (event.target.style.visibility = "visible");
 
-  // 프로필 이미지 URL 반환
-  const getUserProfileImage = (profilePath) => {
-    return profilePath && profilePath.trim()
-      ? `${baseUrl}upload/img/profile/${profilePath}`
-      : defaultProfile;
-  };
+// 화면 크기에 따라 프로필 크기 동적 조정
+const profileSize = computed(() => {
+const totalUsers = userList.value.length;
 
-  const setDefaultImage = (event) => {
-    event.target.src = defaultProfile;
-  };
+if (windowWidth.value >= 1650) {
+    if (totalUsers <= 10) return "68px";
+    if (totalUsers <= 15) return "55px";
+    return "45px";
+} else if (windowWidth.value >= 1300) {
+    if (totalUsers <= 10) return "45px";
+    if (totalUsers <= 15) return "40px";
+    return "30px";
+} else if (windowWidth.value >= 1024) {
+    if (totalUsers <= 10) return "40px";
+    if (totalUsers <= 15) return "30px";
+    return "20px";
+} else {
+    return "20px";
+}
+});
 
-  const showImage = (event) => {
-    event.target.style.visibility = "visible";
-  };
+const getDynamicStyle = (user) => ({
+width: profileSize.value,
+height: profileSize.value,
+borderWidth: "4px",
+borderColor: user.usercolor || "#ccc",
+borderStyle: "solid",
+});
+</script>
 
-  // 프로필 크기 동적 조정: 사이드바 영역에 맞게 조금 더 축소
-  const profileSize = computed(() => {
-    const totalUsers = userList.value.length;
-    if (totalUsers <= 10) return "68px"; // ~10명
-    if (totalUsers <= 15) return "50px"; // ~20명
-    return "30px"; // 20명 이상
-  });
-
-  // 개별 유저 스타일 적용
-  const getDynamicStyle = (user) => {
-    return {
-      width: profileSize.value,
-      height: profileSize.value,
-      borderWidth: "4px",
-      borderColor: user.usercolor || "#ccc",
-      borderStyle: "solid",
-    };
-  };
-  </script>
-
-  <style scoped>
-  /* 남은 연차 개수 스타일 */
-  .remaining-vacation {
-    display: block;
-    text-align: center;
-    font-size: 14px;
-    color: #333;
-    margin-top: 5px;
-  }
-
-  /* ul에 flex-wrap을 적용하여 넘치는 프로필이 다음 줄로 내려가도록 함 */
-  ul {
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  /* li 간 간격 조정 */
-  li {
-    margin: 5px;
-  }
-  </style>
+<style scoped>
+</style>
diff --git a/src/layouts/NormalLayout.vue b/src/layouts/NormalLayout.vue
index 08cef90..dd006b5 100644
--- a/src/layouts/NormalLayout.vue
+++ b/src/layouts/NormalLayout.vue
@@ -7,6 +7,7 @@
             <div class="layout-page">
                 <!-- Top -->
                 <TheTop />
+
                 <!-- Content -->
                 <div class="content-wrapper">
                     <slot name="content"> body </slot>
@@ -14,6 +15,7 @@
                     <div class="content-backdrop fade"></div>
                 </div>
             </div>
+            <TheChat />
         </div>
 
         <!-- Overlay -->
@@ -27,6 +29,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 +48,26 @@
         loadScript('/js/main.js');
     });
 </script>
-<style></style>
+<style>
+    /* 중앙 콘텐츠 자동 조정 */
+    .layout-page {
+        flex-grow: 1;
+        min-width: 0; /* flexbox 내에서 올바른 크기 계산 */
+        margin-right: 20%; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
+    }
+
+    /* top bar 고정1 */
+    .layout-navbar-fixed .layout-navbar {
+        position: relative;
+        top: 0;
+        right: auto;
+        left: 0 !important;
+        width: 96% !important;
+        padding-top: 0 !important;
+    }
+
+    /* top bar 고정2 */
+    .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
+        padding-top: 0 !important;
+    }
+</style>
diff --git a/src/layouts/TheChat.vue b/src/layouts/TheChat.vue
new file mode 100644
index 0000000..8102d8d
--- /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: 20%;
+    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..d3c4fae 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -1,569 +1,517 @@
 <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 플러그인 임포트
+// 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 +519,53 @@ 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;
-  overflow-y: auto;
-}
-  </style>
+    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 = '25%';
+            dpEl.style.left = '50%';
+            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>
+</style>