zenn
dcd1060ec7
- 로고 업로드는 파일 URL만 폼에 반영하고 기타 설정 저장 시 DB에 반영 - 메인 화면 커버 라이트·다크 이미지 필드 추가 및 테마별 HomeHero 교체 - home_cover_dark_image_url 마이그레이션 및 미디어 사용 현황 보정
110 lines
2.8 KiB
Vue
110 lines
2.8 KiB
Vue
<script setup>
|
|
const props = defineProps({
|
|
/** 커버 이미지 URL */
|
|
imageUrl: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
/** 다크모드 커버 이미지 URL */
|
|
darkImageUrl: {
|
|
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()))
|
|
/** @type {import('vue').ComputedRef<boolean>} */
|
|
const lightImageUrl = computed(() => props.imageUrl?.trim() || props.darkImageUrl?.trim() || '')
|
|
/** @type {import('vue').ComputedRef<boolean>} */
|
|
const hasDarkImage = computed(() => Boolean(props.imageUrl?.trim() && props.darkImageUrl?.trim()))
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
v-if="lightImageUrl"
|
|
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 home-hero__cover--light absolute inset-0 h-full w-full object-cover',
|
|
hasDarkImage ? '' : 'home-hero__cover--single'
|
|
]"
|
|
:src="lightImageUrl"
|
|
alt=""
|
|
loading="eager"
|
|
>
|
|
<img
|
|
v-if="hasDarkImage"
|
|
class="home-hero__cover home-hero__cover--dark absolute inset-0 h-full w-full object-cover"
|
|
:src="darkImageUrl"
|
|
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>
|
|
|
|
<style scoped>
|
|
.home-hero__cover--dark {
|
|
display: none;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.home-hero__cover--light:not(.home-hero__cover--single) {
|
|
display: none;
|
|
}
|
|
|
|
.home-hero__cover--dark {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
html[data-theme='light'] .home-hero__cover--light {
|
|
display: block;
|
|
}
|
|
|
|
html[data-theme='light'] .home-hero__cover--dark {
|
|
display: none;
|
|
}
|
|
|
|
html[data-theme='dark'] .home-hero__cover--light:not(.home-hero__cover--single) {
|
|
display: none;
|
|
}
|
|
|
|
html[data-theme='dark'] .home-hero__cover--dark {
|
|
display: block;
|
|
}
|
|
</style>
|