From 3c5cbf5b60bbd6d8a7cfab102f6832906b1d38cc Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Thu, 19 Dec 2024 10:13:51 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EA=B0=84=EA=B2=A9=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=B2=84=ED=8A=BC=20=ED=81=AC=EA=B8=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardProfile.vue      | 13 ++++++++---
 src/components/board/BoardRecommendBtn.vue | 27 ++++++++++++++++++++--
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 178d399..7e6ef61 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="d-flex align-items-center">
+    <div class="d-flex align-items-center flex-wrap">
         <div class="d-flex align-items-center">
             <div class="avatar me-2" v-if="unknown">
                 <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
@@ -22,7 +22,7 @@
                 </div>
             </div>
         </div>
-        <div class="ms-auto">
+        <div class="ms-auto btn-area">
             <template v-if="showDetail">
                 <button class="btn btn-label-primary btn-icon">
                     <i class='bx bx-edit-alt'></i>
@@ -66,5 +66,12 @@ defineProps({
 
     .ms-auto button + button {
         margin-left: 5px;
-    } 
+    }
+
+    @media screen and  (max-width:450px) {
+        .btn-area { 
+            margin-top: 10px;
+            width: 100%;
+        }
+    }
 </style>
\ No newline at end of file
diff --git a/src/components/board/BoardRecommendBtn.vue b/src/components/board/BoardRecommendBtn.vue
index c753320..9e23989 100644
--- a/src/components/board/BoardRecommendBtn.vue
+++ b/src/components/board/BoardRecommendBtn.vue
@@ -1,8 +1,8 @@
 <template>
-    <button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '' ">
+    <button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
         <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' : '' ">
+    <button class="btn btn-label-danger btn-icon" :class="dislikeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
         <i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
     </button>
 </template>
@@ -16,6 +16,10 @@ defineProps({
     dislikeClicked : {
         type : Boolean,
         default : false,
+    },
+    bigBtn : {
+        type :Boolean,
+        default : false,
     }
 });
 </script>
@@ -46,4 +50,23 @@ defineProps({
 .btn-label-primary.clicked span  {
     color : #fff;
 }
+
+.btn {
+    width: 55px;
+    height: 55px;
+}
+
+.btn.big {
+    width: 70px;
+    height: 70px;
+    font-size: 18px;
+}
+
+@media screen and  (max-width:450px) {
+    .btn {
+        width: 50px;
+        height: 20px;
+        font-size: 12px;
+    }
+}
 </style>
\ No newline at end of file