From dc369e80659b8ff89f645f69d4314f3efb1a06f3 Mon Sep 17 00:00:00 2001
From: clkim <clkim@smilegate.com>
Date: Wed, 22 Oct 2025 09:22:10 +0900
Subject: [PATCH] =?UTF-8?q?feat.=20video=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layers/components/atoms/Video.vue     | 16 ++++++++++++++++
 layers/templates/GrDetail03/index.vue |  3 +--
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 layers/components/atoms/Video.vue

diff --git a/layers/components/atoms/Video.vue b/layers/components/atoms/Video.vue
new file mode 100644
index 0000000..589f246
--- /dev/null
+++ b/layers/components/atoms/Video.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+interface Props {
+  src: string
+  type?: 'mp4' | 'webm'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'mp4',
+})
+</script>
+
+<template>
+  <video v-if="props.src">
+    <source :src="props.src" :type="`video/${props.type}`" v-bind="$attrs" />
+  </video>
+</template>
diff --git a/layers/templates/GrDetail03/index.vue b/layers/templates/GrDetail03/index.vue
index 35ca118..e150beb 100644
--- a/layers/templates/GrDetail03/index.vue
+++ b/layers/templates/GrDetail03/index.vue
@@ -87,8 +87,7 @@ const handleSplideMove = (_splide: SplideType, newIndex: number) => {
             :resources-data="getComponentGroup(item, 'description')"
             class="mt-2 text-left md:mt-5"
           />
-          <video
-            v-if="hasComponentGroup(item, 'video')"
+          <AtomsVideo
             :src="currentVideoSrc(item)"
             :autoplay="currentSlideIndex === index"
             muted