휴가 css 수정완

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,41 +171,6 @@ opacity: 0.6; /* 흐려 보이게 */
 .close-btn:hover {
   color: #525252;
 }
-/* 모달 배경 투명하게 */
-.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;
-  border-radius: 8px;
-  box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.1); /* 위쪽 그림자만 적용 */
-  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;
@@ -159,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%);

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>
@@ -32,113 +30,37 @@
 import { defineEmits, ref, defineProps, watch } from "vue";
 
 const props = defineProps({
-  isDisabled: Boolean,
+isDisabled: Boolean,
-  selectedDate: String // 날짜 선택 값을 props로 받음
+selectedDate: String // 날짜 선택 값을 props로 받음
 });
 
 const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
 const halfDayType = ref(null);
 
 const toggleHalfDay = (type) => {
-  halfDayType.value = halfDayType.value === type ? null : type;
+halfDayType.value = halfDayType.value === type ? null : type;
-  emit("toggleHalfDay", halfDayType.value);
+emit("toggleHalfDay", halfDayType.value);
 };
 
 // `selectedDate`가 변경되면 반차 선택 초기화
 watch(() => props.selectedDate, (newDate) => {
-  if (newDate) {
+if (newDate) {
-    resetHalfDay();
+resetHalfDay();
-  }
+}
 });
 
 // 날짜 선택 후 반차 버튼 상태 초기화
 const resetHalfDay = () => {
-  halfDayType.value = null;
+halfDayType.value = null;
-  emit("resetHalfDay");
+emit("resetHalfDay");
 };
 
 const addVacationRequests = () => {
-  emit("addVacationRequests");
+emit("addVacationRequests");
 };
 
 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">
-            <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 class="modal-text">선물할 연차 개수를 선택하세요.</p>
-
                 <div class="count-container">
                     <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
                     <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,6 +39,7 @@ const maxQuota = 2;
 const sentCount = ref(0);
 const availableQuota = ref(2);
 
