From 480ba2bd8a6d5d497b6a0b827c44cbf4d33236c2 Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Fri, 24 Jan 2025 15:02:07 +0900
Subject: [PATCH] =?UTF-8?q?=EC=82=AC=EC=9A=A9=EC=9E=90=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EA=B3=B5=ED=86=B5=ED=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/UserList.vue       | 70 ++++++++++++++++++++++++++
 src/router/index.js                    | 15 ++++++
 src/stores/userList.js                 | 21 ++++++++
 src/views/voteboard/TheVoteBoard.vue   | 10 ++++
 src/views/voteboard/voteboardWrite.vue | 39 ++++++++++++++
 5 files changed, 155 insertions(+)
 create mode 100644 src/components/user/UserList.vue
 create mode 100644 src/stores/userList.js
 create mode 100644 src/views/voteboard/TheVoteBoard.vue
 create mode 100644 src/views/voteboard/voteboardWrite.vue

diff --git a/src/components/user/UserList.vue b/src/components/user/UserList.vue
new file mode 100644
index 0000000..aaf9f7a
--- /dev/null
+++ b/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>
diff --git a/src/router/index.js b/src/router/index.js
index 95a331f..c72c9ad 100644
--- a/src/router/index.js
+++ b/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'),
diff --git a/src/stores/userList.js b/src/stores/userList.js
new file mode 100644
index 0000000..25fbb9a
--- /dev/null
+++ b/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;
+        },
+    },
+});
diff --git a/src/views/voteboard/TheVoteBoard.vue b/src/views/voteboard/TheVoteBoard.vue
new file mode 100644
index 0000000..da14c4a
--- /dev/null
+++ b/src/views/voteboard/TheVoteBoard.vue
@@ -0,0 +1,10 @@
+<template>
+  <RouterView />
+</template>
+<script>
+export default {
+  name : 'voteboard',
+  inheritAttrs : false,
+}
+</script>
+
diff --git a/src/views/voteboard/voteboardWrite.vue b/src/views/voteboard/voteboardWrite.vue
new file mode 100644
index 0000000..bb6f3d5
--- /dev/null
+++ b/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>