휴가저장,리스트

src/views/vacation/VacationManagement.vue

@@ -1,14 +1,11 @@
 <template>
     <div class="vacation-management">
-      <div class="container-xxl flex-grow-1 container-p-y">
-        <div class="save-button-container">
-          <button class="btn btn-success" @click="addVacationRequests">✔ 저장</button>
-        </div>
+      <div class="container flex-grow-1">
         <div class="card app-calendar-wrapper">
           <div class="row g-0">
             <div class="col app-calendar-content">
               <div class="card shadow-none border-0">
-                <div class="card-body pb-0">
+                <div class="card-body">
                   <full-calendar
                     ref="fullCalendarRef"
                     :options="calendarOptions"
@@ -17,13 +14,27 @@
                 </div>
               </div>
               <div class="half-day-buttons">
-                <button class="btn btn-info" :class="{ active: halfDayType === 'AM' }" @click="toggleHalfDay('AM')">
-                  오전반차
+                <button
+                  class="btn btn-info"
+                  :class="{ active: halfDayType === 'AM' }"
+                  @click="toggleHalfDay('AM')"
+                >
+                  <i class="bi bi-sun"></i>
                 </button>
-                <button class="btn btn-warning" :class="{ active: halfDayType === 'PM' }" @click="toggleHalfDay('PM')">
-                  오후반차
+                <button
+                  class="btn btn-warning"
+                  :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>
+                </div>
               </div>
+              <br />
             </div>
           </div>
         </div>
@@ -31,207 +42,336 @@
     </div>
   </template>
 
-<script setup>
-import FullCalendar from "@fullcalendar/vue3";
-import dayGridPlugin from "@fullcalendar/daygrid";
-import interactionPlugin from "@fullcalendar/interaction";
-import "flatpickr/dist/flatpickr.min.css";
-import "@/assets/css/app-calendar.css";
-import { reactive, ref, onMounted } from "vue";
-import axios from "@api";
+  <script setup>
+  import FullCalendar from "@fullcalendar/vue3";
+  import dayGridPlugin from "@fullcalendar/daygrid";
+  import interactionPlugin from "@fullcalendar/interaction";
+  import "flatpickr/dist/flatpickr.min.css";
+  import "@/assets/css/app-calendar.css";
+  import { reactive, ref, onMounted, nextTick } from "vue";
+  import axios from "@api";
+  import "bootstrap-icons/font/bootstrap-icons.css";
 
-const fullCalendarRef = ref(null);
-const calendarEvents = ref([]); // FullCalendar의 이벤트 리스트
-const selectedDates = ref(new Map());
-const halfDayType = ref(null);
-const employeeId = ref(1);
+  // FullCalendar 관련 참조 및 데이터
+  const fullCalendarRef = ref(null);
+  const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트)
+  const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
+  const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
+  const halfDayType = ref(null);
+  const employeeId = ref(1);
 
-const calendarOptions = reactive({
+  // 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
+  const holidayDates = ref(new Set());
+
+  // FullCalendar 옵션 객체 (events에 calendarEvents를 지정)
+  const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
     initialView: "dayGridMonth",
     headerToolbar: {
-        left: "today",
-        center: "title",
-        right: "prev,next",
+      left: "today",
+      center: "title",
+      right: "prev,next",
     },
     locale: "ko",
-    selectable: true,
+    selectable: false,
     dateClick: handleDateClick,
-    events: calendarEvents, // 이벤트 리스트를 직접 반영
-});
+    datesSet: handleMonthChange,
+    events: calendarEvents,
+  });
 
