Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

public/css/custom.css

@@ -3,7 +3,6 @@
 
 /* 휴가 */
 
-
 /* 이벤트 선 없게 */
 .fc-event {
   border: none;
@@ -94,8 +93,72 @@ opacity: 0.6; /* 흐려 보이게 */
 }
 
 
-/* 본인 모달 */
+/* 휴가 모달 */
-/* 닫기 버튼 */
+.vac-modal-dialog {
+    background: none !important;
+    box-shadow: none !important;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding-bottom: 20px;
+}
+.vac-modal-content {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
+    max-width: 500px;
+    width: 100%;
+    position: relative;
+}
+.vac-modal-body {
+  max-height: 140px;
+  overflow-y: auto;
+  }
+.vac-modal-text {
+  font-size: 14px;
+  text-align: center;
+  margin-bottom: 20px;
+}
+.count-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin-bottom: 10px;
+}
+.count-value {
+  font-size: 23px;
+  font-weight: bold;
+  min-width: 50px;
+  text-align: center;
+}
+.custom-button {
+  background: none;
+  border: none;
+  width: 55px;
+  height: 55px;
+  font-size: 26px;
+  color: white;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.vac-modal-title {
+  margin-bottom: 10px;
+}
+.vacation-item {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-weight: bold;
+  margin-bottom: 8px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  background: #f9f9f9;
+}
 .close-btn {
   position: absolute;
   top: 10px;
@@ -108,42 +171,6 @@ opacity: 0.6; /* 흐려 보이게 */
 .close-btn:hover {
   color: #525252;
 }
-/* 모달 배경 투명하게 */
-.vac-modal-dialog {
-  background: none !important;
-  box-shadow: none !important;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  }
-  
-  /* 모달 본문 스타일 */
-  .vac-modal-content {
-  background: #fff;
-  border-radius: 8px;
-  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
-  padding: 20px;
-  max-width: 500px;
-  width: 100%;
-  position: relative;
-  }
-/* 리스트 아이템 */
-.vacation-item {
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 8px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  background: #f9f9f9;
-}
-
-
-/* 선물하기 모달 */
-/* 연차 개수 버튼 */
 .count-btn {
   font-size: 18px;
   padding: 2px 10px;
@@ -160,29 +187,179 @@ opacity: 0.6; /* 흐려 보이게 */
   background: #cccccc;
   cursor: not-allowed;
 }
-/* 버튼 컨테이너 (우측 정렬) */
 .custom-button-container {
   display: flex;
   justify-content: flex-end;
   align-items: center;
 }
-/* 버튼 기본 스타일 */
 .custom-button {
-  background: none; /* 배경색 없음 */
+  background: none; 
-  border: none; /* 테두리 없음 */
+  border: none;
-  padding: 10px; /* 크기 조정 */
+  padding: 10px;
-  cursor: pointer; /* 클릭 가능하도록 변경 */
+  cursor: pointer;
 }
-/* 아이콘 색상 변경 (기본) */
 .custom-button i {
-  color: #282538; /* 기본 아이콘 색상 */
+  color: #282538;
-  font-size: 25px; /* 아이콘 크기 */
+  font-size: 25px;
 }
-/* 버튼 호버 효과 */
 .custom-button:hover i {
-  color: #ff0800; /* 호버 시 아이콘 색상 변경 */
+  color: #ff0800;
 }
 
+/* 휴가 사원프로필 */
+.profile-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  padding: 0;
+}
+.profile-img {
+  transition: all 0.2s ease-in-out;
+}
+
+/* 오전/오후반차,저장버튼 */
+/* 버튼 기본 스타일 */
+.vac-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;
+  display: inline-block;
+  font-weight: 400;
+  line-height: 1.53;
+  color: #697a8d;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+/* 마우스를 올렸을 때 */
+  .vac-btn:hover {
+  filter: brightness(90%);
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+  transform: scale(1.05);
+}
+/* 버튼이 눌렸을 때 */
+  .vac-btn:active {
+  transform: scale(0.9);
+  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+/* 선택된 (눌린) 버튼 */
+.vac-btn.active {
+  border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+}
+.vac-btn-warning{
+  color: #fff;
+  background-color: #ffab00;
+  border-color: #ffab00;
+  box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 171, 0, 0.4);
+}
+/* AM 버튼 (선택된 상태) */
+.vac-btn-warning.active {
+  background-color: #ffca2c !important;
+  color: black;
+}
+.vac-btn-info {
+    color: #fff;
+    background-color: #03c3ec;
+    border-color: #03c3ec;
+    box-shadow: 0 0.125rem 0.25rem 0 rgba(3, 195, 236, 0.4);
+}
+/* PM 버튼 (선택된 상태) */
+.vac-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;
+  background-color: #871919 !important;
+  color: white;
+  cursor: pointer;
+  border: 1px solid transparent;
+}
+/* 버튼 활성화 */
+.btn-success.active {
+  background-color: #ff0000 !important;
+  color: white !important;
+  border: 3px solid #eb9f9f !important;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
+  transform: scale(1.1);
+}
+/* 버튼 비활성화 */
+.btn-success.disabled {
+  background-color: #bbb8b8 !important;
+  color: white !important;
+  cursor: not-allowed !important;
+  box-shadow: none;
+  transform: none;
+  opacity: 0.5;
+}
+
+/* 작은 화면에서 버튼 크기 조정 */
+@media (max-width: 1600px) {
+  .count-btn {
+      width: 28px;
+      height: 28px;
+      font-size: 15px;
+  }
+  .count-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0px;
+      margin-bottom: 8px;
+  }
+  .count-value {
+      font-size: 20px;
+  }
+  .custom-button {
+      width: 45px;
+      height: 45px;
+      font-size: 22px;
+  }
+  .vac-grant-modal-title {
+      font-size: 16px;
+  }
+  .vac-modal-text {
+      font-size: 11px;
+  }
+  .vac-modal-title {
+      font-size: 14px;
+      margin-bottom: 10px;
+  }
+  .vacation-item {
+      font-size: 12px;
+      text-align: center;
+      margin-bottom: 5px;
+  }
+  .vac-btn {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+  }
+  .btn-success {
+    font-size: 20px;
+    width: 40px;
+    height: 40px;
+  }
+}
+
+  
 
 .grayscaleImg {
   filter: grayscale(100%);
@@ -222,6 +399,9 @@ opacity: 0.6; /* 흐려 보이게 */
   right: 1rem;
   z-index: 2;
   background-color: #fff !important;
+  border-radius: 0.5rem;
+  opacity: 1;
+  padding: 0.635rem;
   box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4);
   transition: all 0.23s ease 0.1s;
   transform: translate(23px, -25px);
