화면 반응형으로 수정

src/components/modal/VacationGrantModal.vue

@@ -1,129 +1,266 @@
 <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">
                 <h5 class="modal-title">To. {{ targetUser.MEMBERNAM }} 🎁</h5>
                 <button class="close-btn" @click="closeModal">✖</button>
             </div>
 
             <div class="modal-body">
-                <p>선물할 연차 개수를 선택하세요.</p>
+                <p class="modal-text">선물할 연차 개수를 선택하세요.</p>
 
-                <div class="justify-content-center d-sm-flex gap-sm-3 align-items-md-center mt-8">
+                <div class="count-container">
-                <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
+                    <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>
+                    <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">
+                    <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
-                    <i class="bx bx-gift"></i>
+                        <i class="bx bx-gift"></i>
-                </button>
+                    </button>
                 </div>
             </div>
         </div>
     </div>
 </template>
 
-  <script setup>
+<script setup>
-  import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
+import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
-  import axios from "@api";
+import axios from "@api";
-  import { useToastStore } from '@s/toastStore';
+import { useToastStore } from '@s/toastStore';
 
-  const toastStore = useToastStore();
+const toastStore = useToastStore();
-  const props = defineProps({
+const props = defineProps({
     isOpen: Boolean,
     targetUser: Object,
-  });
+});
 
-  const emit = defineEmits(["close", "updateVacation"]);
+const emit = defineEmits(["close", "updateVacation"]);
-  const grantCount = ref(0);
+const grantCount = ref(0);
-  const maxQuota = 2;
+const maxQuota = 2;
-  const sentCount = ref(0);
+const sentCount = ref(0);
-  const availableQuota = ref(2);
+const availableQuota = ref(2);
 
-  const fetchSentVacationCount = async () => {
+const fetchSentVacationCount = async () => {
     try {
-      const payload = { receiverId: props.targetUser.MEMBERSEQ };
+        const payload = { receiverId: props.targetUser.MEMBERSEQ };
-      const response = await axios.get("vacation/sent", { params: payload });
+        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);
+        availableQuota.value = Math.max(maxQuota - sentCount.value, 0);
-      grantCount.value = availableQuota.value; // ✅ 남은 개수로 기본값 설정
+        grantCount.value = availableQuota.value;
     } catch (error) {
-      console.error("🚨 연차 전송 기록 조회 실패:", error);
+        console.error("🚨 연차 전송 기록 조회 실패:", error);
-      availableQuota.value = maxQuota;
+        availableQuota.value = maxQuota;
-      grantCount.value = maxQuota; // 기본값 설정
+        grantCount.value = maxQuota;
     }
-  };
+};
 
-  const increaseCount = () => {
+const increaseCount = () => {
     if (grantCount.value < availableQuota.value) {
-      grantCount.value++;
+        grantCount.value++;
     }
-  };
+};
 
-  const decreaseCount = () => {
+const decreaseCount = () => {
     if (grantCount.value > 0) {
-      grantCount.value--;
+        grantCount.value--;
     }
-  };
+};
 
-  const saveVacationGrant = async () => {
+const saveVacationGrant = async () => {
     try {
-      const payload = [
+        const payload = [{
-        {
+            date: new Date().toISOString().split("T")[0],
-          date: new Date().toISOString().split("T")[0],
+            type: "700103",
-          type: "700103",
+            receiverId: props.targetUser.MEMBERSEQ,
-          receiverId: props.targetUser.MEMBERSEQ,
+            count: grantCount.value,
-          count: grantCount.value,
+        }];
-        },
+        const response = await axios.post("vacation", payload);
-      ];
+        if (response.data?.status === "OK") {
-      const response = await axios.post("vacation", payload);
+            toastStore.onToast('연차가 선물되었습니다.', 's');
-      if (response.data && response.data.status === "OK") {
+            await fetchSentVacationCount();
-        toastStore.onToast('연차가 선물되었습니다.', 's');
+            emit("updateVacation");
-        await fetchSentVacationCount();
+            closeModal();
-        emit("updateVacation");
+        } else {
-        closeModal();
+            toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
-      } else {
+        }
-       toastStore.onToast(' 연차 선물 중 오류가 발생했습니다.', 'e');
-      }
     } catch (error) {
-      console.error("🚨 연차 추가 실패:", error);
+        console.error("🚨 연차 추가 실패:", error);
-      toastStore.onToast(' 연차 선물 실패!!.', 'e');
+        toastStore.onToast(' 연차 선물 실패!!.', 'e');
     }
-  };
+};
 
-  const closeModal = () => {
+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(
+watch(() => props.targetUser, async (newUser) => {
-    () => props.targetUser,
+    if (newUser?.MEMBERSEQ) {
-    async (newUser) => {
-      if (newUser && newUser.MEMBERSEQ) {
         await fetchSentVacationCount();
-      }
-    },
-    { deep: true }
-  );
-
-  onMounted(async () => {
-    if (props.isOpen && props.targetUser && props.targetUser.MEMBERSEQ) {
-      await fetchSentVacationCount();
     }
-  });
+}, { deep: true });
-  </script>
 
+onMounted(async () => {
+    if (props.isOpen && props.targetUser?.MEMBERSEQ) {
+        await fetchSentVacationCount();
+    }
+});
+</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/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,7 +10,7 @@
           :aria-label="user.MEMBERSEQ"
         >
           <img
-            class="rounded-circle"
+            class="rounded-circle profile-img"
             :src="getUserProfileImage(user.MEMBERPRF)"
             alt="user"
             :style="getDynamicStyle(user)"
@@ -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,112 @@
   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) => {
+    width: profileSize.value,
-    return {
+    height: profileSize.value,
-      width: profileSize.value,
+    borderWidth: "4px",
-      height: profileSize.value,
+    borderColor: user.usercolor || "#ccc",
-      borderWidth: "4px",
+    borderStyle: "solid",
-      borderColor: user.usercolor || "#ccc",
+  });
-      borderStyle: "solid",
-    };
-  };
   </script>
 
   <style scoped>
-  /* 남은 연차 개수 스타일 */
+  /* ✅ 프로필 리스트 반응형 정렬 */
+  .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: 5px;
+    margin-top: 3px;
   }
 
-  /* ul에 flex-wrap을 적용하여 넘치는 프로필이 다음 줄로 내려가도록 함 */
+  /* ✅ 작은 화면에서 프로필 크기 조정 */
-  ul {
+  @media (max-width: 1024px) {
-    flex-wrap: wrap;
+    .remaining-vacation {
-    justify-content: center;
+      font-size: 12px;
+    }
   }
 
-  /* li 간 간격 조정 */
+  @media (max-width: 768px) {
-  li {
+    .profile-list {
-    margin: 5px;
+      gap: 4px; /* 작은 화면에서는 간격 축소 */
+    }
+    .remaining-vacation {
+      font-size: 8px;
+    }
   }
   </style>

src/views/vacation/VacationManagement.vue

@@ -68,7 +68,6 @@ import "bootstrap-icons/font/bootstrap-icons.css";
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
-import "@/assets/css/app-calendar.css";
 // Flatpickr, MonthSelect
 import flatpickr from "flatpickr";
 import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index";
@@ -574,4 +573,6 @@ onMounted(async () => {
   max-height: 140px;
   overflow-y: auto;
   }
+
+
 </style>