diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue index 36739fc..c4fa6ee 100644 --- a/src/components/button/HalfDayButtons.vue +++ b/src/components/button/HalfDayButtons.vue @@ -20,7 +20,8 @@
-
@@ -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 { - background-color: #198754; - box-shadow: 0px 4px 10px rgba(25, 135, 84, 0.4); +/* ✔ 버튼 활성화 */ +.btn-success.active { + background-color: #ff0000 !important; + 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 { - transform: scale(0.95); - box-shadow: 0px 2px 5px rgba(25, 135, 84, 0.2); +/* ✔ 버튼 비활성화 */ +.btn-success.disabled { + background-color: #bbb8b8 !important; + color: white !important; + cursor: not-allowed !important; + box-shadow: none; + transform: none; + opacity: 0.5; } diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue index 3ac8ef0..791669e 100644 --- a/src/views/board/BoardList.vue +++ b/src/views/board/BoardList.vue @@ -18,8 +18,8 @@ - - @@ -59,6 +59,7 @@ 공지 📌 {{ notice.title }} + [ {{ notice.commentCount }} ] N @@ -76,6 +77,7 @@ {{ post.id }} {{ post.title }} + [ {{ post.commentCount }} ] N @@ -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; /* 내부 패딩 */ +}