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

댓글 대댓글 수정 삭제 완료

Browse Source
This commit is contained in:
kimdaae328 2025-02-25 11:10:14 +09:00
parent 84c43d5baf
commit 13f9eecaf3
5 changed files with 113 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,7 @@
:isLike="!isLike"
:isCommentPassword="comment.isCommentPassword"
:isCommentProfile="true"
@editClick="$emit('editClick', comment)"
@editClick="aaaa"
@deleteClick="$emit('deleteClick', comment)"
@updateReaction="handleUpdateReaction"
/>
@ -56,11 +56,19 @@
:key="child.commentId"
class="mt-8 pt-6 ps-10 border-top"
>
<!-- <p>대댓글 데이터(JSON): {{ JSON.stringify(child, null, 2) }}</p> -->
<!-- <p>comment child: {{ comment.children }}</p> -->
<BoardComment
:comment="child"
:unknown="unknown"
:isPlusButton="false"
:isLike="true"
:isCommentProfile="true"
:isCommentAuthor="child.isCommentAuthor"
@editClick="$emit('editClick', $event)"
@deleteClick="$emit('deleteClick', child)"
@submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
@cancelEdit="$emit('cancelEdit', child)"
@submitComment="submitComment"
@updateReaction="handleUpdateReaction"
/>
@ -155,4 +163,8 @@ const submitEdit = () => {
emit('submitEdit', props.comment, localEditedContent.value);
};
const aaaa = () => {
emit('editClick', props.comment);
}
</script>

2
src/components/board/BoardCommentArea.vue
View File

