Merge branch 'main' of http://192.168.0.251:3000/localhost/localhost-front

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 {

src/App.vue

@@ -1,6 +1,7 @@
 <template>
     <component :is="layout">
         <template #content>
+            <LoadingSpinner :isLoading="loadingStore.isLoading" />
             <router-view></router-view>
         </template>
     </component>
@@ -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(() => {

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,10 +38,15 @@ $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) {

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;
         }
     }
 </style>

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 };
+});

src/views/LoadingPage.vue

@@ -1,30 +1,58 @@
 <template>
-    <div class="loading-container">
-      <div class="spinner">
-        🐰
+    <div v-if="isLoading" class="loading-overlay">
+      <div class="loading-container">
+        <div class="spinner">
+            <img src="/img/icons/loading.png" class="loading-img" />
+        </div>
+        <p class="loading-text">LOADING...</p>
       </div>
-      <p class="loading-text">잠시만 기다려 주세요...</p>
     </div>
   </template>
 
   <script setup>
+  import { defineProps } from "vue";
+
+  defineProps({
+    isLoading: Boolean, // 부모 컴포넌트에서 전달받는 로딩 상태
+  });
   </script>
 
   <style scoped>
+  /* 회색 배경으로 클릭 방지 */
+  .loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4); /* 회색 반투명 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999; /* 가장 위에 위치 */
+    pointer-events: auto; /* 모든 클릭 방지 */
+  }
+
   /* 로딩 컨테이너 */
   .loading-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100vh;
-    background-color: #f9f9f9;
+    padding: 20px;
+    background: none;
+    border-radius: 10px;
   }
 
+  .loading-img {
+    width: 80px; /* 원하는 크기로 조정 */
+    height: 80px;
+    }
+
   /* 빙글빙글 돌아가는 스피너 */
   .spinner {
     font-size: 50px;
-    animation: spin 1.2s linear infinite;
+    animation: spin 2.2s linear infinite;
   }
 
   /* 로딩 텍스트 */
@@ -32,8 +60,7 @@
     margin-top: 10px;
     font-size: 18px;
     font-weight: bold;
-    color: #555;
-    font-family: "Comic Sans MS", "Arial", sans-serif;
+    color: #ffffff;
   }
 
   /* 회전 애니메이션 */

src/views/board/BoardView.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
-        <LoadingSpinner v-if="isLoading" />
-        <div v-else class="row">
+        <div class="row">
             <div class="col">
                 <div class="card">
                     <!-- 프로필 헤더 -->
@@ -137,8 +136,6 @@
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
     import { useToastStore } from '@s/toastStore';
     import axios from '@api';
-    import LoadingSpinner from '@v/LoadingPage.vue';
-    const isLoading = ref(true);
     // 게시물 데이터 상태
     const profileName = ref('');
     const boardTitle = ref('제목 없음');
@@ -236,7 +233,6 @@
     // 게시물 상세 데이터 불러오기
     const fetchBoardDetails = async () => {
         try {
-            isLoading.value = true;
             const response = await axios.get(`board/${currentBoardId.value}`);
             const data = response.data.data;
 
@@ -254,8 +250,6 @@
             attachments.value = data.attachments || [];
         } catch (error) {
             alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
-        } finally {
-            isLoading.value = false;
         }
     };
 

src/views/voteboard/voteBoardList.vue

@@ -1,7 +1,6 @@
 <template>
 <div class="container-xxl flex-grow-1 container-p-y">
-    <LoadingSpinner v-if="isLoading" />
-    <div v-else class="row g-3">
+    <div class="row g-3">
     <div class="mt-8">
         <!-- 투표 작성  -->
         <WriteBtn @click="voteWrite"  />
@@ -52,8 +51,6 @@ import Quill from 'quill';
 import WriteBtn from '@c/button/WriteBtn.vue';
 import voteList from '@c/voteboard/voteCardList.vue';
 import { useRouter } from 'vue-router';
-import LoadingSpinner from "@v/LoadingPage.vue";
-const isLoading = ref(true);
 
 const toastStore = useToastStore();
 const category = ref('0');
@@ -81,7 +78,6 @@ const changeCheck = () =>{
 }
 //투표목록
 const getvoteList = async () => {
-    isLoading.value = true;
     const response = await $api.get('vote/getVoteList',{
         params:
         {
@@ -93,7 +89,6 @@ const getvoteList = async () => {
     if (response.data.status === "OK") {
         PageData.value = response.data.data;
         voteListCardData.value = response.data.data.list;
-        isLoading.value = false;
     }
 };
 const selectHandler = () =>{