From 0da0d604e0aa0793d9ae9885c9cf88131449f37f Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 17:44:07 +0900
Subject: [PATCH] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B0=B8=EC=97=AC=EC=9D=B8=EC=9B=90=20=EB=A7=8E=EC=9D=80=20?=
 =?UTF-8?q?=EC=88=9C=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commuters/CommuterProjectList.vue         | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/commuters/CommuterProjectList.vue b/src/components/commuters/CommuterProjectList.vue
index 5de64a0..83fbcd2 100644
--- a/src/components/commuters/CommuterProjectList.vue
+++ b/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>