+
@@ -12,7 +13,10 @@ import { useRoute } from 'vue-router';
import NormalLayout from './layouts/NormalLayout.vue';
import NoLayout from './layouts/NoLayout.vue';
import ToastModal from '@c/modal/ToastModal.vue';
+import { useLoadingStore } from "@s/loadingStore";
+import LoadingSpinner from "@v/LoadingPage.vue";
+const loadingStore = useLoadingStore();
const route = useRoute();
const layout = computed(() => {
diff --git a/src/common/axios-interceptor.js b/src/common/axios-interceptor.js
index 46902ec..16894c5 100644
--- a/src/common/axios-interceptor.js
+++ b/src/common/axios-interceptor.js
@@ -1,6 +1,7 @@
import axios from 'axios';
import { useRoute } from 'vue-router';
import { useToastStore } from '@s/toastStore';
+import { useLoadingStore } from "@s/loadingStore";
const $api = axios.create({
baseURL: import.meta.env.VITE_API_URL,
@@ -14,6 +15,9 @@ const $api = axios.create({
*/
$api.interceptors.request.use(
function (config) {
+ const loadingStore = useLoadingStore();
+ loadingStore.startLoading();
+
let contentType = 'application/json';
if (config.isFormData) contentType = 'multipart/form-data';
@@ -24,6 +28,8 @@ $api.interceptors.request.use(
return config;
},
function (error) {
+ const loadingStore = useLoadingStore();
+ loadingStore.stopLoading();
// 요청 오류가 있는 작업 수행
return Promise.reject(error);
},
@@ -32,17 +38,22 @@ $api.interceptors.request.use(
// 응답 인터셉터 추가하기
$api.interceptors.response.use(
function (response) {
+ const loadingStore = useLoadingStore();
+ loadingStore.stopLoading();
// 2xx 범위의 응답 처리
return response;
},
function (error) {
+ const loadingStore = useLoadingStore();
+ loadingStore.stopLoading();
+
const toastStore = useToastStore();
// 오류 응답 처리
if (error.response) {
switch (error.response.status) {
case 401:
if (!error.config.headers.isLogin) {
- toastStore.onToast('인증이 필요합니다.', 'e');
+ // toastStore.onToast('인증이 필요합니다.', 'e');
}
break;
case 403:
diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index aeb2ed2..08cc241 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -18,7 +18,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 @@