휴가가리스트 모달

src/components/modal/VacationModal.vue

@@ -0,0 +1,165 @@
+<template>
+<div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
+    <div class="modal-content modal-scroll">
+    <h5 class="modal-title">📅 내 연차 사용 내역</h5>
+    <button class="close-btn" @click="closeModal">✖</button>
+
+    <!-- 연차 사용 및 받은 연차 리스트 -->
+    <div class="modal-body" v-if="mergedVacations.length > 0">
+        <ol class="vacation-list">
+        <li
+            v-for="(vacation, index) in mergedVacations"
+            :key="index"
+            class="vacation-item"
+        >
+            <span v-if="vacation.type === 'used'" class="vacation-index">
+            {{ totalUsedVacationCount - usedVacations.findIndex(v => v.date === vacation.date) }})
+            </span>
+            <span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
+            {{ vacation.type === 'used' ? '-' : '+' }}
+            </span>
+            <span :style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
+                class="vacation-date">{{ formatDate(vacation.date) }}</span>
+        </li>
+        </ol>
+    </div>
+
+    <!-- 연차 데이터 없음 -->
+    <p v-if="mergedVacations.length === 0" class="no-data">
+        🚫 사용한 연차가 없습니다.
+    </p>
+    </div>
+</div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from "vue";
+
+const props = defineProps({
+isOpen: Boolean,
+myVacations: {
+    type: Array,
+    default: () => [],
+},
+receivedVacations: {
+    type: Array,
+    default: () => [],
+},
+userColors: {
+    type: Object,
+    default: () => ({}),
+},
+});
+
+const emit = defineEmits(["close"]);
+
+// ✅ 사용한 연차 개수
+const totalUsedVacationCount = computed(() => props.myVacations.length);
+
+// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
+const usedVacations = computed(() => props.myVacations.map(v => ({ ...v, type: "used" })));
+const receivedVacations = computed(() => props.receivedVacations.map(v => ({ ...v, type: "received" })));
+
+const mergedVacations = computed(() => {
+return [...usedVacations.value, ...receivedVacations.value].sort(
+    (a, b) => new Date(b.date) - new Date(a.date)
+);
+});
+
+// ✅ 날짜 형식 변환 (YYYY-MM-DD)
+const formatDate = (dateString) => {
+const date = new Date(dateString);
+return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
+};
+
+const closeModal = () => {
+emit("close");
+};
+</script>
+
+<style scoped>
+/* 모달 스타일 */
+.modal-dialog {
+display: flex;
+justify-content: center;
+align-items: center;
+}
+
+/* 스크롤 가능한 모달 */
+.modal-content {
+max-height: 80vh;
+overflow-y: auto;
+padding: 20px;
+width: 75%;
+background: white;
+border-radius: 8px;
+box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+/* 닫기 버튼 */
+.close-btn {
+position: absolute;
+top: 10px;
+right: 10px;
+background: none;
+border: none;
+font-size: 18px;
+cursor: pointer;
+font-weight: bold;
+}
+
+/* 리스트 기본 스타일 */
+.vacation-list {
+list-style-type: none;
+padding-left: 0;
+margin-top: 15px;
+}
+
+/* 리스트 아이템 */
+.vacation-item {
+display: flex;
+align-items: center;
+font-size: 16px;
+font-weight: bold;
+margin-bottom: 8px;
+padding: 5px 10px;
+border-radius: 5px;
+background: #f9f9f9;
+}
+
+/* 인덱스 (연차 사용 개수) */
+.vacation-index {
+font-weight: bold;
+font-size: 16px;
+margin-right: 8px;
+color: #333;
+}
+
+/* "-" 빨간색 */
+.minus-symbol {
+color: red;
+font-weight: bold;
+margin-right: 8px;
+}
+
+/* "+" 파란색 */
+.plus-symbol {
+color: blue;
+font-weight: bold;
+margin-right: 8px;
+}
+
+/* 날짜 스타일 */
+.vacation-date {
+font-size: 16px;
+color: #333;
+}
+
+/* 연차 데이터 없음 */
+.no-data {
+text-align: center;
+font-size: 14px;
+color: gray;
+margin-top: 10px;
+}
+</style>

src/components/vacation/ProfileList.vue

@@ -1,67 +1,71 @@
 <template>
     <div class="card-body d-flex justify-content-center">
-        <ul class="list-unstyled d-flex align-items-center gap-7 mb-0 mt-2">
+      <ul class="list-unstyled d-flex align-items-center gap-7 mb-0 mt-2">
-            <li
+        <li
-            v-for="(user, index) in sortedUserList"
+          v-for="(user, index) in sortedUserList"
-            :key="index"
+          :key="index"
-            :class="{ disabled: user.disabled }"
+          :class="{ disabled: user.disabled }"
-            @click="toggleDisable(index)"
+          @click="$emit('profileClick', user)"
-            data-bs-placement="top"
+          data-bs-placement="top"
-            :aria-label="user.MEMBERSEQ"
+          :aria-label="user.MEMBERSEQ"
-            >
+        >
-            <img
+          <img
-                class="rounded-circle user-avatar"
+            class="rounded-circle user-avatar "
-                :src="getUserProfileImage(user.MEMBERPRF)"
+            :src="getUserProfileImage(user.MEMBERPRF)"
-                alt="user"
+            alt="user"
-                :style="getDynamicStyle(user)"
+            :style="getDynamicStyle(user)"
-                @error="setDefaultImage"
+            @error="setDefaultImage"
-                @load="showImage"
+            @load="showImage"
-            />
+          />
-            </li>
+        </li>
-        </ul>
+      </ul>
     </div>
   </template>
 
   <script setup>
   import { onMounted, ref, computed, nextTick } from "vue";
-  import { useUserStore } from "@s/useUserStore"; // 사용자 정보 스토어 사용
+  import { useUserStore } from "@s/useUserStore";
-  import { useUserStore as useUserListStore } from "@s/userList"; // 사원 리스트 스토어
+  import { useUserStore as useUserListStore } from "@s/userList";
   import $api from "@api";
 
+  defineEmits(["profileClick"]);
+
   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);
