From f71651729ef3a1f34fb2104b43567b49f6966a43 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 25 Feb 2025 14:09:31 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=ED=9C=B4=EA=B0=80css=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                       | 99 ++++++++++++++++++---
 public/vendor/css/core.css                  |  4 +-
 src/components/button/HalfDayButtons.vue    |  3 +-
 src/components/modal/VacationGrantModal.vue | 88 ++----------------
 src/components/modal/VacationModal.vue      | 93 ++-----------------
 src/views/vacation/VacationManagement.vue   | 23 +++--
 6 files changed, 121 insertions(+), 189 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index c4bb01d..af34e46 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -7,42 +7,121 @@
 
 
 /* 휴가 */
-.half-day-buttons {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
-  margin-top: 20px;
-}
-.half-day-buttons .btn.active {
-  border: 2px solid black;
-}
 
 .fc-daygrid-day-events {
   max-height: 100px !important;
   overflow-y: auto !important;
 }
-
+/* 이벤트 선 없게 */
 .fc-event {
   border: none;
 }
+/* 오전전반차 그래프 */
 .fc-daygrid-event.half-day-am {
   width: calc(50% - 4px) !important;
 }
+/* 오후반차 그래프프 */
 .fc-daygrid-event.half-day-pm {
   width: calc(50% - 4px) !important;
   margin-left: auto !important
 }
+/* 공휴일,일요일 색상 */
 .fc-day-sun .fc-daygrid-day-number,
 .fc-col-header-cell:first-child .fc-col-header-cell-cushion {
   color: #ff4500 !important;
 }
+/* 토요일 색상 */
 .fc-day-sat .fc-daygrid-day-number,
 .fc-col-header-cell:last-child .fc-col-header-cell-cushion {
   color: #6076e0 !important;
 }
+/* 캘린더 날짜 왼쪽 상단 위치하게 */
 .fc-daygrid-day-number {
   margin-right: auto;
 }
