사용자 목록 공통통

src/components/user/UserList.vue

@@ -0,0 +1,70 @@
+<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>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useUserStore } from '@s/userList';
+
+const emit = defineEmits();
+const userStore = useUserStore();
+const userList = ref([]);
+
+// 사용자 목록 호출
+onMounted(async () => {
+    await userStore.fetchUserList();
+    userList.value = userStore.userList;
+});
+
+// 클릭 시 활성화/비활성화
+const toggleDisable = (index) => {
+const user = userList.value[index];
+    if (user) {
+        user.disabled = !user.disabled;
+        emitUserListUpdate();
+    }
+};
+
+// emit
+const emitUserListUpdate = () => {
+    const activeUsers = userList.value.filter(user => !user.disabled);
+    const disabledUsers = userList.value.filter(user => user.disabled);
+
+    emit('user-list-update', { activeUsers, disabledUsers });
+};
+</script>
+<style scoped>
+/* disabled 클래스를 적용할 때 사용자의 이미지를 흐리게 */
+.avatar.disabled {
+    opacity: 0.5; /* 흐리게 만들기 */
+}
+
+/* 비활성화된 상태에서 이미지를 회색으로 변환 */
+.avatar.disabled img {
+    filter: grayscale(100%);
+}
+</style>

src/router/index.js

@@ -50,6 +50,21 @@ const routes = [
         component: () => import('@v/user/TheRegister.vue'),
         meta: { layout: 'NoLayout' },
     },
+    {
+        path: '/voteboard',
+        component: () => import('@v/voteboard/TheVoteBoard.vue'),
+        children: [
+            {
+                path: '',
+                component: () => import('@v/voteboard/voteBoardList.vue')
+            },
+            {
+                path: 'write',
+                component: () => import('@v/voteboard/voteboardWrite.vue')
+            },
+
+        ]
+    },
     {
         path: '/sample',
         component: () => import('@c/calendar/SampleCalendar.vue'),

src/stores/userList.js

@@ -0,0 +1,21 @@
+/*
+    작성자 : 공현지
+    작성일 : 2025-01-24
+    수정자 :
+    수정일 :
+    설명   : 사용자 전체 목록
+*/
+import { defineStore } from "pinia";
+import axios from "@api";
+
+export const useUserStore = defineStore("userStore", {
+    state: () => ({
+        userList: [],
+    }),
+    actions: {
+        async fetchUserList() {
+            const response = await axios.get('user/allUserList');
+            this.userList = response.data.data;
+        },
+    },
+});

src/views/voteboard/TheVoteBoard.vue

@@ -0,0 +1,10 @@
+<template>
+  <RouterView />
+</template>
+<script>
+export default {
+  name : 'voteboard',
+  inheritAttrs : false,
+}
+</script>
+

src/views/voteboard/voteboardWrite.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="container-xxl flex-grow-1 container-p-y">
+        <div class="card mb-6">
+            <div class="card-body">
+                <div class="user-list-container">
+                <ul class="timeline mb-1">
+                <li class="timeline-item timeline-item-transparent">
+                    <span class="timeline-point timeline-point-info"></span>
+                    <div class="timeline-event">
+                    <div class="timeline-header mb-2">
+                        <h6 class="mb-0">투표 인원</h6>
+                    </div>
+                    <UserList @user-list-update="handleUserListUpdate" />
+
+                    </div>
+                </li>
+                </ul>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import UserList from "@c/user/UserList.vue";
+
+const activeUsers = ref([]); // 활성화된 사용자 목록
+const disabledUsers = ref([]); // 비활성화된 사용자 목록
+
+// UserList에서 받은 데이터를 처리
+const handleUserListUpdate = ({ activeUsers, disabledUsers }) => {
+  activeUsers.value = activeUsers;
+  disabledUsers.value = disabledUsers;
+  console.log('활성화목록>>',activeUsers)
+  console.log('비활성목록>>',disabledUsers)
+};
+
+</script>