feat. 페이지 호출시 로딩 적용

layers/stores/useLoadingStore.ts

@@ -2,29 +2,42 @@ import { defineStore } from 'pinia'
 
 export const useLoadingStore = defineStore('loadingStore', () => {
   // 글로벌 로딩 표기
-  const fullLoading = ref(false)
+  const fullLoading = ref(true)
+  const hasApiCallStarted = ref(false)
+  const isPAssApiLoading = ref(false)
   // 컴포넌트별 로딩 표기 - Map 대신 일반 객체 사용
   const localLoadings = ref<Record<string, { active: boolean }>>({})
-  // 로딩 상태만 표기
-  const isLoading = ref(false)
 
   /**
-   * 모든 로딩 상태 초기화
+   * 로딩 상태 초기화
    */
   const initializeStore = () => {
-    fullLoading.value = false
     localLoadings.value = {}
+    hasApiCallStarted.value = false
+    isPAssApiLoading.value = false
   }
 
   /**
    * Full 로딩
    */
   const startFullLoading = () => {
+    startApiLoading()
     fullLoading.value = true
   }
+  const startApiLoading = () => {
+    hasApiCallStarted.value = true
+    isPAssApiLoading.value = false
+  }
 
   const stopFullLoading = () => {
-    fullLoading.value = false
+    if (!hasApiCallStarted.value || isPAssApiLoading.value) {
+      fullLoading.value = false
+    }
+  }
+  const finishApiLoading = () => {
+    setTimeout(() => {
+      isPAssApiLoading.value = true
+    }, 300)
   }
 
   /**
@@ -44,24 +57,19 @@ export const useLoadingStore = defineStore('loadingStore', () => {
     return !!localLoadings.value[localId]?.active
   }
 
-  /**
-   * 로딩 상태 변경
-   */
-  const setLoading = (state: boolean) => {
-    isLoading.value = state
-  }
-
   return {
     fullLoading,
     localLoadings,
-    isLoading,
+    hasApiCallStarted,
+    isPAssApiLoading,
 
+    startApiLoading,
+    finishApiLoading,
     initializeStore,
     startFullLoading,
     stopFullLoading,
     startLocalLoading,
     stopLocalLoading,
     isLocalLoading,
-    setLoading,
   }
 })