From 36888c3e30a6902d0beaa54f9825e3c8b706523f Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Thu, 3 Apr 2025 16:12:57 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=ED=88=AC=ED=91=9C=ED=95=98=EA=B8=B0=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/MainVote.vue | 108 +++++++++++++++++++++++++++++--
 1 file changed, 101 insertions(+), 7 deletions(-)

diff --git a/src/components/main/MainVote.vue b/src/components/main/MainVote.vue
index 7d0a135..4f9101f 100644
--- a/src/components/main/MainVote.vue
+++ b/src/components/main/MainVote.vue
@@ -6,9 +6,9 @@
                 <h5 class="mb-1 me-2">투표진행</h5>
             </div>
         </div>
-        <div class="card-body" v-if="voteList.length > 0">
+        <div class="card-body" v-if="voteListData.length > 0">
             <ul class="p-0 m-0">
-                <li class="d-flex  mb-1" v-for="item in voteList" :key="item.LOCVOTSEQ">
+                <li class="d-flex  mb-1" v-for="item in voteListData" :key="item.LOCVOTSEQ">
                     <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
                         <div class="me-2 mb-3">
                             <div class="text-muted small">{{ item.localVote.formatted_LOCVOTRDT }}</div>
@@ -23,16 +23,18 @@
                                         @error="setDefaultImage"
                                     />
                                 </div>
-                                <div class="timeline-event ps-1"  style="cursor: pointer;" @click="goVoteList()" >
+                                <!-- <div class="timeline-event ps-1"  style="cursor: pointer;" @click="goVoteList()" > -->
+                                <div class="timeline-event ps-1"  style="cursor: pointer;" @click.stop="openModal(item.localVote.LOCVOTSEQ)" >
                                     <div class="timeline-header ">
                                         <small ><strong>{{ truncateTitle(item.localVote.LOCVOTTTL) }}</strong></small>
                                     </div>
-                                    <small 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">
+                                    <small class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span >
                                     </span> {{ getDaysAgo(item.localVote.formatted_LOCVOTEDT) }} ({{item.localVote.total_voted}}/{{ item.localVote.total_votable }})</small>
                                 </div>
                             </div>
                         </div>
                     </div>
+
                 </li>
             </ul>
         </div>
@@ -50,12 +52,54 @@
         </div>
     </div>
 </div>
+<!--투표 모달 -->
+<CenterModal :display="isModalOpen" @close="closeModal">
+    <template #title> 투표 하기 </template>
+    <template #body>
+        <div>
+            <vote-list
+            :data="selectVoteDate"
+            @checkedNames="checkedNames"
+            @addContents="addContents"
+            @endVoteId="endVoteId"
+            @voteDelete="voteDelete"
+            />
+        </div>
+    </template>
+    <template #footer>
+        <BackButton @click="closeModal" />
+    </template>
+</CenterModal>
+
+
+
 </template>
 
 <script setup>
 import router from '@/router';
 import $api from '@api';
 import { onMounted, ref } from 'vue';
+import CenterModal from '@c/modal/CenterModal.vue';
+import BackButton from '@c/button/BackBtn.vue';
+import voteList from '@c/voteboard/voteCardList.vue';
+import { useToastStore } from '@s/toastStore';
+const toastStore = useToastStore();
+
+// 로그 모달 상태
+const isModalOpen = ref(false);
+const selectVoteDate = ref([]);
+// 로그 모달 열기
+const openModal = async (id) => {
+    isModalOpen.value = true;
+    if(id){
+        const selectData = voteListData.value.filter((item) => item.localVote.LOCVOTSEQ === id);
+        selectVoteDate.value = selectData;
+    }
+};
+// 로그 모달 닫기
+const closeModal = () => {
+    isModalOpen.value = false;
+};
 
 // 프로필 이미지
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
@@ -69,7 +113,7 @@ const setDefaultImage = (event) => {
 
 const currentPage = ref(1);
 const voteset = ref(0);
-const voteList= ref([]);
+const voteListData= ref([]);
 onMounted(() => {
     getvoteList();
 });
@@ -85,11 +129,60 @@ const getvoteList = () => {
                 ,myVote:'2' //내가 안한 투표
             }
         }).then(res => {
-            voteList.value = res.data.data.list;
-            voteList.value = res.data.data.list.slice(0, 6);
+            voteListData.value = res.data.data.list;
+            voteListData.value = res.data.data.list.slice(0, 6);
+
         })
     };
 
