활성화 된 유저 앞으로 정렬

src/components/user/UserList.vue

@@ -1,7 +1,7 @@
 <template>
     <ul class="list-unstyled users-list d-flex align-items-center gap-1">
         <li
-            v-for="(user, index) in userList"
+            v-for="(user, index) in sortedUserList"
             :key="index"
             class="avatar pull-up"
             :class="{ 'opacity-100': isUserDisabled(user) }"
@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, nextTick } from 'vue';
+import { onMounted, ref, nextTick, computed } from 'vue';
 import { useUserStore } from '@s/userList';
 import $api from '@api';
 
@@ -41,6 +41,19 @@ const props = defineProps({
     }
 });
 
+// 활성화된 회원을 앞으로 정렬하는 computed 속성
+const sortedUserList = computed(() => {
+    return [...userList.value].sort((a, b) => {
+        const aDisabled = isUserDisabled(a);
+        const bDisabled = isUserDisabled(b);
+
+        // 활성화된 사용자가 먼저 오도록 정렬
+        if (!aDisabled && bDisabled) return -1;
+        if (aDisabled && !bDisabled) return 1;
+        return 0;
+    });
+});
+
 // 사용자의 프로젝트 참여 상태 확인
 const fetchProjectParticipation = async () => {
     if (props.projctSeq) {
@@ -79,25 +92,31 @@ const isUserDisabled = (user) => {
 
 // 클릭 시 활성화/비활성화 및 DB 업데이트
 const toggleDisable = async (index) => {
-    const user = userList.value[index];
+    const user = sortedUserList.value[index];
     if (user) {
         const newParticipationStatus = props.projctSeq
             ? 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';
+                // 원래 userList에서 해당 사용자를 찾아 업데이트
+                const originalIndex = userList.value.findIndex(u => u.MEMBERSEQ === user.MEMBERSEQ);
+                if (originalIndex !== -1) {
+                    userList.value[originalIndex].PROJCTYON = newParticipationStatus ? '0' : '1';
+                }
             }
         } else {
-            user.disabled = newParticipationStatus;
-            emitUserListUpdate();
+            // 원래 userList에서 해당 사용자를 찾아 업데이트
+            const originalIndex = userList.value.findIndex(u => u.MEMBERSEQ === user.MEMBERSEQ);
+            if (originalIndex !== -1) {
+                userList.value[originalIndex].disabled = newParticipationStatus;
+                emitUserListUpdate();
+            }
         }
     }
 };