v1.4.4: 메인 화면 커버 미리보기·오버레이 줄바꿈 수정

- 설정 미리보기를 HomeHero와 동일한 오버레이로 표시하고 편집 모드에서 크게 보이도록 조정
- 오버레이 본문 줄바꿈이 홈·미리보기에서 보이도록 whitespace-pre-line 적용
This commit is contained in:
2026-05-21 19:01:17 +09:00
parent 9e5728074a
commit 8f53210756
4 changed files with 23 additions and 26 deletions

View File

@@ -1328,24 +1328,16 @@ onBeforeUnmount(() => {
v-if="!editHomeCover"
class="admin-settings-screen__home-cover-readonly grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
>
<div v-if="form.homeCoverImageUrl" class="overflow-hidden rounded-lg border border-[#e6e8eb]">
<img
class="aspect-[720/215] w-full max-w-[360px] object-cover"
:src="form.homeCoverImageUrl"
alt="메인 화면 커버 미리보기"
>
<div v-if="form.homeCoverImageUrl" class="admin-settings-screen__home-cover-preview w-full max-w-[720px] overflow-hidden rounded-lg border border-[#e6e8eb]">
<HomeHero
:image-url="form.homeCoverImageUrl"
:title="form.homeCoverTitle"
:text="form.homeCoverText"
/>
</div>
<p v-else class="text-[#657080]">
등록된 커버 이미지가 없습니다. 상단 배너는 표시되지 않습니다.
</p>
<div v-if="form.homeCoverTitle || form.homeCoverText" class="grid gap-1">
<p v-if="form.homeCoverTitle" class="font-semibold text-[#15171a]">
{{ form.homeCoverTitle }}
</p>
<p v-if="form.homeCoverText" class="text-[#657080]">
{{ form.homeCoverText }}
</p>
</div>
</div>
<div v-else class="admin-settings-screen__home-cover-edit grid gap-6 border-t border-[#eceff2] pt-5">
@@ -1357,16 +1349,6 @@ onBeforeUnmount(() => {
<p class="mt-1 max-w-md text-sm leading-relaxed text-[#657080]">
가로 720px WebP로 변환해 미리 불러옵니다. 제목·본문과 함께 저장 버튼을 눌러야 사이트에 반영됩니다.
</p>
<div
v-if="form.homeCoverImageUrl"
class="mt-3 overflow-hidden rounded-lg border border-[#e6e8eb]"
>
<img
class="aspect-[720/215] w-full max-w-[360px] object-cover"
:src="form.homeCoverImageUrl"
alt="커버 미리보기"
>
</div>
</div>
<div class="flex shrink-0 flex-wrap gap-2">
<button
@@ -1397,6 +1379,17 @@ onBeforeUnmount(() => {
>
</div>
<div
v-if="form.homeCoverImageUrl"
class="admin-settings-screen__home-cover-preview w-full max-w-[720px] overflow-hidden rounded-lg border border-[#e6e8eb]"
>
<HomeHero
:image-url="form.homeCoverImageUrl"
:title="form.homeCoverTitle"
:text="form.homeCoverText"
/>
</div>
<label class="admin-settings-screen__field grid gap-2 text-sm">
<span class="font-medium text-[#3f4650]">오버레이 제목</span>
<input