From 34605d606a68b7d054377c615c4a8ca43f966d86 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Fri, 24 Oct 2025 13:08:18 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat.=20ScrollTop=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/assets/css/components/_modal.css      |   2 +-
 layers/components/atoms/Button/ScrollTop.vue |  69 +++++++++++
 layers/components/atoms/icons/TopLine.vue    |  30 +++++
 layers/components/blocks/loading/Local.vue   |   5 +-
 layers/components/blocks/modal/YouTube.vue   |   2 +-
 layers/components/layouts/Header.vue         |   2 +-
 layers/components/layouts/Main.vue           |  10 +-
 layers/templates/GrBoard01/index.vue         | 114 +++++++++++++++++++
 layers/templates/GrDetail01/index.vue        |   2 +-
 9 files changed, 226 insertions(+), 10 deletions(-)
 create mode 100644 layers/components/atoms/Button/ScrollTop.vue
 create mode 100644 layers/components/atoms/icons/TopLine.vue
 create mode 100644 layers/templates/GrBoard01/index.vue

diff --git a/layers/assets/css/components/_modal.css b/layers/assets/css/components/_modal.css
index bf0a141..6f53704 100644
--- a/layers/assets/css/components/_modal.css
+++ b/layers/assets/css/components/_modal.css
@@ -1,7 +1,7 @@
 /* Button Size Classes */
 @layer components {
   .modal-wrap {
-    @apply fixed inset-0 flex p-5 z-[500];
+    @apply fixed inset-0 flex p-5 z-[800];
   }
 
   .modal-wrap.dimmed {
diff --git a/layers/components/atoms/Button/ScrollTop.vue b/layers/components/atoms/Button/ScrollTop.vue
new file mode 100644
index 0000000..fb88304
--- /dev/null
+++ b/layers/components/atoms/Button/ScrollTop.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+interface Props {
+  parentRef: HTMLElement | null
+}
+
+const props = defineProps<Props>()
+
+const { y: windowY } = useWindowScroll({ behavior: 'smooth' })
+const { height: viewportH } = useWindowSize()
+
+const parentEl = toRef(props, 'parentRef')
+const { bottom: parentBottom } = useElementBounding(parentEl)
+
+const showBtn = computed(() => windowY.value > 0)
+
+const offsetY = 12
+
+const pinToParent = computed(() => {
+  if (!parentBottom.value) return false
+  return parentBottom.value <= viewportH.value - offsetY
+})
+
+const positionClasses = computed(() =>
+  pinToParent.value
+    ? 'absolute bottom-[12px] right-[12px] md:bottom-[40px] md:right-[40px]'
+    : 'fixed bottom-[12px] right-[12px] md:bottom-[40px] md:right-[40px]'
+)
+
+const handleScrollToTop = () => {
+  windowY.value = 0
+}
+</script>
+
+<template>
+  <Transition name="fade">
+    <button
+      v-if="showBtn"
+      :class="['btn-top', positionClasses]"
+      @click="handleScrollToTop"
+    >
+      <AtomsIconsTopLine class="icon-top" />
+      <span class="sr-only">top</span>
+    </button>
+  </Transition>
+</template>
+
+<style scoped>
+.btn-top {
+  @apply rounded-full flex items-center justify-center bg-black/20  z-[100]
+  w-[40px] h-[40px] md:w-[48px] md:h-[48px]
+  before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full before:transition-all before:duration-300 before:ease-in-out
+  after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-full after:opacity-0 after:transition-all after:duration-300 after:ease-in-out;
+}
+.btn-top:hover {
+  @apply after:opacity-10;
+}
+.btn-top:hover .icon-top {
+  @apply opacity-100;
+}
+.icon-top {
+  @apply opacity-50 transition-opacity duration-300 ease-in-out;
+}
+
+[data-theme='light'] {
+  .btn-top {
+    @apply bg-white/10;
+  }
+}
+</style>
diff --git a/layers/components/atoms/icons/TopLine.vue b/layers/components/atoms/icons/TopLine.vue
new file mode 100644
index 0000000..b3b7a6e
--- /dev/null
+++ b/layers/components/atoms/icons/TopLine.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'white',
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      d="M13 9.41422L17.2929 13.7071C17.6834 14.0976 18.3166 14.0976 18.7071 13.7071C19.0976 13.3166 19.0976 12.6834 18.7071 12.2929L12.7078 6.29361C12.5289 6.1143 12.2822 6.00257 12.0094 6.00005C12.0063 6.00002 12.0032 6.00001 12 6.00001C11.9968 6.00001 11.9937 6.00002 11.9906 6.00005C11.7269 6.00249 11.4877 6.10694 11.3104 6.27585C11.3045 6.28145 11.2987 6.28714 11.2929 6.2929L5.29289 12.2929C4.90237 12.6834 4.90237 13.3166 5.29289 13.7071C5.68341 14.0976 6.31658 14.0976 6.7071 13.7071L11 9.41422L11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20L13 9.41422Z"
+      :fill="color"
+    />
+    <path
+      d="M19.5 4.00001C19.5 4.55229 19.0523 5 18.5 5L5.5 5C4.94771 5 4.5 4.55228 4.5 4C4.5 3.44772 4.94771 3 5.5 3L18.5 3C19.0523 3 19.5 3.44772 19.5 4.00001Z"
+      :fill="color"
+    />
+  </svg>
+</template>
diff --git a/layers/components/blocks/loading/Local.vue b/layers/components/blocks/loading/Local.vue
index 4eea746..87b8a6f 100644
--- a/layers/components/blocks/loading/Local.vue
+++ b/layers/components/blocks/loading/Local.vue
@@ -25,16 +25,13 @@ const canTeleport = (localId: string) => {
 
 <style scoped>
 .spinner-container {
-  @apply fixed inset-0 bg-black/90 flex items-center justify-center z-[900];
+  @apply fixed inset-0  flex items-center justify-center z-[900];
 }
 .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-container {
-    @apply bg-white/90;
-  }
   .spinner {
     @apply bg-[url('/images/common/publisning_template_loader_white.png')];
   }
diff --git a/layers/components/blocks/modal/YouTube.vue b/layers/components/blocks/modal/YouTube.vue
index 457f8f3..040cc5e 100644
--- a/layers/components/blocks/modal/YouTube.vue
+++ b/layers/components/blocks/modal/YouTube.vue
@@ -51,7 +51,7 @@ onUnmounted(() => {
   <Transition name="fade">
     <div
       v-if="isOpen"
-      class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75"
+      class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 z-[800]"
       :class="props.modalName"
       @click="handleOutsideClick"
     >
diff --git a/layers/components/layouts/Header.vue b/layers/components/layouts/Header.vue
index 24467ae..de5c17a 100644
--- a/layers/components/layouts/Header.vue
+++ b/layers/components/layouts/Header.vue
@@ -312,7 +312,7 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .header {
-  @apply bg-theme-foreground text-theme-foreground-reversal relative z-50;
+  @apply bg-theme-foreground text-theme-foreground-reversal relative z-[100];
 }
 .game-wrapper {
   @apply absolute flex w-full h-[48px] items-center whitespace-nowrap px-[52px] bg-theme-foreground sm:px-[72px] md:h-16 md:pl-0 md:pr-[40px]
diff --git a/layers/components/layouts/Main.vue b/layers/components/layouts/Main.vue
index 80ab28c..089aaf8 100644
--- a/layers/components/layouts/Main.vue
+++ b/layers/components/layouts/Main.vue
@@ -12,6 +12,8 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const mainRef = ref<HTMLElement>()
+
 // 템플릿 레지스트리 사용
 const { getTemplateComponent } = useTemplateRegistry()
 
@@ -54,7 +56,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <main class="main">
+  <main ref="mainRef" class="main">
     <template
       v-for="(template, index) in visibleTemplates"
       :key="template.template_code ?? index"
@@ -65,11 +67,15 @@ watchEffect(() => {
         :page-ver-tmpl-seq="template.page_ver_tmpl_seq"
       />
     </template>
+    <AtomsButtonScrollTop
+      v-if="pageData.use_top_btn ?? false"
+      :parent-ref="mainRef"
+    />
   </main>
 </template>
 
 <style scoped>
 .main {
-  @apply pt-[48px] md:pt-[64px];
+  @apply relative pt-[48px] md:pt-[64px];
 }
 </style>
diff --git a/layers/templates/GrBoard01/index.vue b/layers/templates/GrBoard01/index.vue
new file mode 100644
index 0000000..b4f5b11
--- /dev/null
+++ b/layers/templates/GrBoard01/index.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import { SplideSlide } from '@splidejs/vue-splide'
+import {
+  getComponentContainer,
+  getComponentGroup,
+} from '#layers/utils/dataUtil'
+import type { Splide as SplideType } from '@splidejs/splide'
+import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+import type { OperateGroupItem } from '#layers/types/api/resourcesData'
+
+interface Props {
+  components: PageDataTemplateComponents
+  pageVerTmplSeq: number
+}
+
+const props = defineProps<Props>()
+
+const pageDataStore = usePageDataStore()
+const { getResourcesData } = useResourcesData()
+const { locale } = useI18n()
+const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
+
+const { pageData } = storeToRefs(pageDataStore)
+
+const backgroundData = computed(() =>
+  getComponentGroup(props.components, 'background')
+)
+const mainTitleData = computed(() =>
+  getComponentGroup(props.components, 'mainTitle')
+)
+
+// const buttonListData = ref(
+//   getComponentGroupAry(slideData?.value[0], 'buttonList')
+// )
+
+const { data: slideData } = await useAsyncData(
+  `gr-board-01-resources-${pageData.value?.page_seq}-${pageData.value?.page_ver}-${props.pageVerTmplSeq}`,
+  async () => {
+    if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
+      return []
+    }
+
+    const operateGroupList = await getResourcesData({
+      pageSeq: pageData.value.page_seq,
+      pageVer: pageData.value.page_ver,
+      pageVerTmplSeq: props.pageVerTmplSeq,
+      langCode: locale.value,
+    })
+
+    console.log('operateGroupList', operateGroupList)
+
+    const bannerList = getComponentContainer(operateGroupList, 'bannerList', {
+      hasGroup: true,
+      minLength: 4,
+    }) as OperateGroupItem[]
+
+    return bannerList
+  },
+  {
+    default: () => [],
+    server: false,
+  }
+)
+
+const onArrowClick = (direction, targetIndex) => {
+  const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
+  const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
+  sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
+}
+</script>
+
+<template>
+  <section class="relative py-[80px] md:py-[120px]">
+    <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
+    <div class="section-content px-0">
+      <WidgetsMainTitle
+        v-if="mainTitleData"
+        :resources-data="mainTitleData"
+        class="title-md"
+      />
+      <BlocksSlideDefault
+        v-if="slideData"
+        :slide-item-length="slideData?.length"
+        :pagination="false"
+        class="mt-[24px] md:mt-[48px]"
+        @arrow-click="onArrowClick"
+      >
+        <SplideSlide v-for="(item, index) in slideData" :key="index">
+          <div class="slide-inner border-line">
+            <BlocksVisualContent
+              :resources-data="getComponentGroup(item, 'imgList')"
+              :page-ver-tmpl-seq="props.pageVerTmplSeq"
+              object-fit="cover"
+              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
+            />
+          </div>
+        </SplideSlide>
+      </BlocksSlideDefault>
+      <!-- <WidgetsButtonList
+        v-if="buttonListData"
+        :resources-data="buttonListData"
+        :page-ver-tmpl-seq="props.pageVerTmplSeq"
+        class="mt-[40px] md:mt-[56px]"
+      /> -->
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.section-container {
+  @apply before:hidden md:before:block before:content-[''] before:absolute before:top-0 before:left-0 before:w-[104px] before:h-full before:bg-gradient-to-l from-transparent to-[rgba(0,0,0,0.7)] 
+  after:hidden md:after:block after:content-[''] after:absolute after:top-0 after:right-0 after:w-[104px] after:h-full after:bg-gradient-to-r from-transparent to-[rgba(0,0,0,0.7)];
+}
+</style>
diff --git a/layers/templates/GrDetail01/index.vue b/layers/templates/GrDetail01/index.vue
index 651d74d..b6abd52 100644
--- a/layers/templates/GrDetail01/index.vue
+++ b/layers/templates/GrDetail01/index.vue
@@ -115,7 +115,7 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
 
 <style scoped>
 .splide-pagination {
-  @apply flex items-center absolute bottom-10 left-1/2 -translate-x-1/2 z-10 md:bottom-[96px];
+  @apply flex items-center absolute bottom-10 left-1/2 -translate-x-1/2 z-[5] md:bottom-[96px];
 }
 .btn-pagination {
   @apply relative;

From 40886828fd022250b5a8c33763614e7618aecdf7 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Fri, 24 Oct 2025 17:13:02 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix.=20scrollTop=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/assets/css/base/_reset.css             |   5 +
 layers/components/atoms/Button/ScrollTop.vue  |  31 +-----
 layers/components/atoms/Img.vue               |  33 ++----
 layers/components/atoms/icons/ShareLine.vue   |  28 ++++++
 layers/components/blocks/UtileContainer.vue   |  39 +++++++
 layers/components/layouts/Main.vue            |   5 +-
 layers/templates/GrContents01/index.vue       |  95 +++---------------
 public/images/common/btn_system_SNS.png       | Bin 3506 -> 0 bytes
 .../common/ic-v2-control-close-line.png       | Bin 216 -> 0 bytes
 9 files changed, 96 insertions(+), 140 deletions(-)
 create mode 100644 layers/components/atoms/icons/ShareLine.vue
 create mode 100644 layers/components/blocks/UtileContainer.vue
 delete mode 100644 public/images/common/btn_system_SNS.png
 delete mode 100644 public/images/common/ic-v2-control-close-line.png

diff --git a/layers/assets/css/base/_reset.css b/layers/assets/css/base/_reset.css
index 4f597a2..291e700 100644
--- a/layers/assets/css/base/_reset.css
+++ b/layers/assets/css/base/_reset.css
@@ -12,6 +12,11 @@
     @apply outline-none;
   }
 
+  img {
+    border: none;
+    outline: none;
+  }
+
   /* 라이트 테마 색상 */
   [data-theme='light'] {
     body {
diff --git a/layers/components/atoms/Button/ScrollTop.vue b/layers/components/atoms/Button/ScrollTop.vue
index fb88304..fdec15d 100644
--- a/layers/components/atoms/Button/ScrollTop.vue
+++ b/layers/components/atoms/Button/ScrollTop.vue
@@ -1,31 +1,8 @@
 <script setup lang="ts">
-interface Props {
-  parentRef: HTMLElement | null
-}
-
-const props = defineProps<Props>()
-
 const { y: windowY } = useWindowScroll({ behavior: 'smooth' })
-const { height: viewportH } = useWindowSize()
-
-const parentEl = toRef(props, 'parentRef')
-const { bottom: parentBottom } = useElementBounding(parentEl)
 
 const showBtn = computed(() => windowY.value > 0)
 
-const offsetY = 12
-
-const pinToParent = computed(() => {
-  if (!parentBottom.value) return false
-  return parentBottom.value <= viewportH.value - offsetY
-})
-
-const positionClasses = computed(() =>
-  pinToParent.value
-    ? 'absolute bottom-[12px] right-[12px] md:bottom-[40px] md:right-[40px]'
-    : 'fixed bottom-[12px] right-[12px] md:bottom-[40px] md:right-[40px]'
-)
-
 const handleScrollToTop = () => {
   windowY.value = 0
 }
@@ -33,11 +10,7 @@ const handleScrollToTop = () => {
 
 <template>
   <Transition name="fade">
-    <button
-      v-if="showBtn"
-      :class="['btn-top', positionClasses]"
-      @click="handleScrollToTop"
-    >
+    <button v-if="showBtn" class="btn-top" @click="handleScrollToTop">
       <AtomsIconsTopLine class="icon-top" />
       <span class="sr-only">top</span>
     </button>
@@ -46,7 +19,7 @@ const handleScrollToTop = () => {
 
 <style scoped>
 .btn-top {
-  @apply rounded-full flex items-center justify-center bg-black/20  z-[100]
+  @apply relative rounded-full flex items-center justify-center bg-black/20  z-[100]
   w-[40px] h-[40px] md:w-[48px] md:h-[48px]
   before:content-[''] before:absolute before:top-0 before:left-0 before:w-full before:h-full before:border before:border-[rgba(255,255,255,0.06)] before:rounded-full before:transition-all before:duration-300 before:ease-in-out
   after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-white after:rounded-full after:opacity-0 after:transition-all after:duration-300 after:ease-in-out;
diff --git a/layers/components/atoms/Img.vue b/layers/components/atoms/Img.vue
index c736199..8ec9a47 100644
--- a/layers/components/atoms/Img.vue
+++ b/layers/components/atoms/Img.vue
@@ -10,25 +10,25 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   objectFit: 'contain',
+  alt: 'image',
 })
 
 const imagePaths = computed(() => {
   if (!props.resourcesData?.res_path) return null
 
-  const pcPath =
+  const pc =
     props.resourcesData.res_path.path_pc ?? props.resourcesData.res_path.path_mo
-  const moPath =
+  const mo =
     props.resourcesData.res_path.path_mo ?? props.resourcesData.res_path.path_pc
-
   return {
-    pc: pcPath ? getResolvedHost(pcPath) : '',
-    mo: moPath ? getResolvedHost(moPath) : '',
+    pc: pc ? getResolvedHost(pc) : '',
+    mo: mo ? getResolvedHost(mo) : '',
   }
 })
 </script>
 
 <template>
-  <picture v-if="imagePaths">
+  <picture v-if="imagePaths" ref="pictureRef">
     <source media="(min-width: 1024px)" :srcset="imagePaths.pc" />
     <source media="(max-width: 1023px)" :srcset="imagePaths.mo" />
     <img
@@ -39,24 +39,3 @@ const imagePaths = computed(() => {
     />
   </picture>
 </template>
-
-<style scoped>
-/* 이미지 깨짐 시 보더 및 아이콘 제거 */
-img {
-  border: none;
-  outline: none;
-}
-
-/* 깨진 이미지 아이콘과 alt 텍스트 숨김 */
-img::before,
-img::after {
-  display: none;
-}
-
-/* alt 텍스트 영역 숨김 */
-img[alt] {
-  text-indent: -9999px;
-  overflow: hidden;
-  display: block;
-}
-</style>
diff --git a/layers/components/atoms/icons/ShareLine.vue b/layers/components/atoms/icons/ShareLine.vue
new file mode 100644
index 0000000..5f4822b
--- /dev/null
+++ b/layers/components/atoms/icons/ShareLine.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props {
+  size?: number | string
+  color?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 24,
+  color: 'white',
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.75 2C14.6789 2 13 3.67893 13 5.75C13 6.04651 13.0344 6.33499 13.0995 6.61165C13.06 6.6295 13.0213 6.65017 12.9836 6.67375L8.98359 9.17375C8.93046 9.20696 8.88163 9.24445 8.83728 9.2855C8.16435 8.64391 7.25318 8.25 6.25 8.25C4.17893 8.25 2.5 9.92893 2.5 12C2.5 14.0711 4.17893 15.75 6.25 15.75C7.25317 15.75 8.16434 15.3561 8.83728 14.7145C8.88163 14.7556 8.93046 14.793 8.98359 14.8263L12.9836 17.3263C12.996 17.334 13.0086 17.3415 13.0212 17.3486C13.0072 17.4805 13 17.6144 13 17.75C13 19.8211 14.6789 21.5 16.75 21.5C18.8211 21.5 20.5 19.8211 20.5 17.75C20.5 15.6789 18.8211 14 16.75 14C15.521 14 14.43 14.5912 13.7461 15.5048L10.0164 13.1737C9.95959 13.1382 9.90054 13.1093 9.84012 13.0867C9.9441 12.7428 10 12.3779 10 12C10 11.6221 9.9441 11.2572 9.84012 10.9133C9.90054 10.8907 9.95959 10.8618 10.0164 10.8263L14.0164 8.32626L14.0218 8.32286C14.7056 9.04763 15.675 9.5 16.75 9.5C18.8211 9.5 20.5 7.82107 20.5 5.75C20.5 3.67893 18.8211 2 16.75 2ZM15 5.75C15 4.7835 15.7835 4 16.75 4C17.7165 4 18.5 4.7835 18.5 5.75C18.5 6.7165 17.7165 7.5 16.75 7.5C15.7835 7.5 15 6.7165 15 5.75ZM6.25 10.25C5.2835 10.25 4.5 11.0335 4.5 12C4.5 12.9665 5.2835 13.75 6.25 13.75C7.2165 13.75 8 12.9665 8 12C8 11.0335 7.2165 10.25 6.25 10.25ZM16.75 16C15.7835 16 15 16.7835 15 17.75C15 18.7165 15.7835 19.5 16.75 19.5C17.7165 19.5 18.5 18.7165 18.5 17.75C18.5 16.7835 17.7165 16 16.75 16Z"
+      :fill="color"
+    />
+  </svg>
+</template>
diff --git a/layers/components/blocks/UtileContainer.vue b/layers/components/blocks/UtileContainer.vue
new file mode 100644
index 0000000..2c78430
--- /dev/null
+++ b/layers/components/blocks/UtileContainer.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+interface Props {
+  parentRef: HTMLElement | null
+  isShowTopBtn: boolean
+  isShowSnsBtn: boolean
+}
+
+const { height: viewportH } = useWindowSize()
+
+const props = withDefaults(defineProps<Props>(), {
+  isShowTopBtn: false,
+  isShowSnsBtn: false,
+})
+
+const parentEl = toRef(props, 'parentRef')
+const { bottom: parentBottom } = useElementBounding(parentEl)
+
+const pinToParent = computed(() => {
+  if (!parentBottom.value) return false
+  return parentBottom.value <= viewportH.value
+})
+</script>
+
+<template>
+  <div :class="['utile-container', { 'is-fixed': pinToParent }]">
+    <AtomsButtonScrollTop v-if="props.isShowTopBtn" />
+    <!-- <AtomsButtonSns v-if="props.isShowSnsBtn" /> -->
+  </div>
+</template>
+
+<style scoped>
+.utile-container {
+  @apply fixed flex flex-col
+  bottom-[12px] right-[12px] gap-2 md:bottom-[40px] md:right-[40px] md:gap-3;
+}
+.utile-container.is-fixed {
+  @apply absolute;
+}
+</style>
diff --git a/layers/components/layouts/Main.vue b/layers/components/layouts/Main.vue
index 089aaf8..75495bd 100644
--- a/layers/components/layouts/Main.vue
+++ b/layers/components/layouts/Main.vue
@@ -67,9 +67,10 @@ watchEffect(() => {
         :page-ver-tmpl-seq="template.page_ver_tmpl_seq"
       />
     </template>
-    <AtomsButtonScrollTop
-      v-if="pageData.use_top_btn ?? false"
+    <BlocksUtileContainer
       :parent-ref="mainRef"
+      :is-show-top-btn="pageData.use_top_btn ?? false"
+      :is-show-sns-btn="pageData.use_sns_btn ?? false"
     />
   </main>
 </template>
diff --git a/layers/templates/GrContents01/index.vue b/layers/templates/GrContents01/index.vue
index a6e98b9..114ace8 100644
--- a/layers/templates/GrContents01/index.vue
+++ b/layers/templates/GrContents01/index.vue
@@ -1,10 +1,7 @@
 <script setup lang="ts">
-import { SplideSlide } from '@splidejs/vue-splide'
-import {
-  getComponentContainer,
-  getComponentGroup,
-} from '#layers/utils/dataUtil'
+import { getComponentGroup } from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
+import AtomsImg from '#layers/components/atoms/Img.vue'
 
 interface Props {
   components: PageDataTemplateComponents
@@ -13,9 +10,6 @@ interface Props {
 
 const props = defineProps<Props>()
 
-const { locale } = useI18n()
-const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
-
 const backgroundData = computed(() =>
   getComponentGroup(props.components, 'background')
 )
@@ -28,21 +22,12 @@ const subTitleData = computed(() =>
 const descriptionData = computed(() =>
   getComponentGroup(props.components, 'description')
 )
-const slideData = computed(() => {
-  return getComponentContainer(props.components, 'group_sets')
+const imgListData = computed(() => {
+  return getComponentGroupAry(props.components, 'imgList')
 })
 const buttonListData = computed(() => {
   return getComponentGroupAry(props.components, 'buttonList')
 })
-const paginationData = computed(() => {
-  return getComponentGroupAry(props.components, 'pagination')
-})
-
-const onArrowClick = (direction, targetIndex) => {
-  const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
-  const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
-  sendLog(locale.value, useAnalyticsLogDataDirect(logTracking, 1))
-}
 </script>
 
 <template>
@@ -59,51 +44,15 @@ const onArrowClick = (direction, targetIndex) => {
         :resources-data="subTitleData"
         class="title-sm mt-2 mx-[20px] sm:mx-[40px]"
       />
-      <template v-if="slideData">
-        <div v-if="slideData.length <= 2" class="img-container">
-          <div
-            v-for="(item, index) in slideData"
-            :key="index"
-            :class="[{ 'slide-2': slideData.length === 2 }]"
-          >
-            <AtomsImg
-              :resources-data="getComponentGroup(item, 'imgList')"
-              :page-ver-tmpl-seq="props.pageVerTmplSeq"
-              :alt="getComponentGroup(item, 'subTitle')?.display?.text"
-            />
-          </div>
+      <div v-if="imgListData" class="img-container">
+        <div v-for="(item, index) in imgListData" :key="index" class="img-item">
+          <AtomsImg
+            :resources-data="item"
+            object-fit="contain"
+            :alt="item?.group_label"
+          />
         </div>
-        <BlocksSlideDefault
-          v-else
-          :type="slideData.length === 3 ? 'slide' : 'loop'"
-          :slide-item-length="slideData?.length"
-          :arrows="slideData.length === 3 ? false : true"
-          :pagination="slideData.length === 3 ? false : true"
-          :pagination-data="paginationData"
-          :breakpoints="{
-            1023: {
-              type: 'loop',
-              pagination: false,
-            },
-          }"
-          class="mt-[32px]"
-          @arrow-click="onArrowClick"
-        >
-          <SplideSlide
-            v-for="(item, index) in slideData"
-            :key="index"
-            class="mr-4"
-          >
-            <div class="slide-inner w-[295px] sm:w-[304px]">
-              <AtomsImg
-                :resources-data="getComponentGroup(item, 'imgList')"
-                :page-ver-tmpl-seq="props.pageVerTmplSeq"
-                :alt="getComponentGroup(item, 'subTitle')?.display?.text"
-              />
-            </div>
-          </SplideSlide>
-        </BlocksSlideDefault>
-      </template>
+      </div>
       <WidgetsButtonList
         v-if="buttonListData"
         :resources-data="buttonListData"
@@ -121,26 +70,8 @@ const onArrowClick = (direction, targetIndex) => {
 
 <style scoped>
 .img-container {
-  @apply flex flex-wrap justify-center gap-4 box-content mx-auto mt-[32px]
+  @apply flex flex-wrap items-center justify-center gap-4 box-content mx-auto mt-[32px]
   max-w-[688px] px-[20px] 
   md:max-w-[944px] md:px-[40px];
 }
-.splide {
-  @apply md:max-w-[1088px];
-}
-.splide:deep(.splide__track) {
-  @apply md:w-[944px] md:mx-auto;
-}
-.splide:deep(.splide__track) {
-  @apply !px-[20px] sm:!px-[40px] md:!px-[0];
-}
-.splide:deep(.arrow-next) {
-  @apply md:-right-[0];
-}
-.splide:deep(.arrow-prev) {
-  @apply md:-left-[0];
-}
-.slide-2 {
-  @apply max-w-[335px] md:max-w-[464px];
-}
 </style>
diff --git a/public/images/common/btn_system_SNS.png b/public/images/common/btn_system_SNS.png
deleted file mode 100644
index 77909c133def9613a7fc59c42068d988fe232c7c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3506
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

diff --git a/public/images/common/ic-v2-control-close-line.png b/public/images/common/ic-v2-control-close-line.png
deleted file mode 100644
index 5c7ce4ea2f04aca627440b577909976c365c3475..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 216
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjoCO|{#S9GG!XV7ZFl!D-1!HlL
zyA#8@b22Z19F}xPUq=Rpjs4tz5?O)#Tu&FrkP61PQyjStDDbd2$4~lSe`<M-=9UZH
zo1}ZI3Jyk>v4td+ZHi@>@_omJkL!=~*f%Gr+FL|4ZWc-n(`$Rkvq1VD6K}J*%Hs#3
zoh<uvN`uyGe4QA)Uz3@`drFeWA~Au8GS|J~8n1t)ROS81xVGc()0OT(iy1s!{an^L
HB{Ts5HuOkZ


From 02ed4ede308bfaec7e64a0257194f791fadf9044 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chyeonggkim=E2=80=9D?=
 <“hyeonggkim@smilegate.com”>
Date: Fri, 24 Oct 2025 15:11:59 +0900
Subject: [PATCH 3/3] feat: add ecosystem

---
 ecosystem.config.cjs | 130 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 130 insertions(+)
 create mode 100644 ecosystem.config.cjs

diff --git a/ecosystem.config.cjs b/ecosystem.config.cjs
new file mode 100644
index 0000000..59450ca
--- /dev/null
+++ b/ecosystem.config.cjs
@@ -0,0 +1,130 @@
+module.exports = {
+  apps: [
+    {
+      name: 'dev',
+      script: './.output/server/index.mjs',
+      autorestart: true, // 애플리케이션의 자동 재시작 여부
+      watch: true, // 파일 변경 감지 및 재시작 여부
+      instances: 1,
+      max_memory_restart: '2G', // 메모리 사용량을 기준으로 재시작하는 설정
+      // Logging
+      out_file: '/stove/logs/template/template_fe-out.log',
+      error_file: '/stove/logs/template/template_fe-error.log',
+      log_date_format: 'YYYY-MM-DD',
+      log_type: 'json',
+      merge_logs: true, // 클러스터 모드 사용 시 각 클러스터에서 생성되는 로그를 한 파일로 병합
+      env: {
+        PORT: 3000,
+        NODE_ENV: 'dev'
+      }
+    },
+    {
+      name: 'dev2',
+      script: './.output/server/index.mjs',
+      autorestart: true, // 애플리케이션의 자동 재시작 여부
+      watch: true, // 파일 변경 감지 및 재시작 여부
+      instances: 1,
+      max_memory_restart: '2G', // 메모리 사용량을 기준으로 재시작하는 설정
+      // Logging
+      out_file: '/stove/logs/template/template_fe-out.log',
+      error_file: '/stove/logs/template/template_fe-error.log',
+      log_date_format: 'YYYY-MM-DD',
+      log_type: 'json',
+      merge_logs: true, // 클러스터 모드 사용 시 각 클러스터에서 생성되는 로그를 한 파일로 병합
+      env: {
+        PORT: 3000,
+        NODE_ENV: 'dev'
+      }
+    },
+    {
+      name: 'qa',
+      script: './.output/server/index.mjs',
+      autorestart: true, // 애플리케이션의 자동 재시작 여부
+      watch: true, // 파일 변경 감지 및 재시작 여부
+      instances: 1,
+      max_memory_restart: '2G', // 메모리 사용량을 기준으로 재시작하는 설정
+      // Logging
+      out_file: '/stove/logs/template/template_fe-out.log',
+      error_file: '/stove/logs/template/template_fe-error.log',
+      log_date_format: 'YYYY-MM-DD',
+      log_type: 'json',
+      merge_logs: true, // 클러스터 모드 사용 시 각 클러스터에서 생성되는 로그를 한 파일로 병합
+      env: {
+        PORT: 3000,
+        NODE_ENV: 'qa'
+      }
+    },
+    {
+      name: 'qa2',
+      script: './.output/server/index.mjs',
+      autorestart: true, // 애플리케이션의 자동 재시작 여부
+      watch: true, // 파일 변경 감지 및 재시작 여부
+      instances: 1,
+      max_memory_restart: '2G', // 메모리 사용량을 기준으로 재시작하는 설정
+      // Logging
+      out_file: '/stove/logs/template/template_fe-out.log',
+      error_file: '/stove/logs/template/template_fe-error.log',
+      log_date_format: 'YYYY-MM-DD',
+      log_type: 'json',
+      merge_logs: true, // 클러스터 모드 사용 시 각 클러스터에서 생성되는 로그를 한 파일로 병합
+      env: {
+        PORT: 3000,
+        NODE_ENV: 'qa'
+      }
+    },
+    {
+      name: 'perf',
+      script: './.output/server/index.mjs',
+      autorestart: true, // 애플리케이션의 자동 재시작 여부
+      watch: true, // 파일 변경 감지 및 재시작 여부
+      instances: 1,
+      max_memory_restart: '2G', // 메모리 사용량을 기준으로 재시작하는 설정
+      // Logging
+      out_file: '/stove/logs/template/template_fe-out.log',
+      error_file: '/stove/logs/template/template_fe-error.log',
+      log_date_format: 'YYYY-MM-DD',
+      log_type: 'json',
+      merge_logs: true, // 클러스터 모드 사용 시 각 클러스터에서 생성되는 로그를 한 파일로 병합
+      env: {
+        PORT: 3000,
+        NODE_ENV: 'perf'
+      }
+    },
+    {
+      name: 'sandbox',
+      script: './.output/server/index.mjs',
+      autorestart: true, // 애플리케이션의 자동 재시작 여부
+      watch: false, // 파일 변경 감지 및 재시작 여부
+      instances: 1,
+      max_memory_restart: '2G', // 메모리 사용량을 기준으로 재시작하는 설정
+      // Logging
+      out_file: '/stove/logs/template/template_fe-out.log',
+      error_file: '/stove/logs/template/template_fe-error.log',
+      log_date_format: 'YYYY-MM-DD',
+      log_type: 'json',
+      merge_logs: true, // 클러스터 모드 사용 시 각 클러스터에서 생성되는 로그를 한 파일로 병합
+      env: {
+        PORT: 3000,
+        NODE_ENV: 'sandbox'
+      }
+    },
+    {
+      name: 'live',
+      script: './.output/server/index.mjs',
+      autorestart: true, // 애플리케이션의 자동 재시작 여부
+      watch: false, // 파일 변경 감지 및 재시작 여부
+      instances: 1,
+      max_memory_restart: '2G', // 메모리 사용량을 기준으로 재시작하는 설정
+      // Logging
+      out_file: '/stove/logs/template/template_fe-out.log',
+      error_file: '/stove/logs/template/template_fe-error.log',
+      log_date_format: 'YYYY-MM-DD',
+      log_type: 'json',
+      merge_logs: true, // 클러스터 모드 사용 시 각 클러스터에서 생성되는 로그를 한 파일로 병합
+      env: {
+        PORT: 3000,
+        NODE_ENV: 'live'
+      }
+    }
+  ]
+}