+/* 데이트피커 뾰족없게게 */
+.flatpickr-calendar:before,
+.flatpickr-calendar:after {
+    display: none !important;
+}
+
+/* 본인 모달 */
+
+/* 닫기 버튼 */
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 18px;
+  cursor: pointer;
+}
+/* 리스트 아이템 */
+.vacation-item {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  background: #f9f9f9;
+}
+/* 모달 본문 스크롤 */
+.modal-body {
+  max-height: 130px;
+  overflow-y: auto;
+}
+
+/* 선물하기 모달 */
+
+/* 연차 개수 버튼 */
+.count-btn {
+  font-size: 18px;
+  padding: 2px 10px;
+  border: none;
+  background: #2C3E50;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.count-btn:hover {
+  background: #1d2c44;
+}
+.count-btn:disabled {
+  background: #cccccc;
+  cursor: not-allowed;
+}
+
+/* 버튼 컨테이너 (우측 정렬) */
+.custom-button-container {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+/* 버튼 기본 스타일 */
+.custom-button {
+  background: none; /* 배경색 없음 */
+  border: none; /* 테두리 없음 */
+  padding: 10px; /* 크기 조정 */
+  cursor: pointer; /* 클릭 가능하도록 변경 */
+}
+
+/* 아이콘 색상 변경 (기본) */
+.custom-button i {
+  color: #282538; /* 기본 아이콘 색상 */
+  font-size: 25px; /* 아이콘 크기 */
+}
+
+/* 버튼 호버 효과 */
+.custom-button:hover i {
+  color: #007BFF; /* 호버 시 아이콘 색상 변경 (파란색) */
+}
+
+
+
+
 
   .grayscaleImg {
     filter: grayscale(100%);
diff --git a/public/vendor/css/core.css b/public/vendor/css/core.css
index 48dd4cf..bf84231 100644
--- a/public/vendor/css/core.css
+++ b/public/vendor/css/core.css
@@ -14820,8 +14820,8 @@ body {
   font-size: 1.1em;
   line-height: 1;
   -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  user-select: none;
 }
 .ui-star + .ui-star {
   margin-left: -0.1em;
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index 83f4c35..8c77ed2 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -1,5 +1,6 @@
 <template>
-    <div class="half-day-buttons">
+    <div class="menu gap-4 justify-content-center mt-5">
+
       <button
         class="btn btn-info"
         :class="{ active: halfDayType === 'AM' }"
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index 333810e..fa4867d 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -1,21 +1,22 @@
 <template>
     <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-      <div class="modal-content">
+      <div class="modal-content p-5">
         <h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
         <button class="close-btn" @click="closeModal">✖</button>
 
         <div class="modal-body">
           <p>선물할 연차 개수를 선택하세요.</p>
 
-          <div class="vacation-control">
+          <div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center">
             <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
-            <span class="grant-count">{{ grantCount }}</span>
+            <span class="text-dark fw-bold fs-4">{{ grantCount }}</span>
             <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
           </div>
-
-          <button class="gift-btn" @click="saveVacationGrant" :disabled="grantCount === 0">
+          <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>
@@ -124,81 +125,4 @@
 
   <style scoped>
 
-  /* 모달 본문 */
-  .modal-content {
-    background: white;
-    padding: 20px;
-    border-radius: 12px;
-    width: 300px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
-    text-align: center;
-    position: relative;
-  }
-
-  /* 닫기 버튼 */
-  .close-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 18px;
-    cursor: pointer;
-  }
-
-  /* 연차 개수 조정 버튼 */
-  .vacation-control {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    margin-top: 15px;
-  }
-
-  .count-btn {
-    font-size: 18px;
-    padding: 6px 12px;
-    border: none;
-    background: #007bff;
-    color: white;
-    border-radius: 5px;
-    cursor: pointer;
-  }
-
-  .count-btn:disabled {
-    background: #ccc;
-    cursor: not-allowed;
-  }
-
-  /* 개수 표시 */
-  .grant-count {
-    font-size: 20px;
-    font-weight: bold;
-    color: #333;
-  }
-
-  /* 선물 아이콘 버튼 */
-  .gift-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    background: #28a745;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    padding: 10px 15px;
-    margin-top: 15px;
-    cursor: pointer;
-    transition: 0.3s;
-  }
-
-  .gift-btn:hover {
-    background: #218838;
-  }
-
-  .gift-btn:disabled {
-    background: #ccc;
-    cursor: not-allowed;
-  }
   </style>
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index d57e482..816940b 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,29 +1,28 @@
 <template>
     <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-      <div class="modal-content modal-scroll">
+      <div class="modal-content p-5 modal-scroll">
         <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">
+          <ol class="list-group-numbered px-0 mt-4">
             <li
               v-for="(vac, index) in mergedVacations"
               :key="vac._expandIndex"
               class="vacation-item"
             >
               <!-- Used 항목만 인덱스 표시 -->
-              <span v-if="vac.category === 'used'" class="vacation-index">
+              <span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
                 {{ usedVacationIndexMap[vac._expandIndex] }})
               </span>
 
-              <span :class="vac.category === 'used' ? 'minus-symbol' : 'plus-symbol'">
+              <span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
                 {{ vac.category === 'used' ? '-' : '+' }}
               </span>
 
               <span
                 :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
-                class="vacation-date"
               >
                 {{ formatDate(vac.date) }}
               </span>
@@ -32,7 +31,7 @@
         </div>
 
         <!-- 연차 데이터 없음 -->
-        <p v-else class="no-data">
+        <p v-else class="text-sm-center mt-5 text-gray">
           🚫 사용한 연차가 없습니다.
         </p>
       </div>
