추천 컴포넌트 분리, 페이지네이션 추가

src/components/board/BoardComment.vue

@@ -21,13 +21,13 @@
             <BoardComentArea v-if="comment" />
         </li>
         <li>
-            <BoardProfile :showDetail="false" :unknown="false" :likeClicked="true" :dislikeClicked="true"/>
+            <BoardProfile :showDetail="false" :unknown="false" />
             <div class="mt-2">저도 궁금합니다.</div>
             <button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
             <BoardComentArea v-if="comment" />
         </li>
     </ul>
-    <div>페이지네이션2</div>
+    <Pagination/>
 </template>
 
 <script setup>
@@ -35,6 +35,7 @@
 import BoardProfile from './BoardProfile.vue';
 import BoardComentArea from './BoardComentArea.vue';
 import { ref, computed } from 'vue';
+import Pagination from '../pagination/Pagination.vue';
 
 const comment = ref(false);
 

src/components/board/BoardProfile.vue

@@ -32,18 +32,15 @@
                 </button>
             </template>
             <template v-else>
-                <button class="btn btn-label-primary btn-icon" :class=" likeClicked ? 'clicked' : '' ">
+                <BoardRecommendBtn :likeClicked="false" :dislikeClicked="true"/>
-                    <i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
-                </button>
-                <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>
         </div>
     </div>
 </template>
 
 <script setup>
+import BoardRecommendBtn from './BoardRecommendBtn.vue';
+
 defineProps({
     profileName : {
         type: String,
@@ -56,14 +53,6 @@ defineProps({
     showDetail : {
         type: Boolean,
         default: true,
-    },
-    likeClicked : {
-        type : Boolean,
-        default : false,
-    },
-    dislikeClicked : {
-        type : Boolean,
-        default : false,
     }
 });
 
@@ -78,26 +67,4 @@ defineProps({
     .ms-auto button + button {
         margin-left: 5px;
     } 
-
-    .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>

src/components/board/BoardRecommendBtn.vue

@@ -0,0 +1,49 @@
+<template>
+    <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" :class="dislikeClicked ? 'clicked' : '' ">
+        <i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
+    </button>
+</template>
+
+<script setup>
+defineProps({
+    likeClicked : {
+        type : Boolean,
+        default : false,
+    },
+    dislikeClicked : {
+        type : Boolean,
+        default : false,
+    }
+});
+</script>
+
+<style scoped>
+.ms-auto button + button {
+    margin-left: 5px;
+} 
+
+.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>