zenn
3fb8a40031
라이브 모드 코드/콜아웃/토글 편집, 슬래시 명령, 홈 Latest List·Compact·Cards 보기, 사이트 설정 메인 화면 커버(720px) 및 HomeHero 반영. Co-authored-by: Cursor <cursoragent@cursor.com>
63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
<script setup>
|
|
defineProps({
|
|
/** 게시물 링크 */
|
|
to: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
/** 게시물 제목 */
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
/** 대표 이미지 URL */
|
|
featuredImage: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 썸네일 비율·크기 Tailwind 클래스 */
|
|
aspectClass: {
|
|
type: String,
|
|
default: 'aspect-square sm:aspect-video'
|
|
},
|
|
/** 링크 래퍼 추가 클래스 */
|
|
linkClass: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 이미지 추가 클래스 */
|
|
imageClass: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
</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="featuredImage"
|
|
class="post-card-media__image w-full rounded-[inherit] object-cover transition-opacity duration-200 group-hover:opacity-90"
|
|
:class="[aspectClass, imageClass]"
|
|
:src="featuredImage"
|
|
: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 line-clamp-4">{{ title }}</span>
|
|
</span>
|
|
</figure>
|
|
</NuxtLink>
|
|
</template>
|