332 lines
14 KiB
Vue
332 lines
14 KiB
Vue
<script setup>
|
|
const homeCoverInputRef = ref(null)
|
|
const homeCoverDarkInputRef = ref(null)
|
|
|
|
/**
|
|
* 메인 화면 커버 설정 카드
|
|
* @property {Object} form - 사이트 설정 폼 객체
|
|
* @property {boolean} editing - 편집 모드 여부
|
|
* @property {boolean} saving - 저장 중 여부
|
|
* @property {boolean} uploadingLight - 라이트 커버 업로드 중 여부
|
|
* @property {boolean} uploadingDark - 다크 커버 업로드 중 여부
|
|
* @property {boolean} hasChanges - 변경 여부
|
|
*/
|
|
defineProps({
|
|
form: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
editing: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
saving: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
uploadingLight: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
uploadingDark: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
hasChanges: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
|
|
defineEmits(['begin', 'cancel', 'save', 'upload-cover', 'drop-cover', 'clear-cover'])
|
|
|
|
/**
|
|
* 메인 화면 커버 파일 선택 창을 연다.
|
|
* @param {'light'|'dark'} variant - 커버 이미지 종류
|
|
* @returns {void}
|
|
*/
|
|
const openHomeCoverFilePicker = (variant = 'light') => {
|
|
if (variant === 'dark') {
|
|
homeCoverDarkInputRef.value?.click()
|
|
return
|
|
}
|
|
|
|
homeCoverInputRef.value?.click()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
id="admin-settings-section-home-cover"
|
|
class="admin-home-cover-settings-card admin-settings-screen__card admin-settings-screen__card--home-cover relative flex flex-col gap-6 rounded-xl border border-[#d8dce1] bg-white p-5 transition-all hover:border-[#c5cbd3] hover:shadow-sm md:p-7"
|
|
>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div class="min-w-0 flex-1">
|
|
<h2 class="text-base font-semibold text-[#15171a] md:text-lg">
|
|
메인 화면
|
|
</h2>
|
|
<p
|
|
v-if="!editing"
|
|
class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
|
|
>
|
|
홈 상단에 720px 너비 커버 이미지를 표시합니다. 라이트·다크 이미지를 각각 등록할 수 있고, 이미지·텍스트는 저장 버튼으로 함께 반영합니다.
|
|
</p>
|
|
</div>
|
|
<div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
|
|
<template v-if="!editing">
|
|
<button
|
|
class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black"
|
|
type="button"
|
|
@click="$emit('begin')"
|
|
>
|
|
편집
|
|
</button>
|
|
</template>
|
|
<template v-else>
|
|
<button
|
|
class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#5d6673] transition hover:bg-[#eceff2] hover:text-[#15171a]"
|
|
type="button"
|
|
:disabled="saving"
|
|
@click="$emit('cancel')"
|
|
>
|
|
취소
|
|
</button>
|
|
<button
|
|
class="inline-flex h-7 cursor-pointer items-center justify-center rounded px-3 text-sm font-semibold whitespace-nowrap text-[#15171a] transition hover:bg-[#eceff2] hover:text-black disabled:opacity-50"
|
|
type="button"
|
|
:disabled="saving || !hasChanges"
|
|
@click="$emit('save')"
|
|
>
|
|
{{ saving ? '저장 중' : '저장' }}
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!editing"
|
|
class="admin-home-cover-settings-card__readonly admin-settings-screen__home-cover-readonly grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
|
|
>
|
|
<div class="grid min-w-0 gap-6">
|
|
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<h3 class="text-sm font-bold text-[#15171a]">
|
|
라이트모드
|
|
</h3>
|
|
</div>
|
|
<div
|
|
v-if="form.homeCoverImageUrl"
|
|
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
|
|
>
|
|
<HomeHero
|
|
class="!max-w-full"
|
|
:image-url="form.homeCoverImageUrl"
|
|
:dark-image-url="''"
|
|
:title="form.homeCoverTitle"
|
|
:text="form.homeCoverText"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-full place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
|
|
>
|
|
라이트모드 이미지가 없습니다.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<h3 class="text-sm font-bold text-[#15171a]">
|
|
다크모드
|
|
</h3>
|
|
</div>
|
|
<div
|
|
v-if="form.homeCoverDarkImageUrl"
|
|
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
|
|
>
|
|
<HomeHero
|
|
class="!max-w-full"
|
|
:image-url="form.homeCoverDarkImageUrl"
|
|
:dark-image-url="''"
|
|
:title="form.homeCoverTitle"
|
|
:text="form.homeCoverText"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="admin-settings-screen__home-cover-empty grid aspect-[720/215] w-full max-w-full place-items-center rounded-lg border border-dashed border-[#cfd6de] bg-[#f7f8fa] px-4 text-center text-sm text-[#657080]"
|
|
>
|
|
다크모드 전용 이미지가 없습니다. 공개 화면에서는 라이트모드 이미지를 대신 사용합니다.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="admin-home-cover-settings-card__edit admin-settings-screen__home-cover-edit grid min-w-0 gap-6 border-t border-[#eceff2] pt-5">
|
|
<div class="grid min-w-0 gap-6">
|
|
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="min-w-0">
|
|
<h3 class="text-sm font-bold text-[#15171a]">
|
|
라이트모드
|
|
</h3>
|
|
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
|
기본 헤더 이미지입니다.
|
|
</p>
|
|
</div>
|
|
<div class="flex shrink-0 flex-wrap gap-2">
|
|
<button
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="uploadingLight"
|
|
@click="openHomeCoverFilePicker('light')"
|
|
>
|
|
{{ uploadingLight ? '업로드 중' : '이미지 변경' }}
|
|
</button>
|
|
<button
|
|
v-if="form.homeCoverImageUrl"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#657080] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="uploadingLight"
|
|
@click="$emit('clear-cover', 'light')"
|
|
>
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="form.homeCoverImageUrl"
|
|
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
|
|
>
|
|
<HomeHero
|
|
class="!max-w-full"
|
|
:image-url="form.homeCoverImageUrl"
|
|
:dark-image-url="''"
|
|
:title="form.homeCoverTitle"
|
|
:text="form.homeCoverText"
|
|
/>
|
|
</div>
|
|
<button
|
|
v-else
|
|
class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-full cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
|
|
type="button"
|
|
:disabled="uploadingLight"
|
|
@click="openHomeCoverFilePicker('light')"
|
|
@dragover.prevent
|
|
@drop.prevent="$emit('drop-cover', $event, 'light')"
|
|
>
|
|
<span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
|
|
<svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 16V4" />
|
|
<path d="m7 9 5-5 5 5" />
|
|
<path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
|
|
</svg>
|
|
<span>라이트모드 이미지를 드롭하거나 선택하세요.</span>
|
|
</span>
|
|
</button>
|
|
<input
|
|
ref="homeCoverInputRef"
|
|
class="hidden"
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
:disabled="uploadingLight"
|
|
@change="$emit('upload-cover', $event, 'light')"
|
|
>
|
|
</div>
|
|
|
|
<div class="admin-settings-screen__home-cover-mode grid min-w-0 gap-2">
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="min-w-0">
|
|
<h3 class="text-sm font-bold text-[#15171a]">
|
|
다크모드
|
|
</h3>
|
|
<p class="mt-1 text-sm leading-relaxed text-[#657080]">
|
|
다크모드에서 교체되는 이미지입니다.
|
|
</p>
|
|
</div>
|
|
<div class="flex shrink-0 flex-wrap gap-2">
|
|
<button
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="uploadingDark"
|
|
@click="openHomeCoverFilePicker('dark')"
|
|
>
|
|
{{ uploadingDark ? '업로드 중' : '이미지 변경' }}
|
|
</button>
|
|
<button
|
|
v-if="form.homeCoverDarkImageUrl"
|
|
class="h-10 rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#657080] transition-colors hover:bg-[#f3f5f7] disabled:opacity-50"
|
|
type="button"
|
|
:disabled="uploadingDark"
|
|
@click="$emit('clear-cover', 'dark')"
|
|
>
|
|
삭제
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="form.homeCoverDarkImageUrl"
|
|
class="admin-settings-screen__home-cover-preview w-full max-w-full overflow-hidden rounded-lg border border-[#e6e8eb]"
|
|
>
|
|
<HomeHero
|
|
class="!max-w-full"
|
|
:image-url="form.homeCoverDarkImageUrl"
|
|
:dark-image-url="''"
|
|
:title="form.homeCoverTitle"
|
|
:text="form.homeCoverText"
|
|
/>
|
|
</div>
|
|
<button
|
|
v-else
|
|
class="admin-settings-screen__home-cover-dropzone grid aspect-[720/215] w-full max-w-full cursor-pointer place-items-center rounded-lg border border-dashed border-[#b8c1cc] bg-[#f7f8fa] px-4 text-center transition hover:border-[#15171a] hover:bg-white disabled:cursor-not-allowed disabled:opacity-60"
|
|
type="button"
|
|
:disabled="uploadingDark"
|
|
@click="openHomeCoverFilePicker('dark')"
|
|
@dragover.prevent
|
|
@drop.prevent="$emit('drop-cover', $event, 'dark')"
|
|
>
|
|
<span class="grid place-items-center gap-2 text-sm font-semibold text-[#657080]">
|
|
<svg class="size-6 text-[#8a94a3]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 16V4" />
|
|
<path d="m7 9 5-5 5 5" />
|
|
<path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3" />
|
|
</svg>
|
|
<span>다크모드 이미지를 드롭하거나 선택하세요.</span>
|
|
</span>
|
|
</button>
|
|
<input
|
|
ref="homeCoverDarkInputRef"
|
|
class="hidden"
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
:disabled="uploadingDark"
|
|
@change="$emit('upload-cover', $event, 'dark')"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">오버레이 제목</span>
|
|
<input
|
|
v-model="form.homeCoverTitle"
|
|
class="rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
type="text"
|
|
maxlength="120"
|
|
placeholder="선택 사항"
|
|
>
|
|
</label>
|
|
|
|
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
|
<span class="font-medium text-[#3f4650]">오버레이 본문</span>
|
|
<textarea
|
|
v-model="form.homeCoverText"
|
|
class="min-h-[4.5rem] resize-y rounded-md border border-[#dce0e5] bg-white px-3 py-2 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
|
maxlength="280"
|
|
rows="3"
|
|
placeholder="짧은 소개 문구 (선택 사항)"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
</template>
|