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

layers/components/atoms/loading/Full.vue

@@ -6,8 +6,8 @@ const { fullLoading } = storeToRefs(loadingStore)
 </script>
 
 <template>
-  <Transition name="fade">
-    <div v-if="fullLoading" class="spinner-wrap">
+  <Transition name="fade-out">
+    <div v-show="fullLoading" class="spinner-wrap">
       <div class="spinner"></div>
     </div>
   </Transition>
@@ -15,7 +15,7 @@ const { fullLoading } = storeToRefs(loadingStore)
 
 <style scoped>
 .spinner-wrap {
-  @apply fixed inset-0 bg-black/90 flex items-center justify-center z-[150];
+  @apply fixed inset-0 bg-black pt-[96px] flex items-center justify-center sm:pt-[112px] z-[150];
 }
 .spinner {
   @apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_black.png')];

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>