From 2b7dabf27ee3634971c1541fe35cb13551a74215 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Mon, 17 Feb 2025 09:45:27 +0900
Subject: [PATCH] .

---
 src/components/board/BoardComment.vue       | 20 +++--
 src/components/board/BoardCommentList.vue   | 10 ++-
 src/components/board/BoardProfile.vue       | 22 +++++-
 src/components/button/BoardRecommendBtn.vue |  3 +-
 src/views/board/BoardView.vue               | 87 ++++++++++++---------
 5 files changed, 91 insertions(+), 51 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 90a78bb..fa85b00 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -1,23 +1,26 @@
 <template>
     <div>
         <BoardProfile
+            :boardId="comment.boardId"
             :profileName="comment.author"
             :date="comment.createdAt"
             :showDetail="false"
             :author="true"
             :isLike="!isLike"
+            @updateReaction="handleUpdateReaction"
         />
         <div class="mt-6">
             <p class="m-0">{{ comment.content }}</p>
+            <!-- <span>{{comment.commentId}}</span> -->
         </div>
         <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
         <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"
+            v-for="child in comment.children"
+            :key="child.commentId"
                 class="mt-8 pt-6 ps-10 border-top"
             >
                 <BoardComment 
@@ -25,6 +28,7 @@
                     :isPlusButton="false" 
                     :isLike="true" 
                     @submitComment="submitComment" 
+                    @updateReaction="handleUpdateReaction"
                 />
             </li>
         </ul>
@@ -64,7 +68,7 @@ const props = defineProps({
 });
 
 // emits 정의
-const emit = defineEmits(['submitComment']);
+const emit = defineEmits(['submitComment', 'updateReaction']);
 
 // 댓글 입력 창 토글
 const isComment = ref(false);
@@ -74,10 +78,16 @@ const toggleComment = () => {
 
 // 부모 컴포넌트에 대댓글 추가 요청
 const submitComment = (newComment) => {
-    emit('submitComment', { parentId: props.comment.id, ...newComment });
+    emit('submitComment', { parentId: props.comment.commentId, ...newComment });
 
     isComment.value = false;
 };
 
+// 좋아요, 싫어요
+const handleUpdateReaction = (reactionData) => {
+    console.log(`🛠 좋아요/싫어요 클릭됨:`, reactionData);
+    // emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.id, ...reactionData });
+};
+
 
 </script>
\ No newline at end of file
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index 65546c4..d751802 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -2,12 +2,13 @@
     <ul class="list-unstyled mt-10">
         <li
             v-for="comment in comments"
-            :key="comment.id"
+            :key="comment.commentId"
             class="mt-6 border-bottom pb-6"
         >
             <BoardComment
                 :comment="comment"
                 @submitComment="submitComment"
+                @updateReaction="handleUpdateReaction"
             />
         </li>
     </ul>
@@ -25,10 +26,15 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(['submitComment']);
+const emit = defineEmits(['submitComment', 'updateReaction']);
 
 const submitComment = (replyData) => {
     emit('submitComment', replyData);
 };
 
+const handleUpdateReaction = (reactionData) => {
+    console.log(`📢 부모 컴포넌트에서 이벤트 수신:`, reactionData);
+    // emit('updateReaction', { boardId: props.comment.boardId, commentId: props.comment.id, ...reactionData });
+};
+
 </script>
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 463d2e8..d818118 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -42,13 +42,13 @@
             </div>
 
             <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
-            <BoardRecommendBtn v-if="isLike" :isRecommend="false" />
+            <BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref, defineProps, computed } from 'vue';
+import { ref, defineProps, defineEmits } from 'vue';
 import { useRouter } from 'vue-router';
 import axios from '@api';
 import DeleteButton from '../button/DeleteBtn.vue';
@@ -66,7 +66,11 @@ const lastClickedButton = ref('');
 const props = defineProps({
     boardId: {
         type: Number,
-        required: true
+        required: false
+    },
+    commentId: {
+        type: Number,
+        required: false,
     },
     profileName: {
         type: String,
@@ -103,7 +107,7 @@ const props = defineProps({
     }
 });
 
-const emit = defineEmits(['togglePasswordInput']);
+const emit = defineEmits(['togglePasswordInput', 'updateReaction']);
 
 // 수정 버튼
 const handleEdit = () => {
@@ -195,6 +199,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 });
+};
+
 </script>
 
 <style scoped>