-/**
- * 날짜 클릭 이벤트
- */
-function handleDateClick(info) {
-    const date = info.dateStr;
-    if (!selectedDates.value.has(date)) {
-        const type = halfDayType.value ? (halfDayType.value === "AM" ? "D" : "N") : "F";
-        selectedDates.value.set(date, type);
+  /**
+   * API 이벤트(fetchedEvents)와 사용자가 선택한 날짜(selectedDates)를 병합하여
+   * calendarEvents를 업데이트하는 함수
+   * - 선택 이벤트는 display: "background" 옵션을 사용하여 배경으로 표시
+   * - 선택된 타입에 따라 클래스(selected-am, selected-pm, selected-full)를 부여함
+   */
+  function updateCalendarEvents() {
+    const selectedEvents = Array.from(selectedDates.value).map(([date, type]) => {
+      let className = "";
+      let title = "";
+      if (type === "D") {
+        className = "selected-am"; // 오전: 왼쪽 절반
+        title = "오전반차 (선택)";
+      } else if (type === "N") {
+        className = "selected-pm"; // 오후: 오른쪽 절반
+        title = "오후반차 (선택)";
+      } else {
+        className = "selected-full"; // 전체 영역
+        title = "연차 (선택)";
+      }
+      return {
+        title,
+        start: date,
+        backgroundColor: "rgba(0, 128, 0, 0.3)",
+        display: "background",
+        classNames: [className],
+      };
+    });
+    calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
+  }
+
+  /**
+   * 날짜 클릭 이벤트
+   * - 주말(토, 일)과 공휴일은 클릭되지 않음
+   * - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
+   */
+  function handleDateClick(info) {
+    const clickedDateStr = info.dateStr;
+    const clickedDate = info.date;
+
+    // 주말 (토:6, 일:0)은 클릭 무시
+    if (clickedDate.getDay() === 0 || clickedDate.getDay() === 6) {
+      return;
+    }
+    // 공휴일이면 클릭 무시
+    if (holidayDates.value.has(clickedDateStr)) {
+      return;
+    }
+    if (!selectedDates.value.has(clickedDateStr)) {
+      const type = halfDayType.value
+        ? halfDayType.value === "AM"
+          ? "D"
+          : "N"
+        : "F";
+      selectedDates.value.set(clickedDateStr, type);
     } else {
-        selectedDates.value.delete(date);
+      selectedDates.value.delete(clickedDateStr);
     }
     halfDayType.value = null;
-}
+    updateCalendarEvents();
+  }
 
-/**
- * 오전/오후 반차 선택
- */
-function toggleHalfDay(type) {
+  /**
+   * 오전/오후 반차 버튼 토글
+   */
+  function toggleHalfDay(type) {
     halfDayType.value = halfDayType.value === type ? null : type;
-}
+  }
 
-/**
- * 백엔드에서 휴가 데이터를 가져와 FullCalendar에 반영
- */
-async function fetchVacationData() {
+  /**
+   * 백엔드에서 휴가 데이터를 가져와 이벤트로 변환
+   */
+  async function fetchVacationData(year, month) {
     try {
-        const response = await axios.get("vacation/list");
-
-        if (response.data.status === "OK") {
-            const vacationList = response.data.data;
-            console.log("📌 백엔드 응답 데이터:", vacationList);
-
-            if (!Array.isArray(vacationList)) {
-                throw new Error("vacationList is not an array.");
+      console.log(`📌 휴가 데이터 요청: ${year}-${month}`);
+      const response = await axios.get(`vacation/list/${year}/${month}`);
+      if (response.status == 200) {
+        const vacationList = response.data;
+        console.log("📌 백엔드 응답 데이터:", vacationList);
+        const events = vacationList
+          .map((vac) => {
+            let dateStr = vac.LOCVACUDT.split("T")[0];
+            let className = "fc-daygrid-event";
+            let backgroundColor = getColorByEmployeeId(vac.MEMBERSEQ);
+            let title = "연차";
+            if (vac.LOCVACTYP === "D") {
+              title = "오전반차";
+              className += " half-day-am";
+            } else if (vac.LOCVACTYP === "N") {
+              title = "오후반차";
+              className += " half-day-pm";
+            } else if (vac.LOCVACTYP === "F") {
+              title = "연차";
+              className += " full-day";
             }
-
-            // 이벤트 리스트 변환
-            const events = vacationList.map((vac) => {
-                let dateStr = vac.LOCVACUDT.split("T")[0];
-                let className = "fc-daygrid-event";
-
-                let title = "연차";
-                if (vac.LOCVACTYP === "D") {
-                    title = "오전반차";
-                    className += " half-day-am";
-                } else if (vac.LOCVACTYP === "N") {
-                    title = "오후반차";
-                    className += " half-day-pm";
-                } else if (vac.LOCVACTYP === "F") {
-                    title = "연차";
-                    className += " full-day";
-                }
-
-                return {
-                    title,
-                    start: dateStr,
-                    backgroundColor: getColorByEmployeeId(vac.MEMBERSEQ),
-                    classNames: [className],
-                };
-            }).filter((event) => event !== null);
-
-            console.log("📌 변환된 이벤트:", events);
-            calendarEvents.value = events; // FullCalendar 이벤트 업데이트
-        }
+            return {
+              title,
+              start: dateStr,
+              backgroundColor,
+              classNames: [className],
+            };
+          })
+          .filter((event) => event !== null);
+        return events;
+      } else {
+        console.warn("📌 휴가 데이터를 불러오지 못함");
+        return [];
+      }
     } catch (error) {
-        console.error("Error fetching vacation data:", error);
+      console.error("Error fetching vacation data:", error);
+      return [];
     }
-}
+  }
 
-/**
- * 휴가 요청 추가
- */
-async function addVacationRequests() {
-    if (selectedDates.value.size === 0) {
-        alert("휴가를 선택해주세요.");
-        return;
-    }
-
-    const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
-        date,
-        type,
-        employeeId: employeeId.value,
-    }));
-
-    try {
-        const response = await axios.post("vacation", vacationRequests);
-
-        if (response.data && response.data.status === "OK") {
-            alert("휴가가 저장되었습니다.");
-            fetchVacationData(); // 휴가 저장 후 데이터 다시 불러오기
-            selectedDates.value.clear();
-        } else {
-            alert("휴가 저장 중 오류가 발생했습니다.");
-        }
-    } catch (error) {
-        console.error(error);
-        alert("휴가 저장에 실패했습니다.");
-    }
-}
-
-/**
- * 사원 ID별 색상 반환
- */
-function getColorByEmployeeId(employeeId) {
+  /**
+   * 사원 ID별 색상 반환
+   */
+  function getColorByEmployeeId(employeeId) {
     const colors = ["#ade3ff", "#ffade3", "#ade3ad", "#ffadad"];
     return colors[employeeId % colors.length];
-}
+  }
 
