Merge branch 'main' into board-ji

src/components/board/BoardProfile.vue

@@ -33,13 +33,20 @@
             </template>
 
             <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
-            <BoardRecommendBtn v-if="isLike && !isDeletedComment" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
+            <BoardRecommendBtn
+                v-if="isLike && !isDeletedComment"
+                :boardId="boardId"
+                :comment="comment"
+                :likeClicked="comment.likeClicked"
+                :dislikeClicked="comment.dislikeClicked"
+                @updateReaction="handleUpdateReaction"
+            />
         </div>
     </div>
 </template>
 
 <script setup>
-    import { computed, defineProps, defineEmits, inject } from 'vue';
+    import { computed, defineProps, defineEmits, inject, onMounted } from 'vue';
     import DeleteButton from '../button/DeleteBtn.vue';
     import EditButton from '../button/EditBtn.vue';
     import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';

src/components/button/BoardRecommendBtn.vue

@@ -1,8 +1,16 @@
 <template v-if="isRecommend">
-    <button class="btn btn-label-primary btn-icon me-1" :class="{ clicked: likeClicked, big: bigBtn }" @click="handleLike">
+    <button
+        class="btn btn-label-primary btn-icon me-1"
+        :class="{ clicked: likeClicked, big: bigBtn, active: likeClicked }"
+        @click="handleLike"
+    >
         <i class="fa-regular fa-thumbs-up"></i> <span class="ms-1">{{ likeCount }}</span>
     </button>
-    <button class="btn btn-label-danger btn-icon" :class="{ clicked: dislikeClicked, big: bigBtn }" @click="handleDislike">
+    <button
+        class="btn btn-label-danger btn-icon"
+        :class="{ clicked: dislikeClicked, big: bigBtn, active: dislikeClicked }"
+        @click="handleDislike"
+    >
         <i class="fa-regular fa-thumbs-down"></i> <span class="ms-1">{{ dislikeCount }}</span>
     </button>
 </template>

src/views/board/BoardView.vue

@@ -78,6 +78,7 @@
                             style="line-height: 1.6"
                             v-html="$common.contentToHtml(boardContent)"
                         ></div>
+                        <div v-if="!unknown" class="my-12 py-12 pt-12"></div>
 
                         <!-- 좋아요 버튼 -->
                         <div class="row justify-content-center my-10">
@@ -272,6 +273,14 @@
             attachment.value = boardData.hasAttachment || null;
             commentNum.value = boardData.commentCount || 0;
             attachments.value = boardData.attachments || [];
+
+            if (boardData?.myReaction == 1) {
+                likeClicked.value = true;
+                dislikeClicked.value = false;
+            } else if (boardData?.myReaction == 2) {
+                likeClicked.value = false;
+                dislikeClicked.value = true;
+            }
         } else {
             toastStore.onToast(data.message, 'e');
             router.back();
@@ -332,8 +341,6 @@
                 dislikeCount: comment.dislikeCount || 0,
                 profileImg: comment.profileImg || '',
                 nickname: comment.LOCCMTNIC || '',
-                likeClicked: comment.likeClicked || false,
-                dislikeClicked: comment.dislikeClicked || false,
                 createdAtRaw: comment.LOCCMTRDT, // 작성일
                 // createdAt: formattedDate(comment.LOCCMTRDT), // 작성일(노출용)
                 // createdAtRaw: new Date(comment.LOCCMTUDT), // 수정순
@@ -342,6 +349,8 @@
                     (comment.content === '삭제된 댓글입니다' && comment.LOCCMTUDT !== comment.LOCCMTRDT ? ' (수정됨)' : ''), // 수정일(노출용)
                 children: [], // 대댓글을 담을 배열
                 updateAtRaw: comment.LOCCMTUDT,
+                likeClicked: comment.myReaction == 1,
+                dislikeClicked: comment.myReaction == 2,
             }))
             .sort((a, b) => b.createdAtRaw - a.createdAtRaw);
 

src/views/board/BoardWrite.vue

@@ -273,7 +273,6 @@
             if (attachFiles.value && attachFiles.value.length > 0) {
                 await Promise.all(
                     attachFiles.value.map(async file => {
-                        console.log(file);
                         const formData = new FormData();
                         const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, '');