localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nevermoregb 2025-04-03 22:17:30 +09:00
parent 2072a41ca9
commit 7e0ae7063d
6 changed files with 172 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/board/BoardComment.vue
View File

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

6
src/components/board/BoardCommentList.vue
View File

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

12
src/components/board/BoardProfile.vue
View File

@ -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']);

15
src/components/button/DeleteBtn.vue
View File

@ -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>

14
src/components/button/EditBtn.vue
View File

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

144
src/views/board/BoardView.vue
View File

@ -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;
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);