feat. GR_GALLERY_01 템플릿 제작

layers/components/widgets/ButtonList.vue

@@ -3,17 +3,19 @@ import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 const props = defineProps<{
   groupsData: PageDataResourceGroup[]
+  buttonType?: string
 }>()
 </script>
 
 <template>
   <div
     v-if="props.groupsData"
-    class="flex flex-wrap justify-center gap-3 sm:gap-4"
+    class="flex flex-wrap justify-center gap-3 md:gap-4"
   >
     <AtomsButton
       v-for="button in props.groupsData"
       :key="button.group_code"
+      :button-type="props.buttonType"
       class="size-extra-small md:size-medium"
       :background-color="button.btn_info?.color_code_btn"
       :text-color="button.btn_info?.color_code_txt"

layers/components/widgets/VideoPlay.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import { getResponsiveSrc, getResponsiveClass } from '#layers/utils/dataUtil'
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
 const props = defineProps<{ resourcesData: PageDataResourceGroup }>()
 
-const bgStyles = getResponsiveSrc(props.resourcesData?.res_path, {
-  resourcesType: 'bg',
-})
-
 // YouTube 모달 스토어 사용
 const modalStore = useModalStore()
 
@@ -19,16 +14,8 @@ const handleVideoPlayClick = () => {
 </script>
 
 <template>
-  <button
-    v-if="resourcesData && bgStyles"
-    class="relative group bg-cover bg-center bg-no-repeat w-[66px] h-[66px] sm:w-[100px] sm:h-[100px]"
-    :class="getResponsiveClass()"
-    :style="bgStyles"
+  <AtomsButtonPlay
+    :resources-data="resourcesData"
     @click="handleVideoPlayClick"
-  >
-    <span
-      class="absolute inset-0 m-[10px] bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-300 ease-in-out rounded-[50%]"
-    />
-    <span class="sr-only">videoPlay</span>
-  </button>
+  />
 </template>