-// 데이터 불러오기 호출
-onMounted(() => {
-    fetchVacationData();
-});
-</script>
+  /**
+   * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
+   */
+  async function addVacationRequests() {
+    if (selectedDates.value.size === 0) {
+      alert("휴가를 선택해주세요.");
+      return;
+    }
+    const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
+      date,
+      type,
+      employeeId: employeeId.value,
+    }));
+    try {
+      const response = await axios.post("vacation", vacationRequests);
+      if (response.data && response.data.status === "OK") {
+        alert("휴가가 저장되었습니다.");
+        // 저장 후 현재 달 데이터 다시 불러오기
+        const currentDate = fullCalendarRef.value.getApi().getDate();
+        const year = currentDate.getFullYear();
+        const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+        loadCalendarData(year, month);
+        selectedDates.value.clear();
+        updateCalendarEvents();
+      } else {
+        alert("휴가 저장 중 오류가 발생했습니다.");
+      }
+    } catch (error) {
+      console.error(error);
+      alert("휴가 저장에 실패했습니다.");
+    }
+  }
 
-<style>
-.vacation-management {
-    padding: 20px;
-}
+  /**
+   * 공휴일 데이터 요청 및 이벤트 변환
+   */
+  async function fetchHolidays(year, month) {
+    try {
+      console.log(`📌 공휴일 요청: ${year}-${month}`);
+      const response = await axios.get(`vacation/${year}/${month}`);
+      console.log("📌 공휴일 API 응답:", response.data);
+      const holidayEvents = response.data.map((holiday) => ({
+        title: holiday.name,
+        start: holiday.date, // "YYYY-MM-DD" 형식
+        backgroundColor: "#ff6666",
+        classNames: ["holiday-event"],
+      }));
+      return holidayEvents;
+    } catch (error) {
+      console.error("공휴일 정보를 불러오지 못했습니다.", error);
+      return [];
+    }
+  }
 
