From 6e4382f473d571a16a3c85c8c16dcee6371cfe22 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Fri, 21 Feb 2025 14:34:35 +0900
Subject: [PATCH] =?UTF-8?q?board-comment=20=EB=8B=A4=EC=8B=9C=EB=A8=B8?=
 =?UTF-8?q?=EC=A7=80=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardProfile.vue     |   2 +-
 src/views/board/BoardList.vue             |   6 +-
 src/views/board/BoardView.vue             |  28 +-
 src/views/vacation/VacationManagement.vue | 653 +++++++++++-----------
 4 files changed, 337 insertions(+), 352 deletions(-)

diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 796ab40..766bc31 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -61,7 +61,7 @@ const props = defineProps({
     },
     profileName: {
         type: String,
-        default: null,
+        default: '익명',
     },
     unknown: {
         type: Boolean,
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 3816ff6..d42480a 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -61,7 +61,7 @@
                                         📌 {{ notice.title }}
                                         <i v-if="notice.img" class="bi bi-image me-1"></i>
                                         <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
-                                        <span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
+                                        <span v-if="isNewPost(notice.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
                                     </td>
                                     <td class="text-center">{{ notice.author }}</td>
                                     <td class="text-center">{{ notice.date }}</td>
@@ -78,7 +78,7 @@
                                     {{ post.title }}
                                     <i v-if="post.img" class="bi bi-image me-1"></i>
                                     <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
-                                    <span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
+                                    <span v-if="isNewPost(post.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
                                 </td>
                                 <td class="text-center">{{ post.author }}</td>
                                 <td class="text-center">{{ post.date }}</td>
@@ -199,6 +199,7 @@ const fetchGeneralPosts = async (page = 1) => {
                 id: totalPosts - ((page - 1) * selectedSize.value) - index,
                 title: post.title,
                 author: post.author || '익명',
+                rawDate: post.date,
                 date: formatDate(post.date), // 날짜 변환 적용
                 views: post.cnt || 0,
                 hasAttachment: post.hasAttachment || false,
@@ -239,6 +240,7 @@ const fetchNoticePosts = async () => {
                 title: post.title,
                 author: post.author || '관리자',
                 date: formatDate(post.date),
+                rawDate: post.date,
                 views: post.cnt || 0,
                 hasAttachment: post.hasAttachment || false,
                 img: post.firstImageUrl || null
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index e52e404..b322fa4 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -149,7 +149,7 @@ const comments = ref([]);
 const route = useRoute();
 const router = useRouter();
 const currentBoardId = ref(Number(route.params.id));
-const unknown = computed(() => profileName.value === null);
+const unknown = computed(() => profileName.value === '익명');
 const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
 const authorId = ref(null); // 작성자 id
 
@@ -189,15 +189,15 @@ const fetchBoardDetails = async () => {
 
         // API 응답 데이터 반영
         // const boardDetail = data.boardDetail || {};
-        
-        profileName.value = data.author || null;
-        
+
+        profileName.value = data.author || '익명';
+
         // 익명확인하고 싶을때
         // profileName.value = 'null;
-        
+
         // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
         authorId.value = data.author;
-        
+
         boardTitle.value = data.title || '제목 없음';
         boardContent.value = data.content || '';
         date.value = data.date || '';
@@ -206,7 +206,7 @@ const fetchBoardDetails = async () => {
         dislikes.value = data.dislikeCount || 0;
         attachment.value = data.hasAttachment || null;
         commentNum.value = data.commentCount || 0;
-        
+
     } catch (error) {
         alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
     }
@@ -272,12 +272,12 @@ const fetchComments = async (page  = 1) => {
                 page
             }
         });
-        
+
         const commentsList = response.data.data.list.map(comment => ({
             commentId: comment.LOCCMTSEQ, // 댓글 ID
             boardId: comment.LOCBRDSEQ,
             parentId: comment.LOCCMTPNT, // 부모 ID
-            author: comment.author || null,
+            author: comment.author || '익명',
             content: comment.LOCCMTRPY,
             likeCount: comment.likeCount || 0,
             dislikeCount: comment.dislikeCount || 0,
@@ -458,7 +458,7 @@ const editComment = (comment) => {
     //     c.isCommentPassword = false;
     // });
 
-    // if (comment.unknown) {  
+    // if (comment.unknown) {
     //     comment.isCommentPassword = true;
     // } else {
     //     comment.isEditTextarea = true;
@@ -565,10 +565,10 @@ const submitCommentPassword = async (comment, password) => {
 
         if (response.data.code === 200 && response.data.data === true) {
             comment.isCommentPassword = false;
-            
+
             if (lastCommentClickedButton.value === "edit") {
                 comment.isEditTextarea = true;
-                // handleSubmitEdit(comment, comment.content);  
+                // handleSubmitEdit(comment, comment.content);
             } else if (lastCommentClickedButton.value === "delete") {
 
                 deleteReplyComment(comment)
@@ -620,7 +620,7 @@ const deleteReplyComment = async (comment) => {
 
         if (response.data.code === 200) {
             // console.log("댓글 삭제 성공!");
-            await fetchComments(); 
+            await fetchComments();
         } else {
             // console.log("댓글 삭제 실패:", response.data.message);
             alert("댓글 삭제에 실패했습니다.");
@@ -641,7 +641,7 @@ const handleSubmitEdit = async (comment, editedContent) => {
 
         // 수정 성공 시 업데이트
         comment.content = editedContent;
-        comment.isEditTextarea = false; 
+        comment.isEditTextarea = false;
     } catch (error) {
         console.error("댓글 수정 중 오류 발생:", error);
     }
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 80e4fc8..19647f7 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -1,307 +1,304 @@
 <template>
     <div class="vacation-management">
-        <div class="container-xxl flex-grow-1 container-p-y">
+      <div class="container-xxl flex-grow-1 container-p-y">
         <div class="card app-calendar-wrapper">
-            <div class="row g-0">
+          <div class="row g-0">
             <div class="col app-calendar-content">
-                <div class="card shadow-none border-0">
-                    <ProfileList
-                    @profileClick="handleProfileClick"
-                    :remainingVacationData="remainingVacationData"
-                    />
+              <div class="card shadow-none border-0">
+                <ProfileList
+                  @profileClick="handleProfileClick"
+                  :remainingVacationData="remainingVacationData"
+                />
                 <div class="card-body w-75 p-3 align-self-center">
-                    <VacationModal
+                  <!-- 모달에 필터링된 연차 목록 전달 -->
+                  <VacationModal
                     v-if="isModalOpen"
                     :isOpen="isModalOpen"
-                    :myVacations="myVacations"
-                    :receivedVacations="receivedVacations"
+                    :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"
-                    />
-                    <full-calendar
+                  <VacationGrantModal
+                    v-if="isGrantModalOpen"
+                    :isOpen="isGrantModalOpen"
+                    :targetUser="selectedUser"
+                    :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
+                    @close="isGrantModalOpen = false"
+                    @updateVacation="fetchRemainingVacation"
+                  />
+                  <full-calendar
                     ref="fullCalendarRef"
                     :options="calendarOptions"
                     class="flatpickr-calendar-only"
-                    />
-                    <HalfDayButtons
+                  />
+                  <HalfDayButtons
                     @toggleHalfDay="toggleHalfDay"
                     @addVacationRequests="saveVacationChanges"
-                    />
-                </div>
+                  />
                 </div>
+              </div>
             </div>
-            </div>
-        </div>
+          </div>
         </div>
+      </div>
     </div>
-</template>
+  </template>
 
-<script setup>
-import FullCalendar from "@fullcalendar/vue3";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import interactionPlugin from "@fullcalendar/interaction";
-import "flatpickr/dist/flatpickr.min.css";
-import "@/assets/css/app-calendar.css";
-import { reactive, ref, onMounted, nextTick } from "vue";
-import axios from "@api";
-import "bootstrap-icons/font/bootstrap-icons.css";
-import HalfDayButtons from "@c/button/HalfDayButtons.vue";
-import ProfileList from "@c/vacation/ProfileList.vue";
-import { useUserStore } from "@s/userList";
-import VacationModal from "@c/modal/VacationModal.vue"
-import { useUserInfoStore } from "@s/useUserInfoStore";
-import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
-import { fetchHolidays } from "@c/calendar/holiday.js";
+  <script setup>
+  import { reactive, ref, onMounted, nextTick, computed } from "vue";
+  import axios from "@api";
+  import FullCalendar from "@fullcalendar/vue3";
+  import dayGridPlugin from "@fullcalendar/daygrid";
+  import interactionPlugin from "@fullcalendar/interaction";
+  import "flatpickr/dist/flatpickr.min.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 { useUserStore } from "@s/userList";
+  import { useUserInfoStore } from "@s/useUserInfoStore";
+  import { fetchHolidays } from "@c/calendar/holiday.js";
 
-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 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 modalYear  = ref(new Date().getFullYear());
+  const modalMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
+  const lastRemainingYear = ref(new Date().getFullYear());
 
-const isGrantModalOpen = ref(false);
-const selectedUser = ref(null);
+  const isGrantModalOpen = ref(false);
+  const selectedUser = ref(null);
 
-// FullCalendar 관련 참조 및 데이터
-const fullCalendarRef = ref(null);
-const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트)
-const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
-const halfDayType = ref(null);
-const vacationCodeMap = ref({}); // 휴가 코드명 저장용
+  // 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([]);
 
-// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
-const holidayDates = ref(new Set());
-const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
+  const calendarOptions = reactive({
+    plugins: [dayGridPlugin, interactionPlugin],
+    initialView: "dayGridMonth",
+    headerToolbar: {
+      left: "today",
+      center: "title",
+      right: "prev,next",
+    },
+    locale: "ko",
+    selectable: false,
+    dateClick: handleDateClick,
+    datesSet: handleMonthChange,
+    events: calendarEvents,
+  });
 
-// FullCalendar 옵션 객체 (events에 calendarEvents를 지정)
-const calendarOptions = reactive({
-plugins: [dayGridPlugin, interactionPlugin],
-initialView: "dayGridMonth",
-headerToolbar: {
-    left: "today",
-    center: "title",
-    right: "prev,next",
-},
-locale: "ko",
-selectable: false,
-dateClick: handleDateClick,
-datesSet: handleMonthChange,
-events: calendarEvents,
-});
+  onMounted(async () => {
+    await userStore.userInfo();
+    await fetchRemainingVacation();
+  });
 
-onMounted(async () => {
-  await userStore.userInfo();
-  await fetchRemainingVacation();
-});
-
-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 {
-    if (user.MEMBERSEQ === userStore.user.id) {
-      // 내 프로필을 클릭한 경우
-      const response = await axios.get(`vacation/history`);
-
-      if (response.status === 200 && response.data) {
-        myVacations.value = response.data.data.usedVacations || [];
-        receivedVacations.value = response.data.data.receivedVacations || [];
-        isModalOpen.value = true; // 내 연차 모달 열기
-        isGrantModalOpen.value = false;
-      } else {
-        console.warn("❌ 연차 내역을 불러오지 못했습니다.");
+  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;
+        }, {});
       }
-    } else {
-      // 다른 사람의 프로필을 클릭한 경우
-      selectedUser.value = user;
-      isGrantModalOpen.value = true; // 연차 부여 모달 열기
-      isModalOpen.value = false;
+    } catch (error) {
+      console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
     }
-  } catch (error) {
-    console.error("🚨 연차 데이터 불러오기 실패:", error);
+  };
+
+  // 프로필 클릭 시 연차 내역 가져오기
+  const handleProfileClick = async (user) => {
+    try {
+      if (user.MEMBERSEQ === userStore.user.id) {
+        const response = await axios.get(`vacation/history`);
+        if (response.status === 200 && response.data) {
+          myVacations.value = response.data.data.usedVacations || [];
+          receivedVacations.value = response.data.data.receivedVacations || [];
+          isModalOpen.value = true;
+          // 모달을 열 때 기준 연도와 기준 월 갱신
+          modalYear.value = new Date().getFullYear();
+          modalMonth.value = String(new Date().getMonth() + 1).padStart(2, "0");
+          isGrantModalOpen.value = false;
+        } else {
+          console.warn("❌ 연차 내역을 불러오지 못했습니다.");
+        }
+      } else {
+        selectedUser.value = user;
+        isGrantModalOpen.value = true;
+        isModalOpen.value = false;
+      }
+    } 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] || "기타";
+  };
+
+  // computed: modalYear와 일치하는 항목만 필터링
+  const filteredMyVacations = computed(() => {
+  const filtered = myVacations.value.filter(vac => {
+    console.log(vac)
+    const year = vac.date ? vac.date.split("T")[0].substring(0, 4) : null;
+    console.log("vacation year:", year, "modalYear:", modalYear.value);
+    return year === String(modalYear.value);
+  });
+  console.log("filteredMyVacations:", filtered);
+  return filtered;
+});
+
+const filteredReceivedVacations = computed(() => {
+  return receivedVacations.value.filter(vac => {
+    console.log(
+      vac.date,
+      vac.date ? vac.date.split("T")[0].substring(0, 4) : null,
+      modalYear.value
+    );
+    return vac.date && vac.date.split("T")[0].substring(0, 4) === String(modalYear.value);
+  });
+});
+
+
+  function updateCalendarEvents() {
+    const selectedEvents = Array.from(selectedDates.value)
+      .filter(([date, type]) => type !== "delete")
+      .map(([date, type]) => ({
+        title: getVacationType(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) {
+        return selectedDates.value.get(event.start) !== "delete";
+      }
+      return true;
+    });
+    calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
   }
-};
 
-const fetchUserList = async () => {
-  try {
-    await userListStore.fetchUserList();
-    userList.value = userListStore.userList;
+  const getVacationTypeClass = (type) => {
+    if (type === "700101") return "half-day-am";
+    if (type === "700102") return "half-day-pm";
+    return "full-day";
+  };
 
-    if (!userList.value.length) {
-      console.warn("📌 사용자 목록이 비어 있음!");
+  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;
     }
-
-    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; // code를 key로, name을 value로 설정
-        return acc;
-      }, {});
+    if (selectedDates.value.has(clickedDateStr)) {
+      selectedDates.value.delete(clickedDateStr);
+      updateCalendarEvents();
+      return;
+    }
+    const unsentVacation = myVacations.value.find(
+      (vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
+    );
+    if (unsentVacation) {
+      selectedDates.value.set(clickedDateStr, "delete");
     } else {
-      console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
+      const type = halfDayType.value
+        ? (halfDayType.value === "AM" ? "700101" : "700102")
+        : "700103";
+      selectedDates.value.set(clickedDateStr, type);
     }
-  } catch (error) {
-    console.error("🚨 공통 코드 API 호출 실패:", error);
-  }
-};
-
-// 🔹 typeCode를 통해 code명 반환
-const getVacationType = (typeCode) => {
-  return vacationCodeMap.value[typeCode] || "기타";
-};
-
-
-function updateCalendarEvents() {
-  // 신규 선택한 연차(추가 대상): type이 "delete"가 아닌 항목
-  const selectedEvents = Array.from(selectedDates.value)
-    .filter(([date, type]) => type !== "delete")
-    .map(([date, type]) => ({
-      title: getVacationType(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) { // saved 플래그가 있는 이벤트는 저장된 연차
-      return selectedDates.value.get(event.start) !== "delete";
-    }
-    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"; // 연차 → 전체 배경
-};
-
-/**
- * 날짜 클릭 이벤트
- * - 주말(토, 일)과 공휴일은 클릭되지 않음
- * - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
- */
- function handleDateClick(info) {
-  const clickedDateStr = info.dateStr; // "YYYY-MM-DD" 형식
-  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;
-  }
-
-  // 토글: 이미 선택된 날짜라면 해제
-  if (selectedDates.value.has(clickedDateStr)) {
-    selectedDates.value.delete(clickedDateStr);
+    halfDayType.value = null;
     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);
+  function toggleHalfDay(type) {
+    halfDayType.value = halfDayType.value === type ? null : type;
   }
 
-  halfDayType.value = null;
-  updateCalendarEvents();
-}
-
-/**
- * 오전/오후 반차 버튼 토글
- */
-function toggleHalfDay(type) {
-halfDayType.value = halfDayType.value === type ? null : type;
-}
-
-/**
- * 백엔드에서 휴가 데이터를 가져와 이벤트로 변환
- */
- async function fetchVacationData(year, month) {
+  async function fetchVacationData(year, month) {
   try {
     const response = await axios.get(`vacation/list/${year}/${month}`);
     if (response.status === 200) {
       const vacationList = response.data;
-      // 내 연차 데이터 업데이트 (사용자 본인의 연차만)
-      myVacations.value = vacationList.filter(
-        (vac) => vac.MEMBERSEQ === userStore.user.id
-      );
-      // 기존 저장된 연차 이벤트에 saved 플래그 추가
+      // 모달이 열려 있더라도 전달받은 연도가 기존 modalYear와 다르면 업데이트
+      if (modalYear.value !== year) {
+        myVacations.value = vacationList.filter(
+          (vac) => vac.MEMBERSEQ === userStore.user.id
+        );
+        modalYear.value = year;
+        // modalMonth는 그대로 유지 (월은 모달 업데이트 조건에서 제외)
+      }
+      // 캘린더 이벤트 매핑
       const events = vacationList
-        .filter((vac) => !vac.LOCVACRMM) // 보낸사람이 없는(저장된) 연차
+        .filter((vac) => !vac.LOCVACRMM)
         .map((vac) => {
-          let dateStr = vac.LOCVACUDT.split("T")[0];
+          let dateStr = vac.LOCVACUDT ? 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 플래그 추가
+            saved: true,
           };
         })
-        .filter((event) => event !== null);
+        .filter((event) => event.start);
       return events;
     } else {
       console.warn("📌 휴가 데이터를 불러오지 못함");
@@ -313,94 +310,80 @@ halfDayType.value = halfDayType.value === type ? null : type;
   }
 }
 
-/**
- * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
- */
- 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;
-  });
-
-  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();
-      await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
-      // 초기화: 선택한 날짜 해제
-      selectedDates.value.clear();
-      updateCalendarEvents();
-    } else {
-      alert("❌ 휴가 저장 중 오류가 발생했습니다.");
+  async function saveVacationChanges() {
+    const selectedDatesArray = Array.from(selectedDates.value);
+    const vacationsToAdd = selectedDatesArray
+      .filter(([date, type]) => type !== "delete")
+      .filter(([date, type]) =>
+        !myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date)) ||
+        myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
+      )
+      .map(([date, type]) => ({ date, type }));
+    const vacationsToDelete = myVacations.value
+      .filter(vac => {
+        if (!vac.LOCVACUDT) return false;
+        const date = vac.LOCVACUDT.split("T")[0];
+        return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
+      })
+      .map(vac => {
+        const id = vac.LOCVACSEQ;
+        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") {
+        alert("✅ 휴가 변경 사항이 저장되었습니다.");
+        await fetchRemainingVacation();
+        const currentDate = fullCalendarRef.value.getApi().getDate();
+        await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
+        selectedDates.value.clear();
+        updateCalendarEvents();
+      } else {
+        alert("❌ 휴가 저장 중 오류가 발생했습니다.");
+      }
+    } catch (error) {
+      console.error("🚨 휴가 변경 저장 실패:", error);
+      alert("❌ 휴가 저장 요청에 실패했습니다.");
     }
-  } catch (error) {
-    console.error("🚨 휴가 변경 저장 실패:", error);
-    alert("❌ 휴가 저장 요청에 실패했습니다.");
   }
-}
 
-/**
- * 달력 월 변경 시 호출 (FullCalendar의 datesSet 옵션)
- */
- 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 handleMonthChange(viewInfo) {
+    const currentDate = viewInfo.view.currentStart;
+    const year = currentDate.getFullYear();
+    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+    loadCalendarData(year, month);
+  }
 
-/**
- * 지정한 월의 데이터를 로드 (휴가, 공휴일 데이터를 병렬 요청)
- */
-async function loadCalendarData(year, month) {
-fetchedEvents.value = [];
-const [vacationEvents, holidayEvents] = await Promise.all([
-    fetchVacationData(year, month),
-    fetchHolidays(year, month),
-]);
-// 클릭 불가 처리를 위해 공휴일 날짜 Set 업데이트
-holidayDates.value = new Set(holidayEvents.map((event) => event.start));
-fetchedEvents.value = [...vacationEvents, ...holidayEvents];
-updateCalendarEvents();
-await nextTick();
-fullCalendarRef.value.getApi().refetchEvents();
-}
+  async function loadCalendarData(year, month) {
+    if (lastRemainingYear.value !== year) {
+      await fetchRemainingVacation();
+      lastRemainingYear.value = year;
+    }
+    fetchedEvents.value = [];
+    const [vacationEvents, holidayEvents] = await Promise.all([
+      fetchVacationData(year, month),
+      fetchHolidays(year, month),
+    ]);
+    holidayDates.value = new Set(holidayEvents.map((event) => event.start));
+    fetchedEvents.value = [...vacationEvents, ...holidayEvents];
+    updateCalendarEvents();
+    await nextTick();
+    fullCalendarRef.value.getApi().refetchEvents();
+  }
 
-// 컴포넌트 마운트 시 현재 달의 데이터 로드
-onMounted(async () => {
-await fetchUserList(); // 사용자 목록 먼저 불러오기
-await fetchVacationCodes();
-const today = new Date();
-const year = today.getFullYear();
-const month = String(today.getMonth() + 1).padStart(2, "0");
-await loadCalendarData(year, month);
-});
-</script>
+  onMounted(async () => {
+    await fetchUserList();
+    await fetchVacationCodes();
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, "0");
+    await loadCalendarData(year, month);
+  });
+  </script>
 
-<style>
-
-</style>
+  <style>
+  /* 스타일 정의 */
+  </style>