feat. GR_VISUAL_01 컴포넌트 제작

layers/components/widgets/Background.vue

@@ -2,10 +2,14 @@
 import { getResponsiveClass, getResponsiveSrc } from '#layers/utils/dataUtil'
 import type { PageDataResourceGroup } from '#layers/types/api/pageData'
 
-const props = defineProps<{
+interface Props {
   resourcesData: PageDataResourceGroup
-  gradientClass?: string
-}>()
+  gradient?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  gradient: false,
+})
 
 const resPath = computed(() => {
   return props.resourcesData?.res_path
@@ -37,10 +41,10 @@ const posterSrc = computed(() => {
 
     <!-- 비디오 타입 -->
     <template v-else-if="resourcesData?.group_type === 'video'">
-      <!-- 모바일 비디오 (sm 미만) -->
+      <!-- 모바일 비디오 (md 미만) -->
       <video
         v-if="videoSrc?.mobileSrc"
-        class="w-full h-full object-cover sm:hidden"
+        class="w-full h-full object-cover md:hidden"
         :poster="posterSrc?.mobileSrc"
         autoplay
         muted
@@ -50,10 +54,10 @@ const posterSrc = computed(() => {
         <source :src="videoSrc.mobileSrc" type="video/mp4" />
         <source :src="videoSrc.mobileSrc" type="video/webm" />
       </video>
-      <!-- PC 비디오 (sm 이상) -->
+      <!-- PC 비디오 (md 이상) -->
       <video
         v-if="videoSrc?.pcSrc"
-        class="w-full h-full object-cover hidden sm:block"
+        class="w-full h-full object-cover hidden md:block"
         :poster="posterSrc?.pcSrc"
         autoplay
         muted
@@ -65,6 +69,17 @@ const posterSrc = computed(() => {
       </video>
     </template>
 
-    <div class="absolute inset-0" :class="gradientClass" />
+    <!-- 그라디언트 오버레이 (gradient가 true일 때만) -->
+    <div
+      v-if="props.gradient"
+      class="absolute bottom-0 left-0 right-0 h-[342px] md:h-[720px] bg-gradient-to-b from-[#100d0f]/0 to-[#100d0f]"
+      style="
+        background: linear-gradient(
+          180deg,
+          rgba(16, 13, 15, 0) 0%,
+          #100d0f 30%
+        );
+      "
+    />
   </div>
 </template>