휴가리스트 댓글개수

src/components/button/HalfDayButtons.vue

@@ -20,7 +20,8 @@
 
       <!-- 저장 버튼 -->
       <div class="save-button-container">
-        <button class="btn btn-success" @click="addVacationRequests" :disabled="isDisabled">
+        <button class="btn btn-success" @click="addVacationRequests"
+                :class="{ active: !isDisabled, disabled: isDisabled }">
           ✔
         </button>
       </div>
@@ -39,7 +40,7 @@ const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"
 const halfDayType = ref(null);
 
 const toggleHalfDay = (type) => {
-  halfDayType.value = type;
+  halfDayType.value = halfDayType.value === type ? null : type;
   emit("toggleHalfDay", halfDayType.value);
 };
 
@@ -91,7 +92,7 @@ defineExpose({ resetHalfDay });
 
 /* 선택된 (눌린) 버튼 */
 .btn.active {
-  border: 3px solid #fff;
+  border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
   box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
   transform: scale(1.1);
 }
@@ -108,7 +109,7 @@ defineExpose({ resetHalfDay });
   color: white;
 }
 
-/* ✔ 버튼 */
+/* ✔ 버튼 기본 (비활성화일 때 기본 녹색) */
 .btn-success {
   font-size: 24px;
   width: 50px;
@@ -118,18 +119,26 @@ defineExpose({ resetHalfDay });
   align-items: center;
   justify-content: center;
   transition: all 0.2s ease-in-out;
+  background-color: #871919 !important;
+  color: white;
 }
 
-/* ✔ 버튼 마우스 오버 */
+/* ✔ 버튼 활성화 */
-.btn-success:hover {
+.btn-success.active {
-  background-color: #198754;
+  background-color: #ff0000 !important;
-  box-shadow: 0px 4px 10px rgba(25, 135, 84, 0.4);
+  color: white !important;
+  border: 3px solid #eb9f9f !important;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
   transform: scale(1.1);
 }
 
-/* ✔ 버튼 클릭 */
+/* ✔ 버튼 비활성화 */
-.btn-success:active {
+.btn-success.disabled {
-  transform: scale(0.95);
+  background-color: #bbb8b8 !important;
-  box-shadow: 0px 2px 5px rgba(25, 135, 84, 0.2);
+  color: white !important;
+  cursor: not-allowed !important;
+  box-shadow: none;
+  transform: none;
+  opacity: 0.5;
 }
 </style>

src/views/board/BoardList.vue

@@ -18,8 +18,8 @@
                             <option value="50">50개씩</option>
                         </select>
 
-                         <!-- 셀렉트 박스 -->
+                        <!-- 셀렉트 박스 -->
-                         <select class="form-select w-25 w-md-100" v-model="selectedOrder" @change="handleSortChange">
+                        <select class="form-select w-25 w-md-100" v-model="selectedOrder" @change="handleSortChange">
                             <option value="date">최신날짜</option>
                             <option value="views">조회수</option>
                         </select>
@@ -59,6 +59,7 @@
                                     <td class="text-center">공지</td>
                                     <td class="cursor-pointer">
                                         📌 {{ notice.title }}
+                                        <span v-if="notice.commentCount" class="comment-count">[ {{ notice.commentCount }} ]</span>
                                         <i v-if="notice.img" class="bi bi-image me-1"></i>
                                         <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
                                         <span v-if="isNewPost(notice.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
@@ -76,6 +77,7 @@
                                 <td class="text-center">{{ post.id }}</td>
                                 <td class="cursor-pointer">
                                     {{ post.title }}
+                                    <span v-if="post.commentCount" class="comment-count">[ {{ post.commentCount }} ]</span>
                                     <i v-if="post.img" class="bi bi-image me-1"></i>
                                     <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
                                     <span v-if="isNewPost(post.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
@@ -196,7 +198,6 @@ const fetchGeneralPosts = async (page = 1) => {
 
         if (data?.data) {
             const totalPosts = data.data.total;
-
             generalList.value = data.data.list.map((post, index) => ({
                 realId: post.id,
                 id: totalPosts - ((page - 1) * selectedSize.value) - index,
@@ -206,7 +207,8 @@ const fetchGeneralPosts = async (page = 1) => {
                 date: formatDate(post.date), // 날짜 변환 적용
                 views: post.cnt || 0,
                 hasAttachment: post.hasAttachment || false,
-                img: post.firstImageUrl || null
+                img: post.firstImageUrl || null,
+                commentCount : post.commentCount
             }));
 
             pagination.value = {
@@ -246,7 +248,8 @@ const fetchNoticePosts = async () => {
                 rawDate: post.date,
                 views: post.cnt || 0,
                 hasAttachment: post.hasAttachment || false,
-                img: post.firstImageUrl || null
+                img: post.firstImageUrl || null,
+                commentCount : post.commentCount
             }));
         }
     } catch (error) {
@@ -286,4 +289,12 @@ onMounted(() => {
             width: 100% !important;
         }
     }
+    /* 댓글 개수 스타일 */
+.comment-count {
+  font-size: 0.9rem; /* 글씨 크기 증가 */
+  font-weight: bold;
+  color: #ff5733; /* 강조 색상 (붉은 계열) */
+  border-radius: 4px; /* 둥근 모서리 */
+  padding: 2px 6px; /* 내부 패딩 */
+}
 </style>