From ccdac87c52d7b7d169c96f69959a849748d4d976 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Tue, 28 Oct 2025 19:02:14 +0900
Subject: [PATCH] =?UTF-8?q?feat.=20GR=5FBOARD=5F01=20=ED=85=9C=ED=94=8C?=
 =?UTF-8?q?=EB=A6=BF=20=EC=A0=9C=EC=9E=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/atoms/icons/Stove.vue    |  30 ++++
 layers/components/blocks/CardNews.vue      |  36 ++--
 layers/components/blocks/slide/Default.vue |  24 +--
 layers/composables/useBreakpoints.ts       |  29 ++--
 layers/composables/useResourcesData.ts     |  62 +++++++
 layers/composables/useTemplateRegistry.ts  |   4 +-
 layers/templates/GrBoard01/index.vue       | 184 +++++++++++++++------
 layers/templates/GrVisual03/index.vue      |   1 -
 layers/types/api/gameData.ts               |   1 +
 layers/types/api/resourcesData.ts          |  84 +++++++++-
 10 files changed, 359 insertions(+), 96 deletions(-)
 create mode 100644 layers/components/atoms/icons/Stove.vue

diff --git a/layers/components/atoms/icons/Stove.vue b/layers/components/atoms/icons/Stove.vue
new file mode 100644
index 0000000..35ed446
--- /dev/null
+++ b/layers/components/atoms/icons/Stove.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+interface Props {
+  sizeWidth?: number | string
+  sizeHeight?: number | string
+  color?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  sizeWidth: 135,
+  sizeHeight: 31,
+  color: 'rgba(255, 255, 255, 0.08)',
+})
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="sizeWidth"
+    :height="sizeHeight"
+    viewBox="0 0 135 31"
+    fill="none"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M65.9658 0C74.4383 0 81.3068 6.90745 81.3068 15.4283C81.3068 23.9494 74.4383 30.8571 65.9658 30.8571C57.4933 30.8571 50.625 23.9494 50.625 15.4283C50.625 6.90745 57.4933 0 65.9658 0ZM12.4448 0L12.9557 0.00697756C15.4797 0.0733309 19.8527 0.629977 21.6427 2.39984C22.3836 3.13237 22.7487 4.03727 22.7487 5.20086C22.7487 7.01081 21.5008 8.36013 19.4958 8.36013C19.1053 8.36013 18.6266 8.26269 18.0662 8.12237L16.7423 7.77597L16.1457 7.62738C15.0177 7.35789 13.7033 7.11727 12.2268 7.11727L12.0123 7.11842L11.5954 7.1281C11.4593 7.13307 11.3262 7.13987 11.1964 7.14872L10.8174 7.18163C9.46693 7.32645 8.56167 7.74586 8.56167 8.73536C8.56167 9.00113 8.63372 9.25763 8.84273 9.56697C8.92457 9.68822 9.03003 9.80832 9.15918 9.92514L9.30434 10.0474C9.52737 10.234 9.81136 10.4002 10.1452 10.5528L10.4433 10.6805L10.7642 10.8026C10.8195 10.8225 10.8757 10.8422 10.9328 10.8618L11.2851 10.9772L11.6564 11.0895L12.2456 11.2541L13.083 11.4716L14.6562 11.8688L15.3589 12.0542L15.8329 12.1852L16.3096 12.3233L16.7873 12.4695C16.867 12.4946 16.9466 12.5201 17.0261 12.546L17.5026 12.7062L17.9763 12.877C21.4361 14.1705 24.5455 16.3947 24.5455 21.2905C24.5455 27.7977 18.8955 30.8571 11.8782 30.8571C11.5472 30.8571 11.2065 30.8484 10.8589 30.8309L10.3328 30.798L9.79841 30.7517C9.61917 30.7341 9.43891 30.7142 9.258 30.6921L8.71365 30.6189C4.43977 29.9931 0 28.1196 0 24.824C0 22.9281 1.23673 21.2928 3.24174 21.2928C3.82242 21.2928 4.47617 21.5035 5.23867 21.7971L6.73633 22.3876C8.27629 22.9778 10.1924 23.5865 12.6601 23.5865C15.2941 23.5865 16.5392 23.0235 16.5392 21.8507C16.5392 21.2905 16.3213 20.9712 15.9727 20.6264C15.5773 20.2536 14.9941 19.941 14.283 19.653L13.9172 19.511L13.5316 19.372L13.1282 19.2353L12.4929 19.032L10.1832 18.3307L9.45436 18.1004L8.71892 17.855L8.22776 17.6813L7.73785 17.4986C7.33058 17.3421 6.92636 17.1751 6.52954 16.995L6.05719 16.7724C3.09162 15.3204 0.653916 13.0502 0.653916 8.83679C0.653916 3.36387 5.51446 0 12.4448 0ZM124.741 0.000892635L125.554 0.013555L126.523 0.0433528L127.228 0.0756991L127.962 0.120103C129.819 0.247666 131.794 0.504927 132.754 1.01681C134.249 1.81446 135.152 3.24935 134.979 4.92967C134.757 7.08065 133.013 8.00872 130.909 7.85456L129.929 7.76082L129.153 7.6975L128.426 7.64696L127.59 7.59863L126.659 7.55682L125.993 7.53471L125.295 7.51871L124.57 7.51009L123.953 7.51013L123.369 7.5229L122.693 7.55011L122.082 7.58477L121.631 7.6162L120.899 7.67791L120.378 7.72996L119.836 7.7917C119.541 7.8274 119.311 8.05909 119.268 8.34841L119.26 8.44679V11.9702H128.936C130.83 11.9702 132.483 13.5146 132.502 15.4278C132.484 17.2793 130.935 18.7854 129.119 18.8807L128.936 18.8855H119.26V22.4092C119.26 22.7428 119.508 23.0243 119.836 23.064L120.38 23.126L121.154 23.2009L121.867 23.2567L122.507 23.2962L123.225 23.3282L124.036 23.3466L124.936 23.3426L125.648 23.3301L126.33 23.3109L126.979 23.2862L127.88 23.2418L128.681 23.1922L129.929 23.0952L130.705 23.0197C132.899 22.7885 134.749 23.706 134.979 25.9263C135.152 27.6063 134.249 29.0417 132.754 29.839C131.858 30.3169 130.078 30.5729 128.335 30.7087L127.593 30.7598L126.871 30.798L126.186 30.825L125.554 30.8426L124.741 30.8553L124.311 30.8571L123.532 30.8532L122.807 30.8417L122.133 30.8229L121.505 30.7974L120.919 30.7655L120.372 30.7276L119.86 30.6841L119.378 30.6354L118.924 30.5819L118.284 30.4935L117.682 30.3966L117.296 30.328C115.503 29.9931 114.302 29.2196 113.504 28.2146C112.309 26.7095 112.017 24.687 111.991 22.8458L111.989 22.5567V8.29902C111.989 6.38321 112.246 4.22574 113.504 2.64119C114.302 1.63619 115.503 0.862721 117.296 0.527825L117.682 0.459191L118.284 0.362352L118.924 0.274048L119.378 0.220587L119.86 0.171919L120.641 0.108777L121.207 0.0738394L121.813 0.045093L122.464 0.0229378C122.576 0.0198168 122.691 0.016987 122.807 0.0144569L123.532 0.00293801C123.657 0.00163963 123.785 0.000657516 123.915 0L124.741 0.000892635ZM105.114 0C106.514 0 108.92 1.29256 108.92 4.27844C108.92 10.7852 104.564 23.9441 99.5744 29.203C98.5402 30.2929 97.2194 30.8745 95.8805 30.8567C94.5417 30.8745 93.2209 30.2929 92.1866 29.203C87.1967 23.9441 82.8409 10.7852 82.8409 4.27844C82.8409 1.29256 85.1724 0 86.6469 0C89.1988 0 90.0587 1.664 90.4322 3.83399L90.495 4.23386C91.3444 10.0741 93.0838 15.5802 95.4907 21.1182L95.8231 21.8736H95.9378C98.405 16.3319 100.215 10.8388 101.145 5.02821L101.266 4.23386C101.604 1.87181 102.408 0 105.114 0ZM37.9454 0L38.636 0.00597379L39.305 0.0174181L40.2664 0.0436928L41.1746 0.0793219L42.027 0.122533L43.072 0.188878L44.0064 0.261349L45.0089 0.354153L45.8158 0.441758L46.7921 0.568547L46.9266 0.589544C49.3692 1.01449 50.8232 2.76256 50.6031 4.93558C50.3904 7.03866 48.7069 8.21353 46.6922 8.08073L44.8767 7.95809L42.6827 7.8408L41.3809 7.78416V27.2831C41.3809 29.9057 39.3399 30.8571 37.4047 30.8571C35.5697 30.8571 33.7565 29.9625 33.6483 27.5169L33.6432 27.2831V7.784L31.7611 7.87651L28.6147 8.06308C26.5104 8.28923 24.7859 7.10924 24.566 4.93606C24.3526 2.82858 25.8191 1.08429 28.047 0.628473L28.347 0.576105L29.406 0.442676L30.2334 0.355041L31.2532 0.262094L32.4483 0.17209L33.2423 0.122935L34.0896 0.0795933L34.9864 0.0438487L35.9291 0.0174838L36.5813 0.00599859L37.2511 2.88366e-06L37.9454 0ZM65.9658 7.71429C61.7296 7.71429 58.2955 11.1679 58.2955 15.4283C58.2955 19.6889 61.7296 23.1429 65.9658 23.1429C70.2024 23.1429 73.6364 19.6889 73.6364 15.4283C73.6364 11.1679 70.2024 7.71429 65.9658 7.71429Z"
+      :fill="color"
+    />
+  </svg>
+</template>
diff --git a/layers/components/blocks/CardNews.vue b/layers/components/blocks/CardNews.vue
index 70dad2c..929e499 100644
--- a/layers/components/blocks/CardNews.vue
+++ b/layers/components/blocks/CardNews.vue
@@ -3,7 +3,7 @@ interface Props {
   title: string
   description: string | number
   imgPath: string
-  linkTarget?: string
+  linkTarget?: '_blank' | '_self'
   url?: string
   alt?: string
   class?: string
@@ -13,6 +13,10 @@ const props = defineProps<Props>()
 const { locale } = useI18n()
 const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 
+const isShowOverlay = computed(() => {
+  return props.title || props.description
+})
+
 const handleLinkClick = (title: string) => {
   const trackingData = {
     tracking: {
@@ -26,17 +30,18 @@ const handleLinkClick = (title: string) => {
 </script>
 
 <template>
-  <div
-    v-if="props.title || props.description"
-    :class="`card-news ${props.class || ''}`"
-  >
+  <div :class="['card-news', { 'no-image': !props.imgPath }, props.class]">
     <img
+      v-if="props.imgPath"
       :src="props.imgPath"
       :alt="props.title || props.alt"
       class="card-image"
       loading="lazy"
     />
-    <div class="card-overlay">
+    <span v-else class="card-stove">
+      <AtomsIconsStove />
+    </span>
+    <div v-if="isShowOverlay" class="card-overlay">
       <h3 v-if="props.title" class="card-title">
         {{ props.title }}
       </h3>
@@ -47,7 +52,7 @@ const handleLinkClick = (title: string) => {
     <a
       v-if="props.url"
       :href="props.url"
-      :target="props.linkTarget"
+      :target="props.linkTarget || '_self'"
       class="card-link"
       @click="handleLinkClick(props.title)"
     />
@@ -56,7 +61,7 @@ const handleLinkClick = (title: string) => {
 
 <style scoped>
 .card-news {
-  @apply overflow-hidden relative flex items-center justify-center h-full rounded-lg
+  @apply overflow-hidden relative flex flex-col 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;
 }
@@ -64,10 +69,10 @@ const handleLinkClick = (title: string) => {
   @apply transition-transform duration-300 w-full h-full object-cover;
 }
 .card-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] text-left md:px-[26px] md:pb-[26px];
+  @apply absolute bottom-0 left-0 w-full 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] text-left md:px-[26px] md:pb-[26px];
 }
 .card-title {
-  @apply text-[14px] leading-[20px] font-medium text-white md:text-lg md:leading-[26px];
+  @apply text-[14px] leading-[20px] font-medium text-white md:text-[18px] md:leading-[26px];
 }
 .card-description {
   @apply mt-[6px] text-[12px] leading-[18px] text-white/50 md:mt-1 md:text-[14px] md:leading-[24px];
@@ -75,4 +80,15 @@ const handleLinkClick = (title: string) => {
 .card-link {
   @apply absolute top-0 left-0 w-full h-full z-[5];
 }
+
+.card-stove {
+  @apply relative w-full h-full bg-[#333333];
+}
+.card-stove svg {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
+.no-image .card-overlay {
+  @apply relative bg-[#1f1f1f];
+}
 </style>
diff --git a/layers/components/blocks/slide/Default.vue b/layers/components/blocks/slide/Default.vue
index 807d501..cdb1102 100644
--- a/layers/components/blocks/slide/Default.vue
+++ b/layers/components/blocks/slide/Default.vue
@@ -8,6 +8,7 @@ interface Props {
   slideItemLength?: number
   autoplay?: boolean
   perPage?: number
+  drag?: boolean
   arrows?: boolean
   pagination?: boolean
   paginationData?: PageDataResourceGroups
@@ -16,6 +17,8 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   autoplay: false,
+  perPage: 1,
+  drag: true,
   arrows: true,
   pagination: true,
 })
@@ -25,26 +28,25 @@ const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
 
-const perPage = computed(() => props.perPage ?? 1)
-const isMultipleItems = computed(
-  () => (props.slideItemLength ?? 0) > perPage.value
-)
-const resolvedType = computed<ResponsiveOptions['type']>(() => {
+const slideType = computed(() => {
   if (props.type) return props.type
-  return isMultipleItems.value ? 'loop' : 'slide'
+
+  return (props.slideItemLength ?? 0) > 1 ? 'loop' : 'slide'
 })
 
 const options = computed((): ResponsiveOptions => {
   return {
-    type: resolvedType.value,
+    type: slideType.value,
     autoWidth: true,
     autoHeight: true,
-    perPage: perPage.value,
+    perPage: props.perPage,
     speed: 500,
     updateOnMove: true,
     autoplay: props.autoplay,
-    arrows: props.arrows && isMultipleItems.value,
-    pagination: props.pagination && isMultipleItems.value,
+    drag: props.drag,
+    trimSpace: false,
+    arrows: props.arrows,
+    pagination: props.pagination,
     classes: {
       arrows: 'splide-arrows',
       arrow: 'splide-arrow',
@@ -82,7 +84,7 @@ const handleMove = (
   <Splide
     :options="options"
     class="w-full"
-    :style="getPaginationClass(props.paginationData)"
+    :style="getPaginationClass(props?.paginationData)"
     @splide:mounted="handleSplideMounted"
     @splide:move="handleMove"
   >
diff --git a/layers/composables/useBreakpoints.ts b/layers/composables/useBreakpoints.ts
index ccbed4e..9c476fc 100644
--- a/layers/composables/useBreakpoints.ts
+++ b/layers/composables/useBreakpoints.ts
@@ -1,8 +1,8 @@
-import { useMediaQuery } from '@vueuse/core'
+import { useBreakpoints } from '@vueuse/core'
 import { getDeviceSrc } from '#layers/utils/styleUtil'
 import type { PageDataResourceGroupResPath } from '#layers/types/api/pageData'
 
-const BREAKPOINTS = {
+export const BREAKPOINTS = {
   xs: 360,
   sm: 768,
   md: 1024,
@@ -10,24 +10,16 @@ const BREAKPOINTS = {
 } as const
 
 /**
- * useMediaQuery 기반 반응형 브레이크포인트
+ * useBreakpoints 기반 반응형 브레이크포인트
  */
 export const useResponsiveBreakpoints = () => {
-  const ssrWidth = BREAKPOINTS.xs
-  const isXs = useMediaQuery(`(min-width: ${BREAKPOINTS.xs}px)`, { ssrWidth })
-  const isSm = useMediaQuery(`(min-width: ${BREAKPOINTS.sm}px)`, { ssrWidth })
-  const isMd = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`, { ssrWidth })
-  const isLg = useMediaQuery(`(min-width: ${BREAKPOINTS.lg}px)`, { ssrWidth })
-  const isMobile = useMediaQuery(`(max-width: ${BREAKPOINTS.md - 1}px)`, {
-    ssrWidth,
-  })
-  const isTablet = useMediaQuery(
-    `(min-width: ${BREAKPOINTS.sm}px) and (max-width: ${BREAKPOINTS.md - 1}px)`,
-    { ssrWidth }
-  )
-  const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`, {
-    ssrWidth,
-  })
+  const breakpoints = useBreakpoints(BREAKPOINTS)
+  const isXs = breakpoints.smaller('sm') // < 768px
+  const isSm = breakpoints.smaller('md') // < 1024px
+  const isMd = breakpoints.smaller('lg') // < 1440px
+  const isLg = breakpoints.greater('lg') // >= 1440px
+  const isMobile = isXs || isSm
+  const isDesktop = isLg || isMd
 
   return computed(() => ({
     isXs: isXs.value,
@@ -35,7 +27,6 @@ export const useResponsiveBreakpoints = () => {
     isMd: isMd.value,
     isLg: isLg.value,
     isMobile: isMobile.value,
-    isTablet: isTablet.value,
     isDesktop: isDesktop.value,
   }))
 }
diff --git a/layers/composables/useResourcesData.ts b/layers/composables/useResourcesData.ts
index d850298..b7d9a3a 100644
--- a/layers/composables/useResourcesData.ts
+++ b/layers/composables/useResourcesData.ts
@@ -2,9 +2,18 @@ import type {
   getOperateResourcesDataParams,
   OperateResourcesDataResponse,
   OperateComponents,
+  getCwmsArticleDataParams,
+  CwmsArticleDataResponse,
+  CwmsArticleData,
 } from '#layers/types/api/resourcesData'
 
 export const useResourcesData = () => {
+  /**
+   *
+   * @param params getOperateResourcesDataParams
+   * @returns OperateComponents | null
+   * @description 운영 리소스 데이터 조회
+   */
   const getOperateResourcesData = async (
     params: getOperateResourcesDataParams
   ): Promise<OperateComponents | null> => {
@@ -35,7 +44,60 @@ export const useResourcesData = () => {
     return null
   }
 
+  /**
+   *
+   * @param articleGroupCode 게시판 그룹 코드 (예: 128093)
+   * @param options 옵션 객체
+   * @returns 게시판 글 목록 응답
+   */
+  const getCwmsArticleData = async (
+    articleGroupCode: string,
+    articleGroupSeq: number,
+    params: getCwmsArticleDataParams
+  ): Promise<CwmsArticleData | null> => {
+    const {
+      lang,
+      sortTypeCode,
+      interactionTypeCodes,
+      handleCode,
+      contentYn,
+      summaryYn,
+      headlineTitleYn,
+      translationYn,
+      page,
+      size,
+    } = params
+
+    const config = useRuntimeConfig()
+    const stoveApiBaseUrl = config.public.stoveApiUrl
+    const apiUrl = `${stoveApiBaseUrl}/cwms/v3.0/article_group/${articleGroupCode}/${articleGroupSeq}/article/list`
+
+    const queryParams: Record<string, string | number | boolean> = {
+      lang: lang,
+      sort_type_code: sortTypeCode,
+      interaction_type_code: interactionTypeCodes?.join(','),
+      handle_code: handleCode ? 'Y' : 'N',
+      content_yn: contentYn ? 'Y' : 'N',
+      summary_yn: summaryYn ? 'Y' : 'N',
+      headline_title_yn: headlineTitleYn ? 'Y' : 'N',
+      translation_yn: translationYn ? 'Y' : 'N',
+      page: page,
+      size: size,
+    }
+
+    const response = (await commonFetch('GET', apiUrl, {
+      query: queryParams,
+      loading: true,
+    })) as CwmsArticleDataResponse | null
+
+    if (response?.code === 0 && 'value' in response) {
+      return response.value
+    }
+    return null
+  }
+
   return {
     getOperateResourcesData,
+    getCwmsArticleData,
   }
 }
diff --git a/layers/composables/useTemplateRegistry.ts b/layers/composables/useTemplateRegistry.ts
index bbca03e..8f97ba3 100644
--- a/layers/composables/useTemplateRegistry.ts
+++ b/layers/composables/useTemplateRegistry.ts
@@ -7,7 +7,7 @@ import GrGallery03 from '#layers/templates/GrGallery03/index.vue'
 import GrDetail01 from '#layers/templates/GrDetail01/index.vue'
 import GrDetail02 from '#layers/templates/GrDetail02/index.vue'
 import GrDetail03 from '#layers/templates/GrDetail03/index.vue'
-// import GrBoard01 from '#layers/templates/GrBoard01/index.vue'
+import GrBoard01 from '#layers/templates/GrBoard01/index.vue'
 import GrContents01 from '#layers/templates/GrContents01/index.vue'
 
 const templateRegistry = {
@@ -17,7 +17,7 @@ const templateRegistry = {
   GR_GALLERY_01: { component: GrGallery01 },
   GR_GALLERY_02: { component: GrGallery02 },
   GR_GALLERY_03: { component: GrGallery03 },
-  // GR_BOARD_01: { component: GrBoard01 },
+  GR_BOARD_01: { component: GrBoard01 },
   GR_DETAIL_01: { component: GrDetail01 },
   GR_DETAIL_02: { component: GrDetail02 },
   GR_DETAIL_03: { component: GrDetail03 },
diff --git a/layers/templates/GrBoard01/index.vue b/layers/templates/GrBoard01/index.vue
index b4f5b11..6573aac 100644
--- a/layers/templates/GrBoard01/index.vue
+++ b/layers/templates/GrBoard01/index.vue
@@ -1,12 +1,8 @@
 <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 { getComponentGroup } from '#layers/utils/dataUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
-import type { OperateGroupItem } from '#layers/types/api/resourcesData'
+import type { CwmsArticleItem } from '#layers/types/api/resourcesData'
 
 interface Props {
   components: PageDataTemplateComponents
@@ -15,46 +11,54 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const gameDataStore = useGameDataStore()
 const pageDataStore = usePageDataStore()
-const { getResourcesData } = useResourcesData()
+const { getCwmsArticleData } = useResourcesData()
 const { locale } = useI18n()
 const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 
+const { gameData } = storeToRefs(gameDataStore)
 const { pageData } = storeToRefs(pageDataStore)
 
+const defaultSlideItem = {
+  article_id: '',
+  media_thumbnail_url: '',
+  title: '',
+  create_datetime: 0,
+}
+
+const boardId = computed(
+  () => getComponentGroup(props.components, 'boardId')?.display?.text
+)
+const paginationData = computed(() => {
+  return getComponentGroupAry(props.components, 'pagination')
+})
 const backgroundData = computed(() =>
   getComponentGroup(props.components, 'background')
 )
 const mainTitleData = computed(() =>
   getComponentGroup(props.components, 'mainTitle')
 )
-
-// const buttonListData = ref(
-//   getComponentGroupAry(slideData?.value[0], 'buttonList')
-// )
+const buttonListData = ref(getComponentGroupAry(props.components, 'buttonList'))
+const descriptionData = computed(() =>
+  getComponentGroup(props.components, 'description')
+)
 
 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) {
+    if (!boardId.value) {
       return []
     }
 
-    const operateGroupList = await getResourcesData({
-      pageSeq: pageData.value.page_seq,
-      pageVer: pageData.value.page_ver,
-      pageVerTmplSeq: props.pageVerTmplSeq,
-      langCode: locale.value,
+    const cwmsArticleData = await getCwmsArticleData('BOARD', boardId.value, {
+      sortTypeCode: 'LATEST',
+      translationYn: true,
+      page: 1,
+      size: 20,
     })
 
-    console.log('operateGroupList', operateGroupList)
-
-    const bannerList = getComponentContainer(operateGroupList, 'bannerList', {
-      hasGroup: true,
-      minLength: 4,
-    }) as OperateGroupItem[]
-
-    return bannerList
+    return cwmsArticleData?.list as CwmsArticleItem[]
   },
   {
     default: () => [],
@@ -62,6 +66,36 @@ const { data: slideData } = await useAsyncData(
   }
 )
 
+const getResponsiveMultiple = (): number => {
+  const breakpoints = useResponsiveBreakpoints()
+
+  if (breakpoints.value.isSm) return 1 // sm: 1개 단위
+  if (breakpoints.value.isMd) return 2 // md: 2개 단위
+  return 4 // 그 외: 4개 단위
+}
+
+const fillToMultipleOfFour = (arr: CwmsArticleItem[]): CwmsArticleItem[] => {
+  const remainderSize = getResponsiveMultiple()
+  const remainder = arr.length % remainderSize
+  const fillCount = remainder === 0 ? 0 : remainderSize - remainder
+  return [
+    ...arr,
+    ...Array(fillCount).fill({ ...defaultSlideItem } as CwmsArticleItem),
+  ]
+}
+
+const filledSlideData = computed(() => {
+  return fillToMultipleOfFour(slideData.value)
+})
+
+const getArticleUrl = (articleId: string) => {
+  const communityUrl = gameData.value?.url_json?.community
+  if (!communityUrl || !articleId || !boardId.value) {
+    return ''
+  }
+  return `${communityUrl}/view/${articleId}?boardKey=${boardId.value}`
+}
+
 const onArrowClick = (direction, targetIndex) => {
   const arrowGroupAry = getComponentGroupAry(props.components, 'arrow')
   const logTracking = arrowGroupAry?.[direction === 'prev' ? 0 : 1]
@@ -70,7 +104,10 @@ const onArrowClick = (direction, targetIndex) => {
 </script>
 
 <template>
-  <section class="relative py-[80px] md:py-[120px]">
+  <section
+    class="relative py-[80px] md:py-[120px]"
+    :style="getPaginationClass(paginationData)"
+  >
     <WidgetsBackground v-if="backgroundData" :resources-data="backgroundData" />
     <div class="section-content px-0">
       <WidgetsMainTitle
@@ -78,37 +115,84 @@ const onArrowClick = (direction, targetIndex) => {
         :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
+      <ClientOnly>
+        <BlocksSlideDefault
+          v-if="slideData.length > 0"
+          :slide-item-length="slideData.length"
+          :per-page="4"
+          :drag="false"
+          :arrows="slideData.length > 4"
+          :pagination="slideData.length > 4"
+          :breakpoints="{
+            [BREAKPOINTS.lg - 1]: {
+              perPage: 2,
+              arrows: slideData.length > 2,
+              pagination: slideData.length > 2,
+            },
+            [BREAKPOINTS.md - 1]: {
+              drag: true,
+              perPage: 1,
+              arrows: false,
+              pagination: false,
+            },
+          }"
+          :class="{ 'is-single': slideData.length === 1 }"
+          @arrow-click="onArrowClick"
+        >
+          <SplideSlide v-for="(item, index) in filledSlideData" :key="index">
+            <div class="slide-inner">
+              <BlocksCardNews
+                :title="item.title"
+                :description="
+                  formatTimestamp(item?.create_datetime, 'YYYY.MM.DD')
+                "
+                :img-path="getResolvedHost(item?.media_thumbnail_url)"
+                :url="getArticleUrl(item?.article_id)"
+                link-target="_blank"
+              />
+            </div>
+          </SplideSlide>
+        </BlocksSlideDefault>
+      </ClientOnly>
+      <WidgetsButtonList
         v-if="buttonListData"
         :resources-data="buttonListData"
         :page-ver-tmpl-seq="props.pageVerTmplSeq"
-        class="mt-[40px] md:mt-[56px]"
-      /> -->
+        class="mt-[48px] md:mt-[64px]"
+      />
+      <WidgetsDescription
+        v-if="descriptionData"
+        :resources-data="descriptionData"
+        class="mt-[32px] md:mt-[48px]"
+      />
     </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)];
+.splide {
+  @apply mt-[24px] md:max-w-[776px] md:mt-[48px] md:mx-auto md:px-[72px] lg:max-w-[1428px];
+}
+.splide:deep(.splide__track) {
+  @apply !px-[20px] md:max-w-[632px] lg:max-w-[1284px] md:mx-auto md:!px-[0] sm:!px-[40px];
+}
+.splide:deep(.arrow-prev) {
+  @apply top-[calc(50%-28px)] left-[0];
+}
+.splide:deep(.arrow-next) {
+  @apply top-[calc(50%-28px)] right-[0];
+}
+.splide__slide {
+  @apply mr-[20px];
+}
+.slide-inner {
+  @apply w-[275px] aspect-[1/1] md:w-[306px] md:box-border;
+}
+
+.splide.is-single {
+  @apply flex justify-center w-auto;
+}
+.splide.is-single:deep(.splide__track) {
+  @apply w-[calc(100%-20px)] md:w-auto;
 }
 </style>
diff --git a/layers/templates/GrVisual03/index.vue b/layers/templates/GrVisual03/index.vue
index 08fc306..4765c93 100644
--- a/layers/templates/GrVisual03/index.vue
+++ b/layers/templates/GrVisual03/index.vue
@@ -6,7 +6,6 @@ import {
   getComponentGroup,
   hasComponentGroup,
 } from '#layers/utils/dataUtil'
-import { getPaginationClass } from '#layers/utils/styleUtil'
 import type { PageDataTemplateComponents } from '#layers/types/api/pageData'
 
 interface Props {
diff --git a/layers/types/api/gameData.ts b/layers/types/api/gameData.ts
index 140c940..b45dae1 100644
--- a/layers/types/api/gameData.ts
+++ b/layers/types/api/gameData.ts
@@ -38,6 +38,7 @@ export interface GameDataValue {
   favicon_json: GameDataFavicon
   meta_tag_json: GameDataMetaTag
   sns_json: GameDataSns
+  url_json: Record<string, { url: string }>
   footer_json: string // JSON 문자열로 변경
   comm_img_json: GameDataCommImg
   market_json: Record<string, { url: string }>
diff --git a/layers/types/api/resourcesData.ts b/layers/types/api/resourcesData.ts
index 82f9cdc..ae0589f 100644
--- a/layers/types/api/resourcesData.ts
+++ b/layers/types/api/resourcesData.ts
@@ -2,7 +2,7 @@
  * Resources Data API 타입 정의
  */
 
-// 리스트 운영 그룹 아이템
+//  OperateResources
 export interface OperateGroupItem {
   seq: number
   flag_type?: number
@@ -25,14 +25,12 @@ export interface OperateComponents {
   [key: string]: OperateGroupList
 }
 
-// Resources Data API 응답
 export interface OperateResourcesDataResponse {
   code: number
   message: string
   value: OperateComponents
 }
 
-// getOperateResourcesData 함수 파라미터
 export interface getOperateResourcesDataParams {
   pageSeq: string
   pageVer: string
@@ -41,3 +39,83 @@ export interface getOperateResourcesDataParams {
   q?: string
   qc?: string
 }
+
+// CwmsArticle
+export interface CwmsArticleAdminOptionSummary {
+  notice_cancel_reservation_yn: 'Y' | 'N'
+  publish_reservation_yn: 'Y' | 'N'
+}
+
+export interface CwmsArticleAttachSummary {
+  image_yn: 'Y' | 'N'
+  movie_yn: 'Y' | 'N'
+  poll_yn: 'Y' | 'N'
+  attach_file_yn: 'Y' | 'N'
+  music_yn: 'Y' | 'N'
+  script_yn: 'Y' | 'N'
+}
+
+export interface CwmsArticleSnapshotUserInfo {
+  nickname: string
+  profile_img: string
+}
+export interface CwmsArticleUserInfo {
+  stove_nickname?: string
+  user_game_info?: Record<string, unknown>
+  snapshot_user_info?: CwmsArticleSnapshotUserInfo
+}
+
+export interface CwmsArticleItem {
+  board_seq: number
+  channel_key: string
+  channel_seq: number
+  article_id: string
+  headline_info?: {
+    headline_seq: number
+    headline_name: string
+  }
+  fixed_yn?: 'Y' | 'N'
+  title: string
+  subtitle: string
+  content?: string
+  summary?: string
+  media_thumbnail_url: string | null
+  media_count: number
+  user_interaction_score_info: Record<string, unknown>
+  create_datetime: number
+  update_datetime: number
+  article_status_code: string
+  user_info: CwmsArticleUserInfo
+  attach_summary_info: CwmsArticleAttachSummary
+  admin_option_summary_info: CwmsArticleAdminOptionSummary
+  view_mode: string
+  source_lang: string | null
+  target_lang?: string | null
+  translation_status: string | null
+}
+
+export interface CwmsArticleData {
+  total: number
+  page: number
+  size: number
+  list: CwmsArticleItem[]
+}
+
+export interface CwmsArticleDataResponse {
+  code: number
+  message: string
+  value: CwmsArticleData
+}
+
+export interface getCwmsArticleDataParams {
+  lang?: string
+  sortTypeCode?: string
+  interactionTypeCodes?: string[]
+  handleCode?: boolean
+  contentYn?: boolean
+  summaryYn?: boolean
+  headlineTitleYn?: boolean
+  translationYn?: boolean
+  page?: number
+  size?: number
+}