휴가저장장

src/components/button/HalfDayButtons.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="half-day-buttons">
+      <button
+        class="btn btn-info"
+        :class="{ active: halfDayType === 'AM' }"
+        @click="toggleHalfDay('AM')"
+      >
+        <i class="bi bi-sun"></i>
+      </button>
+      <button
+        class="btn btn-warning"
+        :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>
+      </div>
+    </div>
+  </template>
+
+  <script setup>
+  import { defineEmits, ref } from "vue";
+
+  const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
+  const halfDayType = ref(null);
+
+  const toggleHalfDay = (type) => {
+    halfDayType.value = halfDayType.value === type ? null : type;
+    emit("toggleHalfDay", halfDayType.value);
+  };
+
+  const addVacationRequests = () => {
+    emit("addVacationRequests");
+  };
+  </script>
+
+  <style scoped>
+
+  </style>

src/components/vacation/ProfileList.vue

@@ -0,0 +1,187 @@
+<template>
+    <div class="users-list-wrapper">
+      <button class="scroll-btn left" @click="scrollLeft">❮</button>
+
+      <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"
+            :key="index"
+            class="avatar pull-up position-relative"
+            :class="{ disabled: user.disabled }"
+            @click="toggleDisable(index)"
+            data-bs-toggle="tooltip"
+            data-popup="tooltip-custom"
+            data-bs-placement="top"
+            :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 }"
+              @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 { useUserStore } from "@s/userList";
+  import $api from "@api";
+
+  const emit = defineEmits();
+  const userStore = useUserStore();
+  const userList = ref([]);
+  const userListContainer = ref(null); // 프로필 목록 컨테이너 참조
+  const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
+  const defaultProfile = "/img/icons/icon.png"; // 기본 이미지 경로
+
+  // ✅ 사용자 목록 호출
+  onMounted(async () => {
+    await userStore.fetchUserList();
+    userList.value = userStore.userList;
+    nextTick(() => {
+      const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+      tooltips.forEach((tooltip) => {
+        new bootstrap.Tooltip(tooltip);
+      });
+    });
+  });
+
+  // ✅ 프로필 이미지 경로 반환
+  const getUserProfileImage = (profilePath) => {
+    return profilePath && profilePath.trim()
+      ? `${baseUrl}upload/img/profile/${profilePath}`
+      : defaultProfile;
+  };
+
+  // ✅ 이미지 로딩 오류 처리
+  const setDefaultImage = (event) => {
+    event.target.src = defaultProfile;
+  };
+
+  // ✅ 이미지 로드 후 깜빡임 방지
+  const showImage = (event) => {
+    event.target.style.visibility = "visible";
+  };
+
+  // ✅ 툴팁 타이틀 설정
+  const getTooltipTitle = (user) => {
+    return user.MEMBERSEQ === userList.value.MEMBERSEQ ? "나" : user.MEMBERNAM;
+  };
+
+  // ✅ 좌우 스크롤 이동 기능 추가 (한 줄씩 이동)
+  const scrollLeft = () => {
+    userListContainer.value.scrollBy({ left: -userListContainer.value.clientWidth, behavior: "smooth" });
+  };
+
+  const scrollRight = () => {
+    userListContainer.value.scrollBy({ left: userListContainer.value.clientWidth, behavior: "smooth" });
+  };
+  </script>
+
+  <style scoped>
+  /* ✅ 전체 프로필 목록 감싸는 영역 */
+  .users-list-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 1250px;
+    margin: auto;
+  }
+
+  /* ✅ 스크롤 가능하도록 컨테이너 설정 */
+  .users-list-container {
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    display: flex;
+    flex-wrap: wrap;
+    max-height: 200px; /* 한 줄 이상 넘어가지 않도록 조절 */
+    padding: 50px;
+    scrollbar-width: none; /* Firefox에서 스크롤바 숨김 */
+  }
+
+  /* ✅ 스크롤바 숨기기 */
+  .users-list-container::-webkit-scrollbar {
+    display: none; /* Chrome, Safari에서 스크롤바 숨김 */
+  }
+
+  /* ✅ 프로필 목록 */
+  .users-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px; /* 프로필 간격 */
+    padding: 10px;
+  }
+
+  /* ✅ 프로필 이미지 스타일 */
+  .user-avatar {
+    border: 3px solid;
+    width: 100px;
+    height: 100px;
+    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: -30px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(0, 0, 0, 0.75);
+    color: white;
+    padding: 5px 8px;
+    font-size: 12px;
+    border-radius: 5px;
+    white-space: nowrap;
+    display: none;
+  }
+
+  /* ✅ 툴팁 표시 */
+  .avatar:hover .tooltip-custom {
+    display: block;
+  }
+
+  /* ✅ 좌우 스크롤 버튼 */
+  .scroll-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    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: -40px;
+  }
+
+  .scroll-btn.right {
+    right: -40px;
+  }
+
+  .scroll-btn:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+  </style>

