zenn
00999404a4
페이지 섹션 관리와 홈 Pages 진열장 연동, 공개 목록 표시개수 설정 관련 누적 로컬 변경을 기능 단위로 정리해 반영한다. 문서 이력과 패키지 버전을 v1.9.23으로 맞춰 코드와 문서 상태를 동기화한다. Co-authored-by: Cursor <cursoragent@cursor.com>
72 lines
1.8 KiB
Vue
72 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]"
|
|
:class="aspectClass"
|
|
>
|
|
<img
|
|
v-if="displayImage"
|
|
class="post-card-media__image h-full w-full rounded-[inherit] object-cover transition-opacity duration-200 group-hover:opacity-90"
|
|
: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)] transition-opacity duration-200 group-hover:opacity-90"
|
|
: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>
|