개인참여기간

src/components/user/UserList.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, nextTick, computed } from 'vue';
+import { onMounted, ref, nextTick, computed, watch } from 'vue';
 import { useUserStore } from '@s/userList';
 import { useProjectStore } from '@s/useProjectStore';
 import $api from '@api';
@@ -35,6 +35,7 @@ const emit = defineEmits(['user-list-update']);
 const userStore = useUserStore();
 const userList = ref([]);
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+const userProjectPeriods = ref([]);
 
 const props = defineProps({
     projctSeq: {
@@ -82,6 +83,27 @@ const fetchProjectParticipation = async () => {
     }
 };
 
+// 사용자별 프로젝트 참여 기간 조회
+const fetchUserProjectPeriods = async () => {
+    if (props.projctSeq) {
+        try {
+            const response = await $api.get(`project/period/${props.projctSeq}`);
+            if (response.status === 200) {
+                userProjectPeriods.value = response.data.data;
+            }
+        } catch (error) {
+            console.error('프로젝트 참여 기간 조회 실패:', error);
+        }
+    }
+};
+
+// projctSeq가 변경될 때마다 참여 기간 데이터 다시 불러오기
+watch(() => props.projctSeq, async (newVal) => {
+    if (newVal) {
+        await fetchUserProjectPeriods();
+    }
+}, { immediate: true });
+
 // 사용자 목록 호출
 onMounted(async () => {
     await userStore.fetchUserList();
@@ -89,16 +111,25 @@ onMounted(async () => {
 
     if (props.projctSeq) {
         await fetchProjectParticipation();
+        await fetchUserProjectPeriods();
     }
 
     nextTick(() => {
-        const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-        tooltips.forEach((tooltip) => {
-            new bootstrap.Tooltip(tooltip);
-        });
+        initTooltips();
     });
 });
 
+// 툴팁 초기화 함수
+const initTooltips = () => {
+    const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    tooltips.forEach((tooltip) => {
+        if (tooltip._tooltip) {
+            tooltip._tooltip.dispose();
+        }
+        new bootstrap.Tooltip(tooltip);
+    });
+};
+
 // 사용자 비활성화 상태 확인
 const isUserDisabled = (user) => {
     return props.projctSeq ? user.PROJCTYON === '0' : user.disabled;
@@ -150,7 +181,26 @@ const emitUserListUpdate = () => {
     emit('user-list-update', { activeUsers, disabledUsers });
 };
 
+// 날짜 포맷 함수
+const formatDate = (dateString) => {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+};
+
+// 툴팁 제목 생성 함수
 const getTooltipTitle = (user) => {
-    return user.MEMBERSEQ === userStore.userInfo.id ? '나' : user.MEMBERNAM;
+    const userName = user.MEMBERSEQ === userStore.userInfo.id ? '나' : user.MEMBERNAM;
+
+    if (props.projctSeq) {
+        const periodInfo = userProjectPeriods.value.find(p => p.MEMBERSEQ === user.MEMBERSEQ);
+
+        if (periodInfo) {
+            return `${formatDate(periodInfo.userStartDate)} ~ ${formatDate(periodInfo.userEndDate)}`;
+        }
+    }
+
+    return userName;
 };
 </script>
+