refactor. 페이지 데이터 처리 및 레이아웃 관련 코드 개선

- 페이지 데이터 초기화 및 설정 로직 개선
- 불필요한 props 제거 및 상태 관리 개선

Made-with: Cursor

app/pages/[d1]/[d2]/[d3].vue

@@ -8,8 +8,8 @@ const currentPageData = ref<PageDataValue | null>(null)
 onMounted(() => {
   const pageDataStore = usePageDataStore()
   const { pageData, pageLayoutType } = storeToRefs(pageDataStore)
-  currentPageData.value = pageData.value
   currentLayout.value = pageLayoutType.value
+  currentPageData.value = pageData.value
 })
 
 definePageMeta({
@@ -20,6 +20,6 @@ definePageMeta({
 
 <template>
   <NuxtLayout :name="currentLayout">
-    <LayoutsMain v-if="currentPageData" :page-data="currentPageData" />
+    <LayoutsMain v-if="currentPageData" />
   </NuxtLayout>
 </template>

app/pages/[d1]/[d2]/index.vue

@@ -20,6 +20,6 @@ definePageMeta({
 
 <template>
   <NuxtLayout :name="currentLayout">
-    <LayoutsMain v-if="currentPageData" :page-data="currentPageData" />
+    <LayoutsMain v-if="currentPageData" />
   </NuxtLayout>
 </template>

app/pages/[d1]/index.vue

@@ -8,8 +8,8 @@ const currentPageData = ref<PageDataValue | null>(null)
 onMounted(() => {
   const pageDataStore = usePageDataStore()
   const { pageData, pageLayoutType } = storeToRefs(pageDataStore)
-  currentPageData.value = pageData.value
   currentLayout.value = pageLayoutType.value
+  currentPageData.value = pageData.value
 })
 
 definePageMeta({
@@ -20,6 +20,6 @@ definePageMeta({
 
 <template>
   <NuxtLayout :name="currentLayout">
-    <LayoutsMain v-if="currentPageData" :page-data="currentPageData" />
+    <LayoutsMain v-if="currentPageData" />
   </NuxtLayout>
 </template>

app/pages/index.vue

@@ -8,8 +8,8 @@ const currentPageData = ref<PageDataValue | null>(null)
 onMounted(() => {
   const pageDataStore = usePageDataStore()
   const { pageData, pageLayoutType } = storeToRefs(pageDataStore)
-  currentPageData.value = pageData.value
   currentLayout.value = pageLayoutType.value
+  currentPageData.value = pageData.value
 })
 
 definePageMeta({
@@ -20,6 +20,6 @@ definePageMeta({
 
 <template>
   <NuxtLayout :name="currentLayout">
-    <LayoutsMain v-if="currentPageData" :page-data="currentPageData" />
+    <LayoutsMain v-if="currentPageData" />
   </NuxtLayout>
 </template>

layers/components/blocks/LanguageSwitcher.vue

@@ -233,8 +233,6 @@ const switchLanguage = async () => {
       })
       localeCookie.value = selectedLocale.value.toLowerCase()
 
-      // 페이지 데이터 초기화 (새로운 언어로 다시 로드되도록)
-      pageDataStore.clearPageData()
       window.location.href = path
       // 언어 변경 및 라우팅
       // await setLocale(selectedLocale.value as any)

layers/components/layouts/Main.vue

@@ -1,42 +1,25 @@
 <script setup lang="ts">
 import { useTemplateRegistry } from '#layers/composables/useTemplateRegistry'
-import type {
-  PageDataValue,
-  PageDataTemplate,
-  PageDataMetaTag,
-} from '#layers/types/api/pageData'
-
-interface Props {
-  pageData: PageDataValue
-}
-
-const props = defineProps<Props>()
+import type { PageDataMetaTag } from '#layers/types/api/pageData'
 
 const { tm, locale } = useI18n()
 const { getTemplateComponent } = useTemplateRegistry()
 const loadingStore = useLoadingStore()
+const pageDataStore = usePageDataStore()
 const modalStore = useModalStore()
 
 const { isPAssApiLoading, hasApiCallStarted } = storeToRefs(loadingStore)
-
-// 개별 메타 태그 표시 여부 확인
-const shouldShowMetaTag = computed(() => props.pageData?.meta_tag_type === 2)
-
-// 템플릿 표시 여부 확인
-const isTemplateVisible = (template: PageDataTemplate): boolean => {
-  return Boolean(
-    template?.page_ver_tmpl_json &&
-      Object.keys(template?.page_ver_tmpl_json).length > 0
-  )
-}
-
-// 템플릿 목록 계산
-const visibleTemplates = computed(() =>
-  Object.values(props.pageData?.templates).filter(isTemplateVisible)
-)
-const isShowTopBtn = computed(() => props.pageData?.use_top_btn ?? false)
-const isShowSnsBtn = computed(() => props.pageData?.use_sns_btn ?? false)
-const isShowLnb = computed(() => props.pageData?.use_lnb ?? false)
+const {
+  pageTemplates,
+  pageTemplatesIds,
+  pageMetaTag,
+  isUseMetaTag,
+  isUseTopBtn,
+  isUseSnsBtn,
+  isUseLnb,
+  isLoginRequired,
+  topBtnColorJson,
+} = storeToRefs(pageDataStore)
 
 // SEO 메타 태그 설정
 const setupSeoMeta = (metaTag: PageDataMetaTag) => {
@@ -52,10 +35,13 @@ const setupSeoMeta = (metaTag: PageDataMetaTag) => {
   })
 }
 
+// 활성 섹션 관찰
+useActiveSectionObserver(pageTemplatesIds)
+
 // 메타 태그 설정 감시
 watchEffect(() => {
-  if (shouldShowMetaTag.value && props.pageData?.meta_tag_json) {
-    setupSeoMeta(props.pageData?.meta_tag_json)
+  if (isUseMetaTag.value && pageMetaTag.value) {
+    setupSeoMeta(pageMetaTag.value)
   }
 })
 
@@ -74,7 +60,7 @@ onMounted(() => {
   }
 
   // 페이지 접근 권한 설정(로그인 유무)
-  if (props.pageData?.is_login_required === 1 && !csrGetAccessToken()) {
+  if (isLoginRequired.value && !csrGetAccessToken()) {
     modalStore.handleOpenConfirm({
       contentText: tm('Alert_StoveLogin'),
       confirmButtonText: tm('Text_StoveLogin'),
@@ -89,7 +75,7 @@ onMounted(() => {
 <template>
   <div class="content-wrap">
     <template
-      v-for="(template, index) in visibleTemplates"
+      v-for="(template, index) in pageTemplates"
       :key="template.template_code ?? index"
     >
       <component
@@ -102,15 +88,15 @@ onMounted(() => {
     </template>
   </div>
   <ClientOnly>
-    <BlocksLnb v-if="isShowLnb" />
-    <div v-if="isShowTopBtn" class="utile-wrap">
+    <BlocksLnb v-if="isUseLnb" />
+    <div v-if="isUseTopBtn" class="utile-wrap">
       <BlocksButtonScrollTop
-        v-if="isShowTopBtn"
-        :background-color="pageData?.top_btn_color_json"
+        v-if="isUseTopBtn"
+        :background-color="topBtnColorJson"
       />
     </div>
   </ClientOnly>
-  <BlocksSns v-if="isShowSnsBtn" />
+  <BlocksSns v-if="isUseSnsBtn" />
 </template>
 
 <style scoped>

layers/middleware/pageData.global.ts

@@ -90,6 +90,7 @@ export default defineNuxtRouteMiddleware(async (to, _from) => {
   }
 
   if (pageDataResponse?.code === 0 && 'value' in pageDataResponse) {
+    pageDataStore.clearPageData()
     pageDataStore.setPageData(pageDataResponse.value)
   } else {
     pageDataStore.clearPageData()

layers/stores/usePageDataStore.ts

@@ -1,21 +1,74 @@
-import type { PageDataValue } from '#layers/types/api/pageData'
+import type { ColorObject } from '#layers/types/api/common'
+import type {
+  PageDataTemplate,
+  PageDataValue,
+  PageDataMetaTag,
+} from '#layers/types/api/pageData'
 
 export const usePageDataStore = defineStore('pageData', () => {
-  // 초기 상태를 함수로 정의
   const getInitialState = () => ({
     pageData: null as PageDataValue | null,
-    pageLayoutType: null as 'default' | 'promotion' | null,
-    pageName: null as PageDataValue['page_name'] | null,
-    pageNameEn: null as PageDataValue['page_name_en'] | null,
+    pageLayoutType: 'default' as 'default' | 'promotion',
+    pageName: '' as string,
+    pageNameEn: '' as string,
+    pageMetaTag: null as PageDataMetaTag | null,
+    pageTemplates: [] as PageDataTemplate[],
+    pageTemplatesIds: [] as string[],
+    isUseMetaTag: false as boolean,
+    isUseTopBtn: false as boolean,
+    isUseSnsBtn: false as boolean,
+    isUseLnb: false as boolean,
+    isLoginRequired: false as boolean,
+    topBtnColorJson: null as ColorObject | null,
   })
 
   const state = reactive(getInitialState())
 
+  // 페이지 레이아웃 타입 결정
+  const getLayoutType = (
+    pageData: PageDataValue | null
+  ): 'default' | 'promotion' => {
+    return pageData?.page_type === 2 ? 'promotion' : 'default'
+  }
+
+  // 템플릿 표시 여부 확인
+  const isTemplateVisible = (template: PageDataTemplate): boolean => {
+    const json = template.page_ver_tmpl_json
+    return (
+      !!json &&
+      Object.keys(json).length > 0 &&
+      template.page_ver_tmpl_name_en !== null
+    )
+  }
+
+  // 템플릿 목록 계산
+  const getVisibleTemplates = (
+    templates?: PageDataValue['templates'] | null
+  ): PageDataTemplate[] => {
+    if (!templates) return []
+    return Object.values(templates).filter(isTemplateVisible)
+  }
+
   const setPageData = (response: PageDataValue) => {
+    const layoutType = getLayoutType(response)
+    const visibleTemplates = getVisibleTemplates(response.templates)
+    const templateIds = visibleTemplates.map(
+      template => template.page_ver_tmpl_name_en
+    )
+
     state.pageData = response
-    state.pageLayoutType = getLayoutType(state.pageData)
-    state.pageName = state.pageData?.page_name
-    state.pageNameEn = state.pageData?.page_name_en
+    state.pageLayoutType = layoutType
+    state.pageName = response.page_name
+    state.pageNameEn = response.page_name_en
+    state.pageMetaTag = response.meta_tag_json
+    state.pageTemplates = visibleTemplates
+    state.pageTemplatesIds = templateIds
+    state.isUseMetaTag = response.meta_tag_type === 2
+    state.isUseTopBtn = response.use_top_btn
+    state.isUseSnsBtn = response.use_sns_btn
+    state.isUseLnb = response.use_lnb
+    state.isLoginRequired = response.is_login_required === 1
+    state.topBtnColorJson = response.top_btn_color_json
   }
 
   const clearPageData = () => {

layers/utils/dataUtil.ts

@@ -5,7 +5,6 @@
 
 import type { OsType, PlatformType } from '#layers/types/api/gameData'
 import type {
-  PageDataValue,
   PageDataResourceContainer,
   PageDataTemplateComponents,
   PageDataResourceGroup,
@@ -41,17 +40,6 @@ export const getSupportedPlatforms = (
   }
 }
 
-/**
- * 페이지 데이터를 기반으로 레이아웃 타입을 결정합니다.
- * @param pageData 페이지 데이터
- * @returns 레이아웃 타입 ('default' | 'promotion')
- */
-export const getLayoutType = (
-  pageData: PageDataValue | null
-): 'default' | 'promotion' => {
-  return pageData?.page_type === 2 ? 'promotion' : 'default'
-}
-
 /**
  * 이미지 타입인지 확인합니다.
  * @param type 리소스 그룹 타입