@ -79,7 +79,7 @@ const props = defineProps({
const comment = ref('');
const password = ref('');
const isCheck = ref(props.unknown);
const isCheck = ref('');
const emit = defineEmits(['submitComment']);

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

@ -5,6 +5,8 @@
:key="comment.commentId"
class="mt-6 border-bottom pb-6"
>
<!-- <p>comment데이터 확인: {{ comment }}</p> -->
<!-- 여기 부분 수정 확인 부분 부터 해야함 -->
<BoardComment
:unknown="unknown"
:comment="comment"
@ -12,13 +14,13 @@
:isCommentPassword="comment.isCommentPassword"
:isEditTextarea="comment.isEditTextarea"
:passwordCommentAlert="passwordCommentAlert"
@editClick="$emit('editClick', comment)"
@deleteClick="$emit('deleteClick', comment)"
@editClick="handleEditClick"
@deleteClick="handleDeleteClick"
@submitPassword="submitPassword"
@submitComment="submitComment"
@commentDeleted="handleCommentDeleted"
@submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
@cancelEdit="$emit('cancelEdit', comment)"
@submitEdit="handleSubmitEdit"
@cancelEdit="handleCancelEdit"
@updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
/>
</li>
@ -76,4 +78,29 @@ const handleUpdateReaction = (reactionData, commentId, boardId) => {
const submitPassword = (comment, password) => {
emit('submitPassword', comment, password);
};
const handleEditClick = (comment) => {
emit('editClick', comment);
};
const handleSubmitEdit = (comment, editedContent) => {
emit("submitEdit", comment, editedContent);
};
const handleDeleteClick = (comment) => {
if (comment.parentId) {
emit('deleteClick', comment); // 대댓글 삭제
} else {
emit('deleteClick', comment); // 댓글 삭제
}
};
const handleCancelEdit = (comment) => {
if (comment.parentId) {
emit('cancelEdit', comment); // 대댓글 수정 취소
} else {
emit('cancelEdit', comment); // 댓글 수정 취소
}
};
</script>

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

@ -23,7 +23,7 @@
<div class="ms-auto text-end">
<!-- 수정, 삭제 버튼 -->
<!-- <template v-if="isAuthor || showDetail"> -->
<template v-if="isCommentProfile ? isCommentAuthor : isAuthor">
<template v-if="isCommentAuthor || isAuthor">
<EditButton @click.stop="editClick" />
<DeleteButton @click.stop="deleteClick" />
</template>
@ -62,7 +62,7 @@ const props = defineProps({
},
profileName: {
type: String,
default: '',
default: '익명',
},
unknown: {
type: Boolean,
@ -101,13 +101,12 @@ const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
// 수정
const editClick = () => {
console.log('클릭 확인')
emit('editClick', props.unknown);
emit('editClick', props.comment);
};
// 삭제
const deleteClick = () => {
emit('deleteClick', props.unknown);
emit('deleteClick', props.comment);
};
const handleUpdateReaction = (reactionData) => {

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

@ -158,16 +158,19 @@ const route = useRoute();
const router = useRouter();
const userStore = useUserInfoStore();
const currentBoardId = ref(Number(route.params.id));
// const unknown = computed(() => profileName.value === '익명');
const unknown = computed(() => profileName.value === '익명');
const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id
const authorId = ref(''); // 작성자 id
const isAuthor = computed(() => currentUserId.value === authorId.value);
// const isCommentAuthor =
const commentsWithAuthStatus = computed(() => {
const updatedComments = comments.value.map(comment => ({
...comment,
isCommentAuthor: comment.authorId === currentUserId.value
isCommentAuthor: comment.authorId === currentUserId.value,
children: comment.children.map(reply => ({
...reply,
isCommentAuthor: reply.authorId === currentUserId.value
}))
}));
// console.log("✅ commentsWithAuthStatus 업데이트됨:", updatedComments);
return updatedComments;
@ -205,12 +208,12 @@ const fetchBoardDetails = async () => {
const response = await axios.get(`board/${currentBoardId.value}`);
const data = response.data.data;
console.log(data)
// console.log(data)
// API 응답 데이터 반영
// const boardDetail = data.boardDetail || {};
profileName.value = data.author;
profileName.value = data.author || '익명';
// 익명확인하고 싶을때
// profileName.value = '익명';
@ -292,7 +295,7 @@ const fetchComments = async (page = 1) => {
}
});
console.log(response.data.data)
// console.log(response.data.data)
const commentsList = response.data.data.list.map(comment => ({
commentId: comment.LOCCMTSEQ, // 댓글 ID
@ -317,10 +320,12 @@ const fetchComments = async (page = 1) => {
params: { LOCCMTPNT: comment.commentId }
});
console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
// console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
if (replyResponse.data.data) {
comment.children = replyResponse.data.data.map(reply => ({
author: reply.author || '익명',
authorId: reply.authorId,
commentId: reply.LOCCMTSEQ,
boardId: reply.LOCBRDSEQ,
parentId: reply.LOCCMTPNT, // 부모 댓글 ID
@ -460,26 +465,37 @@ const deleteClick = (unknown) => {
}
};
const findCommentById = (commentId, commentsList) => {
for (const comment of commentsList) {
if (comment.commentId === commentId) {
return comment; // 부모 댓글일 경우
}
if (comment.children && comment.children.length) {
const found = findCommentById(commentId, comment.children);
if (found) return found; // 대댓글일 경우
}
}
return null;
};
// 댓글 수정 버튼 클릭
const editComment = (comment) => {
const targetComment = comments.value.find(c => c.commentId === comment.commentId);
// console.log('대댓글 수정 버튼 클릭')
// 부모 또는 대댓글을 찾아서 가져오기
const targetComment = findCommentById(comment.commentId, comments.value);
if (!targetComment) {
console.log("대댓글을 찾을 수 없음:", comment.commentId);
return;
}
// 수정 text창 열림, 닫힘 유무
if (targetComment.isEditTextarea) {
targetComment.isEditTextarea = false;
} else {
targetComment.isEditTextarea = true;
}
// 수정 text창 열림, 닫힘 유무 토글
targetComment.isEditTextarea = !targetComment.isEditTextarea;
// 익명일때
// 익명일 경우 비밀번호 입력창 활성화
if (unknown.value) {
toggleCommentPassword(comment, "edit");
} else {
comment.isEditTextarea = true;
}
}
@ -665,10 +681,16 @@ const handleSubmitEdit = async (comment, editedContent) => {
// 수정 성공 시 업데이트
// comment.content = editedContent;
// comment.isEditTextarea = false;
// comment.isEditTextarea = false; f
if (response.status === 200) {
// 댓글 목록 새로고침
await fetchComments();
const targetComment = findCommentById(comment.commentId, comments.value);
if (targetComment) {
targetComment.content = editedContent; // 댓글 내용 업데이트
targetComment.isEditTextarea = false; // 수정 모드 닫기
} else {
console.warn("❌ 수정할 댓글을 찾을 수 없음");
}
} else {
console.log("❌ 댓글 수정 실패:", response.data);
}
@ -679,13 +701,10 @@ const handleSubmitEdit = async (comment, editedContent) => {
// 댓글 수정 취소 (대댓글 포함)
const handleCancelEdit = (comment) => {
console.log("BoardView.vue - 댓글 수정 취소:", comment);
// 원본 comments 배열에서 동일한 comment 찾기
const targetComment = comments.value.find(c => c.commentId === comment.commentId);
const targetComment = findCommentById(comment.commentId, comments.value);
if (targetComment) {
console.log("✅ 원본 데이터 찾음, 수정 취소 처리 가능");
console.log("✅ 원본 데이터 찾음, 수정 취소 처리 가능:", targetComment);
targetComment.isEditTextarea = false;
} else {
console.error("❌ 원본 데이터 찾을 수 없음, 수정 취소 실패");
@ -700,10 +719,29 @@ const handlePageChange = (page) => {
}
};
// 댓글 삭제 (대댓글 포함)
const handleCommentDeleted = (deletedCommentId) => {
comments.value = comments.value.filter(comment => comment.commentId !== deletedCommentId);
// 댓글 삭제
const parentIndex = comments.value.findIndex(comment => comment.commentId === deletedCommentId);
if (parentIndex !== -1) {
comments.value.splice(parentIndex, 1);
return;
}
// 2대댓글 삭제
for (let parent of comments.value) {
const childIndex = parent.children.findIndex(child => child.commentId === deletedCommentId);
if (childIndex !== -1) {
parent.children.splice(childIndex, 1);
return;
}
}
console.error("❌ 삭제할 댓글을 찾을 수 없음:", deletedCommentId);
};
// 날짜
const formattedDate = (dateString) => {
if (!dateString) return "날짜 없음";