From 50d3b0d257827ae3c649d821f32fb1bb3914dbfd Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Wed, 19 Mar 2025 17:51:28 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9C=B4=EA=B0=80=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css                     | 24 +++++++-
 src/components/button/HalfDayButtons.vue  | 73 ++++++++++++-----------
 src/views/vacation/VacationManagement.vue | 55 ++++++++++-------
 3 files changed, 96 insertions(+), 56 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index e57b64f..1e22a80 100644
--- a/public/css/custom.css
+++ b/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;
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index b706a2a..90d48e8 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -1,67 +1,72 @@
 <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' }"
-                @click="toggleHalfDay('AM')">
-                <i class="bi bi-sun"></i>
-            </button>
+                <!-- 오전 반차 버튼 -->
+                <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' }"
-                @click="toggleHalfDay('PM')">
-                <i class="bi bi-moon"></i>
-            </button>
+                <!-- 오후 반차 버튼 -->
+                <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"
-                :class="{ active: !isDisabled, disabled: isDisabled }">
-                ✔
-            </button>
+                <!-- 풀 연차 버튼 -->
+                <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>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { defineEmits, ref, defineProps, watch } from "vue";
+import { defineEmits, ref, defineProps } from "vue";
 
 const props = defineProps({
-isDisabled: Boolean,
-selectedDate: String // 날짜 선택 값을 props로 받음
+    isDisabled: Boolean
 });
 
 const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
 const halfDayType = ref(null);
 
 const toggleHalfDay = (type) => {
-halfDayType.value = halfDayType.value === type ? null : type;
-emit("toggleHalfDay", halfDayType.value);
+    halfDayType.value = halfDayType.value === type ? null : type;
+    emit("toggleHalfDay", halfDayType.value);
 };
 
-// `selectedDate`가 변경되면 반차 선택 초기화
-watch(() => props.selectedDate, (newDate) => {
-if (newDate) {
-resetHalfDay();
-}
-});
-
-// 날짜 선택 후 반차 버튼 상태 초기화
+// 날짜 클릭 후 버튼 상태 자동 초기화
 const resetHalfDay = () => {
-halfDayType.value = null;
-emit("resetHalfDay");
+    halfDayType.value = null;
+    emit("resetHalfDay");
 };
 
 const addVacationRequests = () => {
-emit("addVacationRequests");
+    emit("addVacationRequests");
 };
 
 defineExpose({ resetHalfDay });
 </script>
-
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 7cde896..ae16a4c 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/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) : "";
-        return vacDate === clickedDateStr && !vac.receiverId;
-    });
+    // 기존 값 확인
+    const currentValue = selectedDates.value.get(clickedDateStr);
 
-    if (isMyVacation) {
-        if (selectedDates.value.get(clickedDateStr) === "delete") {
-            selectedDates.value.delete(clickedDateStr);
+    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 (currentValue === "delete") {
+                selectedDates.value.delete(clickedDateStr);
+            } else {
+                selectedDates.value.set(clickedDateStr, "delete");
+            }
         } else {
-            selectedDates.value.set(clickedDateStr, "delete");
+            selectedDates.value.set(clickedDateStr, "700103");
         }
         updateCalendarEvents();
         return;
     }
 
-    if (selectedDates.value.has(clickedDateStr)) {
-        selectedDates.value.delete(clickedDateStr);
-        updateCalendarEvents();
-        return;
+    // 버튼을 눌렀을 때 - 기존 휴가 삭제 후 새로운 값 추가
+    if (isMyVacation) {
+        console.log("🗑 기존 휴가 삭제 후 새로운 상태 추가:", clickedDateStr);
+        selectedDates.value.set(clickedDateStr, "delete");
     }
-    const type = halfDayType.value
-        ? (halfDayType.value === "AM" ? "700101" : "700102")
-        : "700103";
+
+    const type = halfDayType.value === "AM" ? "700101" :
+                 halfDayType.value === "PM" ? "700102" :
+                 "700103"; // 풀연차
 
     selectedDates.value.set(clickedDateStr, type);
 
-    if (halfDayType.value) {
-        halfDayType.value = null;
-    }
-    updateCalendarEvents();
-
+    // 버튼을 한 번 사용 후 자동 해제 (일회성)
+    halfDayType.value = null;
     if (halfDayButtonsRef.value) {
         halfDayButtonsRef.value.resetHalfDay();
     }
+
+    updateCalendarEvents();
 }
 
 function markClickableDates() {