userList수정

src/components/user/UserList.vue

@@ -1,33 +1,29 @@
 <template>
-<!-- 컴포넌트 사용 ex)
-
-<UserList @user-list-update="handleUserListUpdate" />
-
--->
-<ul class="list-unstyled users-list d-flex align-items-center">
-    <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="user.MEMBERSEQ"
-    >
-    <img
-        class="rounded-circle"
-        :src="`http://localhost:10325/upload/img/profile/${user.MEMBERPRF}`"
-        alt="profile"
-    />
-    </li>
-</ul>
+    <ul class="list-unstyled users-list d-flex align-items-center">
+        <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="`http://localhost:10325/upload/img/profile/${user.MEMBERPRF}`"
+            alt="user"
+            :style="{ borderColor: user.usercolor}"
+        />
+        </li>
+    </ul>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, nextTick } from 'vue';
 import { useUserStore } from '@s/userList';
 
 const emit = defineEmits();
@@ -38,11 +34,18 @@ const userList = ref([]);
 onMounted(async () => {
     await userStore.fetchUserList();
     userList.value = userStore.userList;
+
+    nextTick(() => {
+        const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+        tooltips.forEach((tooltip) => {
+        new bootstrap.Tooltip(tooltip);
+        });
+    });
 });
 
 // 클릭 시 활성화/비활성화
 const toggleDisable = (index) => {
-const user = userList.value[index];
+    const user = userList.value[index];
     if (user) {
         user.disabled = !user.disabled;
         emitUserListUpdate();
@@ -51,20 +54,30 @@ const user = userList.value[index];
 
 // emit
 const emitUserListUpdate = () => {
-    const activeUsers = userList.value.filter(user => !user.disabled);
-    const disabledUsers = userList.value.filter(user => user.disabled);
+    const activeUsers = userList.value.filter((user) => !user.disabled);
+    const disabledUsers = userList.value.filter((user) => user.disabled);
 
     emit('user-list-update', { activeUsers, disabledUsers });
 };
+
+const getTooltipTitle = (user) => {
+    return user.MEMBERSEQ === userStore.userInfo.id ? '나' : user.MEMBERNAM;
+};
 </script>
+
 <style scoped>
 /* disabled 클래스를 적용할 때 사용자의 이미지를 흐리게 */
 .avatar.disabled {
-    opacity: 0.5; /* 흐리게 만들기 */
+opacity: 1.0; /* 흐리게 만들기 */
 }
 
 /* 비활성화된 상태에서 이미지를 회색으로 변환 */
 .avatar.disabled img {
-    filter: grayscale(100%);
+filter: grayscale(100%);
+}
+/* 동그란 테두리 설정 */
+.user-avatar {
+border: 3px solid; /* 테두리 */
+padding: 0.1px; /* 테두리와 이미지 사이의 간격 */
 }
 </style>

src/stores/userList.js

@@ -11,11 +11,23 @@ import axios from "@api";
 export const useUserStore = defineStore("userStore", {
     state: () => ({
         userList: [],
+        userInfo: {}
     }),
     actions: {
         async fetchUserList() {
             const response = await axios.get('user/allUserList');
-            this.userList = response.data.data;
+            console.log('response',response)
+            this.userList = response.data.data.allUserList;
+            this.userInfo = response.data.data.user;
+
+            if (this.userInfo) {
+                const index = this.userList.findIndex(user => user.MEMBERSEQ === this.userInfo.id);
+                if (index !== -1) {
+                    const [user] = this.userList.splice(index, 1);
+                    this.userList.unshift(user);
+                }
+            }
+
         },
     },
 });