프로젝트 참여인원 많은 순 정렬

src/components/commuters/CommuterProjectList.vue

@@ -1,23 +1,32 @@
 <template>
     <div class="commuter-list">
-        <div v-for="post in project" :key="post.PROJCTSEQ"
+        <div
+            v-for="post in sortedProjects"
+            :key="post.PROJCTSEQ"
             class="border border-2 mt-3 card p-2"
             :style="`border-color: ${post.projctcolor} !important; color: ${post.projctcolor} !important;`"
             @dragover="allowDrop($event)"
-            @drop="handleDrop($event, post)">
+            @drop="handleDrop($event, post)"
+        >
             <p class="mb-1">
                 {{ post.PROJCTNAM }}
             </p>
             <div class="row gx-2">
-                <div v-for="commuter in commuters.filter(c => c.PROJCTNAM === post.PROJCTNAM)" :key="commuter.COMMUTCMT" class="col-4">
+                <div
+                    v-for="commuter in commuters.filter(c => c.PROJCTNAM === post.PROJCTNAM)"
+                    :key="commuter.COMMUTCMT"
+                    class="col-4"
+                >
                     <div class="ratio ratio-1x1">
-                        <img :src="`${baseUrl}upload/img/profile/${commuter.profile}`"
+                        <img
+                            :src="`${baseUrl}upload/img/profile/${commuter.profile}`"
                             alt="User Profile"
                             class="rounded-circle"
                             :class="isCurrentUser(commuter) ? 'cursor-pointer' : ''"
                             :draggable="isCurrentUser(commuter)"
                             @dragstart="isCurrentUser(commuter) ? dragStart($event, post) : null"
-                            @error="$event.target.src = '/img/icons/icon.png'">
+                            @error="$event.target.src = '/img/icons/icon.png'"
+                        >
                     </div>
                 </div>
             </div>
@@ -26,7 +35,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, defineEmits, computed } from 'vue';
 
 const props = defineProps({
     project: {
@@ -57,6 +66,15 @@ const props = defineProps({
 
 const emit = defineEmits(['drop', 'update:selectedProject', 'update:checkedInProject']);
 
+// 프로젝트 참여인원 순 정렬
+const sortedProjects = computed(() => {
+    const projectList = Array.isArray(props.project) ? props.project :
+                        Object.values(props.project || {});
+
+    return projectList
+        .filter(item => item && typeof item === 'object')
+        .sort((a, b) => (b.participant_count || 0) - (a.participant_count || 0));
+});
 // 현재 사용자 확인
 const isCurrentUser = (commuter) => {
     return props.user && commuter && commuter.MEMBERSEQ === props.user.id;
@@ -79,4 +97,6 @@ const handleDrop = (event, targetProject) => {
     event.preventDefault();
     emit('drop', { event, targetProject });
 };
+
+
 </script>