+//투표하기
+const checkedNames = (numList) => {
+    $api.post('vote/insertCheckedNums',{
+        checkedList :numList
+        ,votenum : numList[0].LOCVOTSEQ
+        }).then((res)=>{
+            if(res.data.status === 'OK'){
+                toastStore.onToast('투표가 완료되었습니다.', 's');
+                isModalOpen.value = false;
+                getvoteList();
+            }
+        })
+}
+//투표항목추가
+const addContents = (itemList, voteId) => {
+    console.log('itemList',itemList)
+    $api.post('vote/insertWord',{
+            itemList :itemList
+            ,voteId :voteId
+        }).then((res)=>{
+            if(res.data.status === 'OK'){
+                toastStore.onToast('항목이 등록되었습니다.', 's');
+            }
+        })
+}
+//투표종료
+const endVoteId = (endVoteId) => {
+    $api.patch('vote/updateEndData',{
+        endVoteId :endVoteId
+        }).then((res)=>{
+            if(res.data.status === 'OK'){
+                getvoteList();
+                isModalOpen.value = false;
+            }
+        })
+}
+//투표 삭제
+const voteDelete =(id) =>{
+    $api.patch('vote/updateDeleteData',{
+        deleteVoteId :id
+        }).then((res)=>{
+            if(res.data.status === 'OK'){
+                toastStore.onToast('투표가 삭제되었습니다.', 's');
+                getvoteList();
+                isModalOpen.value = false;
+            }
+        })
+}
 // 제목이 14글자 넘어가면 ... 처리하는 함수
 const truncateTitle = title => {
 return title.length > 10 ? title.slice(0, 10) + '...' : title;
@@ -102,6 +195,7 @@ const goVoteList = () =>{
         query: {
             voteset: '2' //투표중
             ,myVote:'2' //내가 안한 투표
+            ,id:id
         }
     });
 }

From 1fef343fd945ed61b32fac71ee865b99408e732b Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Thu, 3 Apr 2025 16:18:50 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=EC=A2=85=EB=A3=8C=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/MainVote.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/main/MainVote.vue b/src/components/main/MainVote.vue
index 4f9101f..8c26fd4 100644
--- a/src/components/main/MainVote.vue
+++ b/src/components/main/MainVote.vue
@@ -211,7 +211,7 @@ const getDaysAgo = (dateString) => {
     // 오늘 날짜인 경우 "오늘" 반환
     if (dayDiff === 0) return "금일 종료";
 
-    return `종료 ${Math.abs(dayDiff)}일 전`;
+    return ` ⏰종료 ${Math.abs(dayDiff)}일 전`;
 };
 </script>
 

From 7e0ae7063dc4dc46d766f4d11ef2af692f631600 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Thu, 3 Apr 2025 22:17:30 +0900
Subject: [PATCH 3/4] =?UTF-8?q?boardview=20=EC=97=90=EC=84=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95,=20=EC=82=AD=EC=A0=9C=EC=8B=9C=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=ED=81=B4=EB=A6=AD=20=ED=99=9C=EC=84=B1=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue     |  31 +++++
 src/components/board/BoardCommentList.vue |   6 +-
 src/components/board/BoardProfile.vue     |  12 +-
 src/components/button/DeleteBtn.vue       |  17 +--
 src/components/button/EditBtn.vue         |  14 ++-
 src/views/board/BoardView.vue             | 144 ++++++++++++++++------
 6 files changed, 172 insertions(+), 52 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 200704f..940c6bc 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -12,6 +12,8 @@
             :isLike="!isLike"
             :isCommentPassword="isCommentPassword"
             :isCommentProfile="true"
+            :is-edit-pushed="isEditPushed"
+            :is-delete-pushed="isDeletePushed"
             @editClick="handleEditClick"
             @deleteClick="$emit('deleteClick', comment)"
             @updateReaction="handleUpdateReaction"
