zenn
8f53210756
- 설정 미리보기를 HomeHero와 동일한 오버레이로 표시하고 편집 모드에서 크게 보이도록 조정 - 오버레이 본문 줄바꿈이 홈·미리보기에서 보이도록 whitespace-pre-line 적용
59 lines
1.5 KiB
Vue
59 lines
1.5 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
/** 커버 이미지 URL */
|
|
imageUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 오버레이 제목 */
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 오버레이 본문 */
|
|
text: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
})
|
|
|
|
/** @type {import('vue').ComputedRef<boolean>} */
|
|
const hasOverlay = computed(() => Boolean(props.title?.trim() || props.text?.trim()))
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
v-if="imageUrl"
|
|
class="home-hero relative mx-auto w-full max-w-[720px] overflow-hidden"
|
|
data-home-hero
|
|
>
|
|
<div class="home-hero__frame relative aspect-[720/215] w-full bg-[var(--site-panel)]">
|
|
<img
|
|
class="home-hero__cover absolute inset-0 h-full w-full object-cover"
|
|
:src="imageUrl"
|
|
alt=""
|
|
loading="eager"
|
|
>
|
|
<div
|
|
v-if="hasOverlay"
|
|
class="home-hero__overlay pointer-events-none absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/35 to-transparent px-4 pb-4 pt-12 sm:px-5 sm:pb-5"
|
|
>
|
|
<div class="home-hero__overlay-inner flex flex-col items-start gap-1 text-left">
|
|
<h2
|
|
v-if="title"
|
|
class="home-hero__title text-base font-semibold leading-snug text-white sm:text-lg"
|
|
>
|
|
{{ title }}
|
|
</h2>
|
|
<p
|
|
v-if="text"
|
|
class="home-hero__text max-w-[32rem] whitespace-pre-line text-sm leading-relaxed text-white/85"
|
|
>
|
|
{{ text }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|