Merge branch 'main' into project-list

2025-02-24 14:56:45 +09:00 · 2025-02-24 14:56:45 +09:00 · 76527da74f
commit 76527da74f
parent 99d95cf5a1 09e79cb690
7 changed files with 298 additions and 197 deletions
--- a/public/js/main.js
+++ b/public/js/main.js
@ -4,8 +4,8 @@

 'use strict'

-let menu, animate
-;(function () {
+var menu, animate;
+(function () {
  // Initialize menu
  //-----------------

--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@ -5,7 +5,7 @@
        <button class="close-btn" @click="closeModal">✖</button>

        <div class="modal-body">
-          <p>해당 직원에게 부여할 연차 개수를 선택하세요. (남은 개수: {{ availableQuota }}개)</p>
+          <p>선물할 연차 개수를 선택하세요.</p>

          <div class="vacation-control">
            <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
@ -129,7 +129,7 @@
    background: white;
    padding: 20px;
    border-radius: 12px;
-    width: 400px;
+    width: 300px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@ -151,7 +151,7 @@ const closeModal = () => {
    background: white;
    padding: 20px;
    border-radius: 12px;
-    width: 400px;
+    width: 300px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
    text-align: center;
    position: relative;
@ -222,4 +222,10 @@ const closeModal = () => {
    color: gray;
    margin-top: 10px;
  }
+
+  /* 모달 본문 스크롤: 높이가 300px 이상이면 스크롤바 표시 */
+.modal-body {
+  max-height: 130px;
+  overflow-y: auto;
+}
  </style>
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@ -1,6 +1,6 @@
 <template>
    <div class="card-body d-flex justify-content-center">
-      <ul class="list-unstyled d-flex align-items-center gap-5 mb-0 mt-2">
+      <ul class="list-unstyled d-flex flex-wrap align-items-center gap-2 mb-0 mt-2">
        <li
          v-for="(user, index) in sortedUserList"
          :key="index"
@ -34,8 +34,8 @@
  defineEmits(["profileClick"]);

  defineProps({
-  remainingVacationData: Object,
-});
+    remainingVacationData: Object,
+  });

  const userStore = useUserInfoStore();
  const userListStore = useUserStore();
@ -47,28 +47,28 @@
  const userColors = ref({});

  onMounted(async () => {
-  await userStore.userInfo();
-  if (userStore.user) {
-    employeeId.value = userStore.user.id;
-  } else {
-    console.error("❌ 로그인한 사용자 정보를 불러오지 못했습니다.");
-  }
+    await userStore.userInfo();
+    if (userStore.user) {
+      employeeId.value = userStore.user.id;
+    } else {
+      console.error("❌ 로그인한 사용자 정보를 불러오지 못했습니다.");
+    }

-  await userListStore.fetchUserList();
-  userList.value = userListStore.userList;
+    await userListStore.fetchUserList();
+    userList.value = userListStore.userList;

-  // 사용자별 색상 저장
-  userList.value.forEach(user => {
-    userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
-  });
+    // 사용자별 색상 저장
+    userList.value.forEach(user => {
+      userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
+    });

-  nextTick(() => {
-    const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-    tooltips.forEach(tooltip => {
-      new bootstrap.Tooltip(tooltip);
+    nextTick(() => {
+      const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+      tooltips.forEach(tooltip => {
+        new bootstrap.Tooltip(tooltip);
+      });
    });
  });
-});

  const sortedUserList = computed(() => {
    if (!employeeId.value) return userList.value; // 로그인한 사용자가 없으면 기존 리스트 반환
@ -78,6 +78,7 @@
    return myProfile ? [myProfile, ...otherUsers] : userList.value;
  });

+  // 프로필 이미지 URL 반환
  const getUserProfileImage = (profilePath) => {
    return profilePath && profilePath.trim()
      ? `${baseUrl}upload/img/profile/${profilePath}`
@ -92,14 +93,12 @@
    event.target.style.visibility = "visible";
  };

-  // 프로필 크기 동적 조정
+  // 프로필 크기 동적 조정: 사이드바 영역에 맞게 조금 더 축소
  const profileSize = computed(() => {
    const totalUsers = userList.value.length;
-
-    if (totalUsers <= 7) return "100px"; // 7명 이하
-    if (totalUsers <= 10) return "80px"; // ~10명
-    if (totalUsers <= 20) return "60px"; // ~20명
-    return "40px"; // 20명 이상
+    if (totalUsers <= 10) return "68px"; // ~10명
+    if (totalUsers <= 15) return "50px"; // ~20명
+    return "30px"; // 20명 이상
  });

  // 개별 유저 스타일 적용
@ -109,18 +108,29 @@
      height: profileSize.value,
      borderWidth: "4px",
      borderColor: user.usercolor || "#ccc",
-        borderStyle: "solid",
+      borderStyle: "solid",
    };
  };
  </script>

  <style scoped>
  /* 남은 연차 개수 스타일 */
-.remaining-vacation {
-  display: block;
-  text-align: center;
-  font-size: 14px;
-  color: #333;
-  margin-top: 5px;
-}
+  .remaining-vacation {
+    display: block;
+    text-align: center;
+    font-size: 14px;
+    color: #333;
+    margin-top: 5px;
+  }
+
+  /* ul에 flex-wrap을 적용하여 넘치는 프로필이 다음 줄로 내려가도록 함 */
+  ul {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  /* li 간 간격 조정 */
+  li {
+    margin: 5px;
+  }
  </style>
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@ -17,7 +17,7 @@
                <PlusBtn v-if="userStore.user.role == 'ROLE_ADMIN'" @click="toggleInput"/>
            </div>
        </div>
-        
+
        <div class="row" v-if="showInput">
            <div class="col-10">
                <FormInput title="카테고리 입력" name="카테고리"  @update:modelValue="addCategory = $event" :is-alert="addCategoryAlert"/>
@ -83,12 +83,12 @@ const addCategoryAlert = ref(false);
 const selectCategory = ref('');

 // 제목 상태
-const computedTitle = computed(() => 
+const computedTitle = computed(() =>
    wordTitle.value === '' ? props.titleValue : wordTitle.value
 );

 // 카테고리 상태
-const selectedCategory = computed(() => 
+const selectedCategory = computed(() =>
    selectCategory.value === '' ? props.formValue : selectCategory.value
 );

@ -138,8 +138,16 @@ const onChange = (newValue) => {

 //용어 등록
 const saveWord = () => {
+
+    // if(addCategory.value == ''){
+    //     addCategoryAlert.value = true;
+    //     return;
+    // }else {
+    //     addCategoryAlert.value = false;
+    // }
+
    //validation
-    
+
    // 용어 체크
    if(computedTitle.value == '' || computedTitle.length == 0){
        wordTitleAlert.value = true;
@ -158,8 +166,7 @@ const saveWord = () => {
        category: selectedCategory.value,
        content: content.value,
    };
-
-    emit('addWord', wordData);
+    emit('addWord', wordData ,addCategory.value );
 };
 </script>

@ -173,4 +180,4 @@ const saveWord = () => {
        margin-top: 2.5rem
    }
 }
-</style>
+</style>
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@ -1,43 +1,51 @@
 <template>
-    <div class="vacation-management">
-      <div class="container-xxl flex-grow-1 container-p-y">
-        <div class="card app-calendar-wrapper">
-          <div class="row g-0">
-            <div class="col app-calendar-content">
-              <div class="card shadow-none border-0">
-                <ProfileList
-                  @profileClick="handleProfileClick"
-                  :remainingVacationData="remainingVacationData"
-                />
-                <div class="card-body w-75 p-3 align-self-center">
-                  <!-- 모달에 필터링된 연차 목록 전달 -->
-                  <VacationModal
-                    v-if="isModalOpen"
-                    :isOpen="isModalOpen"
-                    :myVacations="filteredMyVacations"
-                    :receivedVacations="filteredReceivedVacations"
-                    :userColors="userColors"
-                    @close="isModalOpen = false"
-                  />
+    <div class="container-xxl flex-grow-1 container-p-y">
+      <div class="card app-calendar-wrapper">
+        <div class="row g-0">
+          <!-- Sidebar: 사이드바 영역 -->
+          <div class="col-3 app-calendar-sidebar border-end" id="app-calendar-sidebar">
+            <div class="sidebar-content">
+              <!-- 사원 프로필 리스트 -->
+              <ProfileList
+                @profileClick="handleProfileClick"
+                :remainingVacationData="remainingVacationData"
+              />
+              <!-- 모달들은 화면 오버레이로 동작하므로 사이드바 내부에 두어도 무방 -->
+              <VacationModal
+                v-if="isModalOpen"
+                :isOpen="isModalOpen"
+                :myVacations="filteredMyVacations"
+                :receivedVacations="filteredReceivedVacations"
+                :userColors="userColors"
+                @close="isModalOpen = false"
+              />
+              <VacationGrantModal
+                v-if="isGrantModalOpen"
+                :isOpen="isGrantModalOpen"
+                :targetUser="selectedUser"
+                :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
+                @close="isGrantModalOpen = false"
+                @updateVacation="fetchRemainingVacation"
+              />
+            </div>
+            <div class="sidebar-actions text-center my-3">
+              <!-- 액션 버튼 -->
+              <HalfDayButtons
+                @toggleHalfDay="toggleHalfDay"
+                @addVacationRequests="saveVacationChanges"
+              />
+            </div>
+          </div>

-                  <VacationGrantModal
-                    v-if="isGrantModalOpen"
-                    :isOpen="isGrantModalOpen"
-                    :targetUser="selectedUser"
-                    :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
-                    @close="isGrantModalOpen = false"
-                    @updateVacation="fetchRemainingVacation"
-                  />
-                  <full-calendar
-                    ref="fullCalendarRef"
-                    :options="calendarOptions"
-                    class="flatpickr-calendar-only"
-                  />
-                  <HalfDayButtons
-                    @toggleHalfDay="toggleHalfDay"
-                    @addVacationRequests="saveVacationChanges"
-                  />
-                </div>
+          <!-- Main Content: 캘린더 영역 -->
+          <div class="col app-calendar-content">
+            <div class="card shadow-none border-0">
+              <div class="card-body pb-0">
+                <full-calendar
+                  ref="fullCalendarRef"
+                  :options="calendarOptions"
+                  class="flatpickr-calendar-only"
+                />
              </div>
            </div>
          </div>
@ -47,7 +55,7 @@
  </template>

  <script setup>
-  import { reactive, ref, onMounted, nextTick, computed } from "vue";
+  import { reactive, ref, onMounted, nextTick, computed, watch } from "vue";
  import axios from "@api";
  import FullCalendar from "@fullcalendar/vue3";
  import dayGridPlugin from "@fullcalendar/daygrid";
@ -67,15 +75,13 @@
  const userListStore = useUserStore();
  const userList = ref([]);
  const userColors = ref({});
-  const myVacations = ref([]); // 전체 "사용한 연차" 목록
+  const myVacations = ref([]); // 전체 "사용한 연차" 목록 (로그인한 사원의 휴가만)
  const receivedVacations = ref([]); // 전체 "받은 연차" 목록
  const isModalOpen = ref(false);
  const remainingVacationData = ref({});
-  // 모달을 열 때 기준 연도 (모달에 표시할 연도)
  const modalYear  = ref(new Date().getFullYear());
-  const modalMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
  const lastRemainingYear = ref(new Date().getFullYear());
-
+  const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
  const isGrantModalOpen = ref(false);
  const selectedUser = ref(null);

@ -88,6 +94,9 @@
  const holidayDates = ref(new Set());
  const fetchedEvents = ref([]);

+  // 추가: 토글 상태 변수 (필요 시 사용 가능)
+  const toggledDates = ref(new Set());
+
  const calendarOptions = reactive({
    plugins: [dayGridPlugin, interactionPlugin],
    initialView: "dayGridMonth",
@ -106,6 +115,31 @@
  onMounted(async () => {
    await userStore.userInfo();
    await fetchRemainingVacation();
+    // 초기 vacation history도 가져오기
+    const currentYear = new Date().getFullYear();
+    await fetchVacationHistory(currentYear);
+  });
+
+  // 연차 내역 API (초기 호출용)
+  async function fetchVacationHistory(year) {
+    try {
+      const response = await axios.get(`vacation/history?year=${year}`);
+      if (response.status === 200 && response.data) {
+        myVacations.value = response.data.data.usedVacations || [];
+        receivedVacations.value = response.data.data.receivedVacations || [];
+      } else {
+        console.warn("❌ 연차 내역을 불러오지 못했습니다.");
+        myVacations.value = [];
+        receivedVacations.value = [];
+      }
+    } catch (error) {
+      console.error("🚨 연차 데이터 불러오기 실패:", error);
+    }
+  }
+
+  // lastRemainingYear 값이 변경될 때마다 해당 연도의 연차 내역 재조회
+  watch(lastRemainingYear, async (newYear, oldYear) => {
+    await fetchVacationHistory(newYear);
  });

  const fetchRemainingVacation = async () => {
@ -123,32 +157,31 @@
  };

  // 프로필 클릭 시 연차 내역 가져오기
-// 프로필 클릭 시 연차 내역 가져오기
-const handleProfileClick = async (user) => {
-  try {
-    if (user.MEMBERSEQ === userStore.user.id) {
-      const year = new Date().getFullYear(); // 현재 연도
-      // 연도 파라미터를 전달하여 전체 연도의 연차 내역을 조회
-      const response = await axios.get(`vacation/history?year=${year}`);
-      if (response.status === 200 && response.data) {
-        myVacations.value = response.data.data.usedVacations || [];
-        receivedVacations.value = response.data.data.receivedVacations || [];
+  const handleProfileClick = async (user) => {
+    try {
+      if (isModalOpen.value) {
+        isModalOpen.value = false;
+        return;
+      }
+      if (isGrantModalOpen.value) {
+        isGrantModalOpen.value = false;
+        return;
+      }
+      if (user.MEMBERSEQ === userStore.user.id) {
+        const year = new Date().getFullYear();
+        await fetchVacationHistory(year);
        isModalOpen.value = true;
-        // 모달을 열 때 기준 연도 갱신
-        modalYear.value = year;
+        lastRemainingYear.value = year;
        isGrantModalOpen.value = false;
      } else {
-        console.warn("❌ 연차 내역을 불러오지 못했습니다.");
+        selectedUser.value = user;
+        isGrantModalOpen.value = true;
+        isModalOpen.value = false;
      }
-    } else {
-      selectedUser.value = user;
-      isGrantModalOpen.value = true;
-      isModalOpen.value = false;
+    } catch (error) {
+      console.error("🚨 연차 데이터 불러오기 실패:", error);
    }
-  } catch (error) {
-    console.error("🚨 연차 데이터 불러오기 실패:", error);
-  }
-};
+  };

  const fetchUserList = async () => {
    try {
@ -187,30 +220,29 @@ const handleProfileClick = async (user) => {
    return vacationCodeMap.value[typeCode] || "기타";
  };

-  // computed: modalYear와 일치하는 항목만 필터링
-const filteredMyVacations = computed(() => {
-  const filtered = myVacations.value.filter(vac => {
-    // vac.date가 없으면 vac.LOCVACUDT를 사용하도록 함
-    const dateStr = vac.date || vac.LOCVACUDT;
-    const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
-    console.log("vacation year:", year, "modalYear:", modalYear.value);
-    return year === String(modalYear.value);
+  // computed: lastRemainingYear과 일치하는 항목만 필터링
+  const filteredMyVacations = computed(() => {
+    const filtered = myVacations.value.filter(vac => {
+      const dateStr = vac.date || vac.LOCVACUDT;
+      const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
+      console.log("vacation year:", year, "lastRemainingYear:", lastRemainingYear.value);
+      return year === String(lastRemainingYear.value);
+    });
+    console.log("filteredMyVacations:", filtered);
+    return filtered;
  });
-  console.log("filteredMyVacations:", filtered);
-  return filtered;
-});

-const filteredReceivedVacations = computed(() => {
-  return receivedVacations.value.filter(vac => {
-    const dateStr = vac.date || vac.LOCVACUDT;
-    const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
-    console.log("vacation year:", year, "modalYear:", modalYear.value);
-    return dateStr && year === String(modalYear.value);
+  const filteredReceivedVacations = computed(() => {
+    return receivedVacations.value.filter(vac => {
+      const dateStr = vac.date || vac.LOCVACUDT;
+      const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
+      console.log("vacation year:", year, "lastRemainingYear:", lastRemainingYear.value);
+      return dateStr && year === String(lastRemainingYear.value);
+    });
  });
-});
-

  function updateCalendarEvents() {
+    // selectedDates에서 "delete"가 아닌 경우에 대해 이벤트 생성
    const selectedEvents = Array.from(selectedDates.value)
      .filter(([date, type]) => type !== "delete")
      .map(([date, type]) => ({
@ -221,12 +253,18 @@ const filteredReceivedVacations = computed(() => {
        display: "background",
        classNames: [getVacationTypeClass(type), "selected-event"]
      }));
+
+    // fetchedEvents에서, 만약 해당 날짜가 "delete" 상태라면
+    // 로그인한 사용자의(내) 이벤트만 제거하고, 다른 사용자의 이벤트는 그대로 둠.
    const filteredFetchedEvents = fetchedEvents.value.filter(event => {
-      if (event.saved) {
-        return selectedDates.value.get(event.start) !== "delete";
+      if (event.saved && selectedDates.value.get(event.start) === "delete") {
+        if (event.memberSeq === userStore.user.id) {
+          return false;
+        }
      }
      return true;
    });
+
    calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
  }

@ -240,6 +278,7 @@ const filteredReceivedVacations = computed(() => {
    const clickedDateStr = info.dateStr;
    const clickedDate = info.date;
    const todayStr = new Date().toISOString().split("T")[0];
+
    if (
      clickedDate.getDay() === 0 ||
      clickedDate.getDay() === 6 ||
@ -248,22 +287,36 @@ const filteredReceivedVacations = computed(() => {
    ) {
      return;
    }
+    // 내 휴가 여부: LOCVACUDT의 앞 10자가 clickedDateStr과 같고, LOCVACRMM가 없거나 빈 문자열인 경우
+    const isMyVacation = myVacations.value.some(vac => {
+      const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
+      return vacDate === clickedDateStr &&
+             (!vac.LOCVACRMM || String(vac.LOCVACRMM).trim() === "");
+    });
+
+    if (isMyVacation) {
+      // 내 휴가인 경우: selectedDates에 "delete" 상태를 토글 (내 이벤트만 영향을 줌)
+      if (selectedDates.value.get(clickedDateStr) === "delete") {
+        selectedDates.value.delete(clickedDateStr);
+      } else {
+        selectedDates.value.set(clickedDateStr, "delete");
+      }
+      updateCalendarEvents();
+      return;
+    }
+
+    // 내 휴가가 없는 날짜: 일반 선택/토글 처리
    if (selectedDates.value.has(clickedDateStr)) {
+      console.log("일반 날짜 토글 off: 기존 선택 해제");
      selectedDates.value.delete(clickedDateStr);
      updateCalendarEvents();
      return;
    }
-    const unsentVacation = myVacations.value.find(
-      (vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
-    );
-    if (unsentVacation) {
-      selectedDates.value.set(clickedDateStr, "delete");
-    } else {
-      const type = halfDayType.value
-        ? (halfDayType.value === "AM" ? "700101" : "700102")
-        : "700103";
-      selectedDates.value.set(clickedDateStr, type);
-    }
+    const type = halfDayType.value
+      ? (halfDayType.value === "AM" ? "700101" : "700102")
+      : "700103";
+    console.log("일반 날짜 토글 on: 선택 및 타입", type);
+    selectedDates.value.set(clickedDateStr, type);
    halfDayType.value = null;
    updateCalendarEvents();
  }
@ -273,43 +326,42 @@ const filteredReceivedVacations = computed(() => {
  }

  async function fetchVacationData(year, month) {
-  try {
-    const response = await axios.get(`vacation/list/${year}/${month}`);
-    if (response.status === 200) {
-      const vacationList = response.data;
-      // 모달이 열려 있더라도 전달받은 연도가 기존 modalYear와 다르면 업데이트
-      if (modalYear.value !== year) {
-        myVacations.value = vacationList.filter(
-          (vac) => vac.MEMBERSEQ === userStore.user.id
-        );
-        modalYear.value = year;
-        // modalMonth는 그대로 유지 (월은 모달 업데이트 조건에서 제외)
+    try {
+      const response = await axios.get(`vacation/list/${year}/${month}`);
+      if (response.status === 200) {
+        const vacationList = response.data;
+        if (lastRemainingYear.value !== year) {
+          // 로그인한 사원의 휴가만 저장
+          myVacations.value = vacationList.filter(
+            (vac) => vac.MEMBERSEQ === userStore.user.id
+          );
+          lastRemainingYear.value = year;
+        }
+        const events = vacationList
+          .filter((vac) => !vac.LOCVACRMM)
+          .map((vac) => {
+            let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
+            let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
+            return {
+              title: getVacationType(vac.LOCVACTYP),
+              start: dateStr,
+              backgroundColor,
+              classNames: [getVacationTypeClass(vac.LOCVACTYP)],
+              saved: true,
+              memberSeq: vac.MEMBERSEQ,  // 이벤트 소유자 정보
+            };
+          })
+          .filter((event) => event.start);
+        return events;
+      } else {
+        console.warn("📌 휴가 데이터를 불러오지 못함");
+        return [];
      }
-      // 캘린더 이벤트 매핑
-      const events = vacationList
-        .filter((vac) => !vac.LOCVACRMM)
-        .map((vac) => {
-          let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
-          let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
-          return {
-            title: getVacationType(vac.LOCVACTYP),
-            start: dateStr,
-            backgroundColor,
-            classNames: [getVacationTypeClass(vac.LOCVACTYP)],
-            saved: true,
-          };
-        })
-        .filter((event) => event.start);
-      return events;
-    } else {
-      console.warn("📌 휴가 데이터를 불러오지 못함");
+    } catch (error) {
+      console.error("Error fetching vacation data:", error);
      return [];
    }
-  } catch (error) {
-    console.error("Error fetching vacation data:", error);
-    return [];
  }
-}

  async function saveVacationChanges() {
    const selectedDatesArray = Array.from(selectedDates.value);
@ -359,9 +411,10 @@ const filteredReceivedVacations = computed(() => {
  }

  async function loadCalendarData(year, month) {
-    if (lastRemainingYear.value !== year) {
+    if (lastRemainingYear.value !== year || lastRemainingMonth.value !== month) {
      await fetchRemainingVacation();
      lastRemainingYear.value = year;
+      lastRemainingMonth.value = month;
    }
    fetchedEvents.value = [];
    const [vacationEvents, holidayEvents] = await Promise.all([
@ -381,6 +434,7 @@ const filteredReceivedVacations = computed(() => {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0");
+    await fetchVacationData(year, month);
    await loadCalendarData(year, month);
  });
  </script>
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@ -102,14 +102,14 @@
    const { cateList } = commonApi({
        loadCateList: true
    });
-    
+
    const selectedCategory = ref('');
    const selectCategory = ref('');

    // 체크박스 체크된 갯수
    const checkedItems = ref([]);
    // 체크박스의 name
-    const checkedNames = ref([]); 
+    const checkedNames = ref([]);


    //선택된 알파벳
@ -177,34 +177,58 @@
    const addCategory = (data) =>{
        const lastCategory = cateList.value[cateList.value.length - 1];
        const newValue = lastCategory  ? lastCategory.value + 1 : 600101;
-        axios.post('worddict/insertCategory',{
-            CMNCODNAM: data
-        }).then(res => {
-            if(res.data.data == '1'){
-                toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
-                const newCategory = { label: data, value: newValue };
+        const newCategory = { label: data, value: newValue };
                cateList.value = [newCategory, ...cateList.value];
                selectedCategory.value = newCategory.value;
-            } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
-                toastStore.onToast(res.data.message, 'e');
-            }
-        })
+        // axios.post('worddict/insertCategory',{
+        //     CMNCODNAM: data
+        // }).then(res => {
+        //     if(res.data.data == '1'){
+        //         toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
+        //         const newCategory = { label: data, value: newValue };
+        //         cateList.value = [newCategory, ...cateList.value];
+        //         selectedCategory.value = newCategory.value;
+        //     } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
+        //         toastStore.onToast(res.data.message, 'e');
+        //     }
+        // })
    }
-    //용어 등록
-    const addWord = (wordData) => {
-        axios.post('worddict/insertWord',{
-            WRDDICCAT : wordData.category,
-            WRDDICTTL : wordData.title,
-            WRDDICCON : $common.deltaAsJson(wordData.content),
-        }).then(res => {
-            if(res.data.data == '1'){
+    const addWord = (wordData, data) => {
+        let category = null;
+        // 카테고리 체크
+        const existingCategory = cateList.value.find(item => item.label === data);
+        if (existingCategory) {
+            //카테고리 있을시 그냥 저장
+            category = existingCategory.label == '' ? wordData.category : existingCategory.value;
+        } else {
+            //카테고리 없을시 카테고리 와 용어 둘다 저장
+            console.log('카테고리 없음');
+            const lastCategory = cateList.value[cateList.value.length - 1];
+            category = lastCategory ? lastCategory.value + 1 : 600101;
+        }
+        sendWordRequest(category, wordData, data, !existingCategory);
+    };
+    const sendWordRequest = (category, wordData, data, isNewCategory) => {
+        const payload = {
+            WRDDICCAT: category,
+            WRDDICTTL: wordData.title,
+            WRDDICCON: $common.deltaAsJson(wordData.content),
+        };
+
+        if (isNewCategory) {
+            payload.CMNCODNAM = data; // 새로운 카테고리 추가 시 포함
+        }
+        axios.post('worddict/insertWord', payload).then(res => {
+            if (res.data.status === 'OK') {
                toastStore.onToast('용어가 등록 되었습니다.', 's');
                isWriteVisible.value = false;
                getwordList();
+                //카테고리 리스트 다시 조회 해야야함
            }
-        })
+        });
    };

+
    // 체크 상태 업데이트
    const updateCheckedItems = (checked, id, name) => {
        if (checked) {