@@ -139,86 +138,4 @@ const closeModal = () => {
 </script>
 
   <style scoped>
-  /* 모달 본문 */
-  .modal-content {
-    background: white;
-    padding: 20px;
-    border-radius: 12px;
-    width: 300px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
-    text-align: center;
-    position: relative;
-  }
-
-  /* 닫기 버튼 */
-  .close-btn {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 18px;
-    cursor: pointer;
-  }
-
-  /* 리스트 기본 스타일 */
-  .vacation-list {
-    list-style-type: none;
-    padding-left: 0;
-    margin-top: 15px;
-  }
-
-  /* 리스트 아이템 */
-  .vacation-item {
-    display: flex;
-    align-items: center;
-    font-size: 16px;
-    font-weight: bold;
-    margin-bottom: 8px;
-    padding: 5px 10px;
-    border-radius: 5px;
-    background: #f9f9f9;
-  }
-
-  /* 인덱스 (연차 사용 개수) */
-  .vacation-index {
-    font-weight: bold;
-    font-size: 16px;
-    margin-right: 8px;
-    color: #333;
-  }
-
-  /* "-" 빨간색 */
-  .minus-symbol {
-    color: red;
-    font-weight: bold;
-    margin-right: 8px;
-  }
-
-  /* "+" 파란색 */
-  .plus-symbol {
-    color: blue;
-    font-weight: bold;
-    margin-right: 8px;
-  }
-
-  /* 날짜 스타일 */
-  .vacation-date {
-    font-size: 16px;
-    color: #333;
-  }
-
-  /* 연차 데이터 없음 */
-  .no-data {
-    text-align: center;
-    font-size: 14px;
-    color: gray;
-    margin-top: 10px;
-  }
-
-  /* 모달 본문 스크롤: 높이가 300px 이상이면 스크롤바 표시 */
-.modal-body {
-  max-height: 130px;
-  overflow-y: auto;
-}
   </style>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 004c2a0..faa458a 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -150,17 +150,28 @@
       }
     });
 
-    // FullCalendar 헤더 제목(.fc-toolbar-title) 클릭 시 데이트피커 열기
+   // FullCalendar 헤더 제목(.fc-toolbar-title) 클릭 시 데이트피커 열기
     nextTick(() => {
-      const titleEl = document.querySelector('.fc-toolbar-title');
-      if (titleEl) {
+    const titleEl = document.querySelector('.fc-toolbar-title');
+    if (titleEl) {
         titleEl.style.cursor = 'pointer';
         titleEl.addEventListener('click', () => {
-          fpInstance.open();
+        // 화면 중앙 정렬을 위한 스타일 조정
+        const dpEl = calendarDatepicker.value;
+        dpEl.style.display = 'block';
+        dpEl.style.position = 'fixed';
+        dpEl.style.top = '22%';
+        dpEl.style.left = '66%';
+        dpEl.style.transform = 'translate(-50%, -50%)';
+        dpEl.style.zIndex = '9999';
+        dpEl.style.border = 'none';
+        dpEl.style.outline = 'none';
+        dpEl.style.backgroundColor = 'transparent';
+        fpInstance.open();
         });
-      }
+    }
     });
