70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
/** 게시물 링크 */
|
|
to: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
/** 게시물 제목 */
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
/** 대표 이미지 URL */
|
|
featuredImage: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 목록 표시용 대표 이미지 썸네일 URL */
|
|
thumbnailImage: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 썸네일 비율·크기 Tailwind 클래스 */
|
|
aspectClass: {
|
|
type: String,
|
|
default: 'aspect-square sm:aspect-video'
|
|
},
|
|
/** 링크 래퍼 추가 클래스 */
|
|
linkClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 이미지 추가 클래스 */
|
|
imageClass: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
const displayImage = computed(() => props.thumbnailImage || props.featuredImage)
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink
|
|
:to="to"
|
|
class="post-card-media relative block"
|
|
:class="linkClass"
|
|
data-post-card-media
|
|
>
|
|
<figure class="post-card-media__figure overflow-hidden rounded-[10px]">
|
|
<img
|
|
v-if="displayImage"
|
|
class="post-card-media__image w-full rounded-[inherit] object-cover transition-opacity duration-200 group-hover:opacity-90"
|
|
:class="[aspectClass, imageClass]"
|
|
:src="displayImage"
|
|
:alt="title"
|
|
loading="lazy"
|
|
>
|
|
<span
|
|
v-else
|
|
class="post-card-media__placeholder flex w-full items-center justify-center rounded-[inherit] bg-[#F7F4EF] p-4 text-center text-xs leading-snug text-[var(--site-muted)] transition-opacity duration-200 group-hover:opacity-90"
|
|
:class="aspectClass"
|
|
:aria-label="title"
|
|
>
|
|
<span class="post-card-media__placeholder-text max-w-full break-words line-clamp-3 sm:line-clamp-4">{{ title }}</span>
|
|
</span>
|
|
</figure>
|
|
</NuxtLink>
|
|
</template>
|