댓글 좋아요 완료

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);
+    // console.log('📌 댓글 comment:', props.comment.commentId);
-    // emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.id, ...reactionData });
+
+    emit('updateReaction', {
+        boardId: props.comment.boardId,
+        commentId: props.comment.commentId,
+        ...reactionData
+    });
+
 };
 
 

src/components/board/BoardCommentList.vue

@@ -8,8 +8,9 @@
             <BoardComment
                 :comment="comment"
                 @submitComment="submitComment"
-                @updateReaction="handleUpdateReaction"
+                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId)"
             />
+                <!-- @updateReaction="handleUpdateReaction" -->
         </li>
     </ul>
 </template>
@@ -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) => {
+const handleUpdateReaction = (reactionData, commentId) => {
-    console.log(`📢 부모 컴포넌트에서 이벤트 수신:`, reactionData);
+    // console.log('📢 BoardCommentList에서 이벤트 수신:', reactionData);
-    // emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.id, ...reactionData });
+    // console.log('📌 전달할 댓글 ID>>>>:', commentId);
-};
+
+    // if (commentId) {
+    //     console.error("❌");
+    // }
+
+    const updatedReactionData = {
+        ...reactionData,  
+        commentId: commentId
+    };
+
+    // console.log('🚀 최종 전달할 데이터:', updatedReactionData);
+
+    emit('updateReaction', updatedReactionData);
+}
 
 </script>

src/components/board/BoardProfile.vue

@@ -42,7 +42,12 @@
             </div>
 
             <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
-            <BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
+            <BoardRecommendBtn
+                v-if="isLike"
+                :boardId="boardId"
+                :comment="props.comment"
+                @updateReaction="handleUpdateReaction"
+            />
         </div>
     </div>
 </template>
@@ -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("🔥 BoardProfile에서 좋아요/싫어요 이벤트 발생");
-    console.log("🔥 좋아요/싫어요 이벤트 발생");
+    // console.log("📌 게시글 ID:", props.boardId);
-    console.log("📌 게시글 ID (props.boardId):", props.boardId);
+    // console.log("📌 댓글 ID (수정 후):", props.comment?.commentId);
-    console.log("📌 댓글 ID (props.comment?.id):", props.comment?.commentId);
+    // console.log("📌 reactionData:", reactionData);
-    console.log("📌 댓글의 게시글 ID (props.comment?.boardId):", props.comment?.boardId);
+
-    // emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.commentId, ...reactionData });
+    emit("updateReaction", {
+        boardId: props.boardId,
+        commentId:  props.comment?.commentId,
+        ...reactionData,
+    });
 };
 
 </script>

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;

src/views/board/BoardView.vue

@@ -74,8 +74,7 @@
 
                     <!-- 댓글 목록 -->
                     <div class="card-footer">
-                        <BoardCommentList :comments="comments" @submitComment="handleCommentReply"/>
+                        <BoardCommentList :comments="comments" @updateReaction="handleUpdateReaction" @submitComment="handleCommentReply" />
-
                         <Pagination/>
                     </div>
                 </div>
@@ -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`, {
+        const aa = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
-            LOCBRDSEQ: boardId,
+            LOCBRDSEQ: boardId, // 게시글 id
-            LOCCMTSEQ: commentId,
+            LOCCMTSEQ: commentId, //댓글 id
-            MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
+            // MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
             LOCGOBGOD: isLike ? 'T' : 'F',
             LOCGOBBAD: isDislike ? 'T' : 'F'
         });
+        console.log("📥 API 응답 데이터:", aa.data); 
 
-        console.log(commentId)
 
-        if (commentId) {
+        const response = await axios.get(`board/${boardId}`);
-            console.log('댓글 좋아요/싫어요 누름 -> commentId:', commentId);
+        const updatedData = response.data.data;
-            await fetchComments();
-        } else {
-            console.log('게시글 좋아요/싫어요 누름 -> boardId:', boardId);
 
-            const response = await axios.get(`board/${boardId}`);
+        const response2 = await axios.get(`board/${boardId}/comments`);
-            const updatedData = response.data.data;
 
-            likes.value = updatedData.likeCount;
-            dislikes.value = updatedData.dislikeCount;
 
-            likeClicked.value = isLike;
+        // console.log("📥 API 응답 데이터:", response2); 
-            dislikeClicked.value = isDislike;
-            console.log('게시글 업데이트된 데이터:', updatedData);
-        }
-        
-        // const response = await axios.get(`board/${boardId}`);
-        // const updatedData = response.data.data;
 
-        // likes.value = updatedData.likeCount;
-        // dislikes.value = updatedData.dislikeCount;
 
-        // likeClicked.value = isLike;
+        likes.value = updatedData.likeCount;
-        // dislikeClicked.value = isDislike;
+        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);