From 8ab9e79b5a12f3a508945716b3e65bf378681413 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 11 Feb 2025 12:59:49 +0900
Subject: [PATCH] =?UTF-8?q?userlist=20=EC=BD=94=EB=93=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/UserList.vue | 52 ++++++++++++--------------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/components/user/UserList.vue b/src/components/user/UserList.vue
index 87ec5b8..f4d9e6c 100644
--- a/src/components/user/UserList.vue
+++ b/src/components/user/UserList.vue
@@ -1,24 +1,26 @@
 <template>
-    <ul class="list-unstyled users-list d-flex align-items-center">
+    <ul class="list-unstyled users-list d-flex align-items-center gap-1">
         <li
-        v-for="(user, index) in userList"
-        :key="index"
-        class="avatar pull-up"
-        :class="{ disabled: user.disabled }"
-        @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"
-            :src="`${baseUrl}upload/img/profile/${user.MEMBERPRF}`"
-            alt="user"
-            :style="{ borderColor: user.usercolor}"
-        />
+            v-for="(user, index) in userList"
+            :key="index"
+            class="avatar pull-up"
+            :class="{ 'opacity-100': user.disabled }"
+            @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 }"
+                :src="`${baseUrl}upload/img/profile/${user.MEMBERPRF}`"
+                :style="`border-color: ${user.usercolor} !important;`"
+                alt="user"
+            />
         </li>
+
     </ul>
 </template>
 
@@ -68,18 +70,4 @@ const getTooltipTitle = (user) => {
 </script>
 
 <style scoped>
-/* disabled 클래스를 적용할 때 사용자의 이미지를 흐리게 */
-.avatar.disabled {
-opacity: 1.0; /* 흐리게 만들기 */
-}
-
-/* 비활성화된 상태에서 이미지를 회색으로 변환 */
-.avatar.disabled img {
-filter: grayscale(100%);
-}
-/* 동그란 테두리 설정 */
-.user-avatar {
-border: 3px solid; /* 테두리 */
-padding: 0.1px; /* 테두리와 이미지 사이의 간격 */
-}
 </style>