feat. lnb컴포넌트

layers/components/layouts/Main.vue

@@ -15,6 +15,8 @@ const props = defineProps<Props>()
 const { locale } = useI18n()
 const { getTemplateComponent } = useTemplateRegistry()
 
+const pinToMain = inject('pinToMain')
+
 // 개별 메타 태그 표시 여부 확인
 const shouldShowMetaTag = computed(() => props.pageData?.meta_tag_type === 2)
 
@@ -30,6 +32,9 @@ const isTemplateVisible = (template: PageDataTemplate): boolean => {
 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)
 
 // SEO 메타 태그 설정
 const setupSeoMeta = (metaTag: PageDataMetaTag) => {
@@ -66,14 +71,21 @@ watchEffect(() => {
     >
       <component
         :is="getTemplateComponent(template.template_code)"
+        :id="template.page_ver_tmpl_name_en"
         :components="template.page_ver_tmpl_json"
         :page-ver-tmpl-seq="template.page_ver_tmpl_seq"
       />
     </template>
-    <BlocksUtileContainer
-      :is-show-top-btn="pageData.use_top_btn ?? false"
-      :is-show-sns-btn="pageData.use_sns_btn ?? false"
-    />
+    <ClientOnly>
+      <BlocksLnb v-if="isShowLnb" />
+      <div
+        v-if="isShowTopBtn || isShowSnsBtn"
+        :class="['utile-wrap', { 'is-stop': pinToMain }]"
+      >
+        <AtomsButtonScrollTop v-if="isShowTopBtn" />
+        <AtomsButtonSns v-if="isShowSnsBtn" />
+      </div>
+    </ClientOnly>
   </div>
 </template>
 
@@ -81,6 +93,13 @@ watchEffect(() => {
 .main-content {
   @apply relative min-h-[200px] pt-[48px] md:min-h-[800px] md:pt-[64px];
 }
+.utile-wrap {
+  @apply fixed flex flex-col z-[100]
+  bottom-[12px] right-[12px] gap-2 md:bottom-[40px] md:right-[40px] md:gap-3;
+}
+.utile-wrap.is-stop {
+  @apply absolute;
+}
 
 [data-theme='light'] {
   .main-content {