-  const employeeId = ref(null); // 현재 로그인한 사용자 ID
+  const userColors = ref({});
 
   onMounted(async () => {
-    await userStore.userInfo(); // 로그인한 사용자 정보 가져오기
+  await userStore.userInfo();
-    await userListStore.fetchUserList(); // 사원 리스트 가져오기
+  if (userStore.user) {
+    employeeId.value = userStore.user.id;
+  } else {
+    console.error("❌ 로그인한 사용자 정보를 불러오지 못했습니다.");
+  }
 
-    userList.value = userListStore.userList;
+  await userListStore.fetchUserList();
+  userList.value = userListStore.userList;
 
-    // 로그인한 사용자의 ID 가져오기
+  // 사용자별 색상 저장
-    if (userStore.user) {
+  userList.value.forEach(user => {
-      employeeId.value = userStore.user.id;
+    userColors.value[user.MEMBERSEQ] = user.usercolor || "#ccc";
-    }
+    console.log(userColors.value[user.MEMBERSEQ])
-
-    nextTick(() => {
-      const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-      tooltips.forEach((tooltip) => {
-        new bootstrap.Tooltip(tooltip);
-      });
-    });
   });
 
-  // 내 프로필을 가장 앞에 배치한 리스트 정렬
+  nextTick(() => {
+    const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    tooltips.forEach(tooltip => {
+      new bootstrap.Tooltip(tooltip);
+    });
+  });
+});
+
   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);
 
@@ -87,7 +91,7 @@
     const totalUsers = userList.value.length;
 
     if (totalUsers <= 7) return "120px"; // 7명 이하
-    if (totalUsers <= 10) return "110px"; // ~10명
+    if (totalUsers <= 10) return "100px"; // ~10명
     if (totalUsers <= 20) return "80px"; // ~20명
     return "60px"; // 20명 이상
   });
@@ -97,8 +101,9 @@
     return {
       width: profileSize.value,
       height: profileSize.value,
-      borderWidth: "3px",
+      borderWidth: "4px",
       borderColor: user.usercolor || "#ccc",
+        borderStyle: "solid",
     };
   };
   </script>

src/views/vacation/VacationManagement.vue

@@ -5,8 +5,17 @@
             <div class="row g-0">
             <div class="col app-calendar-content">
                 <div class="card shadow-none border-0">
-                    <ProfileList  />
+                    <ProfileList  @profileClick="handleProfileClick" />
                 <div class="card-body">
+                    <VacationModal
+                    v-if="isModalOpen"
+                    :isOpen="isModalOpen"
+                    :myVacations="myVacations"
+                    :receivedVacations="receivedVacations"
+                    :userColors="userColors"
+                    @click="handleProfileClick(user)"
+                    @close="isModalOpen = false"
+                    />
                     <full-calendar
                     ref="fullCalendarRef"
                     :options="calendarOptions"
@@ -31,18 +40,45 @@ import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import "flatpickr/dist/flatpickr.min.css";
 import "@/assets/css/app-calendar.css";
-import { reactive, ref, onMounted, nextTick, watchEffect } from "vue";
+import { reactive, ref, onMounted, nextTick, computed } 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 ProfileList from "@c/vacation/ProfileList.vue";
 import { useUserStore } from "@s/userList";
+  import VacationModal from "@c/modal/VacationModal.vue"
 
 const userStore = useUserStore();
 const userList = ref([]);
 const userColors = ref({});
+const myVacations = ref([]); // 내가 사용한 연차 목록
+const receivedVacations = ref([]); // 내가 받은 연차 목록
+const isModalOpen = ref(false);
 
 
+// 프로필 클릭 시 연차 내역 가져오기
+const handleProfileClick = async (user) => {
+  try {
+    console.log(`🔍 ${user.MEMBERSEQ}님의 연차 내역 요청 중...`);
+    const response = await axios.get(`vacation/history`);
+
+    if (response.status === 200 && response.data) {
+      console.log("✅ 연차 내역 응답:", response.data);
+      myVacations.value = response.data.data.usedVacations || [];
+      receivedVacations.value = response.data.data.receivedVacations || [];
+
+      console.log("📌 myVacations:", myVacations.value);
+      console.log("📌 receivedVacations:", receivedVacations.value);
+
+      isModalOpen.value = true;
+    } else {
+      console.warn("❌ 연차 내역을 불러오지 못했습니다.");
+    }
+  } catch (error) {
+    console.error("🚨 연차 데이터 불러오기 실패:", error);
+  }
+};
+
 const fetchUserList = async () => {
   try {
     await userStore.fetchUserList();