휴가관리 사원프로필

public/css/custom.css

@@ -29,7 +29,6 @@
 
 
 /* 휴가*/
-
 .half-day-buttons {
     display: flex;
     justify-content: center;
@@ -94,3 +93,18 @@
   left: 5px !important;
   text-align: left !important;
 }
+
+.user-avatar {
+  border: 3px solid;
+  width: 110px;
+  height: 110px;
+  object-fit: cover;
+  background-color: white;
+  transition: transform 0.2s ease-in-out;
+}
+
+
+
+.grayscaleImg {
+  filter: grayscale(100%);
+}

src/components/vacation/ProfileList.vue

@@ -1,53 +1,54 @@
 <template>
-    <div class="users-list-wrapper">
+    <div class="card-body d-flex justify-content-center">
-      <button class="scroll-btn left" @click="scrollLeft">❮</button>
+        <ul class="list-unstyled d-flex align-items-center gap-7 mb-0 mt-2">
-
-      <div class="users-list-container" ref="userListContainer">
-        <ul class="list-unstyled users-list d-flex align-items-center justify-content-start">
             <li
-            v-for="(user, index) in userList"
+            v-for="(user, index) in sortedUserList"
             :key="index"
-            class="avatar pull-up position-relative"
             :class="{ disabled: user.disabled }"
             @click="toggleDisable(index)"
-            data-bs-toggle="tooltip"
+            data-bs-placement="top"
-            data-popup="tooltip-custom"
-            data-bs-placement="bottom"
             :aria-label="user.MEMBERSEQ"
-            :data-bs-original-title="getTooltipTitle(user)"
             >
-            <div class="tooltip-custom">{{ getTooltipTitle(user) }}</div>
             <img
                 class="rounded-circle user-avatar"
                 :src="getUserProfileImage(user.MEMBERPRF)"
                 alt="user"
-              :style="{ borderColor: user.usercolor }"
+                :style="getDynamicStyle(user)"
                 @error="setDefaultImage"
                 @load="showImage"
             />
             </li>
         </ul>
     </div>
-
-      <button class="scroll-btn right" @click="scrollRight">❯</button>
-    </div>
   </template>
 
   <script setup>
-  import { onMounted, ref, nextTick } from "vue";
+  import { onMounted, ref, computed, nextTick } from "vue";
-  import { useUserStore } from "@s/userList";
+  import { useUserStore } from "@s/useUserStore"; // 사용자 정보 스토어 사용
+  import { useUserStore as useUserListStore } from "@s/userList"; // 사원 리스트 스토어
   import $api from "@api";
 
-  const emit = defineEmits();
   const userStore = useUserStore();
+  const userListStore = useUserListStore();
+
   const userList = ref([]);
   const userListContainer = ref(null);
   const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
   const defaultProfile = "/img/icons/icon.png";
 
