휴가css 수정정

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%);

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' }"

src/components/modal/VacationGrantModal.vue

@@ -1,24 +1,25 @@
 <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>
-
+          <div class="custom-button-container">
-          <button class="gift-btn" @click="saveVacationGrant" :disabled="grantCount === 0">
+          <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
             <i class="bx bx-gift"></i>
           </button>
           </div>
         </div>
       </div>
+    </div>
   </template>
 
   <script setup>
@@ -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>

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>

src/views/vacation/VacationManagement.vue

@@ -156,11 +156,22 @@
     if (titleEl) {
         titleEl.style.cursor = 'pointer';
         titleEl.addEventListener('click', () => {
+        // 화면 중앙 정렬을 위한 스타일 조정
+        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) {