@@ -116,9 +118,20 @@
         password: {
             type: String,
         },
+        // isEditPushed: {
+        //     type: Boolean,
+        //     required: false,
+        // },
+        // isDeletePushed: {
+        //     type: Boolean,
+        //     required: false,
+        // },
         editCommentAlert: String,
     });
 
+    const isEditPushed = ref(false);
+    const isDeletePushed = ref(false);
+
     const displayName = computed(() => {
         return props.nickname ? props.nickname : props.comment.author;
     });
@@ -171,6 +184,24 @@
         emit('submitPassword', props.comment, props.password);
     };
 
+    const handleInject = inject('isBtnPushed');
+
+    // 수정, 삭제 버튼 활성화 상태값
+    watch(
+        () => handleInject.value,
+        (newValue, oldValue) => {
+            if (newValue) {
+                if (newValue.target == props.comment.commentId) {
+                    isEditPushed.value = newValue.isEditPushed;
+                    isDeletePushed.value = newValue.isDeletePushed;
+                } else {
+                    isEditPushed.value = false;
+                    isDeletePushed.value = false;
+                }
+            }
+        },
+    );
+
     watch(
         () => props.comment.isEditTextarea,
         newVal => {
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index 49ec969..0181b80 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -13,6 +13,8 @@
                 :currentPasswordCommentId="currentPasswordCommentId"
                 :password="password"
                 :editCommentAlert="editCommentAlert[comment.commentId]"
+                :is-edit-pushed="comment.isEditPushed"
+                :is-delete-pushed="comment.isDeletePushed"
                 @editClick="handleEditClick"
                 @deleteClick="handleDeleteClick"
                 @submitPassword="submitPassword"
@@ -40,6 +42,8 @@
                                 :passwordCommentAlert="passwordCommentAlert"
                                 :password="password"
                                 :editCommentAlert="editCommentAlert[child.commentId]"
+                                :is-edit-pushed="child.isEditPushed"
+                                :is-delete-pushed="child.isDeletePushed"
                                 @editClick="handleReplyEditClick"
                                 @deleteClick="$emit('deleteClick', child)"
                                 @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent, child.commentId)"
@@ -59,7 +63,7 @@
 </template>
 
 <script setup>
-    import { defineProps, defineEmits } from 'vue';
+    import { defineProps, defineEmits, watch } from 'vue';
     import BoardComment from './BoardComment.vue';
 
     const props = defineProps({
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 5238574..955b4c4 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -27,8 +27,8 @@
             <!-- 수정, 삭제 버튼 -->
             <template v-if="!isDeletedComment && (unknown || isCommentAuthor || isAuthor)">
                 <div class="float-end ms-1">
-                    <EditButton @click.stop="editClick" />
-                    <DeleteButton :class="'ms-1'" @click.stop="deleteClick" />
+                    <EditButton @click.stop="editClick" :is-pushed="isEditPushed" />
+                    <DeleteButton :class="'ms-1'" @click.stop="deleteClick" :is-pushed="isDeletePushed" />
                 </div>
             </template>
 
@@ -107,6 +107,14 @@
             type: String,
             default: false,
         },
+        isEditPushed: {
+            type: Boolean,
+            require: false,
+        },
+        isDeletePushed: {
+            type: Boolean,
+            require: false,
+        },
     });
 
     const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
diff --git a/src/components/button/DeleteBtn.vue b/src/components/button/DeleteBtn.vue
index 0a4748c..1abe584 100644
--- a/src/components/button/DeleteBtn.vue
+++ b/src/components/button/DeleteBtn.vue
@@ -1,13 +1,14 @@
 <template>
-    <button class="btn btn-label-primary btn-icon">
-        <i class='bx bx-trash' ></i>
+    <button class="btn btn-label-primary btn-icon" :class="{ active: props.isPushed }">
+        <i class="bx bx-trash"></i>
     </button>
 </template>
 
-<script>
-export default {
-    name: 'DeleteButton',
-    methods: {
-      },
-    };
+<script setup>
+    const props = defineProps({
+        isPushed: {
+            type: Boolean,
+            required: false,
+        },
+    });
 </script>
