블로그 제목 설명 카드 분리
This commit is contained in:
@@ -2193,150 +2193,17 @@ onBeforeUnmount(() => {
|
||||
<h2 class="admin-settings-screen__section-heading z-20 -mt-[5px] mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
|
||||
일반 설정
|
||||
</h2>
|
||||
<section
|
||||
id="admin-settings-section-title"
|
||||
data-testid="title-and-description"
|
||||
class="admin-settings-screen__card admin-settings-screen__card--title-desc 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">
|
||||
<h5 class="text-base font-semibold text-[#15171a] md:text-lg">
|
||||
블로그 제목·설명
|
||||
</h5>
|
||||
<p
|
||||
v-if="!editTitleDesc"
|
||||
class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080] md:block"
|
||||
>
|
||||
공개 사이트에서 사이트 이름과 소개로 사용되는 값입니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
|
||||
<template v-if="!editTitleDesc">
|
||||
<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="beginEditTitleDesc"
|
||||
>
|
||||
편집
|
||||
</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="savingTitleDesc"
|
||||
@click="cancelEditTitleDesc"
|
||||
>
|
||||
취소
|
||||
</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="savingTitleDesc || !hasTitleDescChanges"
|
||||
@click="saveTitleDescSection"
|
||||
>
|
||||
{{ savingTitleDesc ? '저장 중' : '저장' }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!editTitleDesc"
|
||||
class="admin-settings-screen__readonly-list grid gap-4 border-t border-[#eceff2] pt-5 text-sm"
|
||||
>
|
||||
<div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
|
||||
<h6 class="text-sm font-normal tracking-normal text-[#3f4650]">
|
||||
사이트 이름
|
||||
</h6>
|
||||
<div class="min-w-0 text-sm font-normal leading-relaxed text-[#15171a]">
|
||||
{{ form.title?.trim() ? form.title : '—' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-settings-screen__readonly-row grid gap-1 md:grid-cols-[7.5rem_minmax(0,1fr)] md:items-center md:gap-5">
|
||||
<h6 class="text-sm font-normal tracking-normal text-[#3f4650]">
|
||||
사이트 설명
|
||||
</h6>
|
||||
<div class="min-w-0 whitespace-pre-wrap text-sm font-normal leading-relaxed text-[#15171a]">
|
||||
{{ form.description?.trim() ? form.description : '—' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="admin-settings-screen__field grid gap-3 border-t border-[#eceff2] pt-5">
|
||||
<div>
|
||||
<span class="font-bold text-[#15171a]">업로드 제한</span>
|
||||
<p class="mt-1 text-xs leading-relaxed text-[#657080]">
|
||||
파일 추가나 글쓰기 미디어 업로드에서 한 번에 처리할 수 있는 최대치를 선택합니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="grid gap-3 sm:grid-cols-2">
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-xs font-semibold text-[#657080]">파일 수</span>
|
||||
<AdminSelectInput
|
||||
v-model="form.uploadMaxFileCount"
|
||||
:options="uploadFileCountSelectOptions"
|
||||
label="업로드 파일 수"
|
||||
select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
||||
width-class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="grid gap-1.5">
|
||||
<span class="text-xs font-semibold text-[#657080]">전체 용량</span>
|
||||
<AdminSelectInput
|
||||
v-model="form.uploadMaxTotalSize"
|
||||
:options="uploadTotalSizeSelectOptions"
|
||||
label="업로드 전체 용량"
|
||||
select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
||||
width-class="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="admin-settings-screen__card-body grid gap-5">
|
||||
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
||||
<span class="font-medium text-[#3f4650]">사이트 이름</span>
|
||||
<input
|
||||
v-model="form.title"
|
||||
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"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
||||
<span class="font-medium text-[#3f4650]">사이트 설명</span>
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
class="min-h-28 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]"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<div class="rounded-lg border border-[#eceff2] bg-[#f7f8fa] p-4">
|
||||
<p class="text-xs font-semibold tracking-wide text-[#657080] uppercase">
|
||||
공개 화면 미리보기
|
||||
</p>
|
||||
<div class="mt-3 flex items-center gap-3">
|
||||
<div class="grid h-12 w-12 shrink-0 place-items-center overflow-hidden rounded-xl bg-[#15171a] text-lg font-bold text-white">
|
||||
<img
|
||||
v-if="form.logoUrl"
|
||||
class="h-full w-full object-cover"
|
||||
:src="form.logoUrl"
|
||||
alt=""
|
||||
>
|
||||
<span v-else>{{ form.logoText || '井' }}</span>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<p class="truncate font-semibold text-[#15171a]">
|
||||
{{ form.title || 'sori.studio' }}
|
||||
</p>
|
||||
<p class="truncate text-sm text-[#657080]">
|
||||
{{ form.description || '사이트 설명이 공개 화면에 표시됩니다.' }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<AdminTitleDescriptionSettingsCard
|
||||
:form="form"
|
||||
:editing="editTitleDesc"
|
||||
:saving="savingTitleDesc"
|
||||
:has-changes="hasTitleDescChanges"
|
||||
:upload-file-count-options="uploadFileCountSelectOptions"
|
||||
:upload-total-size-options="uploadTotalSizeSelectOptions"
|
||||
@begin="beginEditTitleDesc"
|
||||
@cancel="cancelEditTitleDesc"
|
||||
@save="saveTitleDescSection"
|
||||
/>
|
||||
|
||||
<section
|
||||
id="admin-settings-section-misc"
|
||||
|
||||
Reference in New Issue
Block a user