@@ -233,7 +413,4 @@ opacity: 0.6; /* 흐려 보이게 */
   transform: translate(20px, -20px);
 }
 
-.end-project {
-  background-color: #ddd !important;
-}
 /* project list end */

src/components/button/HalfDayButtons.vue

@@ -2,25 +2,23 @@
     <div class="menu gap-4 justify-content-center mt-5">
         <!-- 오전 반차 버튼 -->
         <button
-        class="btn btn-warning"
+            class="vac-btn vac-btn-warning"
             :class="{ active: halfDayType === 'AM' }"
             @click="toggleHalfDay('AM')"
         >
         <i class="bi bi-sun"></i>
         </button>
-
         <!-- 오후 반차 버튼 -->
         <button
-        class="btn btn-info"
+            class="vac-btn vac-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-success" @click="addVacationRequests"
                     :class="{ active: !isDisabled, disabled: isDisabled }">
                 ✔
             </button>
@@ -65,80 +63,4 @@ defineExpose({ resetHalfDay });
 </script>
 
 <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 #ff0000; /* 붉은색 테두리 적용 */
-  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;
-  background-color: #871919 !important;
-  color: white;
-}
-
-/* ✔ 버튼 활성화 */
-.btn-success.active {
-  background-color: #ff0000 !important;
-  color: white !important;
-  border: 3px solid #eb9f9f !important;
-  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
-  transform: scale(1.1);
-}
-
-/* ✔ 버튼 비활성화 */
-.btn-success.disabled {
-  background-color: #bbb8b8 !important;
-  color: white !important;
-  cursor: not-allowed !important;
-  box-shadow: none;
-  transform: none;
-  opacity: 0.5;
-}
 </style>

src/components/modal/VacationGrantModal.vue

@@ -1,20 +1,17 @@
 <template>
     <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
-        <div class="vac-modal-content p-5">
+        <div class="vac-modal-content">
-            <div class="modal-header">
+            <div class="vac-modal-header">
-                <h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
+                <h5 class="vac-grant-modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
                 <button class="close-btn" @click="closeModal">✖</button>
             </div>
-
+            <div class="vac-modal-body">
-            <div class="modal-body">
+                <p class="vac-modal-text">선물할 연차 개수를 선택하세요.</p>
-                <p>선물할 연차 개수를 선택하세요.</p>
+                <div class="count-container">
-
-                <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>
+                    <span class="count-value">{{ grantCount }}</span>
                     <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
                 </div>
-
                 <div class="custom-button-container">
                     <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
                         <i class="bx bx-gift"></i>
@@ -42,44 +39,45 @@
 const sentCount = ref(0);
 const availableQuota = ref(2);
 
+// 사원 별 남은 보내기 개수
 const fetchSentVacationCount = async () => {
     try {
         const payload = { receiverId: props.targetUser.MEMBERSEQ };
         const response = await axios.get("vacation/sent", { params: payload });
-      sentCount.value = response.data.data[0].count || 0;
+        sentCount.value = response.data.data[0]?.count || 0;
         availableQuota.value = Math.max(maxQuota - sentCount.value, 0);
-      grantCount.value = availableQuota.value; // ✅ 남은 개수로 기본값 설정
+        grantCount.value = availableQuota.value;
     } catch (error) {
         console.error("🚨 연차 전송 기록 조회 실패:", error);
         availableQuota.value = maxQuota;
-      grantCount.value = maxQuota; // 기본값 설정
+        grantCount.value = maxQuota;
     }
 };
 
+// 개수 증가
 const increaseCount = () => {
     if (grantCount.value < availableQuota.value) {
         grantCount.value++;
     }
 };
-
+// 개수 감소
 const decreaseCount = () => {
     if (grantCount.value > 0) {
         grantCount.value--;
     }
 };
 
