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 @@ - -