From 91d2492c13d8665dc3036ea9bcf4ccd66ab13cd3 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 20 Feb 2025 15:21:08 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9C=B4=EA=B0=80=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/HalfDayButtons.vue    |  24 +-
 src/components/modal/VacationGrantModal.vue |   4 +-
 src/components/modal/VacationModal.vue      | 275 +++++++++++---------
 src/components/vacation/ProfileList.vue     |  12 +-
 src/views/vacation/VacationManagement.vue   | 209 +++++++++------
 5 files changed, 305 insertions(+), 219 deletions(-)

diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index 2dc31e0..83f4c35 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -22,21 +22,21 @@
     </div>
   </template>
 
-  <script setup>
-  import { defineEmits, ref } from "vue";
+<script setup>
+import { defineEmits, ref } from "vue";
 
-  const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
-  const halfDayType = ref(null);
+const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
+const halfDayType = ref(null);
 
-  const toggleHalfDay = (type) => {
-    halfDayType.value = halfDayType.value === type ? null : type;
-    emit("toggleHalfDay", halfDayType.value);
-  };
+const toggleHalfDay = (type) => {
+  halfDayType.value = halfDayType.value === type ? null : type;
+  emit("toggleHalfDay", halfDayType.value);
+};
 
-  const addVacationRequests = () => {
-    emit("addVacationRequests");
-  };
-  </script>
+const addVacationRequests = () => {
+  emit("addVacationRequests");
+};
+</script>
 
   <style scoped>
 
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index 37269ff..206879a 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -68,12 +68,12 @@
         {
           date: new Date().toISOString().split("T")[0],
           type: "700103",
-          senderId: props.targetUser.senderId,
           receiverId: props.targetUser.MEMBERSEQ,
           count: grantCount.value,
         },
       ];
-
+      console.log(props.targetUser)
+      console.log(payload)
       const response = await axios.post("vacation", payload);
         console.log(response)
       if (response.data && response.data.status === "OK") {
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index fd27de0..d447ebf 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,116 +1,164 @@
 <template>
     <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-        <div class="modal-content modal-scroll">
-            <h5 class="modal-title">📅 내 연차 사용 내역</h5>
-            <button class="close-btn" @click="closeModal">✖</button>
+      <div class="modal-content 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="vacation-list">
-                    <li v-for="(vacation, index) in mergedVacations" :key="index" class="vacation-item">
-                        <span v-if="vacation.type === 'used'" class="vacation-index">
-                            {{ getVacationIndex(index) }})
-                        </span>
-                        <span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
-                            {{ vacation.type === 'used' ? '-' : '+' }}
-                        </span>
-                        <span
-                            :style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
-                            class="vacation-date"
-                        >
-                            {{ formatDate(vacation.date) }}
-                        </span>
-                    </li>
-                </ol>
-            </div>
+        <!-- 연차 목록 -->
+        <div class="modal-body" v-if="mergedVacations.length > 0">
+          <ol class="vacation-list">
+            <li
+              v-for="(vac, index) in mergedVacations"
+              :key="vac._expandIndex"
+              class="vacation-item"
+            >
+              <!-- Used 항목만 인덱스 표시 -->
+              <span v-if="vac.category === 'used'" class="vacation-index">
+                {{ usedVacationIndexMap[vac._expandIndex] }})
+              </span>
 
-            <!-- 연차 데이터 없음 -->
-            <p v-if="mergedVacations.length === 0" class="no-data">
-                🚫 사용한 연차가 없습니다.
-            </p>
+              <span :class="vac.category === 'used' ? 'minus-symbol' : 'plus-symbol'">
+                {{ vac.category === 'used' ? '-' : '+' }}
+              </span>
+
+              <span
+                :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
+                class="vacation-date"
+              >
+                {{ formatDate(vac.date) }}
+              </span>
+            </li>
+          </ol>
         </div>
+
+        <!-- 연차 데이터 없음 -->
+        <p v-else class="no-data">
+          🚫 사용한 연차가 없습니다.
+        </p>
+      </div>
     </div>
-</template>
+  </template>
 
 <script setup>
 import { defineProps, defineEmits, computed } from "vue";
 
 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"]);
 
-// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
-const usedVacations = computed(() =>
-    props.myVacations.map(v => ({ ...v, type: "used" }))
-);
-
-const receivedVacations = computed(() =>
-    props.receivedVacations.map(v => ({ ...v, type: "received" }))
-);
-
-// ✅ 정확한 정렬 및 리스트 병합
-const mergedVacations = computed(() => {
-    return [...usedVacations.value, ...receivedVacations.value].sort(
-        (a, b) => new Date(b.date) - new Date(a.date)
-    );
+/**
+ * 1) Used 휴가를 used_quota만큼 펼치기
+ *    - category: "used"
+ *    - code: 휴가 코드(예: LOCVACTYP)
+ *    - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
+ */
+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 getVacationIndex = (index) => {
-    let count = 0;
-    for (let i = 0; i <= index; i++) {
-        const v = mergedVacations.value[i];
-        count += v.used_quota; // 누적하여 더함
-    }
-    return count;
-};
+/**
+ * 2) Received 휴가: category: "received"
+ */
+const receivedVacations = computed(() =>
+  props.receivedVacations.map((v) => ({
+    ...v,
+    category: "received",
+  }))
+);
 
-// ✅ 날짜 형식 변환 (YYYY-MM-DD)
+/**
+ * 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);
+  });
+});
+
+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;
+});
+
+/**
+ * 4) 최종 표시할 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;
+});
+
+/** 날짜 포맷 (YYYY-MM-DD) */
 const formatDate = (dateString) => {
-    const date = new Date(dateString);
-    return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
+  if (!dateString) return "";
+  // 만약 dateString이 "YYYY-MM-DD" 형식이라면 그대로 반환
+  // 혹은 "YYYY-MM-DD..." 라면 앞 10자만 잘라 반환
+  return dateString.substring(0, 10);
 };
 
+
+/** 모달 닫기 */
 const closeModal = () => {
-    emit("close");
+  emit("close");
 };
 </script>
 
-<style scoped>
-/* 모달 스타일 */
-.modal-dialog {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-/* 스크롤 가능한 모달 */
-.modal-content {
-    max-height: 60vh;
-    overflow-y: auto;
-    padding: 20px;
-    width: 75%;
+  <style scoped>
+  /* 모달 본문 */
+  .modal-content {
     background: white;
-    border-radius: 8px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-}
+    padding: 20px;
+    border-radius: 12px;
+    width: 400px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
+    text-align: center;
+    position: relative;
+  }
 
-/* 닫기 버튼 */
-.close-btn {
+  /* 닫기 버튼 */
+  .close-btn {
     position: absolute;
     top: 10px;
     right: 10px;
@@ -118,18 +166,17 @@ const closeModal = () => {
     border: none;
     font-size: 18px;
     cursor: pointer;
-    font-weight: bold;
-}
+  }
 
-/* 리스트 기본 스타일 */
-.vacation-list {
+  /* 리스트 기본 스타일 */
+  .vacation-list {
     list-style-type: none;
     padding-left: 0;
     margin-top: 15px;
-}
+  }
 
-/* 리스트 아이템 */
-.vacation-item {
+  /* 리스트 아이템 */
+  .vacation-item {
     display: flex;
     align-items: center;
     font-size: 16px;
@@ -138,49 +185,41 @@ const closeModal = () => {
     padding: 5px 10px;
     border-radius: 5px;
     background: #f9f9f9;
-}
+  }
 
-/* 인덱스 (연차 사용 개수) */
-.vacation-index {
+  /* 인덱스 (연차 사용 개수) */
+  .vacation-index {
     font-weight: bold;
     font-size: 16px;
     margin-right: 8px;
     color: #333;
-}
+  }
 
-/* "-" 빨간색 */
-.minus-symbol {
+  /* "-" 빨간색 */
+  .minus-symbol {
     color: red;
     font-weight: bold;
     margin-right: 8px;
-}
+  }
 
-/* "+" 파란색 */
-.plus-symbol {
+  /* "+" 파란색 */
+  .plus-symbol {
     color: blue;
     font-weight: bold;
     margin-right: 8px;
-}
+  }
 
-/* 날짜 스타일 */
-.vacation-date {
+  /* 날짜 스타일 */
+  .vacation-date {
     font-size: 16px;
     color: #333;
-}
+  }
 
-/* 연차 유형 스타일 */
-.vacation-type {
-    font-size: 14px;
-    font-weight: normal;
-    color: gray;
-    margin-left: 5px;
-}
-
-/* 연차 데이터 없음 */
-.no-data {
+  /* 연차 데이터 없음 */
+  .no-data {
     text-align: center;
     font-size: 14px;
     color: gray;
     margin-top: 10px;
-}
-</style>
+  }
+  </style>
diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index 526537c..ae2d257 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card-body d-flex justify-content-center">
-      <ul class="list-unstyled d-flex align-items-center gap-3 mb-0 mt-2">
+      <ul class="list-unstyled d-flex align-items-center gap-5 mb-0 mt-2">
         <li
           v-for="(user, index) in sortedUserList"
           :key="index"
@@ -10,7 +10,7 @@
           :aria-label="user.MEMBERSEQ"
         >
           <img
-            class="rounded-circle user-avatar "
+            class="rounded-circle"
             :src="getUserProfileImage(user.MEMBERPRF)"
             alt="user"
             :style="getDynamicStyle(user)"
@@ -96,10 +96,10 @@
   const profileSize = computed(() => {
     const totalUsers = userList.value.length;
 
-    if (totalUsers <= 7) return "120px"; // 7명 이하
-    if (totalUsers <= 10) return "100px"; // ~10명
-    if (totalUsers <= 20) return "80px"; // ~20명
-    return "60px"; // 20명 이상
+    if (totalUsers <= 7) return "100px"; // 7명 이하
+    if (totalUsers <= 10) return "80px"; // ~10명
+    if (totalUsers <= 20) return "60px"; // ~20명
+    return "40px"; // 20명 이상
   });
 
   // 개별 유저 스타일 적용
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index bfb72c6..2412d73 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -9,16 +9,16 @@
                     @profileClick="handleProfileClick"
                     :remainingVacationData="remainingVacationData"
                     />
-                <div class="card-body">
+                <div class="card-body w-75 p-3 align-self-center">
                     <VacationModal
                     v-if="isModalOpen"
                     :isOpen="isModalOpen"
                     :myVacations="myVacations"
                     :receivedVacations="receivedVacations"
                     :userColors="userColors"
-                    @click="handleProfileClick(user)"
                     @close="isModalOpen = false"
                     />
+
                     <VacationGrantModal
                       v-if="isGrantModalOpen"
                       :isOpen="isGrantModalOpen"
@@ -34,7 +34,7 @@
                     />
                     <HalfDayButtons
                     @toggleHalfDay="toggleHalfDay"
-                    @addVacationRequests="addVacationRequests"
+                    @addVacationRequests="saveVacationChanges"
                     />
                 </div>
                 </div>
@@ -99,7 +99,6 @@ const handleProfileClick = async (user) => {
     if (user.MEMBERSEQ === userStore.user.id) {
       // 내 프로필을 클릭한 경우
       const response = await axios.get(`vacation/history`);
-      console.log(response)
 
       if (response.status === 200 && response.data) {
         myVacations.value = response.data.data.usedVacations || [];
@@ -188,23 +187,28 @@ const getVacationType = (typeCode) => {
   return vacationCodeMap.value[typeCode] || "기타";
 };
 
-/**
- * API 이벤트(fetchedEvents)와 사용자가 선택한 날짜(selectedDates)를 병합하여
- * calendarEvents를 업데이트하는 함수
- * - 선택 이벤트는 display: "background" 옵션을 사용하여 배경으로 표시
- * - 선택된 타입에 따라 클래스(selected-am, selected-pm, selected-full)를 부여함
- */
+
 function updateCalendarEvents() {
-const selectedEvents = Array.from(selectedDates.value).map(([date, type]) => {
-    return {
-    title: getVacationType(type),
-    start: date,
-    backgroundColor: "rgba(0, 128, 0, 0.3)",
-    display: "background",
-    classNames: [getVacationTypeClass(type)],
-    };
-});
-calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
+  // 신규 선택한 연차(추가 대상): type이 "delete"가 아닌 항목
+  const selectedEvents = Array.from(selectedDates.value)
+    .filter(([date, type]) => type !== "delete")
+    .map(([date, type]) => ({
+      title: getVacationType(type),
+      start: date,
+      backgroundColor: "rgba(0, 128, 0, 0.3)",
+      display: "background",
+      classNames: [getVacationTypeClass(type)]
+    }));
+
+  // 기존 백엔드에서 불러온 저장된 연차 이벤트 중,
+  // 해당 날짜가 삭제 대상으로 표시되어 있으면 제거
+  const filteredFetchedEvents = fetchedEvents.value.filter(event => {
+    if (event.saved) { // saved 플래그가 있는 이벤트는 저장된 연차
+      return selectedDates.value.get(event.start) !== "delete";
+    }
+    return true;
+  });
+  calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
 }
 
 /**
@@ -221,30 +225,46 @@ calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
  * - 주말(토, 일)과 공휴일은 클릭되지 않음
  * - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
  */
-function handleDateClick(info) {
-const clickedDateStr = info.dateStr;
-const clickedDate = info.date;
+ function handleDateClick(info) {
+  const clickedDateStr = info.dateStr; // "YYYY-MM-DD" 형식
+  const clickedDate = info.date;
+  const todayStr = new Date().toISOString().split("T")[0];
 
-// 주말 (토:6, 일:0)은 클릭 무시
-if (clickedDate.getDay() === 0 || clickedDate.getDay() === 6) {
+  // 주말, 공휴일, 오늘 이전 날짜는 클릭 불가
+  if (
+    clickedDate.getDay() === 0 ||
+    clickedDate.getDay() === 6 ||
+    holidayDates.value.has(clickedDateStr) ||
+    clickedDateStr < todayStr
+  ) {
     return;
-}
-// 공휴일이면 클릭 무시
-if (holidayDates.value.has(clickedDateStr)) {
-    return;
-}
-if (!selectedDates.value.has(clickedDateStr)) {
-    const type = halfDayType.value
-    ? halfDayType.value === "AM"
-        ? "700101"
-        : "700102"
-    : "700103";
-    selectedDates.value.set(clickedDateStr, type);
-} else {
+  }
+
+  // 토글: 이미 선택된 날짜라면 해제
+  if (selectedDates.value.has(clickedDateStr)) {
     selectedDates.value.delete(clickedDateStr);
-}
-halfDayType.value = null;
-updateCalendarEvents();
+    updateCalendarEvents();
+    return;
+  }
+
+  // 저장된(보낸사람 없는) 연차가 있는지 확인
+  const unsentVacation = myVacations.value.find(
+    (vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
+  );
+
+  if (unsentVacation) {
+    // 기존 저장된 연차가 있다면, 클릭 시 "delete" 플래그 지정 (즉, 숨김 처리)
+    selectedDates.value.set(clickedDateStr, "delete");
+  } else {
+    // 그렇지 않으면 신규 연차 추가: halfDayType 값에 따라 결정
+    const type = halfDayType.value
+      ? (halfDayType.value === "AM" ? "700101" : "700102")
+      : "700103";
+    selectedDates.value.set(clickedDateStr, type);
+  }
+
+  halfDayType.value = null;
+  updateCalendarEvents();
 }
 
 /**
@@ -257,66 +277,93 @@ halfDayType.value = halfDayType.value === type ? null : type;
 /**
  * 백엔드에서 휴가 데이터를 가져와 이벤트로 변환
  */
-async function fetchVacationData(year, month) {
-try {
+ async function fetchVacationData(year, month) {
+  try {
     const response = await axios.get(`vacation/list/${year}/${month}`);
-    if (response.status == 200) {
-    const vacationList = response.data;
-    const events = vacationList
+    if (response.status === 200) {
+      const vacationList = response.data;
+      // 내 연차 데이터 업데이트 (사용자 본인의 연차만)
+      myVacations.value = vacationList.filter(
+        (vac) => vac.MEMBERSEQ === userStore.user.id
+      );
+      // 기존 저장된 연차 이벤트에 saved 플래그 추가
+      const events = vacationList
+        .filter((vac) => !vac.LOCVACRMM) // 보낸사람이 없는(저장된) 연차
         .map((vac) => {
-        let dateStr = vac.LOCVACUDT.split("T")[0];
-        let className = "fc-daygrid-event";
-        let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
-        return {
+          let dateStr = vac.LOCVACUDT.split("T")[0];
+          let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
+          return {
             title: getVacationType(vac.LOCVACTYP),
             start: dateStr,
             backgroundColor,
             classNames: [getVacationTypeClass(vac.LOCVACTYP)],
-        };
+            saved: true, // saved 플래그 추가
+          };
         })
         .filter((event) => event !== null);
-    return events;
+      return events;
     } else {
-    console.warn("📌 휴가 데이터를 불러오지 못함");
-    return [];
+      console.warn("📌 휴가 데이터를 불러오지 못함");
+      return [];
     }
-} catch (error) {
+  } catch (error) {
     console.error("Error fetching vacation data:", error);
     return [];
-}
+  }
 }
 
 /**
  * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
  */
-async function addVacationRequests() {
-if (selectedDates.value.size === 0) {
-    alert("휴가를 선택해주세요.");
-    return;
-}
-const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
-    date,
-    type,
-}));
-try {
-    const response = await axios.post("vacation", vacationRequests);
+ async function saveVacationChanges() {
+  // 추가할 연차: selectedDates 항목 중 type이 "delete"가 아닌 경우
+  const selectedDatesArray = Array.from(selectedDates.value);
+  const vacationsToAdd = selectedDatesArray
+    .filter(([date, type]) => type !== "delete")
+    .filter(([date, type]) =>
+      // 기존 데이터에 없거나, 기존 데이터에 있더라도 보낸사람(LOCVACRMM)이 있는 경우 추가
+      !myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date)) ||
+      myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
+    )
+    .map(([date, type]) => ({ date, type }));
+
+  // 삭제할 연차: 기존 데이터 중 보낸사람이 없는 항목에서,
+  // 해당 날짜가 "delete"로 지정되었거나 선택되지 않은 경우
+  const vacationsToDelete = myVacations.value
+  .filter(vac => {
+    const date = vac.LOCVACUDT.split("T")[0];
+    // 오직 해당 날짜가 "delete"로 선택된 경우만 삭제 대상으로 처리
+    return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
+  })
+  .map(vac => {
+    const id = vac.LOCVACSEQ ;
+    return typeof id === "number" ? Number(id) : id;
+  });
+
+
+  console.log("vacationsToAdd:", vacationsToAdd);
+  console.log("vacationsToDelete:", vacationsToDelete);
+
+  try {
+    const response = await axios.post("vacation/batchUpdate", {
+      add: vacationsToAdd,
+      delete: vacationsToDelete
+    });
     if (response.data && response.data.status === "OK") {
-    alert("휴가가 저장되었습니다.");
-    await fetchRemainingVacation();
-    // 저장 후 현재 달 데이터 다시 불러오기
-    const currentDate = fullCalendarRef.value.getApi().getDate();
-    const year = currentDate.getFullYear();
-    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
-    loadCalendarData(year, month);
-    selectedDates.value.clear();
-    updateCalendarEvents();
+      alert("✅ 휴가 변경 사항이 저장되었습니다.");
+      await fetchRemainingVacation();
+      const currentDate = fullCalendarRef.value.getApi().getDate();
+      await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
+      // 초기화: 선택한 날짜 해제
+      selectedDates.value.clear();
+      updateCalendarEvents();
     } else {
-    alert("휴가 저장 중 오류가 발생했습니다.");
+      alert("❌ 휴가 저장 중 오류가 발생했습니다.");
     }
-} catch (error) {
-    console.error(error);
-    alert("휴가 저장에 실패했습니다.");
-}
+  } catch (error) {
+    console.error("🚨 휴가 변경 저장 실패:", error);
+    alert("❌ 휴가 저장 요청에 실패했습니다.");
+  }
 }
 
 /**