zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메인 화면 설정 카드 분리

Browse Source
This commit is contained in:
zenn
2026-07-24 10:55:32 +09:00
parent a76dcc8111
commit eb27d2846f
7 changed files with 357 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

312
pages/admin/settings/index.vue
View File

@@ -79,8 +79,6 @@ const postExportMaxFileSizeMb = ref(500)
const postImportExportPanel = ref('')
const errorMessage = ref('')
const { toast, showToast } = useAdminToast()
const homeCoverInputRef = ref(null)
const homeCoverDarkInputRef = ref(null)
const mainScrollRef = ref(null)
const navSearchQuery = ref('')
const {
@@ -1516,30 +1514,6 @@ const savePostSection = async () => {
}
}
/**
* 메인 화면 커버 파일 선택 창을 연다.
* @returns {void}
*/
const openHomeCoverFilePicker = () => {
if (uploadingHomeCover.value) {
return
}
homeCoverInputRef.value?.click()
}
/**
* 메인 화면 다크 커버 파일 선택 창을 연다.
* @returns {void}
*/
const openHomeCoverDarkFilePicker = () => {
if (uploadingHomeCoverDark.value) {
return
}
homeCoverDarkInputRef.value?.click()
}
/**
* 메인 화면 커버 이미지 파일을 업로드한다.
* @param {File} file - 업로드 파일
@@ -2182,278 +2156,20 @@ onBeforeUnmount(() => {
<h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
사이트
</h2>
<section
id="admin-settings-section-home-cover"
class="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="!editHomeCover"
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="!editHomeCover">
<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="beginEditHomeCover"
>
편집
</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="savingHomeCover"
@click="cancelEditHomeCover"
>
취소
</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="savingHomeCover || !hasHomeCoverChanges"
@click="saveHomeCoverSection"
>
{{ savingHomeCover ? '저장 중' : '저장' }}
</button>
</template>
</div>
</div>
<div
v-if="!editHomeCover"
class="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-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="uploadingHomeCover"
@click="openHomeCoverFilePicker"
>
{{ uploadingHomeCover ? '업로드 중' : '이미지 변경' }}
</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="uploadingHomeCover"
@click="clearHomeCoverImage('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="uploadingHomeCover"
@click="openHomeCoverFilePicker"
@dragover.prevent
@drop.prevent="dropHomeCover($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="uploadingHomeCover"
@change="uploadHomeCover($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="uploadingHomeCoverDark"
@click="openHomeCoverDarkFilePicker"
>
{{ uploadingHomeCoverDark ? '업로드 중' : '이미지 변경' }}
</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="uploadingHomeCoverDark"
@click="clearHomeCoverImage('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="uploadingHomeCoverDark"
@click="openHomeCoverDarkFilePicker"
@dragover.prevent
@drop.prevent="dropHomeCover($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="uploadingHomeCoverDark"
@change="uploadHomeCover($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>
<AdminHomeCoverSettingsCard
:form="form"
:editing="editHomeCover"
:saving="savingHomeCover"
:uploading-light="uploadingHomeCover"
:uploading-dark="uploadingHomeCoverDark"
:has-changes="hasHomeCoverChanges"
@begin="beginEditHomeCover"
@cancel="cancelEditHomeCover"
@save="saveHomeCoverSection"
@upload-cover="uploadHomeCover"
@drop-cover="dropHomeCover"
@clear-cover="clearHomeCoverImage"
/>
<AdminBrandSettingsCard
v-model:brand-color="form.brandColor"