게시판 댓글, 프로필 수정

src/components/board/BoardComment.vue

@@ -21,7 +21,7 @@
             <BoardComentArea v-if="comment" />
         </li>
         <li>
-            <BoardProfile profileName=곤데리 :showDetail="false" :unknown="false"/>
+            <BoardProfile :showDetail="false" :unknown="false" :likeClicked="true" :dislikeClicked="true"/>
             <div class="mt-2">저도 궁금합니다.</div>
             <button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
             <BoardComentArea v-if="comment" />

src/components/board/BoardProfile.vue

@@ -32,10 +32,10 @@
                 </button>
             </template>
             <template v-else>
-                <button class="btn btn-label-primary btn-icon">
+                <button class="btn btn-label-primary btn-icon" :class=" likeClicked ? 'clicked' : '' ">
                     <i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
                 </button>
-                <button class="btn btn-label-danger btn-icon">
+                <button class="btn btn-label-danger btn-icon" :class=" dislikeClicked ? 'clicked' : '' ">
                     <i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
                 </button>
             </template>
@@ -47,7 +47,7 @@
 defineProps({
     profileName : {
         type: String,
-        required: true,
+        default: '익명',
     },
     unknown : {
         type: Boolean,
@@ -57,7 +57,17 @@ defineProps({
         type: Boolean,
         default: true,
     },
+    likeClicked : {
+        type : Boolean,
+        default : false,
+    },
+    dislikeClicked : {
+        type : Boolean,
+        default : false,
+    }
 });
+
+
 </script>
 
 <style scoped>
@@ -72,4 +82,22 @@ defineProps({
     .num {
         margin-left: 5px;
     }
+
+    .btn-label-danger.clicked {
+        background-color: #e6381a;
+    }
+
+    .btn-label-danger.clicked i,
+    .btn-label-danger.clicked span {
+        color: #fff;
+    }
+
+    .btn-label-primary.clicked {
+        background-color: #5f61e6;
+    }
+
+    .btn-label-primary.clicked i,
+    .btn-label-primary.clicked span  {
+        color : #fff;
+    }
 </style>