userlist 로직 변경

src/components/user/UserList.vue

@@ -4,23 +4,22 @@
             v-for="(user, index) in userList"
             :key="index"
             class="avatar pull-up"
-            :class="{ 'opacity-100': user.disabled }"
+            :class="{ 'opacity-100': isUserDisabled(user) }"
             @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)"
-            >
+        >
             <img
                 class="rounded-circle user-avatar border border-3"
-                :class="{ 'grayscaleImg': user.disabled }"
+                :class="{ 'grayscaleImg': isUserDisabled(user) }"
                 :src="`${baseUrl}upload/img/profile/${user.MEMBERPRF}`"
                 :style="`border-color: ${user.usercolor} !important;`"
                 alt="user"
             />
         </li>
-
     </ul>
 </template>
 
@@ -29,38 +28,83 @@ import { onMounted, ref, nextTick } from 'vue';
 import { useUserStore } from '@s/userList';
 import $api from '@api';
 
-const emit = defineEmits();
+const emit = defineEmits(['user-list-update']);
 const userStore = useUserStore();
 const userList = ref([]);
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
 
+const props = defineProps({
+    projctSeq: {
+        type: Number,
+        required: false,
+    }
+});
+
+// 사용자의 프로젝트 참여 상태 확인
+const fetchProjectParticipation = async () => {
+    if (props.projctSeq) {
+        const response = await $api.get(`project/members/${props.projctSeq}`);
+        if (response.status === 200) {
+            const projectMembers = response.data.data;
+            userList.value = userList.value.map(user => ({
+                ...user,
+                PROJCTYON: projectMembers.find(pm => pm.MEMBERSEQ === user.MEMBERSEQ)?.PROJCTYON ?? '1'
+            }));
+        }
+    }
+};
+
 // 사용자 목록 호출
 onMounted(async () => {
     await userStore.fetchUserList();
     userList.value = userStore.userList;
 
+    if (props.projctSeq) {
+        await fetchProjectParticipation();
+    }
+
     nextTick(() => {
         const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
         tooltips.forEach((tooltip) => {
-        new bootstrap.Tooltip(tooltip);
+            new bootstrap.Tooltip(tooltip);
         });
     });
 });
 
-// 클릭 시 활성화/비활성화
+// 사용자 비활성화 상태 확인
-const toggleDisable = (index) => {
+const isUserDisabled = (user) => {
+    return props.projctSeq ? user.PROJCTYON === '0' : user.disabled;
+};
+
+// 클릭 시 활성화/비활성화 및 DB 업데이트
+const toggleDisable = async (index) => {
     const user = userList.value[index];
     if (user) {
-        user.disabled = !user.disabled;
+        const newParticipationStatus = props.projctSeq
-        emitUserListUpdate();
+            ? user.PROJCTYON === '1'
+            : !user.disabled;
+
+        if (props.projctSeq) {
+            const response = await $api.patch('project/updateYon', {
+                memberSeq: user.MEMBERSEQ,
+                projctSeq: props.projctSeq,
+                projctYon: newParticipationStatus ? '0' : '1'
+            });
+
+            if (response.status === 200) {
+                user.PROJCTYON = newParticipationStatus ? '0' : '1';
+            }
+        } else {
+            user.disabled = newParticipationStatus;
+            emitUserListUpdate();
+        }
     }
 };
 
 // emit
 const emitUserListUpdate = () => {
-    const activeUsers = userList.value.filter((user) => !user.disabled);
+    const activeUsers = userList.value.filter(user => !isUserDisabled(user));
-    const disabledUsers = userList.value.filter((user) => user.disabled);
+    const disabledUsers = userList.value.filter(user => isUserDisabled(user));
-
     emit('user-list-update', { activeUsers, disabledUsers });
 };
 
@@ -68,6 +112,3 @@ const getTooltipTitle = (user) => {
     return user.MEMBERSEQ === userStore.userInfo.id ? '나' : user.MEMBERNAM;
 };
 </script>
-
-<style scoped>
-</style>