-  });
+  })
 
   // 연차 내역 API (초기 호출용)
   async function fetchVacationHistory(year) {

From bb1715c71b76cc3098b89bb80fc764e7fd04c92f Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 27 Feb 2025 10:33:48 +0900
Subject: [PATCH 2/3] =?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                       |  46 +++++-
 src/components/button/HalfDayButtons.vue    |  79 ++++++++++-
 src/components/modal/VacationGrantModal.vue |   2 +-
 src/components/modal/VacationModal.vue      |   2 +-
 src/views/vacation/VacationManagement.vue   | 147 ++++++++++++++------
 5 files changed, 223 insertions(+), 53 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index af34e46..af17624 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -44,6 +44,30 @@
 .flatpickr-calendar:after {
     display: none !important;
 }
+ /* 기본 스타일은 그대로 두고, 데이트피커 인풋의 추가 스타일 정의 */
+ .fc-toolbar-title {
+  cursor: pointer;
+}
+/* 클릭 가능한 날짜 (오늘 + 미래) */
+.fc-daygrid-day.clickable {
+cursor: pointer;
+transition: background-color 0.2s ease-in-out;
+}
+/* 마우스를 올렸을 때 효과 */
+.fc-daygrid-day.clickable:hover {
+background-color: rgba(0, 0, 0, 0.05); /* 연한 배경 효과 */
+}
+/* 주말 (토요일, 일요일) 및 공휴일 */
+.fc-day-sat-sun {
+cursor: not-allowed !important;
+opacity: 0.6; /* 흐려 보이게 */
+}
+/* 과거 날짜 (오늘 이전) */
+.fc-daygrid-day.past {
+cursor: not-allowed !important;
+opacity: 0.6; /* 흐려 보이게 */
+}
+
 
 /* 본인 모달 */
 
@@ -116,12 +140,32 @@
 
 /* 버튼 호버 효과 */
 .custom-button:hover i {
-  color: #007BFF; /* 호버 시 아이콘 색상 변경 (파란색) */
+  color: #ff0800; /* 호버 시 아이콘 색상 변경 */
 }
 
 
 
 
+/* 모달 배경 투명하게 */
+.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%;
+}
 
   .grayscaleImg {
     filter: grayscale(100%);
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index 8c77ed2..f2c5856 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -2,21 +2,21 @@
     <div class="menu gap-4 justify-content-center mt-5">
 
       <button
-        class="btn btn-info"
+        class="btn btn-warning"
         :class="{ active: halfDayType === 'AM' }"
         @click="toggleHalfDay('AM')"
       >
         <i class="bi bi-sun"></i>
       </button>
       <button
-        class="btn btn-warning"
+        class="btn btn-info"
         :class="{ active: halfDayType === 'PM' }"
         @click="toggleHalfDay('PM')"
       >
         <i class="bi bi-moon"></i>
       </button>
       <div class="save-button-container">
-        <button class="btn btn-success" @click="addVacationRequests">
+        <button class="btn btn-success" @click="addVacationRequests" :disabled="isDisabled">
           ✔
         </button>
       </div>
@@ -26,6 +26,10 @@
 <script setup>
 import { defineEmits, ref } from "vue";
 
+defineProps({
+  isDisabled: Boolean
+});
+
 const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
 const halfDayType = ref(null);
 
@@ -39,6 +43,73 @@ const addVacationRequests = () => {
 };
 </script>
 
-  <style scoped>
+<style scoped>
+/* 버튼 기본 스타일 */
+.btn {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+}
 
+/* 마우스를 올렸을 때 */
+.btn:hover {
+  filter: brightness(90%);
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+  transform: scale(1.05);
+}
+
+/* 버튼이 눌렸을 때 */
+.btn:active {
+  transform: scale(0.9);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+/* 선택된 (눌린) 버튼 */
+.btn.active {
+  border: 3px solid #fff; /* 흰색 테두리 강조 */
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+}
+
+/* AM 버튼 (선택된 상태) */
+.btn-warning.active {
+  background-color: #ffca2c !important; /* 진한 노란색 */
+  color: black;
+}
+
+/* PM 버튼 (선택된 상태) */
+.btn-info.active {
+  background-color: #0b5ed7 !important; /* 진한 파란색 */
+  color: white;
+}
+
+/* ✔ 버튼 */
+.btn-success {
+  font-size: 24px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease-in-out;
+}
+
+/* ✔ 버튼 마우스 오버 */
+.btn-success:hover {
+  background-color: #198754;
+  box-shadow: 0px 4px 10px rgba(25, 135, 84, 0.4);
+  transform: scale(1.1);
+}
+
+/* ✔ 버튼 클릭 */
+.btn-success:active {
+  transform: scale(0.95);
+  box-shadow: 0px 2px 5px rgba(25, 135, 84, 0.2);
+}
   </style>
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index fa4867d..0f724d6 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -7,7 +7,7 @@
         <div class="modal-body">
           <p>선물할 연차 개수를 선택하세요.</p>
 
-          <div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center">
+          <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>
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index 816940b..4dbe9ce 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -31,7 +31,7 @@
         </div>
 
         <!-- 연차 데이터 없음 -->
-        <p v-else class="text-sm-center mt-5 text-gray">
+        <p v-else class="text-sm-center mt-10 text-gray">
           🚫 사용한 연차가 없습니다.
         </p>
       </div>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index faa458a..08b511b 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -9,6 +9,7 @@
                 <HalfDayButtons
                   @toggleHalfDay="toggleHalfDay"
                   @addVacationRequests="saveVacationChanges"
+                  :isDisabled="!hasChanges"
                 />
               </div>
               <ProfileList
@@ -106,6 +107,64 @@
   const calendarDatepicker = ref(null);
   let fpInstance = null;
 
+/** ✅ 변경사항 여부 확인 */
+const hasChanges = computed(() => {
+  return (
+    selectedDates.value.size > 0 ||
+    myVacations.value.some(vac => selectedDates.value.has(vac.date.split("T")[0]))
+  );
+});
+
+
+/** ✅ selectedDates가 변경될 때 버튼 상태 즉시 업데이트 */
+watch(
+  () => Array.from(selectedDates.value.keys()), // keys()를 Array로 변환해서 감시
+  (newKeys) => {
+  },
+  { deep: true }
+);
+
+function handleDateClick(info) {
+    const clickedDateStr = info.dateStr;
+    const clickedDate = info.date;
+    const todayStr = new Date().toISOString().split("T")[0];
+
+    if (
+      clickedDate.getDay() === 0 ||
+      clickedDate.getDay() === 6 ||
+      holidayDates.value.has(clickedDateStr) ||
+      clickedDateStr < todayStr
+    ) {
+      return;
+    }
+    const isMyVacation = myVacations.value.some(vac => {
+      const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
+      return vacDate === clickedDateStr && !vac.receiverId;
+    });
+
+    if (isMyVacation) {
+      if (selectedDates.value.get(clickedDateStr) === "delete") {
+        selectedDates.value.delete(clickedDateStr);
+      } else {
+        selectedDates.value.set(clickedDateStr, "delete");
+      }
+      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();
+  }
+
   const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
     initialView: "dayGridMonth",
@@ -309,47 +368,6 @@
     return "full-day";
   };
 
-  function handleDateClick(info) {
-    const clickedDateStr = info.dateStr;
-    const clickedDate = info.date;
-    const todayStr = new Date().toISOString().split("T")[0];
-
-    if (
-      clickedDate.getDay() === 0 ||
-      clickedDate.getDay() === 6 ||
-      holidayDates.value.has(clickedDateStr) ||
-      clickedDateStr < todayStr
-    ) {
-      return;
-    }
-    const isMyVacation = myVacations.value.some(vac => {
-      const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
-      return vacDate === clickedDateStr && !vac.receiverId;
-    });
-
-    if (isMyVacation) {
-      if (selectedDates.value.get(clickedDateStr) === "delete") {
-        selectedDates.value.delete(clickedDateStr);
-      } else {
-        selectedDates.value.set(clickedDateStr, "delete");
-      }
-      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();
-  }
-
   function toggleHalfDay(type) {
     halfDayType.value = halfDayType.value === type ? null : type;
   }
@@ -392,6 +410,7 @@
   }
 
   async function saveVacationChanges() {
+    if (!hasChanges.value) return;
     const selectedDatesArray = Array.from(selectedDates.value);
     const vacationsToAdd = selectedDatesArray
       .filter(([date, type]) => type !== "delete")
@@ -458,6 +477,46 @@
     await nextTick();
     fullCalendarRef.value.getApi().refetchEvents();
   }
+  /** ✅ 오늘 이후의 날짜만 클릭 가능하도록 설정 */
+function markClickableDates() {
+  nextTick(() => {
+    const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD
+    const todayObj = new Date(todayStr);
+
+    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)) {
+        cell.classList.remove("clickable");
+        cell.classList.add("fc-day-sat-sun");
+      }
+      // 과거 날짜 (오늘 이전)
+      else if (dateObj < todayObj) {
+        cell.classList.remove("clickable");
+        cell.classList.add("past"); // 과거 날짜 비활성화
+      }
+      // 오늘 & 미래 날짜 (클릭 가능)
+      else {
+        cell.classList.add("clickable");
+        cell.classList.remove("past", "fc-day-sat-sun");
+      }
+    });
+  });
+}
+
+/** ✅ onMounted 및 달력 변경 시 실행 */
+onMounted(() => {
+  markClickableDates();
+});
+
+watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
+  markClickableDates();
+});
+
 
   onMounted(async () => {
     await fetchUserList();
@@ -471,10 +530,6 @@
   </script>
 
   <style>
-  /* 기본 스타일은 그대로 두고, 데이트피커 인풋의 추가 스타일 정의 */
-  .fc-toolbar-title {
-    cursor: pointer;
-  }
 
-  /* 데이트피커 인풋은 Flatpickr에서 동적으로 스타일 적용됨 */
+
   </style>

From 80e59e43550a6a0ee8a33502a4bfab0bfdf81dd7 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 27 Feb 2025 13:05:10 +0900
Subject: [PATCH 3/3] =?UTF-8?q?vacation=20=EC=88=98=EC=A0=95,=20=EA=B2=8C?=
 =?UTF-8?q?=EC=8B=9C=ED=8C=90=20=EA=B8=80=EC=93=B0=EA=B8=B0=20=EC=88=98?=
 =?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                       | 19 ++++++++++++
 src/components/button/HalfDayButtons.vue    | 32 ++++++++++++++++-----
 src/components/modal/VacationGrantModal.vue | 12 ++++----
 src/views/board/BoardWrite.vue              | 11 +++++--
 src/views/vacation/VacationManagement.vue   | 15 ++++++----
 5 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index af17624..94e4977 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -67,6 +67,25 @@ opacity: 0.6; /* 흐려 보이게 */
 cursor: not-allowed !important;
 opacity: 0.6; /* 흐려 보이게 */
 }
+/* 기본 이벤트 스타일 */
+.fc-daygrid-event {
+  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;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
 
 
 /* 본인 모달 */
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index f2c5856..9bb125f 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="menu gap-4 justify-content-center mt-5">
-
+      <!-- 오전 반차 버튼 -->
       <button
         class="btn btn-warning"
         :class="{ active: halfDayType === 'AM' }"
@@ -8,6 +8,8 @@
       >
         <i class="bi bi-sun"></i>
       </button>
+
+      <!-- 오후 반차 버튼 -->
       <button
         class="btn btn-info"
         :class="{ active: halfDayType === 'PM' }"
@@ -15,32 +17,48 @@
       >
         <i class="bi bi-moon"></i>
       </button>
+
+      <!-- 저장 버튼 -->
       <div class="save-button-container">
         <button class="btn btn-success" @click="addVacationRequests" :disabled="isDisabled">
           ✔
         </button>
       </div>
     </div>
-  </template>
+</template>
 
 <script setup>
-import { defineEmits, ref } from "vue";
+import { defineEmits, ref, defineProps } from "vue";
 
-defineProps({
+const props = defineProps({
   isDisabled: Boolean
 });
 
-const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
+const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
 const halfDayType = ref(null);
 
 const toggleHalfDay = (type) => {
-  halfDayType.value = halfDayType.value === type ? null : type;
+  halfDayType.value = type;
+
   emit("toggleHalfDay", halfDayType.value);
+
+  // ✅ 버튼 클릭 후 1초 후 자동 비활성화
+  setTimeout(() => {
+    halfDayType.value = null;
+  }, 1000);
+};
+
+// 날짜 선택 후 반차 버튼 상태 초기화
+const resetHalfDay = () => {
+  halfDayType.value = null;
+  emit("resetHalfDay");
 };
 
 const addVacationRequests = () => {
   emit("addVacationRequests");
 };
+
+defineExpose({ resetHalfDay });
 </script>
 
 <style scoped>
@@ -112,4 +130,4 @@ const addVacationRequests = () => {
   transform: scale(0.95);
   box-shadow: 0px 2px 5px rgba(25, 135, 84, 0.2);
 }
-  </style>
+</style>
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index 0f724d6..d3baa12 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -25,7 +25,9 @@
   <script setup>
   import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
   import axios from "@api";
+  import { useToastStore } from '@s/toastStore';
 
+  const toastStore = useToastStore();
   const props = defineProps({
     isOpen: Boolean,
     targetUser: Object,
@@ -73,21 +75,18 @@
           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") {
-        alert("✅ 연차가 부여되었습니다.");
+        toastStore.onToast('연차가 선물되었습니다.', 's');
         await fetchSentVacationCount();
         emit("updateVacation");
         closeModal();
       } else {
-        alert("🚨 연차 추가 중 오류가 발생했습니다.");
+       toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
       }
     } catch (error) {
       console.error("🚨 연차 추가 실패:", error);
-      alert("연차 추가에 실패했습니다.");
+      toastStore.onToast(' 연차 선물 실패!!.', 'e');
     }
   };
 
@@ -99,7 +98,6 @@
     () => props.isOpen,
     async (newVal) => {
       if (newVal && props.targetUser && props.targetUser.MEMBERSEQ) {
-        console.log("🟢 모달이 열렸습니다. 데이터를 로드합니다.");
         await fetchSentVacationCount();
       }
     }
diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue
index b5f0a45..b337d6c 100644
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@@ -91,7 +91,9 @@ import router from '@/router';
 import axios from '@api';
 import SaveButton from '@c/button/SaveBtn.vue';
 import BackButton from '@c/button/BackBtn.vue'
+import { useToastStore } from '@s/toastStore';
 
+const toastStore = useToastStore();
 const categoryList = ref([]);
 const title = ref('');
 const password = ref('');
@@ -113,6 +115,11 @@ const fetchCategories = async () => {
     try {
         const response = await axios.get('board/categories');
         categoryList.value = response.data.data;
+        // "자유" 카테고리 찾기 (CMNCODNAM이 '자유'인 것 선택)
+        const freeCategory = categoryList.value.find(category => category.CMNCODNAM === '자유');
+        if (freeCategory) {
+            categoryValue.value = freeCategory.CMNCODVAL; // 기본 선택값 설정
+        }
     } catch (error) {
         console.error('카테고리 불러오기 오류:', error);
     }
@@ -167,11 +174,11 @@ const write = async () => {
             }
         }
 
-        alert('게시물이 작성되었습니다.');
+        toastStore.onToast('게시물이 작성되었습니다.', 's');
         goList();
     } catch (error) {
         console.error(error);
-        alert('게시물 작성 중 오류가 발생했습니다.');
+        toastStore.onToast('게시물 작성 중 오류가 발생했습니다.', 'e');
     }
 };
 </script>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 08b511b..6c26514 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -79,7 +79,9 @@
   import { useUserStore } from "@s/userList";
   import { useUserInfoStore } from "@s/useUserInfoStore";
   import { fetchHolidays } from "@c/calendar/holiday.js";
+  import { useToastStore } from '@s/toastStore';
 
+  const toastStore = useToastStore();
   const userStore = useUserInfoStore();
   const userListStore = useUserStore();
   const userList = ref([]);
@@ -102,6 +104,7 @@
   const vacationCodeMap = ref({});
   const holidayDates = ref(new Set());
   const fetchedEvents = ref([]);
+  const halfDayButtonsRef = ref(null);
 
   // 데이트피커 인풋 ref
   const calendarDatepicker = ref(null);
@@ -163,6 +166,10 @@ function handleDateClick(info) {
     selectedDates.value.set(clickedDateStr, type);
     halfDayType.value = null;
     updateCalendarEvents();
+    // ✅ 날짜 선택 후 버튼 초기화
+    if (halfDayButtonsRef.value) {
+        halfDayButtonsRef.value.resetHalfDay();
+    }
   }
 
   const calendarOptions = reactive({
@@ -342,7 +349,6 @@ function handleDateClick(info) {
     const selectedEvents = Array.from(selectedDates.value)
       .filter(([date, type]) => type !== "delete")
       .map(([date, type]) => ({
-        title: getVacationType(type),
         start: date,
         backgroundColor: "rgb(113 212 243 / 76%)",
         textColor: "#fff",
@@ -435,7 +441,7 @@ function handleDateClick(info) {
         delete: vacationsToDelete
       });
       if (response.data && response.data.status === "OK") {
-        alert("✅ 휴가 변경 사항이 저장되었습니다.");
+        toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's');
         await fetchRemainingVacation();
         if (isModalOpen.value) {
           await fetchVacationHistory(lastRemainingYear.value);
@@ -445,11 +451,11 @@ function handleDateClick(info) {
         selectedDates.value.clear();
         updateCalendarEvents();
       } else {
-        alert("❌ 휴가 저장 중 오류가 발생했습니다.");
+        toastStore.onToast('휴가 저장 중 오류가 발생했습니다.', 'e');
       }
     } catch (error) {
       console.error("🚨 휴가 변경 저장 실패:", error);
-      alert("❌ 휴가 저장 요청에 실패했습니다.");
+      toastStore.onToast('휴가 저장 요청에 실패했습니다.', 'e');
     }
   }
 
@@ -531,5 +537,4 @@ watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
 
   <style>
 
-
   </style>