From 86f85cce102305890c144352f3857f0d2228e080 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Fri, 28 Feb 2025 10:13:23 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=9C=EC=84=B1=ED=99=94=20=EB=90=9C=20?=
 =?UTF-8?q?=EC=9C=A0=EC=A0=80=20=EC=95=9E=EC=9C=BC=EB=A1=9C=20=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/UserList.vue | 35 ++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/user/UserList.vue b/src/components/user/UserList.vue
index 27f81e6..f921ce3 100644
--- a/src/components/user/UserList.vue
+++ b/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();
+            }
         }
     }
 };