+  const employeeId = ref(null); // 현재 로그인한 사용자 ID
+
   onMounted(async () => {
-    await userStore.fetchUserList();
+    await userStore.userInfo(); // 로그인한 사용자 정보 가져오기
-    userList.value = userStore.userList;
+    await userListStore.fetchUserList(); // 사원 리스트 가져오기
+
+    userList.value = userListStore.userList;
+
+    // 로그인한 사용자의 ID 가져오기
+    if (userStore.user) {
+      employeeId.value = userStore.user.id;
+    }
+
     nextTick(() => {
       const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
       tooltips.forEach((tooltip) => {
@@ -56,6 +57,17 @@
     });
   });
 
+  // 내 프로필을 가장 앞에 배치한 리스트 정렬
+  const sortedUserList = computed(() => {
+    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;
+  });
+
   const getUserProfileImage = (profilePath) => {
     return profilePath && profilePath.trim()
       ? `${baseUrl}upload/img/profile/${profilePath}`
@@ -70,153 +82,26 @@
     event.target.style.visibility = "visible";
   };
 
-  const getTooltipTitle = (user) => {
+  // 프로필 크기 동적 조정
-    return user.MEMBERSEQ === userList.value.MEMBERSEQ ? "나" : user.MEMBERNAM;
+  const profileSize = computed(() => {
+    const totalUsers = userList.value.length;
+
+    if (totalUsers <= 7) return "120px"; // 7명 이하
+    if (totalUsers <= 10) return "110px"; // ~10명
+    if (totalUsers <= 20) return "80px"; // ~20명
+    return "60px"; // 20명 이상
+  });
+
+  // 개별 유저 스타일 적용
+  const getDynamicStyle = (user) => {
+    return {
+      width: profileSize.value,
+      height: profileSize.value,
+      borderWidth: "3px",
+      borderColor: user.usercolor || "#ccc",
     };
-
-  const scrollAmount = 9 * 100;
-
-  const scrollLeft = () => {
-    userListContainer.value.scrollBy({ left: -scrollAmount, behavior: "smooth" });
-  };
-
-  const scrollRight = () => {
-    userListContainer.value.scrollBy({ left: scrollAmount, behavior: "smooth" });
   };
   </script>
 
   <style scoped>
-  /* ✅ 프로필 리스트 컨테이너 */
-  .users-list-wrapper {
-    margin: auto;
-    position: relative;
-    width: 100%;
-    max-width: 990px;
-    margin: 0.2 auto; /* 중앙 정렬 */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* ✅ 프로필 리스트 */
-  .users-list-container {
-    overflow-x: auto;
-    white-space: nowrap;
-    display: flex;
-    align-items: center;
-    padding: 0px;
-    scrollbar-width: none;
-    padding-bottom: 50px;
-    padding-top: 30px;
-    left: 10;
-  }
-
-  /* ✅ 스크롤바 숨기기 */
-  .users-list-container::-webkit-scrollbar {
-    display: none;
-  }
-
-  /* ✅ 프로필 목록 */
-  .users-list {
-    display: flex;
-    gap: 91px; /* 기본 간격 */
-    padding: 10px;
-  }
-
-  /* ✅ 프로필 이미지 스타일 */
-  .user-avatar {
-    border: 3px solid;
-    width: 110px;
-    height: 110px;
-    object-fit: cover;
-    background-color: white;
-    transition: transform 0.2s ease-in-out;
-  }
-
-  /* ✅ 프로필 선택 효과 */
-  .avatar:hover .user-avatar {
-    transform: scale(1.1);
-  }
-
-  /* ✅ 툴팁 위치 조정 (하단 & 오른쪽 정렬) */
-  .tooltip-custom {
-    position: absolute;
-    top: 110%; /* 아래쪽으로 이동 */
-    left: 60%;
-    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.75);
-    color: white;
-    padding: 5px 10px;
-    font-size: 12px;
-    border-radius: 5px;
-    white-space: nowrap;
-    display: none;
-  }
-
-  /* ✅ 툴팁 표시 */
-  .avatar:hover .tooltip-custom {
-    display: block;
-  }
-
-  /* ✅ 좌우 스크롤 버튼 */
-  .scroll-btn {
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    font-size: 20px;
-    z-index: 100;
-    transition: background 0.3s ease;
-  }
-
-  /* ✅ 좌우 버튼 위치 */
-  .scroll-btn.left {
-    left: 0;
-    margin-top: 20px;
-  }
-
-  .scroll-btn.right {
-    right: 0;
-    margin-top: 20px;
-  }
-
-  .scroll-btn:hover {
-    background-color: rgba(0, 0, 0, 0.8);
-  }
-
-  /* ✅ 반응형 처리 */
-  @media (max-width: 1024px) {
-    .users-list {
-      gap: 40px; /* 좁은 화면에서는 간격 축소 */
-    }
-    .user-avatar {
-      width: 80px;
-      height: 80px;
-    }
-    .scroll-btn {
-      padding: 8px 12px;
-      font-size: 18px;
-    }
-  }
-
-  @media (max-width: 768px) {
-    .users-list {
-      gap: 15px;
-    }
-    .user-avatar {
-      width: 70px;
-      height: 70px;
-    }
-  }
-
-  @media (max-width: 480px) {
-    .users-list {
-      gap: 40px;
-    }
-    .user-avatar {
-      width: 60px;
-      height: 60px;
-    }
-  }
   </style>

src/views/vacation/VacationManagement.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="vacation-management">
-        <div class="container flex-grow-1">
+        <div class="container-xxl flex-grow-1 container-p-y">
         <div class="card app-calendar-wrapper">
             <div class="row g-0">
             <div class="col app-calendar-content">
@@ -68,7 +68,6 @@ const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이
 const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
 const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
 const halfDayType = ref(null);
-const employeeId = ref(1);
 
 // 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
 const holidayDates = ref(new Set());
@@ -212,7 +211,6 @@ if (selectedDates.value.size === 0) {
 const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
     date,
     type,
-    employeeId: employeeId.value,
 }));
 try {
     const response = await axios.post("vacation", vacationRequests);