diff --git a/src/components/button/BoardRecommendBtn.vue b/src/components/button/BoardRecommendBtn.vue
index 7125374..02cdb4d 100644
--- a/src/components/button/BoardRecommendBtn.vue
+++ b/src/components/button/BoardRecommendBtn.vue
@@ -63,7 +63,8 @@ watch(() => props.dislikeCount, (newVal) => {
 
 const handleLike = () => {
     const isLike = !likeClicked.value;
-    const isDislike = false;
+    const isDislike = false; 
+    // console.log("BoardRecommendBtn.vue - commentId:", props.commentId);
     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 58f901c..8cd0974 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -128,7 +128,7 @@ const fetchBoardDetails = async () => {
         profileName.value = data.author || '익명 사용자';
         
         // 익명확인하고 싶을때
-        // profileName.value = '익명 사용자';
+        profileName.value = '익명 사용자';
         
         // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
         authorId.value = data.author;
@@ -149,6 +149,9 @@ const fetchBoardDetails = async () => {
 
 // 좋아요, 싫어요
 const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
+    console.log("🔥 좋아요/싫어요 이벤트 발생");
+    console.log("📌 게시글 ID:", boardId);
+    console.log("📌 댓글 ID:", commentId);
     try {
         await axios.post(`/board/${boardId}/${commentId}/reaction`, {
             LOCBRDSEQ: boardId,
@@ -158,16 +161,33 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
             LOCGOBBAD: isDislike ? 'T' : 'F'
         });
 
+        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;
+
+            likes.value = updatedData.likeCount;
+            dislikes.value = updatedData.dislikeCount;
+
+            likeClicked.value = isLike;
+            dislikeClicked.value = isDislike;
+            console.log('게시글 업데이트된 데이터:', updatedData);
+        }
         
-        const response = await axios.get(`board/${boardId}`);
-        console.log(response.data)
-        const updatedData = response.data.data;
+        // const response = await axios.get(`board/${boardId}`);
+        // const updatedData = response.data.data;
 
-        likes.value = updatedData.likeCount;
-        dislikes.value = updatedData.dislikeCount;
+        // likes.value = updatedData.likeCount;
+        // dislikes.value = updatedData.dislikeCount;
 
-        likeClicked.value = isLike;
-        dislikeClicked.value = isDislike;
+        // likeClicked.value = isLike;
+        // dislikeClicked.value = isDislike;
 
     } catch (error) {
         alert('반응을 업데이트하는 중 오류 발생');
@@ -180,12 +200,14 @@ 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.map(comment => ({
-            id: comment.LOCCMTSEQ, // 댓글 id
+        let allComments = response.data.data.list.map(comment => ({
+            
+            // 댓글 id
+            boardId: comment.LOCBRDSEQ,
             parentId: comment.LOCCMTPNT, // 부모 id
-            author: comment.MEMBERSEQ || "익명 사용자", // 작성자
+            author: comment.author || "익명 사용자", // 작성자
             content: comment.LOCCMTRPY, // 댓글 내용
             createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜
             children: []
@@ -197,7 +219,7 @@ const fetchComments = async () => {
         let rootComments = [];
 
         allComments.forEach(comment => {
-            commentMap[comment.id] = comment;
+            commentMap[comment.boardId] = comment;
         });
 
         allComments.forEach(comment => {
@@ -210,7 +232,7 @@ const fetchComments = async () => {
 
         comments.value = rootComments; 
 
-        // console.log("변환된 comments 데이터:", comments.value);
+        console.log("변환된 comments 데이터:", comments.value);
 
     } catch (error) {
         console.error('댓글 목록 불러오기 오류:', error);
@@ -227,7 +249,6 @@ const handleCommentSubmit = async ({ comment, password }) => {
             LOCCMTPNT: 1
         });
         // console.log('📥 서버 응답 전체:', response.data);
-        
 
         if (response.status === 200) {
             console.log('댓글 작성 성공:', response.data.message);
@@ -241,31 +262,19 @@ const handleCommentSubmit = async ({ comment, password }) => {
 };
 
 const handleCommentReply = async (reply) => {
-    // console.log("BoardView에서 대댓글 확인~~~~~~~~~~~~~~~~:", reply);
+    const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+        LOCBRDSEQ: currentBoardId.value,
+        LOCCMTRPY: reply.comment,
+        LOCCMTPWD: reply.password || null, 
+        LOCCMTPNT: reply.parentId
+    });
 
-    // 부모 댓글 찾기
-    // 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
-        });
-
-        if (response.status === 200) {
-            console.log('대댓글 작성 성공!!!!!!:', response.data.message);
-            await fetchComments();
-        } else {
-            console.error('대댓글 작성 실패ㅜㅜㅜ:', response.data.message);
-        }
-    // } else {
-    //     console.error(`부모 댓글을 찾을 수 없음: ${reply.parentId}`);
-    // }
+    if (response.status === 200) {
+        console.log('대댓글 작성 성공!!!!!!:', response.data.message);
+        await fetchComments();
+    } else {
+        console.error('대댓글 작성 실패ㅜㅜㅜ:', response.data.message);
+    }
 }
 
 // 날짜