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

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

Made-with: Cursor

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>