refactor: 페이지 데이터 처리 개선 및 로딩 컴포넌트 수정

layers/components/atoms/loading/Full.vue

@@ -3,12 +3,13 @@ import { useLoadingStore } from '#layers/stores/useLoadingStore'
 
 const loadingStore = useLoadingStore()
 const { fullLoading } = storeToRefs(loadingStore)
+
 </script>
 
 <template>
   <Transition name="fade">
     <div v-if="fullLoading" class="spinner-container">
-      <div class="spinner-line"></div>
+      <div class="spinner"></div>
     </div>
   </Transition>
 </template>

layers/components/atoms/loading/Local.vue

@@ -16,7 +16,7 @@ const canTeleport = (localId: string) => {
     <Teleport v-if="canTeleport(localId)" :to="`#${localId}`">
       <Transition name="fade">
         <div v-if="loadingInfo.active" class="spinner-container">
-          <div class="spinner-line"></div>
+          <div class="spinner"></div>
         </div>
       </Transition>
     </Teleport>

layers/components/atoms/loading/Simple.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+interface Props {
+  isLoading?: boolean
+}
+
+const { isLoading = false } = defineProps<Props>()
+</script>
+
+<template>
+<div v-if="isLoading" class="spinner-container">
+    <div class="spinner"></div>
+</div>
+</template>
+
+<style scoped>
+.spinner-container {
+  @apply absolute inset-0 flex items-center justify-center z-[90];
+}
+.spinner {
+  @apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_black.png')];
+}
+
+[data-theme='light'] {
+  .spinner {
+    @apply bg-[url('/images/common/publisning_template_loader_white.png')];
+  }
+}
+</style>
+

layers/components/layouts/Footer.vue

@@ -3,6 +3,8 @@
     <div
       class="inner relative max-w-7xl mx-auto px-5 md:px-10 py-4 text-[12px] text-gray-400 md:px-4 md:py-9 md:text-[12px]"
     >
+    <ClientOnly>
+
       <div class="menu-area py-4 pb-4">
         <ul class="flex items-center flex-wrap gap-x-6 gap-y-2">
           <li
@@ -80,7 +82,6 @@
           </li>
         </ul>
       </div>
-
       <div class="address-area mt-4 hidden sm:block">
         <address class="not-italic text-white/50">
           <div class="row my-1.5 leading-5">
@@ -91,19 +92,19 @@
           </div>
         </address>
       </div>
-
+  
       <div class="language-area static md:absolute bottom-7 right-10 text-white mt-5 md:mt-0 md:bottom-5.5 md:right-4">
         <BlocksLanguageSwitcher />
       </div>
-
+  
       <div class="mt-6 md:mt-6 hidden sm:block">
         <div v-dompurify-html="tm('Footer_caution')" class="text-xs text-white/30"></div>
       </div>
-
+  
       <div class="copyright-area mt-6 text-[13px] text-white/50 md:mt-4">
         <span v-dompurify-html="tm('Footer_Copyright')"></span>
       </div>
-
+  
       <div class="logo-area flex mt-6 md:mt-6">
         <a
           href="https://www.smilegate.com"
@@ -129,8 +130,8 @@
           />
         </a>
       </div>
-
-      
+    </ClientOnly>
+    
     </div>
   </footer>
 </template>

layers/components/layouts/Main.vue

@@ -62,7 +62,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <main ref="mainRef" class="main">
+  <div ref="mainRef" class="main">
     <template
       v-for="(template, index) in visibleTemplates"
       :key="template.template_code ?? index"
@@ -78,12 +78,12 @@ watchEffect(() => {
       :is-show-top-btn="pageData.use_top_btn ?? false"
       :is-show-sns-btn="pageData.use_sns_btn ?? false"
     />
-  </main>
+  </div>
 </template>
 
 <style scoped>
 .main {
-  @apply relative min-h-[200px] pt-[48px] md:min-h-[300px] md:pt-[64px];
+  @apply relative min-h-[200px] pt-[48px] md:min-h-[600px] md:pt-[64px] z-[91];
 }
 
 [data-theme='light'] {