-/* 버튼 스타일 */
-.half-day-buttons {
+  /**
+   * 달력 월 변경 시 호출 (FullCalendar의 datesSet 옵션)
+   */
+  function handleMonthChange(viewInfo) {
+    const currentDate = viewInfo.view.currentStart;
+    const year = currentDate.getFullYear();
+    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+    console.log(`📌 월 변경 감지: ${year}-${month}`);
+    loadCalendarData(year, month);
+  }
+
+  /**
+   * 지정한 월의 데이터를 로드 (휴가, 공휴일 데이터를 병렬 요청)
+   */
+  async function loadCalendarData(year, month) {
+    console.log(`📌 ${year}-${month} 데이터 로드 시작`);
+    fetchedEvents.value = [];
+    const [vacationEvents, holidayEvents] = await Promise.all([
+      fetchVacationData(year, month),
+      fetchHolidays(year, month),
+    ]);
+    console.log("📌 변환된 휴가 이벤트:", vacationEvents);
+    console.log("📌 변환된 공휴일 이벤트:", holidayEvents);
+    // 클릭 불가 처리를 위해 공휴일 날짜 Set 업데이트
+    holidayDates.value = new Set(holidayEvents.map((event) => event.start));
+    fetchedEvents.value = [...vacationEvents, ...holidayEvents];
+    updateCalendarEvents();
+    await nextTick();
+    fullCalendarRef.value.getApi().refetchEvents();
+    console.log("📌 FullCalendar 데이터 업데이트 완료");
+  }
+
+  // 컴포넌트 마운트 시 현재 달의 데이터 로드
+  onMounted(() => {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, "0");
+    console.log(`📌 초기 로드: ${year}-${month}`);
+    loadCalendarData(year, month);
+  });
+  </script>
+
+  <style>
+  /* 버튼 스타일 */
+  .half-day-buttons {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-top: 20px;
-}
-
-.half-day-buttons .btn.active {
+  }
+  .half-day-buttons .btn.active {
     border: 2px solid black;
-}
+  }
 
-/* FullCalendar 이벤트 스타일 */
-.fc-daygrid-event {
+  /* 날짜 칸 높이 고정 */
+  .fc-daygrid-day-frame {
+    min-height: 80px !important;
+    max-height: 120px !important;
+    overflow: hidden !important;
+    padding-top: 25px !important;
+  }
+
+  /* 날짜 칸 내부의 이벤트 목록 */
+  .fc-daygrid-day-events {
+    max-height: 100px !important;
+    overflow-y: auto !important;
+  }
+
+  .fc-daygrid-event {
     position: absolute !important;
-    height: 20px !important; /* 실선 두께 */
-    width: 90% !important;
-    left: 5% !important;
+    height: 20px !important;
+    width: 100% !important;
+    left: 0 !important;
     margin: 2px 0 !important;
     padding: 0 !important;
     border-radius: 2px !important;
-    background-color: inherit !important;
-    border: none !important; /* 기본 FullCalendar 테두리 제거 */
-}
+    border: none !important;
+  }
 
-/* 여러 이벤트가 같은 날짜에 있을 때 정렬 */
-.fc-daygrid-event-harness {
+  /* 여러 이벤트가 같은 날짜에 있을 때 정렬 */
+  .fc-daygrid-event-harness {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
-    gap: 3px;
-}
+    width: 100%;
+    gap: 22px;
+  }
 
-/* 오전반차(왼쪽부터 중앙까지) */
-.fc-daygrid-event.half-day-am {
+  /* 기본 휴가/반차 이벤트 (API에서 받은 이벤트) */
+  .fc-daygrid-event.half-day-am {
     width: 45% !important;
-    left: 0% !important;
-    background-color: #ffdd57 !important; /* 노란색 */
-}
-
-/* 오후반차(오른쪽부터 중앙까지) */
-.fc-daygrid-event.half-day-pm {
+    left: 0 !important;
+  }
+  .fc-daygrid-event.half-day-pm {
     width: 45% !important;
     left: auto !important;
-    right: 0% !important;
-    background-color: #57a5ff !important; /* 파란색 */
-}
-
-/* 연차 (전체 너비) */
-.fc-daygrid-event.full-day {
+    right: 0 !important;
+  }
+  .fc-daygrid-event.full-day {
     width: 100% !important;
     left: 0 !important;
-    background-color: #ff85a2 !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: #324fde !important;
+  }
+  .fc-daygrid-day-number {
+    position: absolute !important;
+    top: 0px !important;
+    left: 5px !important;
+    text-align: left !important;
+  }
 </style>