좋아요 싫어요 버튼 수정

src/components/board/BoardCommentList.vue

@@ -8,13 +8,10 @@
             <BoardComment :comment="comment" @submitComment="addComment" />
         </li>
     </ul>
-
-    <Pagination/>
 </template>
 
 <script setup>
 import { ref } from 'vue';
-import Pagination from '../pagination/Pagination.vue';
 import BoardComment from './BoardComment.vue'
 
 const comments = ref([

src/components/board/BoardProfile.vue

@@ -38,7 +38,7 @@
                         <i class='bx bx-trash'></i>
                     </button> -->
                 </template>
-                <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false" :isRecommend="false" />
+                <BoardRecommendBtn :isRecommend="false" />
             </template>
         </div>
     </div>
@@ -50,7 +50,6 @@ import axios from '@api';
 import DeleteButton from '../button/DeleteBtn.vue';
 import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
-import { onMounted } from 'vue';
 
 // Vue Router 인스턴스
 const router = useRouter();

src/components/button/BoardRecommendBtn.vue

@@ -1,14 +1,16 @@
 <template v-if="isRecommend">
-    <button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
+    <button class="btn btn-label-primary btn-icon" :class="{'clicked': likeClicked, 'big': bigBtn}" @click="handleLike">
-        <i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
+        <i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span>
     </button>
-    <button class="btn btn-label-danger btn-icon" :class="dislikeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
+    <button class="btn btn-label-danger btn-icon" :class="{'clicked': dislikeClicked, 'big': bigBtn}" @click="handleDislike">
-        <i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
+        <i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
     </button>
 </template>
 
 <script setup>
-defineProps({
+import { ref, watch } from 'vue';
+
+const props = defineProps({
     likeClicked : {
         type : Boolean,
         default : false,
@@ -24,8 +26,65 @@ defineProps({
     isRecommend: {
         type:Boolean,
         default:true,
-    }
+    },
+    boardId: {
+        type: Number,
+        required: true,
+    },
+    commentId: {
+        type: Number,
+        default: null,
+    },
+    likeCount: {
+        type: Number,
+        default: 0,
+    },
+    dislikeCount: {
+        type: Number,
+        default: 0,
+    },
 });
+
+const emit = defineEmits(['updateReaction']);
+
+const likeClicked = ref(props.likeClicked);
+const dislikeClicked = ref(props.dislikeClicked);
+const likeCount = ref(props.likeCount);
+const dislikeCount = ref(props.dislikeCount);
+
+// 부모에서 likeCount 또는 dislikeCount가 변경되면 로컬 상태를 업데이트
+watch(() => props.likeCount, (newVal) => {
+    likeCount.value = newVal;
+});
+
+watch(() => props.dislikeCount, (newVal) => {
+    dislikeCount.value = newVal;
+});
+
+const handleLike = () => {
+    likeClicked.value = !likeClicked.value;
+    likeCount.value += likeClicked.value ? 1 : -1;
+    emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
+    if(likeClicked.value === true){
+        if(dislikeClicked.value ===  true) {
+            dislikeClicked.value = false;
+            dislikeCount.value += -1
+        }
+    }
+};
+
+const handleDislike = () => {
+    dislikeClicked.value = !dislikeClicked.value;
+    dislikeCount.value += dislikeClicked.value ? 1 : -1;
+    emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
+    if(dislikeClicked.value === true){
+        if(likeClicked.value ===  true) {
+            likeClicked.value = false;
+            likeCount.value += -1
+        }
+    }
+};
+
 </script>
 
 <style scoped>

src/views/board/BoardView.vue

@@ -5,20 +5,26 @@
                 <div class="card">
                     <!-- 프로필 헤더 -->
                     <div class="card-header">
-                        <BoardProfile :boardId="currentBoardId" :profileName="profileName" />
+                        <BoardProfile :boardId="currentBoardId" :profileName="profileName" class="pb-6 border-bottom" />
-                        <hr/>
                     </div>
                     <!-- 게시글 내용 -->
                     <div class="card-body">
                         <h5 class="mb-4">{{ boardTitle }}</h5>
                         <!-- HTML 콘텐츠 렌더링 -->
-                        <div class="board-content text-body" style="line-height: 1.6;"  v-html="$common.contentToHtml(boardContent)">
+                        <div class="board-content text-body" style="line-height: 1.6;" v-html="$common.contentToHtml(boardContent)">
 
                         </div>
                         
                         <!-- 좋아요 버튼 -->
                         <div class="row justify-content-center my-10">
-                            <BoardRecommendBtn :bigBtn="true"/>
+                            <BoardRecommendBtn
+                                :bigBtn="true"
+                                :boardId="currentBoardId"
+                                :commentId="null"
+                                :likeCount="currentLikeCount"
+                                :dislikeCount="currentDislikeCount"
+                                @updateReaction="handleUpdateReaction"
+                            />
                         </div>
 
                         <!-- 첨부파일 목록 -->
@@ -38,6 +44,8 @@
                     </div>
                     <div class="card-footer">
                         <BoardCommentList/>
+
+                        <Pagination/>
                     </div>
                 </div>
             </div>
@@ -47,19 +55,18 @@
 
 <script setup>
 import BoardComentArea from '@c/board/BoardComentArea.vue';
-import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
+import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
+import Pagination from '@/components/pagination/Pagination.vue';
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';
-import Quill from 'quill';
 
 // 게시물 데이터 상태
 const profileName = ref('익명 사용자');
 const boardTitle = ref('제목 없음');
 const boardContent = ref('');
-const convertedContent = ref('내용 없음');
 const comments = ref([]);
 const attachments = ref([]);
 
@@ -85,7 +92,6 @@ const fetchBoardDetails = async () => {
         boardTitle.value = boardDetail.title || '제목 없음';
         boardContent.value = boardDetail.content || '';
 
-
         attachments.value = data.attachments || [];
         comments.value = data.comments || [];
     } catch (error) {
@@ -94,6 +100,23 @@ const fetchBoardDetails = async () => {
     }
 };
 
+const currentLikeCount = ref(10);
+const currentDislikeCount = ref(2);
+
+// 좋아요, 싫어요
+const handleUpdateReaction = async ({ type, boardId, commentId }) => {
+    try {
+        const cmtId = commentId !== null ? commentId : 0;
+        console.log(`Sending reaction: type=${type}, boardId=${boardId}, commentId=${cmtId}`);
+        
+        const response = await axios.post(`/board/${boardId}/${cmtId}/reaction`, { type });
+        console.log('API Response:', response.data);
+    } catch (error) {
+        console.error('반응 업데이트 오류:', error.response ? error.response.data : error);
+        alert('반응을 업데이트하는 중 오류 발생');
+    }
+};
+
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
     fetchBoardDetails();