diff --git a/public/css/custom.css b/public/css/custom.css index b62da32..e9d477a 100644 --- a/public/css/custom.css +++ b/public/css/custom.css @@ -22,7 +22,7 @@ border-radius: 2px !important; font-size: 0px !important; } -/* 연차 그래프 (풀풀) */ +/* 연차 그래프 (풀) */ .fc-daygrid-event.full-day { width: 100% !important; height: 8px !important; @@ -44,7 +44,7 @@ .fc-daygrid-day-number { margin-right: auto; } -/* 데이트피커 뾰족없게게 */ +/* 데이트피커 뾰족없게 */ .flatpickr-calendar:before, .flatpickr-calendar:after { display: none !important; @@ -65,12 +65,10 @@ background-color: rgba(0, 0, 0, 0.05); /* 연한 배경 효과 */ /* 주말 (토요일, 일요일) 및 공휴일 */ .fc-day-sat-sun { cursor: not-allowed !important; -opacity: 0.6; /* 흐려 보이게 */ } /* 과거 날짜 (오늘 이전) */ .fc-daygrid-day.past { cursor: not-allowed !important; -opacity: 0.6; /* 흐려 보이게 */ } /* 기본 이벤트 스타일 */ .fc-daygrid-event { @@ -213,7 +211,7 @@ opacity: 0.6; /* 흐려 보이게 */ justify-content: flex-start; gap: 10px; padding: 0; - margin-left: 20px; + margin-left: 12%; } .profile-img { transition: all 0.2s ease-in-out; @@ -252,20 +250,19 @@ opacity: 0.6; /* 흐려 보이게 */ } /* 선택된 (눌린) 버튼 */ .vac-btn.active { - border: 3px solid #ff0000; /* 붉은색 테두리 적용 */ - box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); + box-shadow: 0px 4px 15px rgba(224, 224, 224, 0.3); transform: scale(1.1); } .vac-btn-warning{ color: #fff; - background-color: #ffab00; - border-color: #ffab00; + background-color: #ffc144; + border-color: #ffe605; box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 171, 0, 0.4); } /* AM 버튼 (선택된 상태) */ .vac-btn-warning.active { - background-color: #ffca2c !important; - color: black; + background-color: #ff7300 !important; + color: #fff;; } .vac-btn-info { color: #fff; @@ -279,7 +276,7 @@ opacity: 0.6; /* 흐려 보이게 */ color: white; } /* 버튼 기본 (비활성화일 때 기본 녹색) */ -.btn-success { +.vac-btn-success { font-size: 24px; width: 50px; height: 50px; @@ -294,7 +291,7 @@ opacity: 0.6; /* 흐려 보이게 */ border: 1px solid transparent; } /* 버튼 활성화 */ -.btn-success.active { +.vac-btn-success.active { background-color: #ff0000 !important; color: white !important; border: 3px solid #eb9f9f !important; @@ -302,7 +299,8 @@ opacity: 0.6; /* 흐려 보이게 */ transform: scale(1.1); } /* 버튼 비활성화 */ -.btn-success.disabled { +.vac-btn-success.disabled { + border: 3px solid #e6e4e4; /* 붉은색 테두리 적용 */ background-color: #bbb8b8 !important; color: white !important; cursor: not-allowed !important; @@ -353,7 +351,7 @@ opacity: 0.6; /* 흐려 보이게 */ height: 40px; font-size: 18px; } - .btn-success { + .vac-btn-success { font-size: 20px; width: 40px; height: 40px; diff --git a/public/img/icons/loading.png b/public/img/icons/loading.png new file mode 100644 index 0000000..1239faa Binary files /dev/null and b/public/img/icons/loading.png differ diff --git a/src/App.vue b/src/App.vue index 6bc4eb2..6336504 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,6 +1,7 @@ - diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue index 7fa0981..1d7b593 100644 --- a/src/components/vacation/ProfileList.vue +++ b/src/components/vacation/ProfileList.vue @@ -86,15 +86,15 @@ const profileSize = computed(() => { const totalUsers = userList.value.length; if (windowWidth.value >= 1650) { - if (totalUsers <= 10) return "68px"; - if (totalUsers <= 15) return "55px"; + if (totalUsers <= 10) return "60px"; + if (totalUsers <= 15) return "53px"; return "45px"; -} else if (windowWidth.value >= 1300) { - if (totalUsers <= 10) return "45px"; - if (totalUsers <= 15) return "40px"; - return "30px"; +} else if (windowWidth.value >= 1400) { + if (totalUsers <= 10) return "48px"; + if (totalUsers <= 15) return "30px"; + return "20px"; } else if (windowWidth.value >= 1024) { - if (totalUsers <= 10) return "40px"; + if (totalUsers <= 10) return "35px"; if (totalUsers <= 15) return "30px"; return "20px"; } else { diff --git a/src/layouts/NormalLayout.vue b/src/layouts/NormalLayout.vue index f07eb7e..0f92a67 100644 --- a/src/layouts/NormalLayout.vue +++ b/src/layouts/NormalLayout.vue @@ -63,8 +63,8 @@ margin-left: 260px; width: auto !important; min-width: auto !important; - right: 24px !important; - left: 24px !important; + right: 26px !important; + left: 26px !important; } /* 탑바 범위조정(1200px 이하) */ @@ -75,8 +75,8 @@ margin-left: 0px; width: auto !important; min-width: auto !important; - right: 24px !important; - left: 24px !important; + right: 26px !important; + left: 26px !important; } } @@ -88,8 +88,8 @@ margin-left: 0px; width: auto !important; min-width: auto !important; - right: 24px !important; - left: 24px !important; + right: 26px !important; + left: 26px !important; } } diff --git a/src/stores/loadingStore.js b/src/stores/loadingStore.js new file mode 100644 index 0000000..7d12a61 --- /dev/null +++ b/src/stores/loadingStore.js @@ -0,0 +1,22 @@ +import { defineStore } from "pinia"; +import { ref, computed } from "vue"; + +export const useLoadingStore = defineStore("loading", () => { + const loadingCount = ref(0); // 요청 개수를 추적 + + const startLoading = () => { + loadingCount.value++; + }; + + const stopLoading = () => { + if (loadingCount.value > 0) { + setTimeout(() => { + loadingCount.value--; + }, 200); // 약간의 지연을 추가하여 응답이 동시에 도착해도 안정적으로 감소 + } + }; + + const isLoading = computed(() => loadingCount.value > 0); // 하나라도 요청이 있으면 로딩 활성화 + + return { isLoading, startLoading, stopLoading }; +}); diff --git a/src/views/LoadingPage.vue b/src/views/LoadingPage.vue index fccf619..a941dbe 100644 --- a/src/views/LoadingPage.vue +++ b/src/views/LoadingPage.vue @@ -1,30 +1,58 @@