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-19 23:38:40 +09:00
parent 6d705d1093
commit bba4c60cb2
2 changed files with 51 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,11 +23,12 @@
<textarea v-model="editedContent" class="form-control"></textarea> <textarea v-model="editedContent" class="form-control"></textarea>
<div class="mt-2 d-flex justify-content-end"> <div class="mt-2 d-flex justify-content-end">
<button class="btn btn-secondary me-2" @click="emit('toggleEdit', comment.commentId, false)">취소</button> <button class="btn btn-secondary me-2" @click="emit('toggleEdit', comment.commentId, false)">취소</button>
<button class="btn btn-primary" @click="submitEdit">수정 완료</button> <button class="btn btn-primary" @click="submitEdit">수정</button>
</div> </div>
</template> </template>
<template v-else> <template v-else>
<p class="m-0">{{ comment.content }}</p> <p class="m-0">{{ comment.content }}</p>
<span>{{ comment.commentId }}</span>
</template> </template>
</div> </div>

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

@ -223,42 +223,64 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
// 댓글 목록 조회 // 댓글 목록 조회
const fetchComments = async (page = 1) => { const fetchComments = async (page = 1) => {
try { try {
const response = await axios.get(`board/${currentBoardId.value}/comments`, { const { data } = await axios.get(`board/${currentBoardId.value}/comments`, {
params: { params: { LOCBRDSEQ: currentBoardId.value, page }
LOCBRDSEQ: currentBoardId.value,
page
}
}); });
console.log("목록 API 응답 데이터:", response.data); const { data: replyData } = await axios.get(`board/${currentBoardId.value}/reply`, {
params: { LOCBRDSEQ: currentBoardId.value }
});
console.log("댓글:", data);
console.log("대댓글:", replyData);
let allComments = response.data.data.list.map(comment => ({ if (!data?.data?.list) return;
commentId: comment.LOCCMTSEQ, // 댓글 id
comments.value = data.data.list.map(comment => ({
commentId: comment.LOCCMTSEQ, // 댓글 ID
boardId: comment.LOCBRDSEQ, boardId: comment.LOCBRDSEQ,
parentId: comment.LOCCMTPNT, // 부모 id parentId: comment.LOCCMTPNT, // 부모 ID
author: comment.author || "익명 사용자", // 작성자 author: comment.author || "익명 사용자",
content: comment.LOCCMTRPY, // 댓글 내용 content: comment.LOCCMTRPY,
createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜 createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
children: [] createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
children: [] // 대댓글을 담을 배열
})); }));
allComments.sort((a, b) => b.commentId - a.commentId); let replies = replyData.data.map(reply => ({
commentId: reply.LOCCMTSEQ, // 대댓글 ID
boardId: reply.LOCBRDSEQ,
parentId: reply.LOCCMTPNT, // 부모 댓글 ID
author: reply.author || "익명 사용자",
content: reply.LOCCMTRPY,
createdAtRaw: new Date(reply.LOCCMTRDT), // 정렬용
createdAt: formattedDate(reply.LOCCMTRDT) // 표시용
}));
let commentMap = {}; // let commentMap = {};
let rootComments = []; // let rootComments = [];
allComments.forEach(comment => { // 최상위 댓글 저장
commentMap[comment.commentId] = comment; // allComments.forEach(comment => {
}); // commentMap[comment.commentId] = comment;
// });
allComments.forEach(comment => { // 대댓글을 부모 댓글에 추가
if (comment.parentId && commentMap[comment.parentId]) { // replies.forEach(reply => {
commentMap[comment.parentId].children.push(comment); // if (commentMap[reply.parentId]) {
} else { // commentMap[reply.parentId].children.push(reply);
rootComments.push(comment); // } else {
} // console.warn("부모 댓글을 찾을 수 없는 대댓글:", reply);
}); // }
// });
comments.value = rootComments; // rootComments = allComments.filter(comment => comment.parentId === 1);
// 정렬
// rootComments.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
// rootComments.forEach(comment => {
// comment.children.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
// });
// comments.value = rootComments;
// console.log("변환된 comments 데이터:", comments.value); // console.log("변환된 comments 데이터:", comments.value);