diff --git a/src/components/button/EditBtn.vue b/src/components/button/EditBtn.vue
index 5058a97..c340e88 100644
--- a/src/components/button/EditBtn.vue
+++ b/src/components/button/EditBtn.vue
@@ -1,10 +1,10 @@
 <template>
-    <button class="btn btn-label-primary btn-icon" @click="toggleText">
+    <button class="btn btn-label-primary btn-icon" :class="{ active: props.isPushed }" @click="toggleText">
         <i :class="buttonClass"></i>
     </button>
 </template>
 <script setup>
-    import { ref, watch, defineProps, defineEmits, watchEffect } from 'vue';
+    import { ref, watch, defineEmits, watchEffect } from 'vue';
     const props = defineProps({
         isToggleEnabled: {
             type: Boolean,
@@ -14,18 +14,22 @@
             type: Boolean,
             required: false,
         },
+        isPushed: {
+            type: Boolean,
+            required: false,
+        },
     });
-    const emit = defineEmits(["click"]);
+    const emit = defineEmits(['click']);
     const buttonClass = ref('bx bx-edit-alt');
     watchEffect(() => {
         buttonClass.value = props.isActive ? 'bx bx-x' : 'bx bx-edit-alt';
     });
-    const toggleText = (event) => {
+    const toggleText = event => {
         // 이벤트 객체를 매개변수로 받아옵니다
         if (props.isToggleEnabled) {
             buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
         }
-        emit("click", event); // 이벤트 객체를 같이 전달
+        emit('click', event); // 이벤트 객체를 같이 전달
     };
     const resetButton = () => {
         buttonClass.value = 'bx bx-edit-alt';
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 53e3fe0..09d4497 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -17,6 +17,8 @@
                                 :date="formattedBoardDate"
                                 :isLike="false"
                                 :isAuthor="isAuthor"
+                                :is-edit-pushed="isEditPushed"
+                                :is-delete-pushed="isDeletePushed"
                                 @editClick="editClick"
                                 @deleteClick="deleteClick"
                             />
@@ -92,7 +94,7 @@
                                 @updateReaction="handleUpdateReaction"
                             />
                         </div>
-                        <div v-if="!type" >
+                        <div v-if="!type">
                             <!-- 댓글 입력 영역 -->
                             <BoardCommentArea
                                 :profileName="profileName"
@@ -142,7 +144,7 @@
     import BoardCommentList from '@c/board/BoardCommentList.vue';
     import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
     import Pagination from '@c/pagination/Pagination.vue';
-    import { ref, onMounted, computed, inject } from 'vue';
+    import { ref, onMounted, computed, inject, provide } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
     import { useToastStore } from '@s/toastStore';
@@ -165,6 +167,8 @@
     const attachment = ref(false);
     const comments = ref([]);
     const profileImg = ref('');
+    const isEditPushed = ref(false);
+    const isDeletePushed = ref(false);
 
     const route = useRoute();
     const router = useRouter();
@@ -319,6 +323,9 @@
         });
 
         fetchComments(pagination.value.currentPage);
+        closeAllEditTextareas();
+        closeAllPasswordAreas();
+        activeCommentBtnClass();
     };
 
     // 댓글 목록 조회
@@ -476,6 +483,9 @@
 
         if (isUnknown) {
             togglePassword('edit');
+            closeAllEditTextareas();
+            closeAllPasswordAreas();
+            activeCommentBtnClass();
         } else {
             router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
         }
@@ -505,11 +515,36 @@
         return null;
     };
 
