휴가 로직 변경

public/css/custom.css

@@ -157,7 +157,7 @@
 .fc-toolbar-title {
     cursor: pointer;
 }
-/* 클릭 가능한 날짜 (오늘 + 미래) */
+/* 클릭 가능한 날짜 */
 .fc-daygrid-day.clickable {
     cursor: pointer;
     transition: background-color 0.2s ease-in-out;
@@ -362,6 +362,28 @@
     background-color: #0b5ed7 !important;
     color: white;
 }
+/* 풀 연차 버튼 스타일 */
+.vac-btn-primary {
+    color: #fff;
+    background-color: #28a745; /* 녹색 */
+    border-color: #28a745;
+    box-shadow: 0 0.125rem 0.25rem 0 rgba(40, 167, 69, 0.4);
+    font-size: 28px;
+    transition: all 0.2s ease-in-out;
+}
+/* 풀 연차 버튼 활성화 스타일 */
+.vac-btn-primary.active {
+    background-color: #218838 !important;
+    color: #fff;
+    border: 3px solid #91d091 !important;
+    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+    transform: scale(1.1);
+}
+/* 풀 연차 버튼이 눌렸을 때 효과 */
+.vac-btn-primary:active {
+    transform: scale(0.9);
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
 /* 버튼 기본 */
 .vac-btn-success {
     transition: all 0.2s ease-in-out;

src/components/button/HalfDayButtons.vue

@@ -1,26 +1,40 @@
 <template>
     <div class="row gx-2 mb-4">
-        <div class="col-4">
+        <div class="col-3">
             <div class="ratio ratio-1x1">
                 <!-- 오전 반차 버튼 -->
-            <button class="vac-btn vac-btn-warning rounded-circle d-flex align-items-center justify-content-center" :class="{ active: halfDayType === 'AM' }"
+                <button class="vac-btn vac-btn-warning rounded-circle d-flex align-items-center justify-content-center"
+                    :class="{ active: halfDayType === 'AM' }"
                     @click="toggleHalfDay('AM')">
                     <i class="bi bi-sun"></i>
                 </button>
             </div>
         </div>
-        <div class="col-4">
+        <div class="col-3">
             <div class="ratio ratio-1x1">
                 <!-- 오후 반차 버튼 -->
-            <button class="vac-btn vac-btn-info rounded-circle d-flex align-items-center justify-content-center" :class="{ active: halfDayType === 'PM' }"
+                <button class="vac-btn vac-btn-info rounded-circle d-flex align-items-center justify-content-center"
+                    :class="{ active: halfDayType === 'PM' }"
                     @click="toggleHalfDay('PM')">
                     <i class="bi bi-moon"></i>
                 </button>
             </div>
         </div>
-        <div class="col-4">
+        <div class="col-3">
             <div class="ratio ratio-1x1">
-            <button class="vac-btn-success rounded-circle d-flex align-items-center justify-content-center" @click="addVacationRequests"
+                <!-- 풀 연차 버튼 -->
+                <button class="vac-btn vac-btn-primary rounded-circle d-flex align-items-center justify-content-center"
+                    :class="{ active: halfDayType === 'FULL' }"
+                    @click="toggleHalfDay('FULL')">
+                    <i class="bi bi-calendar"></i>
+                </button>
+            </div>
+        </div>
+        <div class="col-3">
+            <div class="ratio ratio-1x1">
+                <!-- 저장 버튼 -->
+                <button class="vac-btn-success rounded-circle d-flex align-items-center justify-content-center"
+                    @click="addVacationRequests"
                     :class="{ active: !isDisabled, disabled: isDisabled }">
                     ✔
                 </button>
@@ -30,38 +44,29 @@
 </template>
 
 <script setup>
-import { defineEmits, ref, defineProps, watch } from "vue";
+import { defineEmits, ref, defineProps } from "vue";
 
 const props = defineProps({
-isDisabled: Boolean,
+    isDisabled: Boolean
-selectedDate: String // 날짜 선택 값을 props로 받음
 });
 
 const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
 const halfDayType = ref(null);
 
 const toggleHalfDay = (type) => {
-halfDayType.value = halfDayType.value === type ? null : type;
+    halfDayType.value = halfDayType.value === type ? null : type;
-emit("toggleHalfDay", halfDayType.value);
+    emit("toggleHalfDay", halfDayType.value);
 };
 
-// `selectedDate`가 변경되면 반차 선택 초기화
+// 날짜 클릭 후 버튼 상태 자동 초기화
-watch(() => props.selectedDate, (newDate) => {
-if (newDate) {
-resetHalfDay();
-}
-});
-
-// 날짜 선택 후 반차 버튼 상태 초기화
 const resetHalfDay = () => {
-halfDayType.value = null;
+    halfDayType.value = null;
-emit("resetHalfDay");
+    emit("resetHalfDay");
 };
 
 const addVacationRequests = () => {
-emit("addVacationRequests");
+    emit("addVacationRequests");
 };
 
 defineExpose({ resetHalfDay });
 </script>
-

src/views/vacation/VacationManagement.vue

@@ -106,6 +106,7 @@ const isGrantModalOpen = ref(false);
 const fullCalendarRef = ref(null);
 const calendarEvents = ref([]);
 const selectedDates = ref(new Map());
+
 const halfDayType = ref(null);
 const vacationCodeMap = ref({});
 const holidayDates = ref(new Set());
@@ -118,7 +119,6 @@ const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"
 // 데이트피커 인풋 ref
 const calendarDatepicker = ref(null);
 let fpInstance = null;
-
 /* 변경사항 여부 확인 */
 const hasChanges = computed(() => {
     return (
@@ -173,40 +173,53 @@ function handleDateClick(info) {
         return;
     }
 
-    const isMyVacation = myVacations.value.some(vac => {
+    // 기존 값 확인
-        const vacDate = vac.date ? vac.date.substring(0, 10) : "";
+    const currentValue = selectedDates.value.get(clickedDateStr);
-        return vacDate === clickedDateStr && !vac.receiverId;
-    });
 
+    const isMyVacation = myVacations.value.some(vac => vac.date.substring(0, 10) === clickedDateStr && !vac.receiverId);
+
+    // 이미 활성화된 날짜를 한 번 더 클릭하면 비활성화
+    if (currentValue && currentValue !== "delete") {
+        console.log("🛑 활성화된 날짜 비활성화:", clickedDateStr);
+        selectedDates.value.delete(clickedDateStr);
+        updateCalendarEvents();
+        return;
+    }
+
+    // 버튼을 누르지 않았을 때 - 삭제 모드
+    if (!halfDayType.value) {
         if (isMyVacation) {
-        if (selectedDates.value.get(clickedDateStr) === "delete") {
+            if (currentValue === "delete") {
                 selectedDates.value.delete(clickedDateStr);
             } else {
                 selectedDates.value.set(clickedDateStr, "delete");
             }
+        } else {
+            selectedDates.value.set(clickedDateStr, "700103");
+        }
         updateCalendarEvents();
         return;
     }
 
-    if (selectedDates.value.has(clickedDateStr)) {
+    // 버튼을 눌렀을 때 - 기존 휴가 삭제 후 새로운 값 추가
-        selectedDates.value.delete(clickedDateStr);
+    if (isMyVacation) {
-        updateCalendarEvents();
+        console.log("🗑 기존 휴가 삭제 후 새로운 상태 추가:", clickedDateStr);
-        return;
+        selectedDates.value.set(clickedDateStr, "delete");
     }
-    const type = halfDayType.value
+
-        ? (halfDayType.value === "AM" ? "700101" : "700102")
+    const type = halfDayType.value === "AM" ? "700101" :
-        : "700103";
+                 halfDayType.value === "PM" ? "700102" :
+                 "700103"; // 풀연차
 
     selectedDates.value.set(clickedDateStr, type);
 
-    if (halfDayType.value) {
+    // 버튼을 한 번 사용 후 자동 해제 (일회성)
     halfDayType.value = null;
-    }
-    updateCalendarEvents();
-
     if (halfDayButtonsRef.value) {
         halfDayButtonsRef.value.resetHalfDay();
     }
+
+    updateCalendarEvents();
 }
 
 function markClickableDates() {