From f3c5a70393b5c181ca483166ef6e66b197570b4c Mon Sep 17 00:00:00 2001
From: Dang <looks32@gmail.com>
Date: Tue, 17 Dec 2024 14:03:02 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B6=94=EC=B2=9C=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC,=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue      |  5 ++-
 src/components/board/BoardProfile.vue      | 39 ++---------------
 src/components/board/BoardRecommendBtn.vue | 49 ++++++++++++++++++++++
 3 files changed, 55 insertions(+), 38 deletions(-)
 create mode 100644 src/components/board/BoardRecommendBtn.vue

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 1045b60..5bf5977 100644
--- a/src/components/board/BoardComment.vue
+++ b/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);
 
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index c69a22d..1cd1582 100644
--- a/src/components/board/BoardProfile.vue
+++ b/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' : '' ">
-                    <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>
+                <BoardRecommendBtn :likeClicked="false" :dislikeClicked="true"/>
             </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>
\ No newline at end of file
diff --git a/src/components/board/BoardRecommendBtn.vue b/src/components/board/BoardRecommendBtn.vue
new file mode 100644
index 0000000..a9990cd
--- /dev/null
+++ b/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>
\ No newline at end of file