+    const btnState = ref({});
+    provide('isBtnPushed', btnState);
+
+    const activeCommentBtnClass = (targetComment = null, type = 3) => {
+        const target = targetComment?.commentId;
+        let editPush = false;
+        let deletePush = false;
+
+        if (targetComment) {
+            if (type == 1) {
+                editPush = true;
+                deletePush = false;
+            } else if (type == 2) {
+                editPush = false;
+                deletePush = true;
+            }
+        }
+
+        btnState.value = {
+            target: target,
+            isEditPushed: editPush,
+            isDeletePushed: deletePush,
+        };
+    };
     // 댓글 수정 클릭 시 이벤트(대댓글 포함)
     const editComment = comment => {
+        acitveButtonType(); //게시글 버튼 클릭 클래스 제거
+
         password.value = '';
         passwordCommentAlert.value = '';
-        //currentPasswordCommentId.value = null;
         isPassword.value = false; // 상단 프로필 비밀번호
 
         const targetComment = findCommentById(comment.commentId, comments.value);
@@ -522,27 +557,20 @@
         if (isMyComment) {
             if (targetComment.isEditTextarea) {
                 // 수정창이 열려 있는 상태에서 다시 수정 버튼을 누르면 초기화
-
                 targetComment.isEditTextarea = false;
-
                 currentPasswordCommentId.value = comment.commentId;
+                activeCommentBtnClass(targetComment, 3);
             } else {
-                // 다른 모든 댓글의 수정창 닫기
-                closeAllEditTextareas();
-                currentPasswordCommentId.value = null;
-                // 현재 댓글만 수정 모드 활성화
-                targetComment.isEditTextarea = true;
+                closeAllEditTextareas(); // 다른 모든 댓글의 수정창 닫기
+                currentPasswordCommentId.value = null; // 현재 댓글만 수정 모드 활성화
+                targetComment.isEditTextarea = true; // 선택 버튼 활성화 상태 제어
+                activeCommentBtnClass(targetComment, 1);
             }
         } else if (isAnonymous) {
             if (currentPasswordCommentId.value === comment.commentId) {
-                // 이미 비밀번호 입력 중이면 유지
-                toggleCommentPassword(comment, 'edit');
-                return;
+                toggleCommentPassword(comment, 'edit'); // 이미 비밀번호 입력 중이면 유지
             } else {
-                // 다른 모든 댓글의 수정창 닫기
-                closeAllEditTextareas();
-
-                // 비밀번호 입력
+                closeAllEditTextareas(); // 다른 모든 댓글의 수정창 닫기
                 targetComment.isEditTextarea = false;
                 toggleCommentPassword(comment, 'edit');
             }
@@ -551,6 +579,26 @@
         }
     };
 
