boardview 에서 수정, 삭제시 버튼 클릭 활성화

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 => {

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({

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" />
+                    <EditButton @click.stop="editClick" :is-pushed="isEditPushed" />
-                    <DeleteButton :class="'ms-1'" @click.stop="deleteClick" />
+                    <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']);

src/components/button/DeleteBtn.vue

@@ -1,13 +1,14 @@
 <template>
-    <button class="btn btn-label-primary btn-icon">
+    <button class="btn btn-label-primary btn-icon" :class="{ active: props.isPushed }">
-        <i class='bx bx-trash' ></i>
+        <i class="bx bx-trash"></i>
     </button>
 </template>
 
-<script>
+<script setup>
-export default {
+    const props = defineProps({
-    name: 'DeleteButton',
+        isPushed: {
-    methods: {
+            type: Boolean,
-      },
+            required: false,
-    };
+        },
+    });
 </script>

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';

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(); // 다른 모든 댓글의 수정창 닫기
-                closeAllEditTextareas();
+                currentPasswordCommentId.value = null; // 현재 댓글만 수정 모드 활성화
-                currentPasswordCommentId.value = null;
+                targetComment.isEditTextarea = true; // 선택 버튼 활성화 상태 제어
-                // 현재 댓글만 수정 모드 활성화
+                activeCommentBtnClass(targetComment, 1);
-                targetComment.isEditTextarea = true;
             }
         } else if (isAnonymous) {
             if (currentPasswordCommentId.value === comment.commentId) {
-                // 이미 비밀번호 입력 중이면 유지
+                toggleCommentPassword(comment, 'edit'); // 이미 비밀번호 입력 중이면 유지
-                toggleCommentPassword(comment, 'edit');
-                return;
             } 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);