대댓글완료
This commit is contained in:
parent
04ab0325b7
commit
737481cbae
@ -76,7 +76,7 @@ const comment = ref('');
|
||||
const password = ref('');
|
||||
const isCheck = ref(false);
|
||||
|
||||
const emit = defineEmits(['submit']);
|
||||
const emit = defineEmits(['submitComment']);
|
||||
|
||||
watch(() => props.unknown, (newVal) => {
|
||||
if (!newVal) {
|
||||
@ -85,7 +85,7 @@ watch(() => props.unknown, (newVal) => {
|
||||
});
|
||||
|
||||
function handleCommentSubmit() {
|
||||
emit('submit', {
|
||||
emit('submitComment', {
|
||||
comment: comment.value,
|
||||
password: password.value,
|
||||
});
|
||||
|
||||
@ -5,16 +5,22 @@
|
||||
<p class="m-0">{{ comment.content }}</p>
|
||||
</div>
|
||||
<PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
|
||||
<BoardComentArea v-if="isComment" @submit="submitComment"/>
|
||||
<BoardComentArea v-if="isComment" @submitComment="submitComment"/>
|
||||
|
||||
<!-- 대댓글 -->
|
||||
<ul v-if="comment.children && comment.children.length" class="list-unstyled">
|
||||
<li
|
||||
v-for="child in comment.children"
|
||||
:key="child.id"
|
||||
class="pt-8 ps-10"
|
||||
class="mt-8 pt-6 p
|
||||
s-10 border-top"
|
||||
>
|
||||
<BoardComment :comment="child" :isPlusButton="false" :isChild="true" @submitComment="addChildComment" />
|
||||
<BoardComment
|
||||
:comment="child"
|
||||
:isPlusButton="false"
|
||||
:isChild="true"
|
||||
@submitComment="submitComment"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- <ul class="list-unstyled twoDepth">
|
||||
@ -32,10 +38,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits, ref } from 'vue';
|
||||
import BoardProfile from './BoardProfile.vue';
|
||||
import BoardComentArea from './BoardComentArea.vue';
|
||||
import PlusButton from '../button/PlusBtn.vue';
|
||||
import { defineProps, defineEmits, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
comment: {
|
||||
@ -62,33 +68,11 @@ const toggleComment = () => {
|
||||
};
|
||||
|
||||
// 부모 컴포넌트에 대댓글 추가 요청
|
||||
const addChildComment = (newComment) => {
|
||||
console.log("➕ 대댓글 추가됨:", newComment);
|
||||
if (!props.comment.children) {
|
||||
props.comment.children = []; // ✅ 대댓글 배열이 없으면 생성
|
||||
}
|
||||
props.comment.children.push(newComment); // ✅ 부모 댓글의 children 배열에 추가
|
||||
const submitComment = (newComment) => {
|
||||
emit('submitComment', { parentId: props.comment.id, ...newComment });
|
||||
|
||||
isComment.value = false;
|
||||
};
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .twoDepth {
|
||||
margin-top: 10px;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.list-unstyled > li ~ li {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.btn-text-primary {
|
||||
padding-left: 0;
|
||||
}
|
||||
.btn-text-primary:hover,
|
||||
.btn-text-primary:active,
|
||||
.btn-text-primary:focus {
|
||||
background-color: transparent
|
||||
} */
|
||||
</style>
|
||||
</script>
|
||||
@ -3,11 +3,11 @@
|
||||
<li
|
||||
v-for="comment in comments"
|
||||
:key="comment.id"
|
||||
class="mt-8"
|
||||
class="mt-6 border-bottom pb-6"
|
||||
>
|
||||
<BoardComment
|
||||
:comment="comment"
|
||||
@submitComment="addComment"
|
||||
@submitComment="submitComment"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
@ -25,10 +25,10 @@ const props = defineProps({
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['reply']);
|
||||
const emit = defineEmits(['submitComment']);
|
||||
|
||||
const addComment = (replyData) => {
|
||||
emit('reply', replyData);
|
||||
const submitComment = (replyData) => {
|
||||
emit('submitComment', replyData);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
@ -67,13 +67,13 @@
|
||||
</ul> -->
|
||||
|
||||
<!-- 댓글 입력 영역 -->
|
||||
<BoardComentArea :profileName="profileName" :unknown="unknown" @submit="handleCommentSubmit"/>
|
||||
<BoardComentArea :profileName="profileName" :unknown="unknown" @submitComment="handleCommentSubmit"/>
|
||||
<!-- <BoardComentArea :profileName="profileName" :unknown="unknown" /> -->
|
||||
</div>
|
||||
|
||||
<!-- 댓글 목록 -->
|
||||
<div class="card-footer">
|
||||
<BoardCommentList :comments="comments" />
|
||||
<BoardCommentList :comments="comments" @submitComment="handleCommentReply"/>
|
||||
|
||||
<Pagination/>
|
||||
</div>
|
||||
@ -173,20 +173,54 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
|
||||
}
|
||||
};
|
||||
|
||||
// 댓글 목록 조회
|
||||
const fetchComments = async () => {
|
||||
try {
|
||||
const response = await axios.get(`board/${currentBoardId.value}/comments`, {
|
||||
params: { LOCBRDSEQ: currentBoardId.value }
|
||||
});
|
||||
console.log("📥 API 응답 데이터:", response.data);
|
||||
|
||||
let allComments = response.data.data.map(comment => ({
|
||||
id: comment.LOCCMTSEQ, // 댓글 id
|
||||
parentId: comment.LOCCMTPNT, // 부모 id
|
||||
author: comment.MEMBERSEQ || "익명 사용자", // 작성자
|
||||
content: comment.LOCCMTRPY, // 댓글 내용
|
||||
createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜
|
||||
children: []
|
||||
}));
|
||||
|
||||
allComments.sort((a, b) => b.id - a.id);
|
||||
|
||||
let commentMap = {};
|
||||
let rootComments = [];
|
||||
|
||||
allComments.forEach(comment => {
|
||||
commentMap[comment.id] = comment; // 모든 댓글을 객체 형태로 저장
|
||||
});
|
||||
|
||||
allComments.forEach(comment => {
|
||||
if (comment.parentId && commentMap[comment.parentId]) {
|
||||
// 부모 댓글이 존재하면, 부모의 children에 추가
|
||||
commentMap[comment.parentId].children.push(comment);
|
||||
} else {
|
||||
// 부모 ID가 없으면 최상위 댓글
|
||||
rootComments.push(comment);
|
||||
}
|
||||
});
|
||||
|
||||
comments.value = rootComments;
|
||||
|
||||
// console.log("변환된 comments 데이터:", comments.value);
|
||||
|
||||
} catch (error) {
|
||||
console.error('댓글 목록 불러오기 오류:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 댓글 작성
|
||||
const handleCommentSubmit = async ({ comment, password }) => {
|
||||
try {
|
||||
// const payload = {
|
||||
// LOCBRDSEQ: currentBoardId.value,
|
||||
// LOCCMTRPY: comment,
|
||||
// LOCCMTPWD: password || null,
|
||||
// LOCCMTPNT: 1
|
||||
// };
|
||||
// alert(`댓글 내용: ${comment}`);
|
||||
|
||||
// console.log('📤 서버로 전송되는 데이터:', payload); // 서버로 보내는 데이터 확인
|
||||
// const response = await axios.post(`board/${currentBoardId.value}/comment`, payload);
|
||||
|
||||
try {
|
||||
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
LOCCMTRPY: comment,
|
||||
@ -207,35 +241,33 @@ const handleCommentSubmit = async ({ comment, password }) => {
|
||||
}
|
||||
};
|
||||
|
||||
// 댓글 목록 조회
|
||||
const fetchComments = async () => {
|
||||
try {
|
||||
const response = await axios.get(`board/${currentBoardId.value}/comments`, {
|
||||
params: { LOCBRDSEQ: currentBoardId.value }
|
||||
const handleCommentReply = async (reply) => {
|
||||
// console.log("BoardView에서 대댓글 확인~~~~~~~~~~~~~~~~:", reply);
|
||||
|
||||
// 부모 댓글 찾기
|
||||
// const parentComment = comments.value.find(comment => comment.id === reply.parentId);
|
||||
|
||||
// console.log(parentComment)
|
||||
// if (parentComment) {
|
||||
// console.log('되는거??')
|
||||
|
||||
const response = await axios.post(`board/${currentBoardId.value}/comment`, {
|
||||
LOCBRDSEQ: currentBoardId.value,
|
||||
LOCCMTRPY: reply.comment,
|
||||
LOCCMTPWD: reply.password || null,
|
||||
LOCCMTPNT: reply.parentId
|
||||
});
|
||||
// console.log("📥 API 응답 데이터:", response.data);
|
||||
|
||||
comments.value = response.data.data.map(comment => ({
|
||||
id: comment.LOCCMTSEQ, // 고유 ID
|
||||
author: comment.MEMBERSEQ || "익명 사용자", // 작성자
|
||||
content: comment.LOCCMTRPY, // 댓글 내용
|
||||
createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜
|
||||
children: comment.children ? comment.children.map(child => ({
|
||||
id: child.LOCCMTSEQ,
|
||||
author: child.MEMBERSEQ || "익명 사용자",
|
||||
content: child.LOCCMTRPY,
|
||||
createdAt: formattedDate(child.LOCCMTRDT),
|
||||
})) : []
|
||||
}));
|
||||
|
||||
comments.value.sort((a, b) => b.id - a.id);
|
||||
|
||||
console.log("📌 변환된 comments 데이터:", comments.value);
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ 댓글 목록 불러오기 오류:', error);
|
||||
}
|
||||
};
|
||||
if (response.status === 200) {
|
||||
console.log('대댓글 작성 성공!!!!!!:', response.data.message);
|
||||
await fetchComments();
|
||||
} else {
|
||||
console.error('대댓글 작성 실패ㅜㅜㅜ:', response.data.message);
|
||||
}
|
||||
// } else {
|
||||
// console.error(`부모 댓글을 찾을 수 없음: ${reply.parentId}`);
|
||||
// }
|
||||
}
|
||||
|
||||
// 날짜
|
||||
const formattedDate = (dateString) => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user