+// 사원 별 남은 보내기 개수
 const fetchSentVacationCount = async () => {
     try {
         const payload = { receiverId: props.targetUser.MEMBERSEQ };
@@ -56,18 +54,20 @@ const fetchSentVacationCount = async () => {
     }
 };
 
+// 개수 증가
 const increaseCount = () => {
     if (grantCount.value < availableQuota.value) {
         grantCount.value++;
     }
 };
-
+// 개수 감소
 const decreaseCount = () => {
     if (grantCount.value > 0) {
         grantCount.value--;
     }
 };
 
+// 연차 선물하기
 const saveVacationGrant = async () => {
     try {
         const payload = [{
@@ -86,11 +86,11 @@ const saveVacationGrant = async () => {
             toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
         }
     } catch (error) {
-        console.error("🚨 연차 추가 실패:", error);
         toastStore.onToast(' 연차 선물 실패!!.', 'e');
     }
 };
 
+// 모달 닫기기
 const closeModal = () => {
     emit("close");
 };
@@ -100,7 +100,6 @@ watch(() => props.isOpen, async (newVal) => {
         await fetchSentVacationCount();
     }
 });
-
 watch(() => props.targetUser, async (newUser) => {
     if (newUser?.MEMBERSEQ) {
         await fetchSentVacationCount();
@@ -115,152 +114,4 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-/* ✅ 반응형 모달 크기 조정 */
-.vac-modal-dialog {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.4);
-    z-index: 9999;
-    overflow: hidden; /* 풀 화면에서 스크롤 방지 */
-}
-
-.vac-modal-content {
-    background: white;
-    padding: 20px;
-    border-radius: 10px;
-    width: 500px;
-    height: auto;
-    max-height: 90vh;
-    transition: all 0.3s ease-in-out;
-    overflow: hidden;
-}
-
-/* ✅ 제목 스타일 */
-.modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.modal-title {
-    font-size: 20px;
-    font-weight: bold;
-}
-
-.close-btn {
-    background: transparent;
-    border: none;
-    font-size: 20px;
-    cursor: pointer;
-}
-
-/* ✅ 본문 텍스트 스타일 */
-.modal-text {
-    font-size: 15px;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-/* ✅ 숫자 선택 영역 */
-.count-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    margin-bottom: 15px;
-}
-
-/* ✅ 숫자 값 크기 증가 */
-.count-value {
-    font-size: 26px;
-    font-weight: bold;
-    min-width: 50px;
-    text-align: center;
-}
-
-/* ✅ 숫자 버튼 */
-.count-btn {
-    width: 45px;
-    height: 45px;
-    font-size: 22px;
-    border: none;
-    background: #2C3E50;
-    color: white;
-    border-radius: 50%;
-    cursor: pointer;
-    transition: all 0.2s;
-}
-
-.count-btn:disabled {
-    background: #ccc;
-    cursor: not-allowed;
-}
-
-/* ✅ 선물 아이콘 버튼 */
-.custom-button-container {
-    display: flex;
-    justify-content: 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;
-}
-
-/* ✅ 작은 화면에서 버튼 크기 조정 */
-@media (max-width: 1024px) {
-    .count-btn {
-        width: 35px;
-        height: 35px;
-        font-size: 18px;
-    }
-
-    .count-value {
-        font-size: 24px;
-    }
-
-    .custom-button {
-        width: 45px;
-        height: 45px;
-        font-size: 22px;
-    }
-}
-
-@media (max-width: 768px) {
-    .modal-title {
-        font-size: 16px;
-    }
-
-    .modal-text {
-        font-size: 12px;
-    }
-
-    .count-btn {
-        width: 28px;
-        height: 28px;
-        font-size: 16px;
-    }
-
-    .count-value {
-        font-size: 22px;
-    }
-
-    .custom-button {
-        width: 40px;
-        height: 40px;
-        font-size: 20px;
-    }
-}
 </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,14 +25,13 @@
                 </li>
                 </ol>
             </div>
-
             <!-- 연차 데이터 없음 -->
             <p v-else class="text-sm-center mt-10 text-gray">
                 🚫 사용한 연차가 없습니다.
             </p>
         </div>
     </div>
-  </template>
+</template>
 
 <script setup>
 import { defineProps, defineEmits, computed } from "vue";
@@ -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>
 
-  <style scoped>
-  </style>

src/components/vacation/ProfileList.vue

@@ -17,137 +17,99 @@
                     @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>
         </ul>
     </div>
-  </template>
+</template>
 
-  <script setup>
+<script setup>
-  import { onMounted, ref, computed, nextTick } from "vue";
+import { onMounted, ref, computed, nextTick } from "vue";
-  import { useUserInfoStore } from "@s/useUserInfoStore";
+import { useUserInfoStore } from "@s/useUserInfoStore";
-  import { useUserStore } from "@s/userList";
+import { useUserStore } from "@s/userList";
-  import $api from "@api";
+import $api from "@api";
 
-  defineEmits(["profileClick"]);
+defineEmits(["profileClick"]);
-  defineProps({ remainingVacationData: Object });
+defineProps({ remainingVacationData: Object });
 
-  const userStore = useUserInfoStore();
+const userStore = useUserInfoStore();
-  const userListStore = useUserStore();
+const userListStore = useUserStore();
 
-  const userList = ref([]);
+const userList = ref([]);
-  const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
-  const defaultProfile = "/img/icons/icon.png";
+const defaultProfile = "/img/icons/icon.png";
-  const employeeId = ref(null);
+const employeeId = ref(null);
-  const userColors = ref({});
+const userColors = ref({});
-  const windowWidth = ref(window.innerWidth);
+const windowWidth = ref(window.innerWidth);
 
-  const updateWindowWidth = () => {
+const updateWindowWidth = () => {
-    windowWidth.value = window.innerWidth;
+windowWidth.value = window.innerWidth;
-  };
+};
 
-  onMounted(async () => {
+onMounted(async () => {
-    window.addEventListener("resize", updateWindowWidth);
+window.addEventListener("resize", updateWindowWidth);
 
-    await userStore.userInfo();
+await userStore.userInfo();
-    employeeId.value = userStore.user?.id ?? null;
+employeeId.value = userStore.user?.id ?? null;
 
-    await userListStore.fetchUserList();
+await userListStore.fetchUserList();
-    userList.value = userListStore.userList;
+userList.value = userListStore.userList;
 
-    userList.value.forEach(user => {
+userList.value.forEach(user => {
     userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
-    });
+});
 
-    nextTick(() => {
+nextTick(() => {
     document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltip => {
     new bootstrap.Tooltip(tooltip);
     });
-    });
+});
-  });
+});
 
-  const sortedUserList = computed(() => {
+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 myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
-    const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
+const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
-    return myProfile ? [myProfile, ...otherUsers] : userList.value;
+return myProfile ? [myProfile, ...otherUsers] : userList.value;
-  });
+});
 
-  const getUserProfileImage = (profilePath) =>
+const getUserProfileImage = (profilePath) =>
-    profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
+profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
 
-  const setDefaultImage = (event) => (event.target.src = defaultProfile);
+const setDefaultImage = (event) => (event.target.src = defaultProfile);
-  const showImage = (event) => (event.target.style.visibility = "visible");
+const showImage = (event) => (event.target.style.visibility = "visible");
 
-  // ✅ 화면 크기에 따라 프로필 크기 동적 조정
+// 화면 크기에 따라 프로필 크기 동적 조정
-  const profileSize = computed(() => {
+const profileSize = computed(() => {
-    const totalUsers = userList.value.length;
+const totalUsers = userList.value.length;
 
-    if (windowWidth.value >= 1650) {
+if (windowWidth.value >= 1650) {
     if (totalUsers <= 10) return "68px";
     if (totalUsers <= 15) return "55px";
     return "45px";
-    } else if (windowWidth.value >= 1300) {
+} else if (windowWidth.value >= 1300) {
     if (totalUsers <= 10) return "45px";
     if (totalUsers <= 15) return "40px";
     return "30px";
-    } else if (windowWidth.value >= 1024) {
+} else if (windowWidth.value >= 1024) {
     if (totalUsers <= 10) return "40px";
     if (totalUsers <= 15) return "30px";
     return "20px";
-    } else {
+} else {
-      return "20px"; // 모바일 최소 크기
+    return "20px";
-    }
+}
-  });
+});
 
-  const getDynamicStyle = (user) => ({
+const getDynamicStyle = (user) => ({
-    width: profileSize.value,
+width: profileSize.value,
-    height: profileSize.value,
+height: profileSize.value,
-    borderWidth: "4px",
+borderWidth: "4px",
-    borderColor: user.usercolor || "#ccc",
+borderColor: user.usercolor || "#ccc",
-    borderStyle: "solid",
+borderStyle: "solid",
-  });
+});
-  </script>
+</script>
 
-  <style scoped>
+<style scoped>
-  /* ✅ 프로필 리스트 반응형 정렬 */
+</style>
-  .profile-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    padding: 0;
-  }
-
-  /* ✅ 프로필 이미지 반응형 스타일 */
-  .profile-img {
-    transition: all 0.2s ease-in-out;
-  }
-
-  /* ✅ 남은 연차 개수 스타일 */
-  .remaining-vacation {
-    display: block;
-    text-align: center;
-    font-size: 14px;
-    color: #333;
-    margin-top: 3px;
-  }
-
-  /* ✅ 작은 화면에서 프로필 크기 조정 */
-  @media (max-width: 1024px) {
-    .remaining-vacation {
-      font-size: 12px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .profile-list {
-      gap: 4px; /* 작은 화면에서는 간격 축소 */
-    }
-    .remaining-vacation {
-      font-size: 8px;
-    }
-  }
-  </style>

src/views/vacation/VacationManagement.vue

@@ -554,8 +554,8 @@ onMounted(async () => {
             const dpEl = calendarDatepicker.value;
             dpEl.style.display = 'block';
             dpEl.style.position = 'fixed';
-            dpEl.style.top = '22%';
+            dpEl.style.top = '25%';
-            dpEl.style.left = '66%';
+            dpEl.style.left = '50%';
             dpEl.style.transform = 'translate(-50%, -50%)';
             dpEl.style.zIndex = '9999';
             dpEl.style.border = 'none';
@@ -568,11 +568,4 @@ onMounted(async () => {
 })
 </script>
 <style>
-  /* 모달 본문 스크롤 */
-  .modal-body {
-  max-height: 140px;
-  overflow-y: auto;
-  }
-
-
 </style>