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

---
 public/css/custom.css                       | 28 +++++++-
 src/components/modal/VacationGrantModal.vue | 62 +++++++----------
 src/components/modal/VacationModal.vue      | 25 +------
 src/views/vacation/VacationManagement.vue   | 74 ++++++++++-----------
 4 files changed, 88 insertions(+), 101 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index 2ac47f0..b950985 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -78,14 +78,14 @@ opacity: 0.6; /* 흐려 보이게 */
   border: none !important;
   border-radius: 4px;
 }
-/* 오전 반차 (왼쪽 절반) */
+/* 오전 반차 활성화 영역 (왼쪽 절반) */
 .selected-event.half-day-am {
   width: 50% !important;
   left: 0 !important;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 }
-/* 오후 반차 (오른쪽 절반) */
+/* 오후 반차 활성화 영역 (오른쪽 절반) */
 .selected-event.half-day-pm {
   width: 50% !important;
   margin-left: auto !important;
@@ -105,6 +105,30 @@ opacity: 0.6; /* 흐려 보이게 */
   font-size: 18px;
   cursor: pointer;
 }
+.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;
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index 0059116..82f8f72 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -1,26 +1,29 @@
 <template>
-    <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-      <div class="modal-content p-5">
-        <h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
-        <button class="close-btn" @click="closeModal">✖</button>
+    <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>
+                <button class="close-btn" @click="closeModal">✖</button>
+            </div>
 
-        <div class="modal-body">
-          <p>선물할 연차 개수를 선택하세요.</p>
+            <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>
-          <div class="custom-button-container">
-          <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
-            <i class="bx bx-gift"></i>
-          </button>
-          </div>
+                <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>
+
+                <div class="custom-button-container">
+                <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
+                    <i class="bx bx-gift"></i>
+                </button>
+                </div>
+            </div>
         </div>
-      </div>
     </div>
-  </template>
+</template>
 
   <script setup>
   import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
@@ -121,25 +124,6 @@
   </script>
 
 
-  <style scoped>
-/* 모달 배경 투명하게 */
-.modal-dialog {
-  background: none !important;  /* 배경 제거 */
-  box-shadow: none !important;  /* 음영 제거 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
+<style scoped>
 
-/* 모달 내용 스타일 */
-.modal-content {
-  background: #fff;  /* 기존 흰색 배경 유지 */
-  border-radius: 8px;
-  box-shadow: none !important;  /* 내부 음영 제거 */
-  padding: 20px;
-  max-width: 500px;
-  width: 100%;
-}
-  </style>
+</style>
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index 5dde272..22db837 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-      <div class="modal-content p-5 modal-scroll">
+    <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>
 
@@ -138,25 +138,4 @@ const closeModal = () => {
 </script>
 
   <style scoped>
-
-/* 모달 배경 투명하게 */
-.modal-dialog {
-  background: none !important;  /* 배경 제거 */
-  box-shadow: none !important;  /* 음영 제거 */
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-/* 모달 내용 스타일 */
-.modal-content {
-  background: #fff;  /* 기존 흰색 배경 유지 */
-  border-radius: 8px;
-  box-shadow: none !important;  /* 내부 음영 제거 */
-  padding: 20px;
-  max-width: 500px;
-  width: 100%;
-}
   </style>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index c8ac838..d5fa758 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -148,7 +148,7 @@ watch(
   const calendarDatepicker = ref(null);
   let fpInstance = null;
 
-/** ✅ 변경사항 여부 확인 */
+/** 변경사항 여부 확인 */
 const hasChanges = computed(() => {
   return (
     selectedDates.value.size > 0 ||
@@ -157,7 +157,7 @@ const hasChanges = computed(() => {
 });
 
 
-/** ✅ selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
+/** selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
 watch(
   () => Array.from(selectedDates.value.keys()), // keys()를 Array로 변환해서 감시
   (newKeys) => {
@@ -204,7 +204,7 @@ function handleDateClick(info) {
     selectedDates.value.set(clickedDateStr, type);
     halfDayType.value = null;
     updateCalendarEvents();
-    // ✅ 날짜 선택 후 버튼 초기화
+    // 날짜 선택 후 버튼 초기화
     if (halfDayButtonsRef.value) {
         halfDayButtonsRef.value.resetHalfDay();
     }
@@ -417,42 +417,42 @@ function handleDateClick(info) {
     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;
-        if (lastRemainingYear.value !== year) {
-          myVacations.value = vacationList.filter(
-            (vac) => vac.MEMBERSEQ === userStore.user.id
-          );
-          lastRemainingYear.value = year;
-        }
-        const events = vacationList
-          .filter((vac) => !vac.LOCVACRMM)
-          .map((vac) => {
-            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,
-              memberSeq: vac.MEMBERSEQ,
-            };
-          })
-          .filter((event) => event.start);
-        return events;
-      } else {
-        console.warn("📌 휴가 데이터를 불러오지 못함");
-        return [];
-      }
-    } catch (error) {
-      console.error("Error fetching vacation data:", 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] !== "#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;
@@ -522,7 +522,7 @@ function handleDateClick(info) {
     await nextTick();
     fullCalendarRef.value.getApi().refetchEvents();
   }
-  /** ✅ 오늘 이후의 날짜만 클릭 가능하도록 설정 */
+  /** 오늘 이후의 날짜만 클릭 가능하도록 설정 */
 function markClickableDates() {
   nextTick(() => {
     const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD