From 2cc0db21ac7211886e0dc50f23b3351c57e8073a Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 17 Mar 2025 16:04:19 +0900
Subject: [PATCH] =?UTF-8?q?btn=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css                       |  6 +++
 src/components/button/BoardRecommendBtn.vue | 53 ++-------------------
 src/components/button/HalfDayButtons.vue    |  2 -
 3 files changed, 9 insertions(+), 52 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index 504e790..9ca1ee1 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -14,6 +14,12 @@
     overflow-x: auto;
     display: block;
 }
+
+.btn.big {
+    width: 70px;
+    height: 70px;
+    font-size: 18px;
+}
 /* board end */
 
 /* 에러페이지 */
diff --git a/src/components/button/BoardRecommendBtn.vue b/src/components/button/BoardRecommendBtn.vue
index 3c951bd..28c6979 100644
--- a/src/components/button/BoardRecommendBtn.vue
+++ b/src/components/button/BoardRecommendBtn.vue
@@ -1,9 +1,9 @@
 <template v-if="isRecommend">
-    <button class="btn btn-label-primary btn-icon" :class="{ clicked: likeClicked, big: bigBtn }" @click="handleLike">
-        <i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span>
+    <button class="btn btn-label-primary btn-icon me-1" :class="{ clicked: likeClicked, big: bigBtn }" @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">
-        <i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
+        <i class="fa-regular fa-thumbs-down"></i> <span class="ms-1">{{ dislikeCount }}</span>
     </button>
 </template>
 
@@ -74,50 +74,3 @@
         likeClicked.value = false;
     };
 </script>
-
-<style scoped>
-    .btn + .btn {
-        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;
-    }
-
-    .btn {
-        width: 55px;
-        /* height: 30px; */
-    }
-
-    .btn.big {
-        width: 70px;
-        height: 70px;
-        font-size: 18px;
-    }
-
-    @media screen and (max-width: 450px) {
-        .btn {
-            width: 50px;
-            height: 20px;
-            font-size: 12px;
-        }
-    }
-</style>
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index 858731f..b706a2a 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -65,5 +65,3 @@ emit("addVacationRequests");
 defineExpose({ resetHalfDay });
 </script>
 
-<style scoped>
-</style>