From 41ae618a5feb3be4d561bbf7078bc8ecc923a20e Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Thu, 13 Nov 2025 17:47:40 +0900
Subject: [PATCH] =?UTF-8?q?feat.=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=98=B8?=
 =?UTF-8?q?=EC=B6=9C=EC=8B=9C=20=EB=A1=9C=EB=94=A9=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/assets/css/components/_baseContent.css | 93 +++++++++++++++++++
 layers/components/atoms/loading/Full.vue      |  6 +-
 layers/components/layouts/Main.vue            | 32 ++++---
 layers/middleware/pageData.global.ts          | 77 ++++++++-------
 layers/stores/useLoadingStore.ts              | 38 +++++---
 layers/templates/FxSecure01/index.vue         |  1 +
 layers/utils/apiUtil.ts                       | 12 +--
 7 files changed, 189 insertions(+), 70 deletions(-)
 create mode 100644 layers/assets/css/components/_baseContent.css

diff --git a/layers/assets/css/components/_baseContent.css b/layers/assets/css/components/_baseContent.css
new file mode 100644
index 0000000..18e1b17
--- /dev/null
+++ b/layers/assets/css/components/_baseContent.css
@@ -0,0 +1,93 @@
+/* 에디터 콘텐츠 기본 스타일 유틸리티 */
+/* use-base 클래스를 추가하면 하위 자식 요소들에 기본 스타일이 적용됩니다 */
+@layer components {
+  .use-base ul,
+  .use-base ol {
+    @apply list-disc pl-6;
+  }
+  .use-base ol {
+    @apply list-decimal;
+  }
+  .use-base ul ul,
+  .use-base ol ol,
+  .use-base ul ol,
+  .use-base ol ul {
+    @apply mb-0;
+  }
+
+  .use-base table {
+    @apply w-full border-collapse;
+  }
+  .use-base thead {
+    @apply bg-gray-100;
+  }
+  .use-base th,
+  .use-base td {
+    @apply border border-gray-300 px-4 py-2 text-left;
+  }
+  .use-base th {
+    @apply font-semibold bg-gray-50;
+  }
+  .use-base tbody tr:nth-child(even) {
+    @apply bg-gray-50;
+  }
+
+  .use-base blockquote {
+    @apply border-l-4 border-gray-300 pl-4 italic text-gray-700;
+  }
+
+  .use-base h1 {
+    @apply text-2xl;
+  }
+  .use-base h2 {
+    @apply text-xl;
+  }
+  .use-base h3 {
+    @apply text-lg;
+  }
+  .use-base h4 {
+    @apply text-base;
+  }
+  .use-base h5 {
+    @apply text-sm;
+  }
+  .use-base h6 {
+    @apply text-xs;
+  }
+
+  .use-base strong,
+  .use-base b {
+    @apply font-bold;
+  }
+  .use-base em,
+  .use-base i {
+    @apply italic;
+  }
+  .use-base u {
+    @apply underline;
+  }
+  .use-base s {
+    @apply line-through;
+  }
+
+  .use-base a {
+    @apply text-blue-600 underline;
+  }
+  .use-base a:hover {
+    @apply text-blue-800;
+  }
+
+  .use-base img {
+    @apply max-w-full h-auto my-4;
+  }
+
+  .use-base pre {
+    @apply bg-gray-100 p-4 rounded overflow-x-auto mb-4;
+  }
+  .use-base code {
+    @apply bg-gray-100 px-1 py-0.5 rounded text-sm;
+  }
+  .use-base pre code {
+    @apply bg-transparent p-0;
+  }
+}
diff --git a/layers/components/atoms/loading/Full.vue b/layers/components/atoms/loading/Full.vue
index ab08e97..ef034d4 100644
--- a/layers/components/atoms/loading/Full.vue
+++ b/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')];
diff --git a/layers/components/layouts/Main.vue b/layers/components/layouts/Main.vue
index f78e099..d197463 100644
--- a/layers/components/layouts/Main.vue
+++ b/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>
diff --git a/layers/middleware/pageData.global.ts b/layers/middleware/pageData.global.ts
index 4dcc817..7e14a2e 100644
--- a/layers/middleware/pageData.global.ts
+++ b/layers/middleware/pageData.global.ts
@@ -1,9 +1,9 @@
 import { commonFetch } from '#layers/utils/apiUtil'
 import { usePageDataStore } from '#layers/stores/usePageDataStore'
