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

layers/components/layouts/Main.vue

@@ -15,18 +15,21 @@ const props = defineProps<Props>()
 const mainContentRef = ref<HTMLElement>()
 
 const { locale } = useI18n()
-const { getTemplateComponent } = useTemplateRegistry()
 const { height: viewportH } = useWindowSize()
 const { bottom: mainBottom } = useElementBounding(mainContentRef)
+const { getTemplateComponent } = useTemplateRegistry()
+const loadingStore = useLoadingStore()
+
+const { isPAssApiLoading, hasApiCallStarted } = storeToRefs(loadingStore)
+
+// 개별 메타 태그 표시 여부 확인
+const shouldShowMetaTag = computed(() => props.pageData?.meta_tag_type === 2)
 
 const pinToMain = computed(() => {
   if (!mainBottom.value) return false
   return mainBottom.value <= viewportH.value
 })
 
-// 개별 메타 태그 표시 여부 확인
-const shouldShowMetaTag = computed(() => props.pageData?.meta_tag_type === 2)
-
 // 템플릿 표시 여부 확인
 const isTemplateVisible = (template: PageDataTemplate): boolean => {
   return Boolean(
@@ -59,11 +62,6 @@ const setupSeoMeta = (metaTag: PageDataMetaTag) => {
 
 provide('pinToMain', pinToMain)
 
-onMounted(() => {
-  const { sendLog } = useAnalytics()
-  sendLog(locale.value, useAnalyticsLogDataDirect('view', 1))
-})
-
 // 메타 태그 설정 감시
 watchEffect(() => {
   if (shouldShowMetaTag.value && props.pageData?.meta_tag_json) {
@@ -71,8 +69,20 @@ watchEffect(() => {
   }
 })
 
-// const loadingStore = useLoadingStore()
-// loadingStore.startFullLoading()
+watch(isPAssApiLoading, newVal => {
+  if (newVal) {
+    loadingStore.stopFullLoading()
+  }
+})
+
+onMounted(() => {
+  const { sendLog } = useAnalytics()
+  sendLog(locale.value, useAnalyticsLogDataDirect('view', 1))
+
+  if (!hasApiCallStarted.value) {
+    loadingStore.stopFullLoading()
+  }
+})
 </script>
 
 <template>