Merge branch 'feature/202501107-all' into feature/20251001-gil

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

@@ -7,6 +7,8 @@ interface Props {
   type?: ResponsiveOptions['type']
   slideItemLength?: number
   autoplay?: boolean
+  perPage?: number
+  drag?: boolean
   arrows?: boolean
   pagination?: boolean
   paginationData?: PageDataResourceGroups
@@ -15,6 +17,8 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   autoplay: false,
+  perPage: 1,
+  drag: true,
   arrows: true,
   pagination: true,
 })
@@ -24,22 +28,25 @@ const emit = defineEmits(['mounted', 'move', 'arrowClick'])
 // Splide 화살표 로직을 위한 composable 사용
 const { addArrowClickListeners } = useSplideArrow()
 
-const isMultipleItems = computed(() => (props.slideItemLength ?? 0) > 1)
-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: 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',
@@ -77,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"
   >

layers/components/blocks/slide/Thumbnail.vue

@@ -154,21 +154,23 @@ onBeforeUnmount(() => {
 .thumbnail-splide {
   @apply overflow-hidden flex justify-center;
 }
+.thumbnail-splide:deep(.splide__track) {
+  @apply md:w-[calc(100%-16px)];
+}
 .thumbnail-slide {
-  @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] md:mr-[16px]
+  @apply overflow-hidden relative mr-[12px] !border-none rounded-[4px] bg-[var(--pagination-disabled)] md:mr-[16px] md:bg-transparent
   after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:border after:rounded-[4px];
-  background-color: var(--pagination-disabled);
 }
 .thumbnail-slide:hover,
 .thumbnail-slide.is-active {
-  background-color: var(--pagination-active);
+  @apply bg-[var(--pagination-active)] md:bg-transparent;
 }
 .thumbnail-slide::after {
-  border-color: var(--pagination-disabled);
+  @apply border-[var(--pagination-disabled)];
 }
 .thumbnail-slide:hover::after,
 .thumbnail-slide.is-active::after {
-  border-color: var(--pagination-active);
+  @apply border-[var(--pagination-active)];
 }
 
 /* 기본 버전 스타일 */
@@ -178,7 +180,7 @@ onBeforeUnmount(() => {
   @apply h-full;
 }
 .thumbnail-carousel.thumbnail-default .thumbnail-splide {
-  @apply absolute bottom-[32px] left-1/2 -translate-x-1/2 max-w-[100%] md:bottom-[48px] md:max-w-[896px] md:px-[72px];
+  @apply absolute bottom-[32px] left-1/2 -translate-x-1/2 max-w-[100%] md:bottom-[48px] md:max-w-[896px] md:px-[64px];
 }
 .thumbnail-carousel.thumbnail-default:deep(.arrow-prev) {
   @apply left-0;
@@ -199,8 +201,11 @@ onBeforeUnmount(() => {
 }
 
 /* 미디어 버전 스타일 */
+.thumbnail-carousel.thumbnail-media {
+  @apply flex flex-col items-center;
+}
 .thumbnail-carousel.thumbnail-media .thumbnail-splide {
-  @apply w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-fit md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[120px];
+  @apply w-screen mt-[20px] mx-[-20px] sm:mx-[-40px] md:w-auto md:max-w-[100%] md:mt-[28px] md:mx-auto md:px-[112px];
 }
 .thumbnail-carousel.thumbnail-media .thumbnail-splide:deep(.splide__track) {
   @apply !px-[20px] sm:!px-[40px] md:!px-[0];