From 34a8248731e5d7d5f54aad3ca70a3b4e0cf4a1fa Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Tue, 23 Sep 2025 20:37:33 +0900
Subject: [PATCH] =?UTF-8?q?feat.=20GR=5FVISUAL=5F02=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/assets/css/app.css                     |   4 +-
 layers/assets/css/components/_splide.css      | 102 ++++++++
 .../css/components/_swiper-pagination.css     |  73 ------
 layers/components/widgets/BannerList.vue      | 230 ++++++++++++++++++
 layers/components/widgets/ButtonList.vue      |   9 +-
 layers/composables/useResourcesData.ts        |  41 ++++
 .../middleware/{gameInfo.ts => gameData.ts}   |   0
 layers/templates/GrVisual01/index.vue         |  45 ++--
 layers/templates/GrVisual02/index.vue         | 104 +++++++-
 layers/templates/GrVisual03/index.vue         |  75 +++---
 layers/types/api/pageData.ts                  |   4 +-
 layers/types/api/resourcesData.ts             |  58 +++++
 layers/utils/dataUtil.ts                      |  90 ++++++-
 13 files changed, 689 insertions(+), 146 deletions(-)
 create mode 100644 layers/assets/css/components/_splide.css
 delete mode 100644 layers/assets/css/components/_swiper-pagination.css
 create mode 100644 layers/components/widgets/BannerList.vue
 create mode 100644 layers/composables/useResourcesData.ts
 rename layers/server/middleware/{gameInfo.ts => gameData.ts} (100%)
 create mode 100644 layers/types/api/resourcesData.ts

diff --git a/layers/assets/css/app.css b/layers/assets/css/app.css
index 86458e7..1b011e2 100644
--- a/layers/assets/css/app.css
+++ b/layers/assets/css/app.css
@@ -1,8 +1,10 @@
 @import './base/_theme.css';
 @import './base/_reset.css';
-@import './components/_swiper-pagination.css';
+@import './components/_splide.css';
 @import './components/_button.css';
 
