feat. GR_BOARD_01 템플릿 제작

layers/components/blocks/CardNews.vue

@@ -3,7 +3,7 @@ interface Props {
   title: string
   description: string | number
   imgPath: string
-  linkTarget?: string
+  linkTarget?: '_blank' | '_self'
   url?: string
   alt?: string
   class?: string
@@ -13,6 +13,10 @@ const props = defineProps<Props>()
 const { locale } = useI18n()
 const { sendLog, useAnalyticsLogDataDirect } = useAnalytics()
 
+const isShowOverlay = computed(() => {
+  return props.title || props.description
+})
+
 const handleLinkClick = (title: string) => {
   const trackingData = {
     tracking: {
@@ -26,17 +30,18 @@ const handleLinkClick = (title: string) => {
 </script>
 
 <template>
-  <div
-    v-if="props.title || props.description"
-    :class="`card-news ${props.class || ''}`"
-  >
+  <div :class="['card-news', { 'no-image': !props.imgPath }, props.class]">
     <img
+      v-if="props.imgPath"
       :src="props.imgPath"
       :alt="props.title || props.alt"
       class="card-image"
       loading="lazy"
     />
-    <div class="card-overlay">
+    <span v-else class="card-stove">
+      <AtomsIconsStove />
+    </span>
+    <div v-if="isShowOverlay" class="card-overlay">
       <h3 v-if="props.title" class="card-title">
         {{ props.title }}
       </h3>
@@ -47,7 +52,7 @@ const handleLinkClick = (title: string) => {
     <a
       v-if="props.url"
       :href="props.url"
-      :target="props.linkTarget"
+      :target="props.linkTarget || '_self'"
       class="card-link"
       @click="handleLinkClick(props.title)"
     />
@@ -56,7 +61,7 @@ const handleLinkClick = (title: string) => {
 
 <style scoped>
 .card-news {
-  @apply overflow-hidden relative flex items-center justify-center h-full rounded-lg
+  @apply overflow-hidden relative flex flex-col 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;
 }
@@ -64,10 +69,10 @@ const handleLinkClick = (title: string) => {
   @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] text-left md:px-[26px] md:pb-[26px];
+  @apply absolute bottom-0 left-0 w-full 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] text-left md:px-[26px] md:pb-[26px];
 }
 .card-title {
-  @apply text-[14px] leading-[20px] font-medium text-white md:text-lg md:leading-[26px];
+  @apply text-[14px] leading-[20px] font-medium text-white md:text-[18px] md:leading-[26px];
 }
 .card-description {
   @apply mt-[6px] text-[12px] leading-[18px] text-white/50 md:mt-1 md:text-[14px] md:leading-[24px];
@@ -75,4 +80,15 @@ const handleLinkClick = (title: string) => {
 .card-link {
   @apply absolute top-0 left-0 w-full h-full z-[5];
 }
+
+.card-stove {
+  @apply relative w-full h-full bg-[#333333];
+}
+.card-stove svg {
+  @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+}
+
+.no-image .card-overlay {
+  @apply relative bg-[#1f1f1f];
+}
 </style>

layers/components/blocks/slide/Default.vue

@@ -8,6 +8,7 @@ interface Props {
   slideItemLength?: number
   autoplay?: boolean
   perPage?: number
+  drag?: boolean
   arrows?: boolean
   pagination?: boolean
   paginationData?: PageDataResourceGroups
@@ -16,6 +17,8 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   autoplay: false,
+  perPage: 1,
+  drag: true,
   arrows: true,
   pagination: true,
 })
@@ -25,26 +28,25 @@ const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
 
-const perPage = computed(() => props.perPage ?? 1)
-const isMultipleItems = computed(
-  () => (props.slideItemLength ?? 0) > perPage.value
-)
-const resolvedType = computed<ResponsiveOptions['type']>(() => {
+const slideType = computed(() => {
   if (props.type) return props.type
-  return isMultipleItems.value ? 'loop' : 'slide'
+
+  return (props.slideItemLength ?? 0) > 1 ? 'loop' : 'slide'
 })
 
 const options = computed((): ResponsiveOptions => {
   return {
-    type: resolvedType.value,
+    type: slideType.value,
     autoWidth: true,
     autoHeight: true,
-    perPage: perPage.value,
+    perPage: props.perPage,
     speed: 500,
     updateOnMove: true,
     autoplay: props.autoplay,
-    arrows: props.arrows && isMultipleItems.value,
-    pagination: props.pagination && isMultipleItems.value,
+    drag: props.drag,
+    trimSpace: false,
+    arrows: props.arrows,
+    pagination: props.pagination,
     classes: {
       arrows: 'splide-arrows',
       arrow: 'splide-arrow',
@@ -82,7 +84,7 @@ const handleMove = (
   <Splide
     :options="options"
     class="w-full"
-    :style="getPaginationClass(props.paginationData)"
+    :style="getPaginationClass(props?.paginationData)"
     @splide:mounted="handleSplideMounted"
     @splide:move="handleMove"
   >