From e5ccaa1a12de689015ea6b8d2306644934a5e88e Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Fri, 24 Jan 2025 15:02:19 +0900
Subject: [PATCH] =?UTF-8?q?=ED=88=AC=ED=91=9C=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/voteboard/voteCard.vue         | 50 +++++++++++++++
 src/components/voteboard/voteCardCheck.vue    | 27 ++++++++
 .../voteboard/voteCardCheckList.vue           | 16 +++++
 src/components/voteboard/voteCardList.vue     | 13 ++++
 .../voteboard/voteCompleteUserList.vue        | 23 +++++++
 .../voteboard/voteCompleteUserListCard.vue    | 13 ++++
 .../voteboard/voteInCompleteUserList.vue      | 23 +++++++
 .../voteboard/voteInCompleteUserListCard.vue  | 13 ++++
 src/components/voteboard/voteResultCard.vue   | 25 ++++++++
 src/components/voteboard/voteResultList.vue   | 19 ++++++
 src/components/voteboard/voteResultRandom.vue | 16 +++++
 .../voteboard/voteResultRandomList.vue        | 19 ++++++
 src/components/voteboard/voteRevoteEnd.vue    | 16 +++++
 src/components/voteboard/voteUserList.vue     | 19 ++++++
 src/views/voteboard/voteBoardList.vue         | 63 +++++++++++++++++++
 15 files changed, 355 insertions(+)
 create mode 100644 src/components/voteboard/voteCard.vue
 create mode 100644 src/components/voteboard/voteCardCheck.vue
 create mode 100644 src/components/voteboard/voteCardCheckList.vue
 create mode 100644 src/components/voteboard/voteCardList.vue
 create mode 100644 src/components/voteboard/voteCompleteUserList.vue
 create mode 100644 src/components/voteboard/voteCompleteUserListCard.vue
 create mode 100644 src/components/voteboard/voteInCompleteUserList.vue
 create mode 100644 src/components/voteboard/voteInCompleteUserListCard.vue
 create mode 100644 src/components/voteboard/voteResultCard.vue
 create mode 100644 src/components/voteboard/voteResultList.vue
 create mode 100644 src/components/voteboard/voteResultRandom.vue
 create mode 100644 src/components/voteboard/voteResultRandomList.vue
 create mode 100644 src/components/voteboard/voteRevoteEnd.vue
 create mode 100644 src/components/voteboard/voteUserList.vue
 create mode 100644 src/views/voteboard/voteBoardList.vue