+    // 댓글 삭제 버튼 클릭
+    const deleteComment = async comment => {
+        const isMyComment = comment.authorId === currentUserId.value;
+
+        // 익명인 경우
+        if (unknown.value && !isMyComment) {
+            // 수정 에디터 열려있을때
+            if (comment.isEditTextarea) {
+                comment.isEditTextarea = false;
+                comment.isCommentPassword = true;
+                toggleCommentPassword(comment, 'delete');
+            } else {
+                activeCommentBtnClass(comment, 3);
+                toggleCommentPassword(comment, 'delete');
+            }
+        } else {
+            deleteReplyComment(comment);
+        }
+    };
+
     // 모든 댓글의 수정 창 닫기
     const closeAllEditTextareas = () => {
         comments.value.forEach(comment => {
@@ -568,30 +616,20 @@
         passwordCommentAlert.value = '';
     };
 
-    // 댓글 삭제 버튼 클릭
-    const deleteComment = async comment => {
-        const isMyComment = comment.authorId === currentUserId.value;
-
-        if (unknown.value && !isMyComment) {
-            if (comment.isEditTextarea) {
-                comment.isEditTextarea = false;
-                comment.isCommentPassword = true;
-                toggleCommentPassword(comment, 'delete');
-            } else {
-                toggleCommentPassword(comment, 'delete');
-            }
-        } else {
-            deleteReplyComment(comment);
-        }
-    };
-
     // 익명 댓글 비밀번호 창 토글
     const toggleCommentPassword = (comment, button) => {
         if (lastCommentClickedButton.value === button && currentPasswordCommentId.value === comment.commentId) {
             currentPasswordCommentId.value = null; // 비밀번호 창 닫기
             password.value = '';
             passwordCommentAlert.value = '';
+            activeCommentBtnClass(comment, 3);
         } else {
+            if (button == 'edit') {
+                activeCommentBtnClass(comment, 1);
+            } else if (button == 'delete') {
+                activeCommentBtnClass(comment, 2);
+            }
+
             currentPasswordCommentId.value = comment.commentId; // 비밀번호 창 열기
             password.value = '';
             passwordCommentAlert.value = '';
@@ -608,17 +646,49 @@
             isPassword.value = false;
             boardPasswordAlert.value = '';
             password.value = '';
+            acitveButtonType();
             return;
         }
         closeAllPasswordAreas();
         if (lastClickedButton.value === button) {
             isPassword.value = !isPassword.value;
             boardPasswordAlert.value = '';
+            lastClickedButton.value = '';
+            acitveButtonType();
         } else {
             isPassword.value = true;
-        }
+            lastClickedButton.value = button;
 
-        lastClickedButton.value = button;
+            if (button == 'edit') {
+                acitveButtonType(1);
+            } else if (button == 'delete') {
+                acitveButtonType(2);
+            } else {
+                acitveButtonType();
+            }
+        }
+    };
+
+    // 선택한 게시글 버튼 핸들링(수정, 삭제 버튼)
+    const acitveButtonType = type => {
+        //closeAllEditTextareas(); //다른 모든 텍스트 에디터 비활성화
+        //inActiveCommentButtonClass(); // 댓글 버튼 비활성화
+
+        // 수정
+        if (type == 1) {
+            isEditPushed.value = true;
+            isDeletePushed.value = false;
+
+            // 삭제
+        } else if (type == 2) {
+            isEditPushed.value = false;
+            isDeletePushed.value = true;
+
+            // 비활성화
+        } else {
+            isEditPushed.value = false;
+            isDeletePushed.value = false;
+        }
     };
 
     // 게시글 비밀번호 제출
@@ -738,6 +808,7 @@
             if (response.data.code === 200) {
                 await fetchComments(pagination.value.currentPage);
                 closeAllPasswordAreas();
+                activeCommentBtnClass();
 
                 if (targetComment) {
                     // 댓글 내용만 "삭제된 댓글입니다."로 변경하고, 구조는 유지
@@ -766,6 +837,7 @@
         if (response.status === 200) {
             togglePassword('close');
             fetchComments(pagination.value.currentPage);
+            activeCommentBtnClass();
             return;
             // const targetComment = findCommentById(comment.commentId, comments.value);
 

From 78eefe5a7f790589e2602f04762e5419e09632ff Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Fri, 4 Apr 2025 10:37:48 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=ED=88=AC=ED=91=9C=20=EC=88=98=EC=A0=95?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/MainVote.vue              | 94 +++++++++++--------
 .../voteboard/voteCompleteUserList.vue        |  2 +-
 .../voteboard/voteCompleteUserListCard.vue    |  2 +-
 .../voteboard/voteInCompleteUserList.vue      |  2 +-
 .../voteboard/voteInCompleteUserListCard.vue  |  2 +-
 src/components/voteboard/voteUserList.vue     |  4 +-
 6 files changed, 62 insertions(+), 44 deletions(-)

diff --git a/src/components/main/MainVote.vue b/src/components/main/MainVote.vue
index 8c26fd4..eca0bf5 100644
--- a/src/components/main/MainVote.vue
+++ b/src/components/main/MainVote.vue
@@ -29,7 +29,7 @@
                                         <small ><strong>{{ truncateTitle(item.localVote.LOCVOTTTL) }}</strong></small>
                                     </div>
                                     <small class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"><span >
-                                    </span> {{ getDaysAgo(item.localVote.formatted_LOCVOTEDT) }} ({{item.localVote.total_voted}}/{{ item.localVote.total_votable }})</small>
+                                    </span>{{getDaysAgo(item.localVote.formatted_LOCVOTEDT)}}({{item.localVote.total_voted}}/{{ item.localVote.total_votable }})</small>
                                 </div>
                             </div>
                         </div>
@@ -58,6 +58,7 @@
     <template #body>
         <div>
             <vote-list
+            :key="voteListKey"
             :data="selectVoteDate"
             @checkedNames="checkedNames"
             @addContents="addContents"
@@ -70,9 +71,6 @@
         <BackButton @click="closeModal" />
     </template>
 </CenterModal>
-
-
-
 </template>
 
 <script setup>
@@ -83,8 +81,12 @@ import CenterModal from '@c/modal/CenterModal.vue';
 import BackButton from '@c/button/BackBtn.vue';
 import voteList from '@c/voteboard/voteCardList.vue';
 import { useToastStore } from '@s/toastStore';
-const toastStore = useToastStore();
 
+const toastStore = useToastStore();
+const currentPage = ref(1);
+const voteset = ref(0);
+const voteListData= ref([]);
+const voteListKey = ref(0); //초기화
 // 로그 모달 상태
 const isModalOpen = ref(false);
 const selectVoteDate = ref([]);
@@ -99,8 +101,8 @@ const openModal = async (id) => {
 // 로그 모달 닫기
 const closeModal = () => {
     isModalOpen.value = false;
+    voteListKey.value++;
 };
-
 // 프로필 이미지
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
 const defaultProfile = "/img/icons/icon.png";
@@ -111,9 +113,6 @@ const setDefaultImage = (event) => {
     event.target.src = defaultProfile;
 };
 
-const currentPage = ref(1);
-const voteset = ref(0);
-const voteListData= ref([]);
 onMounted(() => {
     getvoteList();
 });
@@ -121,44 +120,63 @@ onMounted(() => {
 //투표목록
 const getvoteList = () => {
     $api.get('vote/getVoteList',{
-            //목록조회시 파라미터 전달
-            params:
-            {
-                page: 1
-                ,voteset:'2' //투표중
-                ,myVote:'2' //내가 안한 투표
-            }
-        }).then(res => {
-            voteListData.value = res.data.data.list;
-            voteListData.value = res.data.data.list.slice(0, 6);
-
-        })
-    };
+        params:
+        {
+            page: 1
+            ,voteset:'2' //투표중
+            ,myVote:'2' //내가 안한 투표
+        }
+    }).then(res => {
+        voteListData.value = res.data.data.list;
+        voteListData.value = res.data.data.list.slice(0, 6);
+    })
+};
 
 //투표하기
 const checkedNames = (numList) => {
     $api.post('vote/insertCheckedNums',{
         checkedList :numList
         ,votenum : numList[0].LOCVOTSEQ
-        }).then((res)=>{
-            if(res.data.status === 'OK'){
-                toastStore.onToast('투표가 완료되었습니다.', 's');
-                isModalOpen.value = false;
-                getvoteList();
-            }
-        })
+    }).then((res)=>{
+        if(res.data.status === 'OK'){
+            toastStore.onToast('투표가 완료되었습니다.', 's');
+            isModalOpen.value = false;
+            getvoteList();
+            voteListKey.value++;
+        }
+    })
 }
 //투표항목추가
 const addContents = (itemList, voteId) => {
-    console.log('itemList',itemList)
     $api.post('vote/insertWord',{
-            itemList :itemList
-            ,voteId :voteId
-        }).then((res)=>{
-            if(res.data.status === 'OK'){
-                toastStore.onToast('항목이 등록되었습니다.', 's');
+        itemList :itemList
+        ,voteId :voteId
+    }).then((res)=>{
+        if(res.data.status === 'OK'){
+            toastStore.onToast('항목이 등록되었습니다.', 's');
+            getvoteList();
+            const updatedVote = selectVoteDate.value.find(vote => vote.localVote.LOCVOTSEQ === voteId);
+            if (updatedVote) {
+                if (!updatedVote.voteDetails) {
+                    updatedVote.voteDetails = [];
+                }
+                const maxSeq = updatedVote.voteDetails.reduce((max, item) => {
+                    return item.VOTDETSEQ > max ? item.VOTDETSEQ : max;
+                }, 0);
+                // 새 항목을 voteDetails에 추가
+                itemList.forEach(item => {
+                    updatedVote.voteDetails.push({
+                        VOTDETSEQ: maxSeq + 1,
+                        LOCVOTSEQ: voteId,
+                        LOCVOTCON: item.content,
+                        LOCVOTLIK: item.url,
+                        VOTE_COUNT: 0,
+                        yesvote: 0
+                    });
+                });
             }
-        })
+        }
+    })
 }
 //투표종료
 const endVoteId = (endVoteId) => {
@@ -209,9 +227,9 @@ const getDaysAgo = (dateString) => {
     const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24))+1; // 일 단위 변환
 
     // 오늘 날짜인 경우 "오늘" 반환
-    if (dayDiff === 0) return "금일 종료";
+    if (dayDiff === 0) return "⏰금일 종료";
 
-    return ` ⏰종료 ${Math.abs(dayDiff)}일 전`;
+    return `⏰종료 ${Math.abs(dayDiff)}일 전`;
 };
 </script>
 
