zenn
a07d0350c2
- 카드 hover/누름 시 썸네일 은은한 확대 보조 피드백 추가(메인·전체·태그 공통) - 썸네일 sticky opacity hover 제거 - 게시글 댓글 기본 정렬을 인기순에서 최신순으로 변경, 옵션 순서 조정 - v1.10.36 Co-authored-by: Cursor <cursoragent@cursor.com>
72 lines
1.7 KiB
Vue
72 lines
1.7 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]"
|
|
:class="aspectClass"
|
|
>
|
|
<img
|
|
v-if="displayImage"
|
|
class="post-card-media__image h-full w-full rounded-[inherit] object-cover"
|
|
:class="imageClass"
|
|
:src="displayImage"
|
|
:alt="title"
|
|
loading="lazy"
|
|
>
|
|
<span
|
|
v-else
|
|
class="post-card-media__placeholder flex h-full w-full items-center justify-center rounded-[inherit] bg-[#F7F4EF] p-4 text-center text-xs leading-snug text-[var(--site-muted)]"
|
|
: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>
|