diff --git a/src/components/voteboard/voteCard.vue b/src/components/voteboard/voteCard.vue
new file mode 100644
index 0000000..71a6542
--- /dev/null
+++ b/src/components/voteboard/voteCard.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="card mb-6">
+        <div class="card-body">
+        <h5 class="card-title mb-1"><div class="list-group-item list-group-item-action d-flex align-items-center cursor-pointer">
+            <img src="/img/avatars/1.png" class="rounded-circle me-3 w-px-40" >
+            <div class="w-100">
+            <div class="d-flex justify-content-between">
+                <div class="user-info">
+                    <h6 class="mb-1">공공이</h6>
+                </div>
+                <div class="add-btn">
+                    <!-- 투표완료시  -->
+                    <i class="bx bxs-check-circle link-success"></i>
+                    <!-- 투표작성자만 수정/삭제/종료 가능  -->
+                    <button type="button" class="bx btn btn-danger">종료</button>
+                    <EditBtn />
+                    <DeleteBtn />
+                </div>
+                </div>
+            </div>
+            </div>
+        </h5>
+        <div class="mb-1">회식장소 고릅시다.</div>
+        <div class="mb-1">24.12.12 11:02 ~ 24.12.12 16:02</div>
+        <!-- 투표완료시-->
+        <vote-revote-end />
+        <!-- 투표안했을시-->
+        <vote-card-check />
+        <!-- 투표완/미완 인원 -->
+        <vote-user-list />
+        <!-- 투표 결과 -->
+        <vote-result-list />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import EditBtn from '@c/button/EditBtn.vue';
+import DeleteBtn from '@c/button/DeleteBtn.vue';
+import voteUserList from '@c/voteboard/voteUserList.vue';
+import voteResultList from '@c/voteboard/voteResultList.vue';
+import voteCardCheck from '@c/voteboard/voteCardCheck.vue';
+import voteRevoteEnd from '@c/voteboard/voteRevoteEnd.vue';
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/voteboard/voteCardCheck.vue b/src/components/voteboard/voteCardCheck.vue
new file mode 100644
index 0000000..ea2c37a
--- /dev/null
+++ b/src/components/voteboard/voteCardCheck.vue
@@ -0,0 +1,27 @@
+<template>
+    <div class="card-text">
+        <div class="demo-inline-spacing mt-4">
+        <!-- 투표리스트 -->
+        <vote-card-check-list />
+        <div class="d-flex align-items-center">
+        <PlusBtn/>
+        <FormInput title="추가항목" name="addContent" :isLabel="false" :is-essential="true" :is-alert="titleAlert" @update:data="title = $event"  />
+        <button class="btn btn-primary ms-1">저장</button>
+        </div>
+        </div>
+    </div>
+    <button class="btn btn-primary btn-sm">투표하기</button>
+</template>
+
+<script setup>
+import PlusBtn from '@c/button/PlusBtn.vue';
+import FormInput from '@c/input/FormInput.vue';
+import voteCardCheckList from '@c/voteboard/voteCardCheckList.vue';
+import { ref } from 'vue';
+
+const titleAlert = ref(false);
+</script>
+
+<style >
+
+</style>
diff --git a/src/components/voteboard/voteCardCheckList.vue b/src/components/voteboard/voteCardCheckList.vue
new file mode 100644
index 0000000..bb273e4
--- /dev/null
+++ b/src/components/voteboard/voteCardCheckList.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="list-group">
+        <label class="list-group-item">
+        <input class="form-check-input me-1" type="checkbox" value="">
+        case1
+        </label>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/voteboard/voteCardList.vue b/src/components/voteboard/voteCardList.vue
new file mode 100644
index 0000000..acdb01c
--- /dev/null
+++ b/src/components/voteboard/voteCardList.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <card />
+  </div>
+</template>
+
+<script setup>
+import card from '@c/voteboard/voteCard.vue'
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/voteboard/voteCompleteUserList.vue b/src/components/voteboard/voteCompleteUserList.vue
new file mode 100644
index 0000000..e7d3203
--- /dev/null
+++ b/src/components/voteboard/voteCompleteUserList.vue
@@ -0,0 +1,23 @@
+<template>
+<div class="d-flex align-items-center">
+    <i class='bx bxs-user-check link-info'></i>
+    <ul class="list-group list-group-flush">
+        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
+        <div class="d-flex flex-wrap align-items-center">
+            <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
+                <vote-complete-user-list-card />
+            </ul>
+        </div>
+        </li>
+    </ul>
+</div>
+</template>
+
+<script setup>
+import voteCompleteUserListCard from '@c/voteboard/voteCompleteUserListCard.vue';
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/voteboard/voteCompleteUserListCard.vue b/src/components/voteboard/voteCompleteUserListCard.vue
new file mode 100644
index 0000000..b4200bd
--- /dev/null
+++ b/src/components/voteboard/voteCompleteUserListCard.vue
@@ -0,0 +1,13 @@
+<template>
+    <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar pull-up" aria-label="Vinnie Mostowy" data-bs-original-title="Vinnie Mostowy">
+        <img class="rounded-circle" src="/img/avatars/1.png" alt="Avatar">
+    </li>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/voteboard/voteInCompleteUserList.vue b/src/components/voteboard/voteInCompleteUserList.vue
new file mode 100644
index 0000000..ec2c887
--- /dev/null
+++ b/src/components/voteboard/voteInCompleteUserList.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="d-flex align-items-center">
+        <i class='bx bxs-user-x link-danger'></i>
+        <ul class="list-group list-group-flush">
+            <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
+            <div class="d-flex flex-wrap align-items-center">
+                <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
+                    <vote-in-complete-user-list-card />
+                </ul>
+            </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+import voteInCompleteUserListCard from '@c/voteboard/voteInCompleteUserListCard.vue';
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/voteboard/voteInCompleteUserListCard.vue b/src/components/voteboard/voteInCompleteUserListCard.vue
new file mode 100644
index 0000000..1b7ce7a
--- /dev/null
+++ b/src/components/voteboard/voteInCompleteUserListCard.vue
@@ -0,0 +1,13 @@
+<template>
+    <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar pull-up" aria-label="Vinnie Mostowy" data-bs-original-title="Vinnie Mostowy">
+        <img class="rounded-circle" src="/img/avatars/3.png" alt="Avatar">
+    </li>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/voteboard/voteResultCard.vue b/src/components/voteboard/voteResultCard.vue
new file mode 100644
index 0000000..2c318a5
--- /dev/null
+++ b/src/components/voteboard/voteResultCard.vue
@@ -0,0 +1,25 @@
+<template>
+    <div>
+    <ul class="timeline mb-0">
+        <li class="timeline-item ps-6 ">
+        <span class="timeline-indicator-advanced timeline-indicator-success border-0 shadow-none">
+            <i class="icon-base bx bx-check-circle"></i>
+        </span>
+        <div class="timeline-event ps-1">
+            <div class="timeline-header">
+            <small class="text-success text-uppercase">투표결과</small>
+            </div>
+            <h6 class="my-50">돼지고기 </h6>
+        </div>
+        </li>
+    </ul>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/voteboard/voteResultList.vue b/src/components/voteboard/voteResultList.vue
new file mode 100644
index 0000000..c0f9a66
--- /dev/null
+++ b/src/components/voteboard/voteResultList.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="card mb-6 border border-2 border-primary rounded primary-shadow">
+        <div class="card-body">
+        <!-- 1위가 여러개일때  -->
+        <vote-result-random />
+        <!-- 1위가 하나일때-->
+        <vote-result-card />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import voteResultRandom from '@c/voteboard/voteResultRandom.vue';
+import voteResultCard from '@c/voteboard/voteResultCard.vue';
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/voteboard/voteResultRandom.vue b/src/components/voteboard/voteResultRandom.vue
new file mode 100644
index 0000000..52816cc
--- /dev/null
+++ b/src/components/voteboard/voteResultRandom.vue
@@ -0,0 +1,16 @@
+<template>
+    <h6><i class="icon-base bx bx-error icon-lg link-warning"></i> 1위가 중복 되었습니다</h6>
+    <!-- 중복된 1위 리스트 -->
+    <vote-result-random-list />
+    <div class="d-grid w-100 mt-6">
+        <button class="btn btn-primary" data-bs-target="#upgradePlanModal" data-bs-toggle="modal">랜덤 1위 뽑기</button>
+    </div>
+</template>
+
+<script setup>
+import voteResultRandomList from "@c/voteboard/voteResultRandomList.vue"
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/voteboard/voteResultRandomList.vue b/src/components/voteboard/voteResultRandomList.vue
new file mode 100644
index 0000000..56f7ceb
--- /dev/null
+++ b/src/components/voteboard/voteResultRandomList.vue
@@ -0,0 +1,19 @@
+<template>
+    <div>
+        <ul class="list-unstyled g-2 my-6 ">
+            <li class="mb-1 d-flex align-items-center ">
+                <div class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0">
+                    <span class="badge badge-dot text-bg-warning me-1"></span> 돼지고기
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/voteboard/voteRevoteEnd.vue b/src/components/voteboard/voteRevoteEnd.vue
new file mode 100644
index 0000000..fa64686
--- /dev/null
+++ b/src/components/voteboard/voteRevoteEnd.vue
@@ -0,0 +1,16 @@
+<template>
+    <div class="user-status">
+        <span class="badge badge-dot bg-warning"></span>
+            <small>소고기 </small>
+        <button class="btn btn-primary btn-sm">재투표</button>
+    </div>
+
+</template>
+
+<script setup>
+
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/voteboard/voteUserList.vue b/src/components/voteboard/voteUserList.vue
new file mode 100644
index 0000000..556e6ae
--- /dev/null
+++ b/src/components/voteboard/voteUserList.vue
@@ -0,0 +1,19 @@
+<template>
+
+<div class="d-flex justify-content-between align-items-center">
+    <!--투표한 사람 목록 -->
+    <vote-complete-user-list />
+    <!-- 투표안한 사람 목록 -->
+    <vote-in-complete-user-list />
+</div>
+</template>
+
+<script setup>
+import voteCompleteUserList from '@c/voteboard/voteCompleteUserList.vue';
+import voteInCompleteUserList from '@c/voteboard/voteInCompleteUserList.vue';
+
+</script>
+
+<style scoped>
+/* 스타일 정의 */
+</style>
diff --git a/src/views/voteboard/voteBoardList.vue b/src/views/voteboard/voteBoardList.vue
new file mode 100644
index 0000000..20a3434
--- /dev/null
+++ b/src/views/voteboard/voteBoardList.vue
@@ -0,0 +1,63 @@
+<template>
+<div class="container-xxl flex-grow-1 container-p-y">
+    <div class="row g-3">
+    <div class="mt-8">
+        <!-- 투표 작성  -->
+        <router-link to="/voteboard/write"><WriteBtn /></router-link>
+
+        <!-- 내가한 투표 보기  -->
+        <div class="d-flex align-items-center">
+        <div class="form-check me-3">
+            <input class="form-check-input" type="checkbox" value="" id="deliveryAdd" checked="">
+            <label class="form-check-label" for="deliveryAdd">내가 한 투표</label>
+        </div>
+        <!-- 투표마감/투표중  셀렉트 -->
+        <FormSelect class="col-3" name="cate" :isLabel="false" title="투표상태" :data="categoryList" @update:data="category = $event" />
+        </div>
+
+        <!-- <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="true" />
+            <button type="button" class="btn btn-primary ms-1" @click="registerContent"><i class="bx bx-check"></i></button> -->
+
+        <!-- 투표리스트 -->
+        <vote-list />
+        </div>
+
+    </div>
+        <!-- <div class="mt-8">
+            <pagination />
+        </div> -->
+</div>
+</template>
+<script setup>
+import { getCurrentInstance, onMounted, ref } from 'vue';
+// import Pagination from '@/components/pagination/Pagination.vue';
+import router from '@/router';
+import FormSelect from '@c/input/FormSelect.vue';
+import { useToastStore } from '@s/toastStore';
+import QEditor from '@c/editor/QEditor.vue';
+import $api from '@api';
+import BoardCard from '@c/list/BoardCard.vue';
+import Quill from 'quill';
+import WriteBtn from '@c/button/WriteBtn.vue';
+import voteList from '@c/voteboard/voteCardList.vue';
+
+const toastStore = useToastStore();
+const category = ref('0');
+const categoryList = ['전체','투표마감', '투표중'];
+const boardList = ref([]);
+const titleAlert = ref(false);
+const addContent = ref('');
+
+onMounted(()=>{
+    getBoardList();
+})
+const getBoardList = () =>{
+    $api.get('worddict/getWordList').then((res)=>{
+    boardList.value = res.data.data.data;
+})
+}
+
+
+</script>
+
+<style></style>