src/stores/userList.js

@@ -16,7 +16,6 @@ export const useUserStore = defineStore("userStore", {
     actions: {
         async fetchUserList() {
             const response = await axios.get('user/allUserList');
-            console.log('response',response)
             this.userList = response.data.data.allUserList;
             this.userInfo = response.data.data.user;
 

src/views/vacation/AddEventModal.vue

@@ -1,37 +0,0 @@
-<template>
-    <div class="modal">
-      <div class="modal-content">
-        <h3>휴가 추가</h3>
-        <input type="text" v-model="title" placeholder="제목" />
-        <input type="date" v-model="date" />
-        <button @click="addEvent">추가</button>
-        <button @click="$emit('close')">닫기</button>
-      </div>
-    </div>
-  </template>
-
-  <script>
-  import calendarStore from '@s/calendarStore';
-
-  export default {
-    data() {
-      return {
-        title: '',
-        date: '',
-      };
-    },
-    methods: {
-      addEvent() {
-        if (this.title && this.date) {
-          calendarStore.addEvent({ title: this.title, start: this.date });
-          this.$emit('close');
-        } else {
-          alert('모든 필드를 입력해주세요.');
-        }
-      },
-    },
-  };
-  </script>
-
-  <style scoped>
-  </style>

src/views/vacation/ProfileList.vue

@@ -1,56 +0,0 @@
-<template>
-    <div class="profile-list">
-      <div v-for="profile in profiles" :key="profile.id" class="profile">
-        <img :src="profile.avatar" alt="프로필 사진" class="avatar" />
-        <div class="info">
-          <p class="name">{{ profile.name }}</p>
-          <p class="vacation-count">남은 휴가: {{ profile.remainingVacations }}일</p>
-        </div>
-      </div>
-    </div>
-  </template>
-
-  <script>
-  export default {
-    data() {
-      return {
-        profiles: [
-          { id: 1, name: '김철수', avatar: '/avatars/user1.png', remainingVacations: 15 },
-          { id: 2, name: '박영희', avatar: '/avatars/user2.png', remainingVacations: 11 },
-          { id: 3, name: '이민호', avatar: '/avatars/user3.png', remainingVacations: 10 },
-        ],
-      };
-    },
-  };
-  </script>
-
-  <style scoped>
-  .profile-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-  .profile {
-    display: flex;
-    align-items: center;
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 10px;
-  }
-  .avatar {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-  .info {
-    display: flex;
-    flex-direction: column;
-  }
-  .name {
-    font-weight: bold;
-  }
-  .vacation-count {
-    color: gray;
-  }
-  </style>

src/views/vacation/VacationManagement.vue

@@ -13,27 +13,14 @@
                     />
                 </div>
                 </div>
-              <div class="half-day-buttons">
+
-                <button
+                <ProfileList  />
-                  class="btn btn-info"
+
-                  :class="{ active: halfDayType === 'AM' }"
+                <HalfDayButtons
-                  @click="toggleHalfDay('AM')"
+                @toggleHalfDay="toggleHalfDay"
-                >
+                @addVacationRequests="addVacationRequests"
-                  <i class="bi bi-sun"></i>
+                />
-                </button>
+
-                <button
-                  class="btn btn-warning"
-                  :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>
-                </div>
-              </div>
                 <br />
             </div>
             </div>
@@ -48,9 +35,36 @@
 import interactionPlugin from "@fullcalendar/interaction";
 import "flatpickr/dist/flatpickr.min.css";
 import "@/assets/css/app-calendar.css";
-  import { reactive, ref, onMounted, nextTick } from "vue";
+import { reactive, ref, onMounted, nextTick, watchEffect } from "vue";
 import axios from "@api";
 import "bootstrap-icons/font/bootstrap-icons.css";
+import HalfDayButtons from "@c/button/HalfDayButtons.vue";
+import ProfileList from "@/components/vacation/ProfileList.vue";
+import { useUserStore } from "@s/userList";
+
+const userStore = useUserStore();
+const userList = ref([]);
+const userColors = ref({});
+
+
+const fetchUserList = async () => {
+  try {
+    await userStore.fetchUserList();
+    userList.value = userStore.userList;
+
+    if (!userList.value.length) {
+      console.warn("📌 사용자 목록이 비어 있음!");
+      return;
+    }
+
+    userColors.value = {};
+    userList.value.forEach((user) => {
+      userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
+    });
+  } catch (error) {
+    console.error("📌 사용자 목록 불러오기 오류:", error);
+  }
+};
 
 // FullCalendar 관련 참조 및 데이터
 const fullCalendarRef = ref(null);
@@ -153,16 +167,14 @@
  */
 async function fetchVacationData(year, month) {
 try {
-      console.log(`📌 휴가 데이터 요청: ${year}-${month}`);
     const response = await axios.get(`vacation/list/${year}/${month}`);
     if (response.status == 200) {
     const vacationList = response.data;
-        console.log("📌 백엔드 응답 데이터:", vacationList);
     const events = vacationList
         .map((vac) => {
         let dateStr = vac.LOCVACUDT.split("T")[0];
         let className = "fc-daygrid-event";
-            let backgroundColor = getColorByEmployeeId(vac.MEMBERSEQ);
+        let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
         let title = "연차";
         if (vac.LOCVACTYP === "D") {
             title = "오전반차";
@@ -193,14 +205,6 @@
 }
 }
 
-  /**
-   * 사원 ID별 색상 반환
-   */
-  function getColorByEmployeeId(employeeId) {
-    const colors = ["#ade3ff", "#ffade3", "#ade3ad", "#ffadad"];
-    return colors[employeeId % colors.length];
-  }
-
 /**
  * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
  */
@@ -239,9 +243,7 @@
  */
 async function fetchHolidays(year, month) {
 try {
-      console.log(`📌 공휴일 요청: ${year}-${month}`);
     const response = await axios.get(`vacation/${year}/${month}`);
-      console.log("📌 공휴일 API 응답:", response.data);
     const holidayEvents = response.data.map((holiday) => ({
     title: holiday.name,
     start: holiday.date, // "YYYY-MM-DD" 형식
@@ -262,7 +264,6 @@
 const currentDate = viewInfo.view.currentStart;
 const year = currentDate.getFullYear();
 const month = String(currentDate.getMonth() + 1).padStart(2, "0");
-    console.log(`📌 월 변경 감지: ${year}-${month}`);
 loadCalendarData(year, month);
 }
 
@@ -270,30 +271,26 @@
  * 지정한 월의 데이터를 로드 (휴가, 공휴일 데이터를 병렬 요청)
  */
 async function loadCalendarData(year, month) {
-    console.log(`📌 ${year}-${month} 데이터 로드 시작`);
 fetchedEvents.value = [];
 const [vacationEvents, holidayEvents] = await Promise.all([
     fetchVacationData(year, month),
     fetchHolidays(year, month),
 ]);
-    console.log("📌 변환된 휴가 이벤트:", vacationEvents);
-    console.log("📌 변환된 공휴일 이벤트:", holidayEvents);
 // 클릭 불가 처리를 위해 공휴일 날짜 Set 업데이트
 holidayDates.value = new Set(holidayEvents.map((event) => event.start));
 fetchedEvents.value = [...vacationEvents, ...holidayEvents];
 updateCalendarEvents();
 await nextTick();
 fullCalendarRef.value.getApi().refetchEvents();
-    console.log("📌 FullCalendar 데이터 업데이트 완료");
 }
 
 // 컴포넌트 마운트 시 현재 달의 데이터 로드
-  onMounted(() => {
+onMounted(async () => {
+await fetchUserList(); // 사용자 목록 먼저 불러오기
 const today = new Date();
 const year = today.getFullYear();
 const month = String(today.getMonth() + 1).padStart(2, "0");
-    console.log(`📌 초기 로드: ${year}-${month}`);
+await loadCalendarData(year, month);
-    loadCalendarData(year, month);
 });
 </script>