+import { useLoadingStore } from '#layers/stores/useLoadingStore'
 import { useGetGameDomain } from '#layers/composables/useGetGameDomain'
 import { usePathResolver } from '#layers/composables/usePathResolver'
 import type { PageDataResponse } from '#layers/types/api/pageData'
-import type { GameDataValue } from '#layers/types/api/gameData'
 
 export default defineNuxtRouteMiddleware(async (to, _from) => {
   // client에서만 동작되도록 처리
@@ -13,24 +13,25 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
   const stoveApiBaseUrl = runtimeConfig.public.stoveApiUrl
   const apiUrl = `${stoveApiBaseUrl}/pub-comm/v2.0/template/page`
 
-  const store = usePageDataStore()
-  const gameDomain = useGetGameDomain()
-  const { getPathAfterLanguage } = usePathResolver()
-  const headers = useRequestHeaders()
   const gameDataStore = useGameDataStore()
-  const gameData = gameDataStore.gameData as GameDataValue
+  const pageDataStore = usePageDataStore()
+  const loadingStore = useLoadingStore()
+  const gameDomain = useGetGameDomain()
+  const headers = useRequestHeaders()
+  const { getPathAfterLanguage } = usePathResolver()
+
+  const { gameData } = storeToRefs(gameDataStore)
 
   const langCode = ssrGetFinalLocale(
     to.path,
     headers,
-    gameData?.lang_codes,
-    gameData?.default_lang_code
+    gameData.value?.lang_codes,
+    gameData.value?.default_lang_code
   )
 
   try {
-    
     if (to.path.includes('inspection')) {
-      console.log("🚀 ~ 점검페이지 접근 pageData.global")
+      console.log('🚀 ~ 점검페이지 접근 pageData.global')
       return
     }
 
@@ -42,10 +43,18 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
     }
 
     // pageUrl이 빈값이거나 null이면 /brand로 리다이렉트
-    if (!pageUrl || pageUrl === '' || pageUrl === '/' || pageUrl === `/${langCode}/`) {
+    if (
+      !pageUrl ||
+      pageUrl === '' ||
+      pageUrl === '/' ||
+      pageUrl === `/${langCode}/`
+    ) {
       return navigateTo(`/${langCode}/brand`, { external: false })
     }
 
+    // 페이지 이동 시 로딩 시작
+    loadingStore.startFullLoading()
+
     const accessToken = csrGetAccessToken()
 
     const headers = {
@@ -54,7 +63,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
 
     // 쿼리스트링에서 f 파라미터 값 추출 (CSR용)
     const fValue = (to.query.f as string) || ''
-    
+
     // 미리보기 API 호출 처리
     let finalGameDomain = gameDomain
     if (fValue === 'preview') {
@@ -71,17 +80,16 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
     const response = (await commonFetch('GET', apiUrl, {
       headers,
       query: queryParams,
-      loading: true,
     })) as PageDataResponse | null
     console.log('🚀 ~ pageData.global response:', response.value)
 
     // 페이지 접근 권한 설정(로그인 유무)
-    if(response?.value?.is_login_required === 1 && !accessToken) {
+    if (response?.value?.is_login_required === 1 && !accessToken) {
       // 로그인 레이어 팝업 띄워주기
       const nuxtApp = useNuxtApp()
       const modalStore = useModalStore()
       const $i18n = nuxtApp.$i18n as any
-      const {tm} = $i18n
+      const { tm } = $i18n
       modalStore.handleOpenConfirm({
         contentText: tm('Alert_StoveLogin'),
         confirmButtonText: tm('Text_StoveLogin'),
@@ -91,34 +99,37 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
       })
     }
 
-    if(response?.code === 91003) {
+    if (response?.code === 91003) {
       // return navigateTo(`/${langCode}/error`, { external: false })
       //클릭한 주소는 주소표시줄에 표시하도록 수정
       window.history.replaceState({}, '', to.path)
-      // 뒤로가기 이동 시 이전 페이지로 이동되도록 수정      
-      showError(createError({
-        statusCode: 404,
-        statusMessage: '페이지를 찾을 수 없어요.',
-        fatal: false,                // 즉시 에러 페이지로
-        data: { reason: 'post-not-found' }
-      }))
-
+      // 뒤로가기 이동 시 이전 페이지로 이동되도록 수정
+      showError(
+        createError({
+          statusCode: 404,
+          statusMessage: '페이지를 찾을 수 없어요.',
+          fatal: false, // 즉시 에러 페이지로
+          data: { reason: 'post-not-found' },
+        })
+      )
     }
 
     if (response?.code === 0 && 'value' in response) {
-      store.setPageData(response.value)
+      pageDataStore.setPageData(response.value)
     } else {
-      store.clearPageData()
+      pageDataStore.clearPageData()
     }
   } catch (error) {
     console.error(error)
-    store.clearPageData()
+    pageDataStore.clearPageData()
 
-    showError(createError({
-      statusCode: error.statusCode,
-      statusMessage: error.message,
-      fatal: false,                // 즉시 에러 페이지로
-      data: { reason: 'post-not-found' }
-    }))
+    showError(
+      createError({
+        statusCode: error.statusCode,
+        statusMessage: error.message,
+        fatal: false, // 즉시 에러 페이지로
+        data: { reason: 'post-not-found' },
+      })
+    )
   }
 })
diff --git a/layers/stores/useLoadingStore.ts b/layers/stores/useLoadingStore.ts
index 01d8190..5df4fb1 100644
--- a/layers/stores/useLoadingStore.ts
+++ b/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,
   }
 })
diff --git a/layers/templates/FxSecure01/index.vue b/layers/templates/FxSecure01/index.vue
index e000a96..612a64b 100644
--- a/layers/templates/FxSecure01/index.vue
+++ b/layers/templates/FxSecure01/index.vue
@@ -68,6 +68,7 @@ const fnGetSecuritySetting = async () => {
   try {
     const result = await commonFetch('GET', `${apiBase}/security/setting`, {
       headers,
+      loading: true,
     })
 
     if (result?.code === 0 && Array.isArray(result.value)) {
diff --git a/layers/utils/apiUtil.ts b/layers/utils/apiUtil.ts
index 2a1476b..410474c 100644
--- a/layers/utils/apiUtil.ts
+++ b/layers/utils/apiUtil.ts
@@ -20,12 +20,8 @@ const startLoading = (
 ) => {
   if (!loadingStore) return
 
-  loadingStore.setLoading(true)
-
   if (typeof loading === 'object' && loading.localId) {
     loadingStore.startLocalLoading(loading.localId)
-  } else if (typeof loading === 'boolean') {
-    loadingStore.startFullLoading()
   }
 }
 
@@ -38,12 +34,12 @@ const stopLoading = (
 ) => {
   if (!loadingStore) return
 
-  loadingStore.setLoading(false)
-
   if (typeof loading === 'object' && loading.localId) {
     loadingStore.stopLocalLoading(loading.localId)
-  } else if (typeof loading === 'boolean') {
-    loadingStore.stopFullLoading()
+    return
+  }
+  if (loading === true) {
+    loadingStore.finishApiLoading()
   }
 }