+// 연차 선물하기
 const saveVacationGrant = async () => {
     try {
-      const payload = [
+        const payload = [{
-        {
             date: new Date().toISOString().split("T")[0],
             type: "700103",
             receiverId: props.targetUser.MEMBERSEQ,
             count: grantCount.value,
-        },
+        }];
-      ];
         const response = await axios.post("vacation", payload);
-      if (response.data && response.data.status === "OK") {
+        if (response.data?.status === "OK") {
             toastStore.onToast('연차가 선물되었습니다.', 's');
             await fetchSentVacationCount();
             emit("updateVacation");
@@ -88,42 +86,32 @@
             toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
         }
     } catch (error) {
-      console.error("🚨 연차 추가 실패:", error);
         toastStore.onToast(' 연차 선물 실패!!.', 'e');
     }
 };
 
+// 모달 닫기기
 const closeModal = () => {
     emit("close");
 };
 
-  watch(
+watch(() => props.isOpen, async (newVal) => {
-    () => props.isOpen,
+    if (newVal && props.targetUser?.MEMBERSEQ) {
-    async (newVal) => {
-      if (newVal && props.targetUser && props.targetUser.MEMBERSEQ) {
         await fetchSentVacationCount();
     }
-    }
+});
-  );
+watch(() => props.targetUser, async (newUser) => {
-
+    if (newUser?.MEMBERSEQ) {
-  watch(
-    () => props.targetUser,
-    async (newUser) => {
-      if (newUser && newUser.MEMBERSEQ) {
         await fetchSentVacationCount();
     }
-    },
+}, { deep: true });
-    { deep: true }
-  );
 
 onMounted(async () => {
-    if (props.isOpen && props.targetUser && props.targetUser.MEMBERSEQ) {
+    if (props.isOpen && props.targetUser?.MEMBERSEQ) {
         await fetchSentVacationCount();
     }
 });
 </script>
 
-
 <style scoped>
-
 </style>

src/components/modal/VacationModal.vue

@@ -1,26 +1,22 @@
 <template>
     <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
         <div class="vac-modal-content p-5 modal-scroll">
-        <h5 class="modal-title">📅 내 연차 사용 내역</h5>
+            <h5 class="vac-modal-title">📅 내 연차 사용 내역</h5>
             <button class="close-btn" @click="closeModal">✖</button>
-
             <!-- 연차 목록 -->
-        <div class="modal-body" v-if="mergedVacations.length > 0">
+            <div class="vac-modal-body" v-if="mergedVacations.length > 0">
                 <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="fw-bold text-dark me-2">
                         {{ usedVacationIndexMap[vac._expandIndex] }})
                     </span>
-
                     <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' }"
                     >
@@ -29,7 +25,6 @@
                 </li>
                 </ol>
             </div>
-
             <!-- 연차 데이터 없음 -->
             <p v-else class="text-sm-center mt-10 text-gray">
                 🚫 사용한 연차가 없습니다.
@@ -60,13 +55,8 @@ const props = defineProps({
 
 const emit = defineEmits(["close"]);
 
-/**
+// 사용한 휴가(선물,연차사용)
- * 1) Used 휴가를 used_quota만큼 펼치기
+let globalCounter = 0;
- *    - category: "used"
- *    - code: 휴가 코드(예: LOCVACTYP)
- *    - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
- */
-let globalCounter = 0; // 확장 시 사용할 전역 카운터
 const usedVacations = computed(() => {
     const result = [];
     props.myVacations.forEach((v) => {
@@ -75,7 +65,7 @@ const usedVacations = computed(() => {
             result.push({
                 ...v,
                 category: "used",
-        code: v.LOCVACTYP,         // 휴가 코드 (700103 등)
+                code: v.LOCVACTYP,
                 _expandIndex: globalCounter++,
             });
         }
@@ -83,9 +73,7 @@ const usedVacations = computed(() => {
     return result;
 });
 
-/**
+// 받은 휴가
- * 2) Received 휴가: category: "received"
- */
 const receivedVacations = computed(() =>
     props.receivedVacations.map((v) => ({
         ...v,
@@ -93,17 +81,14 @@ const receivedVacations = computed(() =>
     }))
 );
 
-/**
+// 필터링
- * 3) Used 휴가만 날짜 오름차순 정렬 → 누적 인덱스 계산
- *    - type === "700103"이면 +1
- *    - 그 외이면 +0.5
- */
 const sortedUsedVacationsAsc = computed(() => {
     return [...usedVacations.value].sort((a, b) => {
         return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
     });
 });
 
+// 누적 인덱스 계산 type === "700103"이면 +1 그 외이면 +0.5
 const usedVacationIndexMap = computed(() => {
     let cumulative = 0;
     const map = {};
@@ -115,10 +100,7 @@ const usedVacationIndexMap = computed(() => {
     return map;
 });
 
-/**
+// 최종 표시할 merged 리스트 (Used + Received) 날짜 내림차순 정렬 (최신 → 과거)
- * 4) 최종 표시할 merged 리스트 (Used + Received)
- *    - 날짜 내림차순 정렬 (최신 → 과거)
- */
 const mergedVacations = computed(() => {
     const all = [...usedVacations.value, ...receivedVacations.value];
     // 날짜 내림차순 + 확장 인덱스 내림차순
@@ -130,12 +112,11 @@ const mergedVacations = computed(() => {
     return all;
 });
 
-
+// 모달 닫기
-/** 모달 닫기 */
 const closeModal = () => {
   emit("close");
 };
 </script>
-
 <style scoped>
 </style>
+

src/components/vacation/ProfileList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="card-body d-flex justify-content-center m-n5">
-      <ul class="list-unstyled d-flex flex-wrap align-items-center gap-2 mb-0 mt-2">
+        <ul class="list-unstyled profile-list">
             <li
                 v-for="(user, index) in sortedUserList"
                 :key="index"
@@ -10,14 +10,14 @@
                 :aria-label="user.MEMBERSEQ"
             >
                 <img
-            class="rounded-circle"
+                    class="rounded-circle profile-img"
                     :src="getUserProfileImage(user.MEMBERPRF)"
                     alt="user"
                     :style="getDynamicStyle(user)"
                     @error="setDefaultImage"
                     @load="showImage"
                 />
-          <span class="remaining-vacation">
+                <span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
                     {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
                 </span>
             </li>
@@ -32,10 +32,7 @@
 import $api from "@api";
 
 defineEmits(["profileClick"]);
-
+defineProps({ remainingVacationData: Object });
-  defineProps({
-    remainingVacationData: Object,
-  });
 
 const userStore = useUserInfoStore();
 const userListStore = useUserStore();
@@ -45,92 +42,74 @@
 const defaultProfile = "/img/icons/icon.png";
 const employeeId = ref(null);
 const userColors = ref({});
+const windowWidth = ref(window.innerWidth);
+
+const updateWindowWidth = () => {
+windowWidth.value = window.innerWidth;
+};
 
 onMounted(async () => {
+window.addEventListener("resize", updateWindowWidth);
+
 await userStore.userInfo();
-    if (userStore.user) {
+employeeId.value = userStore.user?.id ?? null;
-      employeeId.value = userStore.user.id;
-    } else {
-      console.error("❌ 로그인한 사용자 정보를 불러오지 못했습니다.");
-    }
 
 await userListStore.fetchUserList();
 userList.value = userListStore.userList;
 
-    // 사용자별 색상 저장
 userList.value.forEach(user => {
     userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
 });
 
 nextTick(() => {
-      const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltip => {
-      tooltips.forEach(tooltip => {
     new bootstrap.Tooltip(tooltip);
     });
 });
 });
 
 const sortedUserList = computed(() => {
-    if (!employeeId.value) return userList.value; // 로그인한 사용자가 없으면 기존 리스트 반환
+if (!employeeId.value) return userList.value;
 const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
 const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
-
 return myProfile ? [myProfile, ...otherUsers] : userList.value;
 });
 
-  // 프로필 이미지 URL 반환
+const getUserProfileImage = (profilePath) =>
-  const getUserProfileImage = (profilePath) => {
+profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
-    return profilePath && profilePath.trim()
-      ? `${baseUrl}upload/img/profile/${profilePath}`
-      : defaultProfile;
-  };
 
-  const setDefaultImage = (event) => {
+const setDefaultImage = (event) => (event.target.src = defaultProfile);
-    event.target.src = defaultProfile;
+const showImage = (event) => (event.target.style.visibility = "visible");
-  };
 
-  const showImage = (event) => {
+// 화면 크기에 따라 프로필 크기 동적 조정
-    event.target.style.visibility = "visible";
-  };
-
-  // 프로필 크기 동적 조정: 사이드바 영역에 맞게 조금 더 축소
 const profileSize = computed(() => {
 const totalUsers = userList.value.length;
-    if (totalUsers <= 10) return "68px"; // ~10명
+
-    if (totalUsers <= 15) return "50px"; // ~20명
+if (windowWidth.value >= 1650) {
-    return "30px"; // 20명 이상
+    if (totalUsers <= 10) return "68px";
+    if (totalUsers <= 15) return "55px";
+    return "45px";
+} else if (windowWidth.value >= 1300) {
+    if (totalUsers <= 10) return "45px";
+    if (totalUsers <= 15) return "40px";
+    return "30px";
+} else if (windowWidth.value >= 1024) {
+    if (totalUsers <= 10) return "40px";
+    if (totalUsers <= 15) return "30px";
+    return "20px";
+} else {
+    return "20px";
+}
 });
 
-  // 개별 유저 스타일 적용
+const getDynamicStyle = (user) => ({
-  const getDynamicStyle = (user) => {
-    return {
 width: profileSize.value,
 height: profileSize.value,
 borderWidth: "4px",
 borderColor: user.usercolor || "#ccc",
 borderStyle: "solid",
-    };
+});
-  };
 </script>
 
 <style scoped>
-  /* 남은 연차 개수 스타일 */
-  .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>

src/layouts/NormalLayout.vue

@@ -7,6 +7,7 @@
             <div class="layout-page">
                 <!-- Top -->
                 <TheTop />
+
                 <!-- Content -->
                 <div class="content-wrapper">
                     <slot name="content"> body </slot>
@@ -14,6 +15,7 @@
                     <div class="content-backdrop fade"></div>
                 </div>
             </div>
+            <TheChat />
         </div>
 
         <!-- Overlay -->
@@ -27,6 +29,7 @@
     import TheTop from './TheTop.vue';
     import TheFooter from './TheFooter.vue';
     import TheMenu from './TheMenu.vue';
+    import TheChat from './TheChat.vue';
     import { nextTick } from 'vue';
     import { wait } from '@/common/utils';
 
@@ -45,4 +48,26 @@
         loadScript('/js/main.js');
     });
 </script>
-<style></style>
+<style>
+    /* 중앙 콘텐츠 자동 조정 */
+    .layout-page {
+        flex-grow: 1;
+        min-width: 0; /* flexbox 내에서 올바른 크기 계산 */
+        margin-right: 20%; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
+    }
+
+    /* top bar 고정1 */
+    .layout-navbar-fixed .layout-navbar {
+        position: relative;
+        top: 0;
+        right: auto;
+        left: 0 !important;
+        width: 96% !important;
+        padding-top: 0 !important;
+    }
+
+    /* top bar 고정2 */
+    .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
+        padding-top: 0 !important;
+    }
+</style>

src/layouts/TheChat.vue

@@ -0,0 +1,43 @@
+<template>
+    <!-- Chat Sidebar -->
+    <aside id="chat-sidebar" class="chat-sidebar">
+    </aside>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+// 채팅 메시지 리스트
+const messages = ref([
+    { user: "사용자1", text: "안녕하세요!" },
+    { user: "사용자2", text: "안녕하세요. 반갑습니다." }
+]);
+
+const newMessage = ref("");
+
+// 메시지 전송
+const sendMessage = () => {
+    if (newMessage.value.trim() !== "") {
+        messages.value.push({ user: "나", text: newMessage.value });
+        newMessage.value = "";
+    }
+};
+</script>
+
+<style scoped>
+/* 채팅 사이드바 고정 */
+.chat-sidebar {
+    width: 20%;
+    height: 100vh;
+    position: fixed;
+    right: 0;
+    top: 0;
+    background: #fff;
+    border-left: 1px solid #ddd;
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+}
+
+</style>

src/layouts/TheTop.vue

@@ -265,4 +265,5 @@
         router.push('/login');
     };
 </script>
-<style></style>
+<style scoped>
+</style>

src/views/vacation/VacationManagement.vue

@@ -63,45 +63,45 @@
 <script setup>
 import { reactive, ref, onMounted, nextTick, computed, watch, onBeforeUnmount  } from "vue";
 import axios from "@api";
+import "bootstrap-icons/font/bootstrap-icons.css";
+// 달력
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
-// Flatpickr 및 MonthSelect 플러그인 임포트
+// Flatpickr, MonthSelect
 import flatpickr from "flatpickr";
 import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index";
 import "flatpickr/dist/flatpickr.min.css";
 import "flatpickr/dist/plugins/monthSelect/style.css";
-
+// 컴포넌트
-import "@/assets/css/app-calendar.css";
-import "bootstrap-icons/font/bootstrap-icons.css";
 import HalfDayButtons from "@c/button/HalfDayButtons.vue";
 import ProfileList from "@c/vacation/ProfileList.vue";
 import VacationModal from "@c/modal/VacationModal.vue";
 import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
+import { fetchHolidays } from "@c/calendar/holiday.js";
+// 스토어
 import { useUserStore } from "@s/userList";
 import { useUserInfoStore } from "@s/useUserInfoStore";
-import { fetchHolidays } from "@c/calendar/holiday.js";
 import { useToastStore } from '@s/toastStore';
+// 라우터
 import { useRouter } from "vue-router";
 
 const router = useRouter();
-
+// 스토어
 const toastStore = useToastStore();
 const userStore = useUserInfoStore();
 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 selectedDate = ref(null);
+// 모달상태
-  const lastRemainingYear = ref(new Date().getFullYear());
+const isModalOpen = ref(false);
-  const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
 const isGrantModalOpen = ref(false);
-  const selectedUser = ref(null);
+// FullCalendar 및 이벤트 관련
-
-  // FullCalendar 관련
 const fullCalendarRef = ref(null);
 const calendarEvents = ref([]);
 const selectedDates = ref(new Map());
@@ -110,45 +110,15 @@ const router = useRouter();
 const holidayDates = ref(new Set());
 const fetchedEvents = ref([]);
 const halfDayButtonsRef = ref(null);
-
+const selectedDate = ref(null);
-  // 페이지 이동 시 변경 사항 확인
+const selectedUser = ref(null);
-router.beforeEach((to, from, next) => {
+const lastRemainingYear = ref(new Date().getFullYear());
-  if (hasChanges.value) {
+const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
-    const answer = window.confirm("저장하지 않은 변경 사항이 있습니다. 이동하시겠습니까?");
-    if (!answer) {
-      return next(false); // 이동 취소
-    }
-  }
-  next();
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener("beforeunload", preventUnsavedChanges);
-});
-
-function preventUnsavedChanges(event) {
-  if (hasChanges.value) {
-    event.preventDefault();
-    event.returnValue = ""; // 대부분의 브라우저에서 경고 메시지 표시됨
-  }
-}
-
-// `selectedDates` 변경 시 반차 버튼 초기화
-watch(
-  () => Array.from(selectedDates.value.keys()), // 선택된 날짜 리스트 감시
-  (newKeys) => {
-    if (halfDayButtonsRef.value) {
-      halfDayButtonsRef.value.resetHalfDay();
-    }
-  },
-  { deep: true }
-);
-
 // 데이트피커 인풋 ref
 const calendarDatepicker = ref(null);
 let fpInstance = null;
 
-/** 변경사항 여부 확인 */
+/* 변경사항 여부 확인 */
 const hasChanges = computed(() => {
     return (
         selectedDates.value.size > 0 ||
@@ -156,60 +126,8 @@ const hasChanges = computed(() => {
     );
 });
 
-
+/* 캘린더 설정 */
-/** 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();
-    // 날짜 선택 후 버튼 초기화
-    if (halfDayButtonsRef.value) {
-        halfDayButtonsRef.value.resetHalfDay();
-    }
-  }
-
 const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
     initialView: "dayGridMonth",
@@ -224,98 +142,112 @@ function handleDateClick(info) {
     datesSet: handleMonthChange,
     events: calendarEvents,
 });
-
+// 캘린더 월 변경경
-  onMounted(async () => {
+function handleMonthChange(viewInfo) {
-    await userStore.userInfo();
+    const currentDate = viewInfo.view.currentStart;
-    await fetchRemainingVacation();
+    const year = currentDate.getFullYear();
-    const currentYear = new Date().getFullYear();
+    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
-    await fetchVacationHistory(currentYear);
+    loadCalendarData(year, month);
-    window.addEventListener("beforeunload", preventUnsavedChanges);
-
-    // Flatpickr 초기화 (달 선택 모드)
-    fpInstance = flatpickr(calendarDatepicker.value, {
-      dateFormat: "Y-m",
-      plugins: [
-        new monthSelectPlugin({
-          shorthand: true,
-          dateFormat: "Y-m",
-          altFormat: "F Y"
-        })
-      ],
-      onChange: function(selectedDatesArr, dateStr) {
-        // 선택한 달의 첫날로 달력을 이동
-        fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
-        const [year, month] = dateStr.split("-");
-        lastRemainingYear.value = parseInt(year, 10);
-        lastRemainingMonth.value = month;
-        loadCalendarData(lastRemainingYear.value, lastRemainingMonth.value);
-      },
-      onClose: function() {
-        calendarDatepicker.value.style.display = "none";
   }
-    });
+// 캘린더 클릭
-
+function handleDateClick(info) {
-   // FullCalendar 헤더 제목(.fc-toolbar-title) 클릭 시 데이트피커 열기
+    const clickedDateStr = info.dateStr;
-    nextTick(() => {
+    const clickedDate = info.date;
-    const titleEl = document.querySelector('.fc-toolbar-title');
+    const todayStr = new Date().toISOString().split("T")[0];
-    if (titleEl) {
+    if (
-        titleEl.style.cursor = 'pointer';
+        clickedDate.getDay() === 0 ||
-        titleEl.addEventListener('click', () => {
+        clickedDate.getDay() === 6 ||
-        // 화면 중앙 정렬을 위한 스타일 조정
+        holidayDates.value.has(clickedDateStr) ||
-        const dpEl = calendarDatepicker.value;
+        clickedDateStr < todayStr
-        dpEl.style.display = 'block';
+    ){
-        dpEl.style.position = 'fixed';
+        return;
-        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();
-        });
     }
+    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") {
-  // 연차 내역 API (초기 호출용)
+            selectedDates.value.delete(clickedDateStr);
-  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("❌ 연차 내역을 불러오지 못했습니다.");
+            selectedDates.value.set(clickedDateStr, "delete");
-        myVacations.value = [];
-        receivedVacations.value = [];
         }
-    } catch (error) {
+        updateCalendarEvents();
-      console.error("🚨 연차 데이터 불러오기 실패:", error);
+        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();
+    // 날짜 선택 후 반차버튼 초기화
+    if (halfDayButtonsRef.value) {
+        halfDayButtonsRef.value.resetHalfDay();
     }
 }
+// 오늘 이후의 날짜만 클릭 가능하도록 설정
+function markClickableDates() {
+    nextTick(() => {
+        const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD
+        const todayObj = new Date(todayStr);
 
-  watch(lastRemainingYear, async (newYear, oldYear) => {
+        document.querySelectorAll(".fc-daygrid-day").forEach((cell) => {
-    await fetchVacationHistory(newYear);
+            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");
+            }
+        });
     });
-
-  const fetchRemainingVacation = async () => {
-    try {
-      const response = await axios.get("vacation/remaining");
-      if (response.status === 200) {
-        remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
-          acc[vacation.employeeId] = vacation.remainingQuota;
-          return acc;
-        }, {});
 }
-    } catch (error) {
+//캘린더에 데이터 로드
-      console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
+async function loadCalendarData(year, month) {
+    if (lastRemainingYear.value !== year || lastRemainingMonth.value !== month) {
+        await fetchRemainingVacation();
+        lastRemainingYear.value = year;
+        lastRemainingMonth.value = month;
+    }
+    fetchedEvents.value = [];
+    const [vacationEvents, holidayEvents] = await Promise.all([
+        fetchVacationData(year, month),
+        fetchHolidays(year, month),
+    ]);
+    holidayDates.value = new Set(holidayEvents.map((event) => event.start));
+    fetchedEvents.value = [...vacationEvents, ...holidayEvents];
+    updateCalendarEvents();
+    await nextTick();
+    fullCalendarRef.value.getApi().refetchEvents();
 }
-  };
 
+/* 프로필 구역 */
+// 프로필 클릭 시 모달 열기
 const handleProfileClick = async (user) => {
     try {
-      // 열린 모달이 있으면 모두 닫음 후 새 모달 열기
+        if (isModalOpen.value && user.MEMBERSEQ === userStore.user.id) {
+            return;
+        }
+        if (isGrantModalOpen.value && selectedUser.value?.MEMBERSEQ === user.MEMBERSEQ) {
+            return;
+        }
         isModalOpen.value = false;
         isGrantModalOpen.value = false;
         if (user.MEMBERSEQ === userStore.user.id) {
@@ -330,7 +262,7 @@ function handleDateClick(info) {
         console.error("🚨 연차 데이터 불러오기 실패:", error);
     }
 };
-
+// 프로필 사원 리스트
 const fetchUserList = async () => {
     try {
         await userListStore.fetchUserList();
@@ -341,33 +273,27 @@ function handleDateClick(info) {
         }
         userColors.value = {};
         userList.value.forEach((user) => {
-        userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
+        userColors.value[user.MEMBERSEQ] = user.usercolor;
         });
     } catch (error) {
         console.error("📌 사용자 목록 불러오기 오류:", error);
     }
 };
-
+// 사원별 남은 연차 개수
-  const fetchVacationCodes = async () => {
+const fetchRemainingVacation = async () => {
     try {
-      const response = await axios.get("vacation/codes");
+        const response = await axios.get("vacation/remaining");
-      if (response.status === 200 && response.data) {
+        if (response.status === 200) {
-        vacationCodeMap.value = response.data.data.reduce((acc, item) => {
+            remainingVacationData.value = response.data.data.reduce((acc, vacation) => {
-          acc[item.code] = item.name;
+                acc[vacation.employeeId] = vacation.remainingQuota;
                 return acc;
             }, {});
-      } else {
-        console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
         }
     } catch (error) {
-      console.error("🚨 공통 코드 API 호출 실패:", error);
+        console.error("🚨 남은 연차 데이터를 불러오지 못했습니다:", error);
     }
 };
-
+// 로그인한 사원이 사용한 휴가 필터링
-  const getVacationType = (typeCode) => {
-    return vacationCodeMap.value[typeCode] || "기타";
-  };
-
 const filteredMyVacations = computed(() => {
     return myVacations.value.filter(vac => {
         const dateStr = vac.date;
@@ -375,7 +301,7 @@ function handleDateClick(info) {
         return year === String(lastRemainingYear.value);
     });
 });
-
+// 로그인한 사원이 받은 휴가 필터링
 const filteredReceivedVacations = computed(() => {
     return receivedVacations.value.filter(vac => {
         const dateStr = vac.date;
@@ -384,76 +310,8 @@ function handleDateClick(info) {
     });
 });
 
-  function updateCalendarEvents() {
-    const selectedEvents = Array.from(selectedDates.value)
-      .filter(([date, type]) => type !== "delete")
-      .map(([date, type]) => ({
-        start: date,
-        backgroundColor: "rgb(113 212 243 / 76%)",
-        textColor: "#fff",
-        display: "background",
-        classNames: [getVacationTypeClass(type), "selected-event"]
-      }));
-
-    const filteredFetchedEvents = fetchedEvents.value.filter(event => {
-      if (event.saved && selectedDates.value.get(event.start) === "delete") {
-        if (event.memberSeq === userStore.user.id) {
-          return false;
-        }
-      }
-      return true;
-    });
-
-    calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
-  }
-
-  const getVacationTypeClass = (type) => {
-    if (type === "700101") return "half-day-am";
-    if (type === "700102") return "half-day-pm";
-    return "full-day";
-  };
-
-  function toggleHalfDay(type) {
-    halfDayType.value = halfDayType.value === type ? null : type;
-  }
-
-// 연차 리스트 조회회
-async function fetchVacationData(year, month) {
-  try {
-    const response = await axios.get(`vacation/list/${year}/${month}`);
-    if (response.status === 200) {
-      const vacationList = response.data;
-
-      // 회원 정보가 없거나 색상 정보가 없는 데이터는 제외
-      const filteredVacations = vacationList.filter(vac =>
-        userColors.value[vac.MEMBERSEQ] && userColors.value[vac.MEMBERSEQ] !== "#FFFFFF"
-      );
-
-      const events = filteredVacations.map(vac => {
-        let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
-        let backgroundColor = userColors.value[vac.MEMBERSEQ];
-
-        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 [];
-    }
-  } catch (error) {
-    console.error("Error fetching vacation data:", error);
-    return [];
-  }
-}
 
+/* 휴가 변경사항 저장 */
 async function saveVacationChanges() {
     if (!hasChanges.value) return;
     const selectedDatesArray = Array.from(selectedDates.value);
@@ -481,6 +339,7 @@ async function fetchVacationData(year, month) {
         });
         if (response.data && response.data.status === "OK") {
             toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's');
+            await fetchVacationHistory(lastRemainingYear.value);
             await fetchRemainingVacation();
             if (isModalOpen.value) {
                 await fetchVacationHistory(lastRemainingYear.value);
@@ -498,72 +357,161 @@ async function fetchVacationData(year, month) {
     }
 }
 
-  function handleMonthChange(viewInfo) {
+/* 휴가 조회 */
-    const currentDate = viewInfo.view.currentStart;
+// 로그인 사용자의 연차 사용 내역
-    const year = currentDate.getFullYear();
+async function fetchVacationHistory(year) {
-    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+    try {
-    loadCalendarData(year, month);
+        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) {
-  async function loadCalendarData(year, month) {
+        console.error("🚨 연차 데이터 불러오기 실패:", error);
-    if (lastRemainingYear.value !== year || lastRemainingMonth.value !== month) {
-      await fetchRemainingVacation();
-      lastRemainingYear.value = year;
-      lastRemainingMonth.value = month;
     }
-    fetchedEvents.value = [];
-    const [vacationEvents, holidayEvents] = await Promise.all([
-      fetchVacationData(year, month),
-      fetchHolidays(year, month),
-    ]);
-    holidayDates.value = new Set(holidayEvents.map((event) => event.start));
-    fetchedEvents.value = [...vacationEvents, ...holidayEvents];
-    updateCalendarEvents();
-    await nextTick();
-    fullCalendarRef.value.getApi().refetchEvents();
 }
-  /** 오늘 이후의 날짜만 클릭 가능하도록 설정 */
+// 모든 사원 연차 내역 및 그래프화
-function markClickableDates() {
+async function fetchVacationData(year, month) {
-  nextTick(() => {
+    try {
-    const todayStr = new Date().toISOString().split("T")[0]; // 오늘 날짜 YYYY-MM-DD
+        const response = await axios.get(`vacation/list/${year}/${month}`);
-    const todayObj = new Date(todayStr);
+        if (response.status === 200) {
-
+            const vacationList = response.data;
-    document.querySelectorAll(".fc-daygrid-day").forEach((cell) => {
+            // 회원 정보가 없거나 색상 정보가 없는 데이터는 제외
-      const dateStr = cell.getAttribute("data-date");
+            const filteredVacations = vacationList.filter(vac =>
-      if (!dateStr) return; // 날짜가 없으면 스킵
+                userColors.value[vac.MEMBERSEQ] && userColors.value[vac.MEMBERSEQ]
-
+            );
-      const dateObj = new Date(dateStr);
+            const events = filteredVacations.map(vac => {
-
+                let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
-      // 주말 (토요일, 일요일)
+                let backgroundColor = userColors.value[vac.MEMBERSEQ];
-      if (dateObj.getDay() === 0 || dateObj.getDay() === 6 || holidayDates.value.has(dateStr)) {
+                return {
-        cell.classList.remove("clickable");
+                    title: getVacationType(vac.LOCVACTYP),
-        cell.classList.add("fc-day-sat-sun");
+                    start: dateStr,
+                    backgroundColor,
+                    classNames: [getVacationTypeClass(vac.LOCVACTYP)],
+                    saved: true,
+                    memberSeq: vac.MEMBERSEQ,
+                };
+            }).filter(event => event.start);
+            return events;
+        } else {
+            console.warn("📌 휴가 데이터를 불러오지 못함");
+            return [];
         }
-      // 과거 날짜 (오늘 이전)
+        } catch (error) {
-      else if (dateObj < todayObj) {
+        console.error("Error fetching vacation data:", error);
-        cell.classList.remove("clickable");
+        return [];
-        cell.classList.add("past"); // 과거 날짜 비활성화
     }
-      // 오늘 & 미래 날짜 (클릭 가능)
-      else {
-        cell.classList.add("clickable");
-        cell.classList.remove("past", "fc-day-sat-sun");
 }
+// 캘린더 이벤트 업데이트
+function updateCalendarEvents() {
+    const selectedEvents = Array.from(selectedDates.value)
+        .filter(([date, type]) => type !== "delete")
+        .map(([date, type]) => ({
+            start: date,
+            backgroundColor: "rgb(113 212 243 / 76%)",
+            textColor: "#fff",
+            display: "background",
+            classNames: [getVacationTypeClass(type), "selected-event"]
+        }));
+    const filteredFetchedEvents = fetchedEvents.value.filter(event => {
+        if (event.saved && selectedDates.value.get(event.start) === "delete") {
+            if (event.memberSeq === userStore.user.id) {
+                return false;
+            }
+        }
+        return true;
     });
-  });
+    calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
+}
+// 휴가 종류에 따른 클래스명
+const getVacationTypeClass = (type) => {
+    if (type === "700101") return "half-day-am";
+    if (type === "700102") return "half-day-pm";
+    return "full-day";
+};
+// 휴가종류
+const fetchVacationCodes = async () => {
+    try {
+        const response = await axios.get("vacation/codes");
+        if (response.status === 200 && response.data) {
+            vacationCodeMap.value = response.data.data.reduce((acc, item) => {
+                acc[item.code] = item.name;
+                return acc;
+            }, {});
+        } else {
+            console.warn("❌ 공통 코드 데이터를 불러오지 못했습니다.");
+        }
+    } catch (error) {
+        console.error("🚨 공통 코드 API 호출 실패:", error);
+    }
+};
+const getVacationType = (typeCode) => {
+    return vacationCodeMap.value[typeCode] || "기타";
+};
+
+/* 버튼 */
+// 반차버튼 토글
+function toggleHalfDay(type) {
+    halfDayType.value = halfDayType.value === type ? null : type;
 }
 
-/** ✅ onMounted 및 달력 변경 시 실행 */
+/* 페이지 이동 시 변경 사항 확인 */
-onMounted(() => {
+router.beforeEach((to, from, next) => {
-  markClickableDates();
+    if (hasChanges.value) {
+        const answer = window.confirm("저장하지 않은 변경 사항이 있습니다. 이동하시겠습니까?");
+        if (!answer) {
+            return next(false);
+        }
+    }
+    next();
 });
+onBeforeUnmount(() => {
+    window.removeEventListener("beforeunload", preventUnsavedChanges);
+});
+function preventUnsavedChanges(event) {
+    if (hasChanges.value) {
+        event.preventDefault();
+        event.returnValue = "";
+    }
+}
 
+/* watch */
+watch(lastRemainingYear, async (newYear, oldYear) => {
+    await fetchVacationHistory(newYear);
+});
+// `selectedDates` 변경 시 반차 버튼 초기화
+watch(
+    () => Array.from(selectedDates.value.keys()), // 선택된 날짜 리스트 감시
+    (newKeys) => {
+        if (halfDayButtonsRef.value) {
+            halfDayButtonsRef.value.resetHalfDay();
+        }
+    },
+    { deep: true }
+);
+// selectedDates가 변경될 때 버튼 상태 즉시 업데이트
+watch(
+    () => Array.from(selectedDates.value.keys()),
+    (newKeys) => {
+    },
+    { deep: true }
+);
 watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
     markClickableDates();
 });
 
-
+/* onMounted */
+// onMounted 및 달력 변경 시 실행
+onMounted(() => {
+    markClickableDates();
+});
+// onMounted 시 데이터 로드
 onMounted(async () => {
+    await userStore.userInfo();
     await fetchUserList();
     await fetchVacationCodes();
     const today = new Date();
@@ -571,13 +519,53 @@ watch([holidayDates, lastRemainingYear, lastRemainingMonth], () => {
     const month = String(today.getMonth() + 1).padStart(2, "0");
     await fetchVacationData(year, month);
     await loadCalendarData(year, month);
-  });
+    await fetchRemainingVacation();
-  </script>
+    const currentYear = new Date().getFullYear();
-
+    await fetchVacationHistory(currentYear);
-  <style>
+    window.addEventListener("beforeunload", preventUnsavedChanges);
-/* 모달 본문 스크롤 */
+    // Flatpickr 초기화 (달 선택)
-.modal-body {
+    fpInstance = flatpickr(calendarDatepicker.value, {
-  max-height: 130px;
+        dateFormat: "Y-m",
-  overflow-y: auto;
+        plugins: [
+            new monthSelectPlugin({
+                shorthand: true,
+                dateFormat: "Y-m",
+                altFormat: "F Y"
+            })
+        ],
+        onChange: function(selectedDatesArr, dateStr) {
+            // 선택한 달의 첫날로 달력을 이동
+            fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
+            const [year, month] = dateStr.split("-");
+            lastRemainingYear.value = parseInt(year, 10);
+            lastRemainingMonth.value = month;
+            loadCalendarData(lastRemainingYear.value, lastRemainingMonth.value);
+        },
+        onClose: function() {
+            calendarDatepicker.value.style.display = "none";
         }
+    });
+    // FullCalendar 년월월(.fc-toolbar-title) 클릭 시 데이트피커 열기
+    nextTick(() => {
+        const titleEl = document.querySelector('.fc-toolbar-title');
+        if (titleEl) {
+            titleEl.style.cursor = 'pointer';
+            titleEl.addEventListener('click', () => {
+            const dpEl = calendarDatepicker.value;
+            dpEl.style.display = 'block';
+            dpEl.style.position = 'fixed';
+            dpEl.style.top = '25%';
+            dpEl.style.left = '50%';
+            dpEl.style.transform = 'translate(-50%, -50%)';
+            dpEl.style.zIndex = '9999';
+            dpEl.style.border = 'none';
+            dpEl.style.outline = 'none';
+            dpEl.style.backgroundColor = 'transparent';
+            fpInstance.open();
+            });
+        }
+    });
+})
+</script>
+<style>
 </style>