+@import '@splidejs/vue-splide/css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/layers/assets/css/components/_splide.css b/layers/assets/css/components/_splide.css
new file mode 100644
index 0000000..6581cf4
--- /dev/null
+++ b/layers/assets/css/components/_splide.css
@@ -0,0 +1,102 @@
+/*  페이지네이션 버튼 - 모바일 퍼스트 */
+.splide-pagination-bullets {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  margin-top: 24px;
+  z-index: 5;
+}
+
+.splide-pagination-bullets.type-full {
+  position: absolute;
+  bottom: 32px;
+  left: 0;
+}
+
+.splide-pagination-bullet {
+  position: relative;
+  width: 8px;
+  height: 8px;
+  background: var(--primary);
+  border-radius: 50%;
+  opacity: 1;
+}
+
+.splide-pagination-bullet:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.3s ease;
+}
+
+.splide-pagination-bullet.is-active:after {
+  opacity: 0;
+}
+
+/* 네비게이션 버튼 - 모바일 퍼스트 */
+.splide-arrow {
+  display: none;
+  /* position: absolute;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  transform: translateY(-50%);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  cursor: pointer;
+  z-index: 5;
+  background-color: var(--primary); */
+}
+
+/* .type-full .arrow-prev {
+  left: 20px;
+}
+.type-full.arrow-next {
+  right: 20px;
+} */
+
+/* 데스크톱 스타일 */
+@media (min-width: 1024px) {
+  .splide-pagination-bullets {
+    gap: 24px;
+    margin-top: 32px;
+  }
+
+  .splide-pagination-bullets.position-absolute {
+    bottom: 48px;
+  }
+
+  .splide-pagination-bullet {
+    width: 12px;
+    height: 12px;
+  }
+
+  .splide-arrow {
+    display: block;
+    position: absolute;
+    top: 50%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: var(--primary);
+    transform: translateY(-50%);
+    cursor: pointer;
+    z-index: 5;
+  }
+
+  .type-full .arrow-prev {
+    left: 40px;
+  }
+
+  .type-full .arrow-next {
+    right: 40px;
+  }
+}
diff --git a/layers/assets/css/components/_swiper-pagination.css b/layers/assets/css/components/_swiper-pagination.css
deleted file mode 100644
index af4e031..0000000
--- a/layers/assets/css/components/_swiper-pagination.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/*  페이지네이션 버튼 */
-main .slide-pagination.swiper-pagination-bullets {
-  position: absolute;
-  bottom: 48px;
-  left: 0;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 24px;
-  z-index: 5;
-}
-
-.slide-pagination .swiper-pagination-bullet {
-  position: relative;
-  width: 12px;
-  height: 12px;
-  background: var(--primary);
-  border-radius: 50%;
-  opacity: 1;
-}
-
-.slide-pagination .swiper-pagination-bullet:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.slide-pagination .swiper-pagination-bullet-active:after {
-  display: none;
-}
-
-/* 네비게이션 버튼 */
-.slide-prev,
-.slide-next {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 48px;
-  height: 48px;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  z-index: 5;
-
-  background-color: var(--primary);
-}
-
-.slide-prev {
-  left: 40px;
-}
-
-.slide-next {
-  right: 40px;
-}
-
-@media (max-width: 1023px) {
-  main .slide-pagination.swiper-pagination-bullets {
-    bottom: 32px;
-    gap: 12px;
-  }
-
-  .slide-pagination .swiper-pagination-bullet {
-    width: 8px;
-    height: 8px;
-  }
-}
diff --git a/layers/components/widgets/BannerList.vue b/layers/components/widgets/BannerList.vue
new file mode 100644
index 0000000..671c405
--- /dev/null
+++ b/layers/components/widgets/BannerList.vue
@@ -0,0 +1,230 @@
+<script setup lang="ts">
+import { Splide, SplideSlide } from '@splidejs/vue-splide'
+import type { Splide as SplideType } from '@splidejs/splide'
+import type { ListOperateGroupItem } from '#layers/types/api/resourcesData'
+
+interface BannerSizeItem {
+  width: number
+  height: number
+  gap: number
+}
+
+interface BannerSize {
+  mo: BannerSizeItem
+  pc: BannerSizeItem
+}
+
+type BannerMode = 'auto' | 'fixed'
+
+interface Props {
+  bannerList: ListOperateGroupItem[]
+  bannerMode?: BannerMode
+  bannerSize?: BannerSize
+  perPage?: number
+  perMove?: number
+  gap?: string
+  arrows?: boolean
+  pagination?: boolean
+  breakpoints?: Record<number, { perPage: number; gap?: string }>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  bannerMode: 'fixed',
+  arrows: true,
+  pagination: true,
+})
+
+// bannerSize를 CSS 변수로 변환
+const bannerSizeStyle = computed(() => {
+  if (!props.bannerSize) return {}
+
+  const { mo, pc } = props.bannerSize
+  const scaleFactor = 1.1429
+
+  return {
+    // 모바일 기본값
+    '--banner-width-mo': `${mo.width}px`,
+    '--banner-height-mo': `${mo.height}px`,
+    '--banner-gap-mo': `${mo.gap}px`,
+    // 모바일 확대값
+    '--banner-width-mo-active': `${mo.width * scaleFactor}px`,
+    '--banner-height-mo-active': `${mo.height * scaleFactor}px`,
+    '--banner-width-mo-container': `${mo.width * scaleFactor + mo.gap}px`,
+
+    // PC 기본값
+    '--banner-width-pc': `${pc.width}px`,
+    '--banner-height-pc': `${pc.height}px`,
+    '--banner-gap-pc': `${pc.gap}px`,
+    // PC 확대값
+    '--banner-width-pc-active': `${pc.width * scaleFactor}px`,
+    '--banner-height-pc-active': `${pc.height * scaleFactor}px`,
+    '--banner-width-pc-container': `${pc.width * scaleFactor + pc.gap * 4}px`,
+    // PC arrow값
+    '--banner-arrow-pc': `${(pc.width * scaleFactor) / 2 + (pc.gap * 3) / 2}px`,
+  }
+})
+
+// Splide 옵션
+const splideOptions = computed(() => {
+  const baseOptions = {
+    type: 'loop',
+    updateOnMove: true,
+    gap: props.gap,
+    arrows: props.arrows,
+    pagination: props.pagination,
+    breakpoints: props.breakpoints,
+    classes: {
+      arrows: 'splide-arrows',
+      arrow: 'splide-arrow',
+      prev: 'arrow-prev',
+      next: 'arrow-next',
+      pagination: 'splide-pagination-bullets',
+      page: 'splide-pagination-bullet',
+    },
+  }
+
+  // bannerMode === 'auto'
+  if (props.bannerMode === 'auto') {
+    const options = {
+      ...baseOptions,
+      focus: 'center',
+      autoWidth: true,
+      autoHeight: true,
+    }
+    return options
+  }
+
+  const options = {
+    ...baseOptions,
+    perPage: props.perPage || 1,
+    perMove: props.perMove || 1,
+  }
+  return options
+})
+
+// Splide 이벤트 핸들러
+const handleSplideMounted = (splide: SplideType) => {
+  splide.refresh()
+}
+</script>
+
+<template>
+  <div
+    :class="`splide-carousel ${props.bannerMode ? `container-${props.bannerMode}` : ''}`"
+    :style="bannerSizeStyle"
+  >
+    <Splide
+      v-if="props.bannerList.length > 0"
+      :options="splideOptions"
+      class="splide-container"
+      @splide:mounted="handleSplideMounted"
+    >
+      <SplideSlide
+        v-for="banner in props.bannerList"
+        :key="banner.seq"
+        class="splide-banner"
+      >
+        <div class="banner-inner">
+          <img
+            :src="getResolvedHost(banner.img_path)"
+            :alt="banner.title"
+            class="banner-image"
+            loading="lazy"
+          />
+          <div class="banner-overlay">
+            <h3 v-if="banner.title" class="banner-title">
+              {{ banner.title }}
+            </h3>
+            <p v-if="banner.option01" class="banner-description">
+              {{ banner.option01 }}
+            </p>
+          </div>
+          <a
+            :href="banner.url"
+            :target="banner.link_target"
+            class="banner-link"
+          />
+        </div>
+      </SplideSlide>
+    </Splide>
+  </div>
+</template>
+
+<style scoped>
+.banner-inner {
+  @apply overflow-hidden relative flex items-center justify-center h-full rounded-lg
+         after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full
+         after:border after:border-white/10 after:rounded-lg;
+}
+.banner-image {
+  @apply transition-transform duration-300 w-full h-full object-cover;
+}
+.banner-overlay {
+  @apply absolute bottom-0 left-0 right-0 pt-[14px] px-[18px] pb-[16px] flex flex-col justify-end border-t border-white/10 bg-black/40 shadow-[0_-10px_10px_0_rgba(0,0,0,0.25)] backdrop-blur-[25px] md:pt-[20px] md:px-[26px] md:pb-[26px];
+}
+.banner-title {
+  @apply text-[14px] leading-[20px] font-medium text-white md:text-lg md:leading-[26px];
+}
+.banner-description {
+  @apply mt-[6px] text-[12px] leading-[18px] text-white/50 md:mt-1 md:text-[14px] md:leading-[24px];
+}
+
+/* bannerMode === 'auto' */
+.container-auto {
+  @apply w-full;
+}
+.banner-link {
+  @apply absolute top-0 left-0 w-full h-full z-[5];
+}
+.container-auto .splide__slide {
+  @apply flex items-center justify-center;
+  width: var(--banner-width-mo);
+  height: var(--banner-height-mo-active);
+  margin-right: var(--banner-gap-mo);
+}
+.container-auto .splide__slide .banner-inner {
+  width: var(--banner-width-mo);
+  height: var(--banner-height-mo);
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.container-auto .splide__slide.is-active {
+  width: var(--banner-width-mo-container);
+}
+.container-auto .splide__slide.is-active .banner-inner {
+  width: var(--banner-width-mo-active);
+  height: var(--banner-height-mo-active);
+}
+
+/* PC 스타일 */
+@media (min-width: 1024px) {
+  .container-auto .splide__slide {
+    width: var(--banner-width-pc);
+    height: var(--banner-height-pc-active);
+    margin-right: var(--banner-gap-pc);
+  }
+
+  .container-auto .splide__slide .banner-inner {
+    width: var(--banner-width-pc);
+    height: var(--banner-height-pc);
+  }
+
+  .container-auto .splide__slide.is-active {
+    width: var(--banner-width-pc-container);
+  }
+
+  .container-auto .splide__slide.is-active .banner-inner {
+    width: var(--banner-width-pc-active);
+    height: var(--banner-height-pc-active);
+  }
+  .container-auto:deep(.splide-arrow) {
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .container-auto:deep(.arrow-prev) {
+    margin-left: calc(-1 * var(--banner-arrow-pc));
+  }
+  .container-auto:deep(.arrow-next) {
+    margin-left: var(--banner-arrow-pc);
+  }
+}
+</style>
diff --git a/layers/components/widgets/ButtonList.vue b/layers/components/widgets/ButtonList.vue
index d5d9830..c1568b7 100644
--- a/layers/components/widgets/ButtonList.vue
+++ b/layers/components/widgets/ButtonList.vue
@@ -1,16 +1,9 @@
 <script setup lang="ts">
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
-import type { ButtonSize } from '#layers/types/components/button'
 
 const props = defineProps<{
   groupsData: PageDataResourceGroup[]
 }>()
-
-const breakpoints = useResponsiveBreakpoints()
-
-const buttonSize = computed<ButtonSize>(() => {
-  return breakpoints.md.value ? 'medium' : 'extra-small'
-})
 </script>
 
 <template>
@@ -21,7 +14,7 @@ const buttonSize = computed<ButtonSize>(() => {
     <AtomsButton
       v-for="button in props.groupsData"
       :key="button.group_code"
-      :size="buttonSize"
+      class="size-extra-small md:size-medium"
       :background-color="button.btn_info?.color_code_btn"
       :text-color="button.btn_info?.color_code_txt"
       :disabled="button.btn_info?.disabled"
diff --git a/layers/composables/useResourcesData.ts b/layers/composables/useResourcesData.ts
new file mode 100644
index 0000000..dc79436
--- /dev/null
+++ b/layers/composables/useResourcesData.ts
@@ -0,0 +1,41 @@
+import type {
+  GetResourcesDataParams,
+  ResourcesDataResponse,
+  ResourcesDataValue,
+} from '#layers/types/api/resourcesData'
+
+export const useResourcesData = () => {
+  const getResourcesData = async (
+    params: GetResourcesDataParams
+  ): Promise<ResourcesDataValue | null> => {
+    const { pageSeq, pageVer, pageVerTmplSeq, langCode, q, qc } = params
+
+    const config = useRuntimeConfig()
+    const stoveApiBaseUrl = config.public.stoveApiUrl
+    const apiUrl = `${stoveApiBaseUrl}/pub-comm/v1.0/template/resources`
+
+    const queryParams: Record<string, string> = {
+      page_seq: pageSeq,
+      page_ver: pageVer,
+      page_ver_tmpl_seq: pageVerTmplSeq,
+      lang_code: langCode,
+      q: q || '',
+      qc: qc || '',
+      _t: Date.now().toString(), // 캐시 무효화를 위한 타임스탬프
+    }
+
+    const response = (await commonFetch('GET', apiUrl, {
+      query: queryParams,
+      loading: true,
+    })) as ResourcesDataResponse | null
+
+    if (response?.code === 0 && 'value' in response) {
+      return response.value
+    }
+    return null
+  }
+
+  return {
+    getResourcesData,
+  }
+}
diff --git a/layers/server/middleware/gameInfo.ts b/layers/server/middleware/gameData.ts
similarity index 100%
rename from layers/server/middleware/gameInfo.ts
rename to layers/server/middleware/gameData.ts
diff --git a/layers/templates/GrVisual01/index.vue b/layers/templates/GrVisual01/index.vue
index 037c1d8..14dc917 100644
--- a/layers/templates/GrVisual01/index.vue
+++ b/layers/templates/GrVisual01/index.vue
@@ -1,42 +1,55 @@
 <script setup lang="ts">
+import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
+
 interface Props {
   components: Record<string, any>
-  pageVerTmplSeq: number
+  pageVerTmplSeq: string
 }
 
 const props = defineProps<Props>()
+
+const backgroundData = computed(() =>
+  getComponentGroup(props.components, 'background')
+)
+const mainTitleData = computed(() =>
+  getComponentGroup(props.components, 'mainTitle')
+)
+const descriptionData = computed(() =>
+  getComponentGroup(props.components, 'description')
+)
+const videoPlayData = computed(() =>
+  getComponentGroup(props.components, 'videoPlay')
+)
+const buttonListData = computed(() =>
+  getComponentGroupAry(props.components, 'buttonList')
+)
 </script>
 
 <template>
   <section class="relative h-[640px] md:h-[1000px]">
     <WidgetsBackground
-      v-if="props.components?.background"
-      :resources-data="props.components?.background.groups[0]"
+      v-if="backgroundData"
+      :resources-data="backgroundData"
       :gradient="true"
     />
     <div
       class="relative h-full flex flex-col items-center justify-center gap-4 md:gap-5"
     >
       <WidgetsMainTitle
-        v-if="props.components.mainTitle && props.components.mainTitle.groups"
-        :resources-data="props.components.mainTitle.groups[0]"
+        v-if="mainTitleData"
+        :resources-data="mainTitleData"
         class="w-[355px] md:w-[944px]"
       />
       <WidgetsDescription
-        v-if="
-          props.components.description && props.components.description.groups
-        "
-        :resources-data="props.components.description.groups[0]"
+        v-if="descriptionData"
+        :resources-data="descriptionData"
         class="w-[355px] md:w-[944px]"
       />
-      <WidgetsVideoPlay
-        v-if="props.components.videoPlay && props.components.videoPlay.groups"
-        :resources-data="props.components.videoPlay.groups[0]"
-      />
+      <WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
       <WidgetsButtonList
-        v-if="props.components.buttonList && props.components.buttonList.groups"
-        :groups-data="props.components.buttonList.groups"
-        class="mt-[48px] md:mt-[72px]"
+        v-if="buttonListData.length > 0"
+        :groups-data="buttonListData"
+        class="mt-[28px] md:mt-[52px]"
       />
     </div>
   </section>
diff --git a/layers/templates/GrVisual02/index.vue b/layers/templates/GrVisual02/index.vue
index c0d7e99..58448e6 100644
--- a/layers/templates/GrVisual02/index.vue
+++ b/layers/templates/GrVisual02/index.vue
@@ -1,11 +1,111 @@
 <script setup lang="ts">
+import { getComponentGroup, getComponentGroupAry } from '#layers/utils/dataUtil'
+
 interface Props {
   components: Record<string, any>
+  pageVerTmplSeq: string
 }
 
-const _props = defineProps<Props>()
+const props = defineProps<Props>()
+
+const pageDataStore = usePageDataStore()
+const { getResourcesData } = useResourcesData()
+
+const { pageData } = storeToRefs(pageDataStore)
+
+const backgroundData = computed(() =>
+  getComponentGroup(props.components, 'background')
+)
+const mainTitleData = computed(() =>
+  getComponentGroup(props.components, 'mainTitle')
+)
+const descriptionData = computed(() =>
+  getComponentGroup(props.components, 'description')
+)
+const videoPlayData = computed(() =>
+  getComponentGroup(props.components, 'videoPlay')
+)
+const buttonListData = computed(() =>
+  getComponentGroupAry(props.components, 'buttonList')
+)
+
+// 비동기 데이터 로딩
+const { data: resourcesData } = await useLazyAsyncData(
+  'gr-visual-02-resources',
+  async () => {
+    if (!pageData.value?.page_seq || !pageData.value?.page_ver) {
+      return null
+    }
+
+    return await getResourcesData({
+      pageSeq: pageData.value.page_seq,
+      pageVer: pageData.value.page_ver,
+      pageVerTmplSeq: props.pageVerTmplSeq,
+      langCode: 'ko',
+    })
+  }
+)
+
+// 배너 리스트 데이터 추출
+const bannerListData = computed(() => {
+  const operateComponents = resourcesData.value?.operate_components
+
+  if (!operateComponents) {
+    return []
+  }
+
+  const firstKey = Object.keys(operateComponents)[0]
+  return operateComponents[firstKey]?.list_operate_groups || []
+})
+
+const bannerSize = {
+  mo: {
+    width: 293,
+    height: 185,
+    gap: 12,
+  },
+  pc: {
+    width: 455,
+    height: 287,
+    gap: 32,
+  },
+}
 </script>
 
 <template>
-  <section class="template-section" />
+  <section class="relative h-[640px] md:h-[1000px]">
+    <WidgetsBackground
+      v-if="backgroundData"
+      :resources-data="backgroundData"
+      :gradient="true"
+    />
+    <div
+      class="relative h-full flex flex-col items-center justify-center gap-4 md:gap-5"
+    >
+      <WidgetsMainTitle
+        v-if="mainTitleData"
+        :resources-data="mainTitleData"
+        class="w-[355px] md:w-[944px]"
+      />
+      <WidgetsDescription
+        v-if="descriptionData"
+        :resources-data="descriptionData"
+        class="w-[355px] md:w-[944px]"
+      />
+      <WidgetsVideoPlay v-if="videoPlayData" :resources-data="videoPlayData" />
+      <WidgetsButtonList
+        v-if="buttonListData.length > 0"
+        :groups-data="buttonListData"
+        class="mt-[48px] md:mt-[72px]"
+      />
+      <WidgetsBannerList
+        :banner-list="bannerListData"
+        banner-mode="auto"
+        :banner-size="bannerSize"
+        :arrows="true"
+        :pagination="false"
+        class="mt-[36px] md:mt-[60px]"
+      />
+    </div>
+  </section>
 </template>
diff --git a/layers/templates/GrVisual03/index.vue b/layers/templates/GrVisual03/index.vue
index b73fd31..6bf0bdb 100644
--- a/layers/templates/GrVisual03/index.vue
+++ b/layers/templates/GrVisual03/index.vue
@@ -1,84 +1,88 @@
 <script setup lang="ts">
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import { EffectFade, Navigation, Pagination } from 'swiper/modules'
-import { getResponsiveClass, getResponsiveSrc } from '#layers/utils/dataUtil'
+import {
+  getResponsiveClass,
+  getResponsiveSrc,
+  hasComponentGroup,
+  getComponentGroup,
+  getComponentGroupAry,
+} from '#layers/utils/dataUtil'
 
 interface Props {
   components: Record<string, any>
-  pageVerTmplSeq: number
+  pageVerTmplSeq: string
 }
 
 const props = defineProps<Props>()
 
 const arrow = computed(() => {
-  return props.components.arrow.groups
+  return getComponentGroupAry(props.components, 'arrow')
 })
 
 const modules = [EffectFade, Navigation, Pagination]
+
+const swiperOptions = computed(() => ({
+  modules,
+  loop: true,
+  effect: 'fade',
+  pagination: {
+    el: '.slide-pagination',
+    clickable: true,
+  } as any,
+  navigation: {
+    nextEl: '.slide-next',
+    prevEl: '.slide-prev',
+  } as any,
+  class: 'h-full',
+}))
 </script>
 
 <template>
   <section class="relative h-[640px] md:h-[1000px]">
-    <Swiper
-      :modules="modules"
-      :loop="true"
-      effect="fade"
-      :pagination="
-        {
-          el: '.slide-pagination',
-          clickable: true,
-        } as any
-      "
-      :navigation="
-        {
-          nextEl: '.slide-next',
-          prevEl: '.slide-prev',
-        } as any
-      "
-      class="h-full"
-    >
+    <Swiper v-bind="swiperOptions">
       <SwiperSlide
         v-for="group in props.components.group_sets"
         :key="group.set_order"
         class="bg-black"
       >
         <WidgetsBackground
-          v-if="group?.background.groups"
-          :resources-data="group.background.groups[0]"
+          v-if="hasComponentGroup(group, 'background')"
+          :resources-data="getComponentGroup(group, 'background')"
         />
         <div
           class="relative h-full flex flex-col items-center justify-center gap-[14px] text-center md:gap-5"
         >
           <WidgetsSubTitle
-            v-if="group.subTitle && group.subTitle.groups"
-            :resources-data="group.subTitle.groups[0]"
+            v-if="hasComponentGroup(group, 'subTitle')"
+            :resources-data="getComponentGroup(group, 'subTitle')"
             class="line-clamp-2 text-[16px] font-[500] leading-[24px] md:line-clamp-1 md:text-[24px] md:leading-[34px]"
           />
           <WidgetsMainTitle
-            v-if="group.mainTitle && group.mainTitle.groups"
-            :resources-data="group.mainTitle.groups[0]"
+            v-if="hasComponentGroup(group, 'mainTitle')"
+            :resources-data="getComponentGroup(group, 'mainTitle')"
             class="line-clamp-3 text-[24px] font-[700] leading-[34px] md:text-[50px] md:leading-[70px]"
           />
           <WidgetsDescription
-            v-if="group.description && group.description.groups"
-            :resources-data="group.description.groups[0]"
+            v-if="hasComponentGroup(group, 'description')"
+            :resources-data="getComponentGroup(group, 'description')"
             class="line-clamp-3 text-[15px] font-[400] leading-[24px] md:text-[20px] md:leading-[30px]"
           />
           <WidgetsButtonList
-            v-if="group.buttonList && group.buttonList.groups"
-            :groups-data="group.buttonList.groups"
+            v-if="hasComponentGroup(group, 'buttonList')"
+            :groups-data="getComponentGroupAry(group, 'buttonList')"
           />
         </div>
       </SwiperSlide>
 
-      <div class="slide-pagination" />
+      <div class="slide-pagination position-absolute" />
 
-      <!-- Navigation buttons -->
       <div
+        v-if="arrow.length > 0"
         class="slide-prev hidden md:block"
         :class="getResponsiveClass()"
         :style="
-          getResponsiveSrc(arrow[0].res_path, {
+          getResponsiveSrc(arrow[0]?.res_path, {
             resourcesType: 'bg',
           })
         "
@@ -86,10 +90,11 @@ const modules = [EffectFade, Navigation, Pagination]
         <span class="sr-only">prev</span>
       </div>
       <div
+        v-if="arrow.length > 1"
         class="slide-next hidden md:block"
         :class="getResponsiveClass()"
         :style="
-          getResponsiveSrc(arrow[1].res_path, {
+          getResponsiveSrc(arrow[1]?.res_path, {
             resourcesType: 'bg',
           })
         "
diff --git a/layers/types/api/pageData.ts b/layers/types/api/pageData.ts
index 8b86731..f6f6c71 100644
--- a/layers/types/api/pageData.ts
+++ b/layers/types/api/pageData.ts
@@ -23,11 +23,11 @@ export interface PageDataResponse {
 
 // API 응답의 value 객체 타입
 export interface PageDataValue {
-  page_seq: number
+  page_seq: string
   page_type: number
   page_name: string
   page_name_en: string
-  page_ver: number
+  page_ver: string
   meta_tag_type: number
   fit_page_height: boolean
   use_top_btn: boolean
diff --git a/layers/types/api/resourcesData.ts b/layers/types/api/resourcesData.ts
new file mode 100644
index 0000000..b0b9b0b
--- /dev/null
+++ b/layers/types/api/resourcesData.ts
@@ -0,0 +1,58 @@
+/**
+ * Resources Data API 타입 정의
+ */
+
+// 리스트 운영 그룹 아이템
+export interface ListOperateGroupItem {
+  seq: number
+  title: string
+  img_path: string
+  url: string
+  link_target: string
+  display_status: number
+  option01: number
+  option02: number
+  option03: string
+}
+
+// 플래그 운영 그룹 아이템
+export interface FlagOperateGroupItem {
+  seq: number
+  flag_type: number
+  option01: number
+  option02: number
+  option03: string
+}
+
+// 운영 컴포넌트 그룹
+export interface OperateComponentGroup {
+  list_operate_groups: ListOperateGroupItem[]
+  flag_operate_groups: FlagOperateGroupItem[]
+}
+
+// 운영 컴포넌트 목록 (동적 키)
+export interface OperateComponents {
+  [key: string]: OperateComponentGroup
+}
+
+// Resources Data 응답 값
+export interface ResourcesDataValue {
+  operate_components: OperateComponents
+}
+
+// Resources Data API 응답
+export interface ResourcesDataResponse {
+  code: number
+  message: string
+  value: ResourcesDataValue
+}
+
+// getResourcesData 함수 파라미터
+export interface GetResourcesDataParams {
+  pageSeq: string
+  pageVer: string
+  pageVerTmplSeq: string
+  langCode: string
+  q?: string
+  qc?: string
+}
diff --git a/layers/utils/dataUtil.ts b/layers/utils/dataUtil.ts
index a5bdc6e..bb48d07 100644
--- a/layers/utils/dataUtil.ts
+++ b/layers/utils/dataUtil.ts
@@ -1,17 +1,77 @@
 import type {
   PageDataValue,
   PageDataResourceGroupResPath,
+  PageDataComponent,
 } from '#layers/types/api/pageData'
 
-// 레이아웃 타입 리턴하는 함수
+// ============================================================================
+// 페이지 데이터 관련 유틸리티
+// ============================================================================
+
+/**
+ * 페이지 데이터를 기반으로 레이아웃 타입을 결정합니다.
+ * @param pageData 페이지 데이터
+ * @returns 레이아웃 타입 ('default' | 'promotion')
+ */
 export const getLayoutType = (
   pageData: PageDataValue | null
 ): 'default' | 'promotion' => {
   return pageData?.page_type === 1 ? 'default' : 'promotion'
 }
 
-// 이미지 호스트 리턴하는 함수
-// [TODO] 환경변수 처리 수정
+// ============================================================================
+// 컴포넌트 데이터 접근 관련 유틸리티
+// ============================================================================
+
+/**
+ * 컴포넌트 그룹에 데이터가 존재하는지 확인합니다.
+ * @param source props.components 또는 group 객체
+ * @param componentName 컴포넌트 이름
+ * @returns 데이터 존재 여부
+ */
+export const hasComponentGroup = (
+  source: any,
+  componentName: string
+): boolean => {
+  if (!source) return false
+
+  const component = source[componentName] as PageDataComponent
+  return component?.groups && component.groups.length > 0
+}
+
+/**
+ * 컴포넌트 그룹의 첫 번째 데이터를 반환합니다.
+ * @param source props.components 또는 group 객체
+ * @param componentName 컴포넌트 이름
+ * @returns 첫 번째 그룹 데이터 또는 null
+ */
+export const getComponentGroup = (source: any, componentName: string) => {
+  if (!source) return null
+
+  return source[componentName]?.groups?.[0] || null
+}
+
+/**
+ * 컴포넌트 그룹의 모든 데이터를 반환합니다.
+ * @param source props.components 또는 group 객체
+ * @param componentName 컴포넌트 이름
+ * @returns 그룹 배열 데이터
+ */
+export const getComponentGroupAry = (source: any, componentName: string) => {
+  if (!source) return []
+
+  return source[componentName]?.groups || []
+}
+
+// ============================================================================
+// 리소스/이미지 처리 관련 유틸리티
+// ============================================================================
+
+/**
+ * 이미지 경로를 완전한 호스트 URL로 변환합니다.
+ * @param path 이미지 경로
+ * @returns 완전한 이미지 URL
+ */
 export const getResolvedHost = (path: string): string => {
   const config = useRuntimeConfig()
   //   const isDev = process.env.NODE_ENV === "development";
@@ -22,12 +82,12 @@ export const getResolvedHost = (path: string): string => {
   return `${rootPath}${path}`
 }
 
-// 반응형 클래스 리턴하는 함수
-export const getResponsiveClass = () => {
-  return ['bg-[image:var(--mobile-bg)]', 'sm:bg-[image:var(--pc-bg)]']
-}
-
-// 통합된 반응형 리소스 함수
+/**
+ * 반응형 리소스(이미지/비디오)를 처리하여 PC/모바일 버전을 반환합니다.
+ * @param pathArray 리소스 경로 배열
+ * @param options 리소스 타입 옵션
+ * @returns 반응형 리소스 객체 또는 null
+ */
 export const getResponsiveSrc = (
   pathArray: PageDataResourceGroupResPath,
   options: {
@@ -59,3 +119,15 @@ export const getResponsiveSrc = (
     pcSrc: resolvedImages.pc,
   }
 }
+
+// ============================================================================
+// 스타일링 관련 유틸리티
+// ============================================================================
+
+/**
+ * 반응형 배경 이미지를 위한 CSS 클래스를 반환합니다.
+ * @returns 반응형 배경 클래스 배열
+ */
+export const getResponsiveClass = () => {
+  return ['bg-[image:var(--mobile-bg)]', 'sm:bg-[image:var(--pc-bg)]']
+}