댓글 좋아요

src/components/board/BoardComment.vue

@@ -52,17 +52,6 @@
                 />
             </li>
         </ul>
-        <!-- <ul class="list-unstyled twoDepth">
-            <li>
-                <BoardProfile profileName=곤데리2 :showDetail="false" />
-                <div class="mt-2">저도 궁금합니다.</div>
-                <BoardCommentArea v-if="comment" />
-            </li>
-        </ul> -->
-        <!-- <BoardProfile profileName=곤데리 :showDetail="false" />
-        <div class="mt-2">저도 궁금합니다.</div>
-        <PlusButton  @click="toggleComment"/>
-        <BoardCommentArea v-if="comment" /> -->
     </div>
 </template>
 
@@ -73,30 +62,30 @@ import BoardCommentArea from './BoardCommentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';
 
 const props = defineProps({
-  comment: {
+    comment: {
-    type: Object,
+        type: Object,
-    required: true,
+        required: true,
-  },
+    },
-  unknown: {
+    unknown: {
+            type: Boolean,
+            default: true,
+        },
+    isPlusButton: {
         type: Boolean,
         default: true,
     },
-  isPlusButton: {
+    isLike: {
-    type: Boolean,
+        type: Boolean,
-    default: true,
+        default: false,
-  },
+    },
-  isLike: {
+    isEditTextarea: {
-    type: Boolean,
+        type: Boolean,
-    default: false,
+        default: false
-  },
+    },
-  isEditTextarea: {
+    isPassword: {
-    type: Boolean,
+        type: Boolean,
-    default: false
+        default: false,
-  },
+    },
-  isPassword: {
-    type: Boolean,
-    default: false,
-},
 });
 
 // emits 정의
@@ -117,11 +106,28 @@ const submitComment = (newComment) => {
 
 // 좋아요, 싫어요
 const handleUpdateReaction = (reactionData) => {
+    // console.log('📌 BoardComment.vue에서 좋아요 이벤트 발생:', reactionData);
+
+    // if (!reactionData.commentId) {
+    //     console.log("⚠️ reactionData.commentId가 존재하지 않음! 이 값이 null이 되어 덮어씌워질 가능성이 있음.");
+    // }
+
+    // console.log('🟢 BoardComment.vue의 props.comment:', props.comment);
+    // console.log('🟢 BoardComment.vue의 commentId:', props.comment.commentId);
+
+    // console.log('🔍 emit 하기 전 reactionData:', {
+    //     boardId: props.comment.boardId,
+    //     commentId: props.comment.commentId,
+    //     ...reactionData
+    // });
+
     emit('updateReaction', {
         boardId: props.comment.boardId,
-        commentId: props.comment.commentId,
+        commentId: props.comment.commentId || reactionData.commentId, // 기존 reactionData에 commentId가 없으면 props.comment.commentId 사용
-        ...reactionData
+        ...reactionData,
     });
+
+    // console.log('🚀 emit 완료!');
 };
 
 // 수정

src/components/board/BoardCommentList.vue

@@ -13,9 +13,8 @@
                 @deleteClick="deleteClick"
                 @submitPassword="submitPassword"
                 @submitComment="submitComment"
-                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId)"
+                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
             />
-                <!-- @updateReaction="handleUpdateReaction" -->
         </li>
     </ul>
 </template>
@@ -46,17 +45,13 @@ const submitComment = (replyData) => {
     emit('submitComment', replyData);
 };
 
-const handleUpdateReaction = (reactionData, commentId) => {
+const handleUpdateReaction = (reactionData, commentId, boardId) => {
-    // console.log('📢 BoardCommentList에서 이벤트 수신:', reactionData);
-    // console.log('📌 전달할 댓글 ID>>>>:', commentId);
-
     const updatedReactionData = {
         ...reactionData,  
-        commentId: commentId
+        commentId: commentId || reactionData.commentId, 
+        boardId: boardId || reactionData.boardId,
     };
 
-    // console.log('🚀 최종 전달할 데이터:', updatedReactionData);
-
     emit('updateReaction', updatedReactionData);
 }
 

src/components/board/BoardProfile.vue

@@ -31,9 +31,10 @@
             <BoardRecommendBtn
                 v-if="isLike"
                 :boardId="boardId"
-                :comment="props.comment"
+                :comment="comment"
                 @updateReaction="handleUpdateReaction"
-            />
+            >
+            </BoardRecommendBtn>
         </div>
     </div>
 </template>

src/components/button/BoardRecommendBtn.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, computed } from 'vue';
 
 const props = defineProps({
     comment: {
@@ -53,22 +53,13 @@ const emit = defineEmits(['updateReaction']);
 
 const likeClicked = ref(props.likeClicked);
 const dislikeClicked = ref(props.dislikeClicked);
-const likeCount = ref(props.likeCount);
+const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
-const dislikeCount = ref(props.dislikeCount);
+const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
-
-// 부모에서 likeCount 또는 dislikeCount가 변경되면 로컬 상태를 업데이트
-watch(() => props.likeCount, (newVal) => {
-    likeCount.value = newVal;
-});
-
-watch(() => props.dislikeCount, (newVal) => {
-    dislikeCount.value = newVal;
-});
 
 const handleLike = () => {
     const isLike = !likeClicked.value;
     const isDislike = false; 
-    // console.log('좋아용')
+
     emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
     likeClicked.value = isLike;
     dislikeClicked.value = false;
@@ -77,6 +68,7 @@ const handleLike = () => {
 const handleDislike = () => {
     const isDislike = !dislikeClicked.value;
     const isLike = false;
+
     emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
     dislikeClicked.value = isDislike;
     likeClicked.value = false;

src/views/board/BoardView.vue

@@ -101,7 +101,7 @@
                             :isEditTextarea="isEditTextarea"
                             @editClick="editClick"
                             @deleteClick="deleteClick"
-                            @updateReaction="handleUpdateReaction"
+                            @updateReaction="handleCommentReaction"
                             @submitComment="handleCommentReply"
                         />
                         <Pagination
@@ -206,15 +206,13 @@ const fetchBoardDetails = async () => {
 // 좋아요, 싫어요
 const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
     try {
-        const aa = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
+        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); 
-
 
         const response = await axios.get(`board/${boardId}`);
         const updatedData = response.data.data;
@@ -226,11 +224,36 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
         dislikeClicked.value = isDislike;
         // console.log(updatedData)
 
+        // console.log("갱신된 데이터:", updatedData);
+
     } catch (error) {
         alert('반응을 업데이트하는 중 오류 발생');
     }
 };
 
+
+// 대댓글 좋아요
+const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
+    if (!commentId) return; // 댓글 ID가 없으면 실행 안 함
+
+    try {
+        const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
+            LOCBRDSEQ: boardId,  // 게시글 ID
+            LOCCMTSEQ: commentId, // 댓글 ID
+            LOCGOBGOD: isLike ? 'T' : 'F',
+            LOCGOBBAD: isDislike ? 'T' : 'F'
+        });
+
+        console.log("댓글 좋아요 API 응답 데이터:", response.data);
+
+        // 좋아요/싫어요 상태 업데이트를 위해 새로 불러오기
+        await fetchComments();
+
+    } catch (error) {
+        alert('댓글 반응을 업데이트하는 중 오류 발생');
+    }
+};
+
 // 댓글 목록 조회
 const fetchComments = async (page  = 1) => {
     try {
@@ -240,12 +263,14 @@ const fetchComments = async (page  = 1) => {
                 page
             }
         });
-        const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
-            params: { LOCBRDSEQ: currentBoardId.value }
-        });
 
-        console.log("댓글:", response.data); 
+
-        console.log("대댓글:", replyResponse.data);
+        // const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
+        //     params: { LOCBRDSEQ: currentBoardId.value }
+        // });
+
+        // console.log("댓글:", response.data); 
+        // console.log("대댓글:", replyResponse.data);
 
         comments.value = response.data.data.list.map(comment => ({
             commentId: comment.LOCCMTSEQ, // 댓글 ID
@@ -253,11 +278,17 @@ const fetchComments = async (page  = 1) => {
             parentId: comment.LOCCMTPNT, // 부모 ID
             author: comment.author || "익명 사용자",
             content: comment.LOCCMTRPY,
+            likeCount: comment.likeCount || 0,
+            dislikeCount: comment.dislikeCount || 0,
+            likeClicked: comment.likeClicked || false,
+            dislikeClicked: comment.dislikeClicked || false,
             createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
             createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
             children: [] // 대댓글을 담을 배열
         }));
 
+        // console.log("변환 후 comments.value:", comments.value);
+
         pagination.value = {
             ...pagination.value,
             currentPage: response.data.data.pageNum,  // 현재 페이지 번호
@@ -274,6 +305,7 @@ const fetchComments = async (page  = 1) => {
             navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
         };
 
+
     } catch (error) {
         console.log('댓글 목록 불러오기 오류:', error);
     }
@@ -288,7 +320,7 @@ const handleCommentSubmit = async ({ comment, password }) => {
             LOCCMTPWD: password || null,
             LOCCMTPNT: 1
         });
-        // console.log('📥 서버 응답 전체:', response.data);
+        // console.log('서버 응답 전체:', response.data);
 
         if (response.status === 200) {
             console.log('댓글 작성 성공:', response.data.message);
@@ -301,6 +333,8 @@ const handleCommentSubmit = async ({ comment, password }) => {
     }
 };
 
+
+// 대댓글 작성
 const handleCommentReply = async (reply) => {
     const response = await axios.post(`board/${currentBoardId.value}/comment`, {
         LOCBRDSEQ: currentBoardId.value,