feat. GR_GALLERY_01 템플릿 제작

layers/components/atoms/Button/Play.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { PageDataResourceGroup } from '#layers/types/api/pageData'
+
+const props = defineProps<{ resourcesData: PageDataResourceGroup }>()
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const bgStyles = getResponsiveSrc(props.resourcesData?.res_path, {
+  resourcesType: 'bg',
+})
+</script>
+
+<template>
+  <button
+    v-if="resourcesData && bgStyles"
+    class="relative group bg-cover bg-center bg-no-repeat w-[66px] h-[66px] md:w-[100px] md:h-[100px]"
+    :class="getResponsiveClass()"
+    :style="bgStyles"
+    @click="emit('click')"
+  >
+    <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">Play</span>
+  </button>
+</template>

layers/components/atoms/Button/index.vue

@@ -6,6 +6,7 @@ interface ButtonProps {
   textColor?: string
   icon?: string
   disabled?: boolean
+  backgroundImage?: string
 }
 
 const props = withDefaults(defineProps<ButtonProps>(), {
@@ -35,10 +36,21 @@ const buttonClasses = computed(() => [
   props.disabled ? 'cursor-default' : 'cursor-pointer',
 ])
 
-const buttonStyles = computed(() => ({
-  backgroundColor: getColorValue(props.backgroundColor),
-  color: getColorValue(props.textColor),
-}))
+const buttonStyles = computed(() => {
+  const styles: Record<string, string> = {
+    backgroundColor: getColorValue(props.backgroundColor),
+    color: getColorValue(props.textColor),
+  }
+
+  if (props.backgroundImage) {
+    styles.backgroundImage = `url(${props.backgroundImage})`
+    styles.backgroundSize = 'contain'
+    styles.backgroundPosition = 'center'
+    styles.backgroundRepeat = 'no-repeat'
+  }
+
+  return styles
+})
 
 const overlayClasses = computed(() => [
   'absolute inset-0 -m-px transition-opacity duration-200',