diff --git a/src/components/voteboard/voteCompleteUserList.vue b/src/components/voteboard/voteCompleteUserList.vue
index d754513..e004283 100644
--- a/src/components/voteboard/voteCompleteUserList.vue
+++ b/src/components/voteboard/voteCompleteUserList.vue
@@ -3,7 +3,7 @@
     <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">
+            <ul class="list-unstyled users-list d-flex align-items-center avatar-group">
                 <vote-complete-user-list-card :data="data"/>
             </ul>
         </div>
diff --git a/src/components/voteboard/voteCompleteUserListCard.vue b/src/components/voteboard/voteCompleteUserListCard.vue
index 465e416..336c40a 100644
--- a/src/components/voteboard/voteCompleteUserListCard.vue
+++ b/src/components/voteboard/voteCompleteUserListCard.vue
@@ -9,7 +9,7 @@
         <img
             class="rounded-circle user-avatar border border-3"
             :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
-            :style="`border-color: ${data.usercolor} !important;`"
+            :style="`border-color: ${data.usercolor} !important; width: 90%; height: auto;`"
             @error="$event.target.src = '/img/icons/icon.png'"
             alt="user"
         />
diff --git a/src/components/voteboard/voteInCompleteUserList.vue b/src/components/voteboard/voteInCompleteUserList.vue
index cd41205..8650248 100644
--- a/src/components/voteboard/voteInCompleteUserList.vue
+++ b/src/components/voteboard/voteInCompleteUserList.vue
@@ -3,7 +3,7 @@
         <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">
