Fix. GR_VISUAL 템플릿 컴포넌트 정리

layers/components/blocks/CardNews.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  description: string | number
+  imgPath: string
+  linkTarget?: string
+  url?: string
+  class?: string
+}
+
+const props = defineProps<Props>()
+</script>
+
+<template>
+  <div
+    v-if="props.title || props.description"
+    :class="`card-news ${props.class || ''}`"
+  >
+    <img
+      :src="props.imgPath"
+      :alt="props.title"
+      class="card-image"
+      loading="lazy"
+    />
+    <div class="card-overlay">
+      <h3 v-if="props.title" class="card-title">
+        {{ props.title }}
+      </h3>
+      <p v-if="props.description" class="card-description">
+        {{ props.description }}
+      </p>
+    </div>
+    <a
+      v-if="props.url"
+      :href="props.url"
+      :target="props.linkTarget"
+      class="card-link"
+    />
+  </div>
+</template>
+
+<style scoped>
+.card-news {
+  @apply overflow-hidden relative flex 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;
+}
+.card-image {
+  @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] md:px-[26px] md:pb-[26px];
+}
+.card-title {
+  @apply text-[14px] leading-[20px] font-medium text-white md:text-lg md:leading-[26px];
+}
+.card-description {
+  @apply mt-[6px] text-[12px] leading-[18px] text-white/50 md:mt-1 md:text-[14px] md:leading-[24px];
+}
+.card-link {
+  @apply absolute top-0 left-0 w-full h-full z-[5];
+}
+</style>