userlist 코드 수정

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>