diff --git a/src/components/board/BoardComentArea.vue b/src/components/board/BoardComentArea.vue index 84bd0c3..703320b 100644 --- a/src/components/board/BoardComentArea.vue +++ b/src/components/board/BoardComentArea.vue @@ -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, }); diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue index 2883a12..5c591e3 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -5,16 +5,22 @@

{{ comment.content }}

- +
  • - +
- + @@ -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) => {