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

---
 public/css/custom.css                     |  4 +-
 src/views/board/BoardList.vue             |  2 +
 src/views/vacation/VacationManagement.vue | 45 ++++++++++++++++-------
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index ca12d03..f85e0b1 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -16,6 +16,7 @@
   height: 8px !important;
   border-radius: 2px !important;
   font-size: 0px !important;
+  margin-left: -0.5% !important;
 }
 /* 오후 반차 그래프 (오른쪽 절반) */
 .fc-daygrid-event.half-day-pm {
@@ -24,6 +25,7 @@
   margin-left: auto !important;
   border-radius: 2px !important;
   font-size: 0px !important;
+  margin-right: -0.5% !important;
 }
 /* 연차 그래프 (풀) */
 .fc-daygrid-event.full-day {
@@ -69,7 +71,7 @@ background-color: rgba(0, 0, 0, 0.05); /* 연한 배경 효과 */
 .fc-day-sat-sun {
 cursor: not-allowed !important;
 }
-/* 과거 날짜 (오늘 이전) */
+/* 과거 날짜 (오늘 -7일일) */
 .fc-daygrid-day.past {
 cursor: not-allowed !important;
 }
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index da16bc4..c42c657 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -291,5 +291,7 @@ onMounted(() => {
         color: #ff5733;
         border-radius: 4px;
         padding: 2px 6px;
+        position: relative;
+        top: -1px;
     }
 </style>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 0a76af2..488b6f4 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -152,23 +152,30 @@ function handleMonthChange(viewInfo) {
     loadCalendarData(year, month);
 }
 // 캘린더 클릭
+// 캘린더 클릭
 function handleDateClick(info) {
     const clickedDateStr = info.dateStr;
     const clickedDate = info.date;
     const todayStr = new Date().toISOString().split("T")[0];
+    const todayObj = new Date(todayStr);
+    const oneWeekAgoObj = new Date(todayObj);
+    oneWeekAgoObj.setDate(todayObj.getDate() - 8); // 오늘 기준 7일 전 날짜
 
+    // 주말(토, 일) 또는 공휴일 또는 오늘 -7일 날짜 → 클릭 불가능
     if (
-        clickedDate.getDay() === 0 ||
-        clickedDate.getDay() === 6 ||
-        holidayDates.value.has(clickedDateStr) ||
-        clickedDateStr < todayStr
+        clickedDate.getDay() === 0 || // 일요일
+        clickedDate.getDay() === 6 || // 토요일
+        holidayDates.value.has(clickedDateStr) || // 공휴일
+        clickedDateStr <= oneWeekAgoObj.toISOString().split("T")[0] // 오늘 -7일 날짜 포함 과거 날짜 클릭 방지
     ) {
         return;
     }
+
     const isMyVacation = myVacations.value.some(vac => {
         const vacDate = vac.date ? vac.date.substring(0, 10) : "";
         return vacDate === clickedDateStr && !vac.receiverId;
     });
+
     if (isMyVacation) {
         if (selectedDates.value.get(clickedDateStr) === "delete") {
             selectedDates.value.delete(clickedDateStr);
@@ -178,45 +185,55 @@ function handleDateClick(info) {
         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 todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 (YYYY-MM-DD)
         const todayObj = new Date(todayStr);
+        const oneWeekAgoObj = new Date(todayObj);
+        oneWeekAgoObj.setDate(todayObj.getDate() - 8); // 오늘 기준 7일 전 날짜
 
         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)) {
+
+            // 주말(토요일, 일요일) 또는 공휴일 또는 오늘 -7일 날짜 → 클릭 불가능
+            if (
+                dateObj.getDay() === 0 || // 일요일
+                dateObj.getDay() === 6 || // 토요일
+                holidayDates.value.has(dateStr) || // 공휴일
+                dateObj.getTime() === oneWeekAgoObj.getTime() // 오늘 -7일 날짜
+            ) {
                 cell.classList.remove("clickable");
                 cell.classList.add("fc-day-sat-sun");
+                cell.removeEventListener("click", handleDateClick); // 클릭 이벤트 제거
             }
-            // 과거 날짜 (오늘 이전)
-            else if (dateObj < todayObj) {
-                cell.classList.remove("clickable");
-                cell.classList.add("past"); // 과거 날짜 비활성화
-            }
-            // 오늘 & 미래 날짜 (클릭 가능)
+            // 오늘 -6일부터 미래 날짜까지 클릭 가능
             else {
                 cell.classList.add("clickable");
                 cell.classList.remove("past", "fc-day-sat-sun");
+                cell.addEventListener("click", handleDateClick); // 클릭 이벤트 추가
             }
         });
     });