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 @@
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 @@
-
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 @@
-
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 @@
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 @@
-
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 @@
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 @@
-
+
-
+
@@ -92,7 +94,7 @@
@updateReaction="handleUpdateReaction"
/>
-
+
{
+ 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);