+                    <ul class="list-unstyled users-list d-flex align-items-center avatar-group ">
                         <vote-in-complete-user-list-card :data="data" />
                     </ul>
                 </div>
diff --git a/src/components/voteboard/voteInCompleteUserListCard.vue b/src/components/voteboard/voteInCompleteUserListCard.vue
index 465e416..4ec6182 100644
--- a/src/components/voteboard/voteInCompleteUserListCard.vue
+++ b/src/components/voteboard/voteInCompleteUserListCard.vue
@@ -9,7 +9,7 @@
         <img
             class="rounded-circle user-avatar border border-3"
             :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
-            :style="`border-color: ${data.usercolor} !important;`"
+            :style="`border-color: ${data.usercolor} !important;  width: 90%; height: auto;`"
             @error="$event.target.src = '/img/icons/icon.png'"
             alt="user"
         />
diff --git a/src/components/voteboard/voteUserList.vue b/src/components/voteboard/voteUserList.vue
index d930c0a..97d1d8b 100644
--- a/src/components/voteboard/voteUserList.vue
+++ b/src/components/voteboard/voteUserList.vue
@@ -2,7 +2,7 @@
 <div class="d-flex align-items-start mt-3">
     <!--투표한 사람 목록 -->
     <div class="d-flex align-items-center gap-2 flex-wrap">
-        <i class='bx bxs-user-check link-info fa-3x'></i>
+        <i class='bx bxs-user-check link-info fa-2x'></i>
         <vote-complete-user-list
         v-for="(item, index) in voetedUsers"
         :key="index"
@@ -11,7 +11,7 @@
     </div>
     <!-- 투표안한 사람 목록 -->
     <div class="d-flex align-items-center gap-2 ms-auto flex-wrap">
-        <i class='bx bxs-user-x link-danger fa-3x'></i>
+        <i class='bx bxs-user-x link-danger fa-2x'></i>
         <vote-in-complete-user-list
         v-for="(item, index) in noVoetedUsers"
         :key="index"