Merge remote-tracking branch 'origin/main' into wordDict

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") {

src/components/modal/VacationModal.vue

@@ -4,28 +4,35 @@
         <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">
+            <li
-                        <span v-if="vacation.type === 'used'" class="vacation-index">
+              v-for="(vac, index) in mergedVacations"
-                            {{ getVacationIndex(index) }})
+              :key="vac._expandIndex"
+              class="vacation-item"
+            >
+              <!-- Used 항목만 인덱스 표시 -->
+              <span v-if="vac.category === 'used'" class="vacation-index">
+                {{ usedVacationIndexMap[vac._expandIndex] }})
               </span>
-                        <span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
+
-                            {{ vacation.type === 'used' ? '-' : '+' }}
+              <span :class="vac.category === 'used' ? 'minus-symbol' : 'plus-symbol'">
+                {{ vac.category === 'used' ? '-' : '+' }}
               </span>
+
               <span
-                            :style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
+                :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
                 class="vacation-date"
               >
-                            {{ formatDate(vacation.date) }}
+                {{ formatDate(vac.date) }}
               </span>
             </li>
           </ol>
         </div>
 
         <!-- 연차 데이터 없음 -->
-            <p v-if="mergedVacations.length === 0" class="no-data">
+        <p v-else class="no-data">
           🚫 사용한 연차가 없습니다.
         </p>
       </div>
@@ -53,60 +60,101 @@ const props = defineProps({
 
 const emit = defineEmits(["close"]);
 
-// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
+/**
-const usedVacations = computed(() =>
+ * 1) Used 휴가를 used_quota만큼 펼치기
-    props.myVacations.map(v => ({ ...v, type: "used" }))
+ *    - category: "used"
-);
+ *    - code: 휴가 코드(예: LOCVACTYP)
-
+ *    - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
-const receivedVacations = computed(() =>
+ */
-    props.receivedVacations.map(v => ({ ...v, type: "received" }))
+let globalCounter = 0; // 확장 시 사용할 전역 카운터
-);
+const usedVacations = computed(() => {
-
+  const result = [];
-// ✅ 정확한 정렬 및 리스트 병합
+  props.myVacations.forEach((v) => {
-const mergedVacations = computed(() => {
+    const count = v.used_quota || 1;
-    return [...usedVacations.value, ...receivedVacations.value].sort(
+    for (let i = 0; i < count; i++) {
-        (a, b) => new Date(b.date) - new Date(a.date)
+      result.push({
-    );
+        ...v,
+        category: "used",
+        code: v.LOCVACTYP,         // 휴가 코드 (700103 등)
+        _expandIndex: globalCounter++,
+      });
+    }
+  });
+  return result;
 });
 
-// ✅ 연차 개수 반영된 인덱스 반환 (누적 합산)
+/**
-const getVacationIndex = (index) => {
+ * 2) Received 휴가: category: "received"
-    let count = 0;
+ */
-    for (let i = 0; i <= index; i++) {
+const receivedVacations = computed(() =>
-        const v = mergedVacations.value[i];
+  props.receivedVacations.map((v) => ({
-        count += v.used_quota; // 누적하여 더함
+    ...v,
-    }
+    category: "received",
-    return count;
+  }))
-};
+);
 
-// ✅ 날짜 형식 변환 (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);
+  if (!dateString) return "";
-    return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
+  // 만약 dateString이 "YYYY-MM-DD" 형식이라면 그대로 반환
+  // 혹은 "YYYY-MM-DD..." 라면 앞 10자만 잘라 반환
+  return dateString.substring(0, 10);
 };
 
+
+/** 모달 닫기 */
 const closeModal = () => {
   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%;
     background: white;
-    border-radius: 8px;
+    padding: 20px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    width: 400px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
+    text-align: center;
+    position: relative;
   }
 
   /* 닫기 버튼 */
@@ -118,7 +166,6 @@ const closeModal = () => {
     border: none;
     font-size: 18px;
     cursor: pointer;
-    font-weight: bold;
   }
 
   /* 리스트 기본 스타일 */
@@ -168,14 +215,6 @@ const closeModal = () => {
     color: #333;
   }
 
-/* 연차 유형 스타일 */
-.vacation-type {
-    font-size: 14px;
-    font-weight: normal;
-    color: gray;
-    margin-left: 5px;
-}
-
   /* 연차 데이터 없음 */
   .no-data {
     text-align: center;

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 <= 7) return "100px"; // 7명 이하
-    if (totalUsers <= 10) return "100px"; // ~10명
+    if (totalUsers <= 10) return "80px"; // ~10명
-    if (totalUsers <= 20) return "80px"; // ~20명
+    if (totalUsers <= 20) return "60px"; // ~20명
-    return "60px"; // 20명 이상
+    return "40px"; // 20명 이상
   });
 
   // 개별 유저 스타일 적용

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]) => {
+  // 신규 선택한 연차(추가 대상): type이 "delete"가 아닌 항목
-    return {
+  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)],
+      classNames: [getVacationTypeClass(type)]
-    };
+    }));
+
+  // 기존 백엔드에서 불러온 저장된 연차 이벤트 중,
+  // 해당 날짜가 삭제 대상으로 표시되어 있으면 제거
+  const filteredFetchedEvents = fetchedEvents.value.filter(event => {
+    if (event.saved) { // saved 플래그가 있는 이벤트는 저장된 연차
+      return selectedDates.value.get(event.start) !== "delete";
+    }
+    return true;
   });
-calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
+  calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
 }
 
 /**
@@ -222,27 +226,43 @@ calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
  * - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
  */
  function handleDateClick(info) {
-const clickedDateStr = info.dateStr;
+  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)) {
+  // 토글: 이미 선택된 날짜라면 해제
+  if (selectedDates.value.has(clickedDateStr)) {
+    selectedDates.value.delete(clickedDateStr);
+    updateCalendarEvents();
     return;
   }
-if (!selectedDates.value.has(clickedDateStr)) {
+
+  // 저장된(보낸사람 없는) 연차가 있는지 확인
+  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"
+      ? (halfDayType.value === "AM" ? "700101" : "700102")
-        ? "700101"
-        : "700102"
       : "700103";
     selectedDates.value.set(clickedDateStr, type);
-} else {
-    selectedDates.value.delete(clickedDateStr);
   }
+
   halfDayType.value = null;
   updateCalendarEvents();
 }
@@ -260,18 +280,24 @@ 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) {
+    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 {
             title: getVacationType(vac.LOCVACTYP),
             start: dateStr,
             backgroundColor,
             classNames: [getVacationTypeClass(vac.LOCVACTYP)],
+            saved: true, // saved 플래그 추가
           };
         })
         .filter((event) => event !== null);
@@ -289,33 +315,54 @@ try {
 /**
  * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
  */
-async function addVacationRequests() {
+ async function saveVacationChanges() {
-if (selectedDates.value.size === 0) {
+  // 추가할 연차: selectedDates 항목 중 type이 "delete"가 아닌 경우
-    alert("휴가를 선택해주세요.");
+  const selectedDatesArray = Array.from(selectedDates.value);
-    return;
+  const vacationsToAdd = selectedDatesArray
-}
+    .filter(([date, type]) => type !== "delete")
-const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
+    .filter(([date, type]) =>
-    date,
+      // 기존 데이터에 없거나, 기존 데이터에 있더라도 보낸사람(LOCVACRMM)이 있는 경우 추가
-    type,
+      !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", vacationRequests);
+    const response = await axios.post("vacation/batchUpdate", {
+      add: vacationsToAdd,
+      delete: vacationsToDelete
+    });
     if (response.data && response.data.status === "OK") {
-    alert("휴가가 저장되었습니다.");
+      alert("✅ 휴가 변경 사항이 저장되었습니다.");
       await fetchRemainingVacation();
-    // 저장 후 현재 달 데이터 다시 불러오기
       const currentDate = fullCalendarRef.value.getApi().getDate();
-    const year = currentDate.getFullYear();
+      await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
-    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+      // 초기화: 선택한 날짜 해제
-    loadCalendarData(year, month);
       selectedDates.value.clear();
       updateCalendarEvents();
     } else {
-    alert("휴가 저장 중 오류가 발생했습니다.");
+      alert("❌ 휴가 저장 중 오류가 발생했습니다.");
     }
   } catch (error) {
-    console.error(error);
+    console.error("🚨 휴가 변경 저장 실패:", error);
-    alert("휴가 저장에 실패했습니다.");
+    alert("❌ 휴가 저장 요청에 실패했습니다.");
   }
 }