대댓글 진행중

This commit is contained in:
kimdaae328 2025-02-13 13:20:11 +09:00
parent e81229db4c
commit 7774bfe80a
4 changed files with 27 additions and 20 deletions

View File

@ -13,7 +13,7 @@
<div class="w-100"> <div class="w-100">
<textarea <textarea
class="form-control" class="form-control"
placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. &#13;&#10;여러분의 다양한 의견을 기다립니다." placeholder="댓글 달기"
rows="3" rows="3"
v-model="comment" v-model="comment"
></textarea> ></textarea>

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<BoardProfile :profileName="comment.author" :showDetail="false" :author="true" :isChild="isChild" /> <BoardProfile :profileName="comment.author" :date="comment.createdAt" :showDetail="false" :author="true" :isChild="isChild" />
<div class="mt-6"> <div class="mt-6">
<p class="m-0">{{ comment.content }}</p> <p class="m-0">{{ comment.content }}</p>
</div> </div>
@ -62,8 +62,12 @@ const toggleComment = () => {
}; };
// //
const addChildComment = (parentId, newComment) => { const addChildComment = (newComment) => {
emit('submitComment', parentId, newComment); console.log(" 대댓글 추가됨:", newComment);
if (!props.comment.children) {
props.comment.children = []; //
}
props.comment.children.push(newComment); // children
}; };

View File

@ -5,7 +5,10 @@
:key="comment.id" :key="comment.id"
class="mt-8" class="mt-8"
> >
<BoardComment :comment="comment" @submitComment="addComment" /> <BoardComment
:comment="comment"
@submitComment="addComment"
/>
</li> </li>
</ul> </ul>
</template> </template>

View File

@ -193,12 +193,12 @@ const handleCommentSubmit = async ({ comment, password }) => {
LOCCMTPWD: password || null, LOCCMTPWD: password || null,
LOCCMTPNT: 1 LOCCMTPNT: 1
}); });
console.log('📥 서버 응답 전체:', response.data); // console.log('📥 :', response.data);
if (response.status === 200) { if (response.status === 200) {
console.log('댓글 작성 성공:', response.data.message); console.log('댓글 작성 성공:', response.data.message);
// await fetchComments(); // await fetchComments();
} else { } else {
console.error('댓글 작성 실패:', response.data.message); console.error('댓글 작성 실패:', response.data.message);
} }
@ -209,28 +209,26 @@ const handleCommentSubmit = async ({ comment, password }) => {
// //
const fetchComments = async () => { const fetchComments = async () => {
console.log("🚀 fetchComments() 실행됨"); //
try { try {
const response = await axios.get(`board/${currentBoardId.value}/comments`, { const response = await axios.get(`board/${currentBoardId.value}/comments`, {
params: { LOCBRDSEQ: currentBoardId.value } params: { LOCBRDSEQ: currentBoardId.value }
}); });
console.log("📥 API 응답 데이터:", response.data); // console.log("📥 API :", response.data);
comments.value = response.data.data.map(comment => ({ comments.value = response.data.data.map(comment => ({
id: comment.LOCCMTSEQ, // ID id: comment.LOCCMTSEQ, // ID
// author: comment.LOCCMTWRITER || " ", // author: comment.MEMBERSEQ || "익명 사용자", //
content: comment.LOCCMTRPY, // content: comment.LOCCMTRPY, //
createdAt: comment.LOCCMTUDT, // createdAt: formattedDate(comment.LOCCMTRDT), //
children: comment.children ? comment.children.map(child => ({ children: comment.children ? comment.children.map(child => ({
id: child.LOCCMTSEQ, id: child.LOCCMTSEQ,
// author: child.LOCCMTWRITER || " ", author: child.MEMBERSEQ || "익명 사용자",
content: child.LOCCMTRPY, content: child.LOCCMTRPY,
createdAt: child.LOCCMTUDT, createdAt: formattedDate(child.LOCCMTRDT),
})) : [] })) : []
})); }));
// comments.value.sort((a, b) => b.createdAt - a.createdAt); comments.value.sort((a, b) => b.id - a.id);
console.log("📌 변환된 comments 데이터:", comments.value); console.log("📌 변환된 comments 데이터:", comments.value);
@ -239,12 +237,14 @@ const fetchComments = async () => {
} }
}; };
// //
const formattedBoardDate = computed(() => { const formattedDate = (dateString) => {
const dateObj = new Date(date.value); if (!dateString) return "날짜 없음";
const dateObj = new Date(dateString);
return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`; return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
}); };
const formattedBoardDate = computed(() => formattedDate(date.value));
// //
onMounted(() => { onMounted(() => {