From 5fe85dcd3bcc67b583d5e48df0ef00409ad21175 Mon Sep 17 00:00:00 2001 From: kimdaae328 Date: Mon, 17 Feb 2025 13:56:02 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EC=A2=8B=EC=95=84?= =?UTF-8?q?=EC=9A=94=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/board/BoardComment.vue | 11 ++++- src/components/board/BoardCommentList.vue | 26 ++++++++--- src/components/board/BoardProfile.vue | 27 ++++++++--- src/components/button/BoardRecommendBtn.vue | 6 ++- src/views/board/BoardView.vue | 51 ++++++++------------- 5 files changed, 74 insertions(+), 47 deletions(-) diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue index fa85b00..9c03759 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -4,6 +4,7 @@ :boardId="comment.boardId" :profileName="comment.author" :date="comment.createdAt" + :comment="comment" :showDetail="false" :author="true" :isLike="!isLike" @@ -85,8 +86,14 @@ const submitComment = (newComment) => { // 좋아요, 싫어요 const handleUpdateReaction = (reactionData) => { - console.log(`🛠 좋아요/싫어요 클릭됨:`, reactionData); - // emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.id, ...reactionData }); + // console.log('📌 댓글 comment:', props.comment.commentId); + + emit('updateReaction', { + boardId: props.comment.boardId, + commentId: props.comment.commentId, + ...reactionData + }); + }; diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue index d751802..77d7f17 100644 --- a/src/components/board/BoardCommentList.vue +++ b/src/components/board/BoardCommentList.vue @@ -8,8 +8,9 @@ + @@ -23,7 +24,7 @@ const props = defineProps({ type: Array, required: true, default: () => [] - } + }, }); const emit = defineEmits(['submitComment', 'updateReaction']); @@ -32,9 +33,22 @@ const submitComment = (replyData) => { emit('submitComment', replyData); }; -const handleUpdateReaction = (reactionData) => { - console.log(`📢 부모 컴포넌트에서 이벤트 수신:`, reactionData); - // emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.id, ...reactionData }); -}; +const handleUpdateReaction = (reactionData, commentId) => { + // console.log('📢 BoardCommentList에서 이벤트 수신:', reactionData); + // console.log('📌 전달할 댓글 ID>>>>:', commentId); + + // if (commentId) { + // console.error("❌"); + // } + + const updatedReactionData = { + ...reactionData, + commentId: commentId + }; + + // console.log('🚀 최종 전달할 데이터:', updatedReactionData); + + emit('updateReaction', updatedReactionData); +} diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue index d818118..e87ec46 100644 --- a/src/components/board/BoardProfile.vue +++ b/src/components/board/BoardProfile.vue @@ -42,7 +42,12 @@ - + @@ -64,6 +69,10 @@ const lastClickedButton = ref(''); // Props 정의 const props = defineProps({ + comment: { + type: Object, + required: true, + }, boardId: { type: Number, required: false @@ -201,12 +210,16 @@ const deletePost = async () => { const handleUpdateReaction = (reactionData) => { - // console.log(`🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생`, reactionData); - console.log("🔥 좋아요/싫어요 이벤트 발생"); - console.log("📌 게시글 ID (props.boardId):", props.boardId); - console.log("📌 댓글 ID (props.comment?.id):", props.comment?.commentId); - console.log("📌 댓글의 게시글 ID (props.comment?.boardId):", props.comment?.boardId); - // emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.commentId, ...reactionData }); + // console.log("🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생"); + // console.log("📌 게시글 ID:", props.boardId); + // console.log("📌 댓글 ID (수정 후):", props.comment?.commentId); + // console.log("📌 reactionData:", reactionData); + + emit("updateReaction", { + boardId: props.boardId, + commentId: props.comment?.commentId, + ...reactionData, + }); }; diff --git a/src/components/button/BoardRecommendBtn.vue b/src/components/button/BoardRecommendBtn.vue index 02cdb4d..f7c98e2 100644 --- a/src/components/button/BoardRecommendBtn.vue +++ b/src/components/button/BoardRecommendBtn.vue @@ -11,6 +11,10 @@ import { ref, watch } from 'vue'; const props = defineProps({ + comment: { + type: Object, + required: true, + }, likeClicked : { type : Boolean, default : false, @@ -64,7 +68,7 @@ watch(() => props.dislikeCount, (newVal) => { const handleLike = () => { const isLike = !likeClicked.value; const isDislike = false; - // console.log("BoardRecommendBtn.vue - commentId:", props.commentId); + // console.log('좋아용') emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike }); likeClicked.value = isLike; dislikeClicked.value = false; diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue index 61c384b..3f560e4 100644 --- a/src/views/board/BoardView.vue +++ b/src/views/board/BoardView.vue @@ -74,8 +74,7 @@
- - +
@@ -149,45 +148,35 @@ const fetchBoardDetails = async () => { // 좋아요, 싫어요 const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => { - console.log("🔥 좋아요/싫어요 이벤트 발생"); console.log("📌 게시글 ID:", boardId); - console.log("📌 댓글 ID:", commentId); + console.log("📌 댓글 ID (최종):", commentId); + try { - await axios.post(`/board/${boardId}/${commentId}/reaction`, { - LOCBRDSEQ: boardId, - LOCCMTSEQ: commentId, - MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함 + const aa = await axios.post(`/board/${boardId}/${commentId}/reaction`, { + LOCBRDSEQ: boardId, // 게시글 id + LOCCMTSEQ: commentId, //댓글 id + // MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함 LOCGOBGOD: isLike ? 'T' : 'F', LOCGOBBAD: isDislike ? 'T' : 'F' }); + console.log("📥 API 응답 데이터:", aa.data); - console.log(commentId) - if (commentId) { - console.log('댓글 좋아요/싫어요 누름 -> commentId:', commentId); - await fetchComments(); - } else { - console.log('게시글 좋아요/싫어요 누름 -> boardId:', boardId); + const response = await axios.get(`board/${boardId}`); + const updatedData = response.data.data; - const response = await axios.get(`board/${boardId}`); - const updatedData = response.data.data; + const response2 = await axios.get(`board/${boardId}/comments`); - likes.value = updatedData.likeCount; - dislikes.value = updatedData.dislikeCount; - likeClicked.value = isLike; - dislikeClicked.value = isDislike; - console.log('게시글 업데이트된 데이터:', updatedData); - } - - // const response = await axios.get(`board/${boardId}`); - // const updatedData = response.data.data; + // console.log("📥 API 응답 데이터:", response2); - // likes.value = updatedData.likeCount; - // dislikes.value = updatedData.dislikeCount; - // likeClicked.value = isLike; - // dislikeClicked.value = isDislike; + likes.value = updatedData.likeCount; + dislikes.value = updatedData.dislikeCount; + + likeClicked.value = isLike; + dislikeClicked.value = isDislike; + // console.log(updatedData) } catch (error) { alert('반응을 업데이트하는 중 오류 발생'); @@ -200,7 +189,7 @@ const fetchComments = async () => { const response = await axios.get(`board/${currentBoardId.value}/comments`, { params: { LOCBRDSEQ: currentBoardId.value } }); - // console.log("📥 API 응답 데이터:", response.data); + console.log("📥 API 응답 데이터:", response.data); let allComments = response.data.data.list.map(comment => ({ commentId: comment.LOCCMTSEQ, // 댓글 id @@ -231,7 +220,7 @@ const fetchComments = async () => { comments.value = rootComments; - console.log("변환된 comments 데이터:", comments.value); + // console.log("변환된 comments 데이터:", comments.value); } catch (error) { console.error('댓글 목록 불러오기 오류:', error);