브랜드 설정 카드 분리
This commit is contained in:
@@ -3108,128 +3108,16 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="admin-settings-section-brand"
|
||||
class="admin-settings-screen__card admin-settings-screen__card--brand 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="!editBrand"
|
||||
class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
|
||||
>
|
||||
사용자 화면의 포인트 컬러입니다. 활성 네비게이션, TOC, 댓글 버튼 등에 공통으로 적용됩니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
|
||||
<template v-if="!editBrand">
|
||||
<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="beginEditBrand"
|
||||
>
|
||||
편집
|
||||
</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="savingBrand"
|
||||
@click="cancelEditBrand"
|
||||
>
|
||||
취소
|
||||
</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="savingBrand || !hasBrandChanges"
|
||||
@click="saveBrandSection"
|
||||
>
|
||||
{{ savingBrand ? '저장 중' : '저장' }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-5 border-t border-[#eceff2] pt-5">
|
||||
<div
|
||||
v-if="!editBrand"
|
||||
class="admin-settings-screen__brand-readonly flex flex-col gap-4 rounded-lg border border-[#edf0f2] bg-[#fafafa] p-4 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<span
|
||||
class="size-12 shrink-0 rounded-full border border-black/10"
|
||||
:style="{ backgroundColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div>
|
||||
<p class="text-sm font-bold text-[#15171a]">
|
||||
포인트 컬러
|
||||
</p>
|
||||
<p class="mt-1 font-mono text-sm text-[#657080]">
|
||||
{{ normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<span
|
||||
class="inline-flex rounded-full px-3 py-1 text-xs font-bold text-white"
|
||||
:style="{ backgroundColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }"
|
||||
>
|
||||
활성 배지
|
||||
</span>
|
||||
<span
|
||||
class="inline-flex border-b-2 px-1 py-1 text-xs font-bold"
|
||||
:style="{ borderColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR), color: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }"
|
||||
>
|
||||
TOC
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="admin-settings-screen__brand-edit grid gap-4 rounded-lg border border-[#edf0f2] bg-[#fafafa] p-4">
|
||||
<label class="admin-settings-screen__field grid gap-2 text-sm">
|
||||
<span class="font-medium text-[#3f4650]">브랜드 컬러</span>
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
|
||||
<input
|
||||
class="h-12 w-full rounded-md border border-[#dce0e5] bg-white px-2 py-1 sm:w-20"
|
||||
type="color"
|
||||
:value="normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR)"
|
||||
@input="form.brandColor = $event.target.value"
|
||||
>
|
||||
<input
|
||||
v-model="form.brandColor"
|
||||
class="h-12 min-w-0 flex-1 rounded-md border border-[#dce0e5] bg-white px-3 font-mono text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
|
||||
type="text"
|
||||
placeholder="#ff4f2e"
|
||||
@blur="normalizeBrandColorInput"
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
<p class="text-sm leading-relaxed text-[#657080]">
|
||||
3자리 또는 6자리 hex 컬러를 사용할 수 있습니다. 비워두거나 잘못된 값은 기본 오렌지 컬러로 되돌립니다.
|
||||
</p>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<span
|
||||
class="inline-flex h-10 items-center rounded-full px-4 text-sm font-bold text-white"
|
||||
:style="{ backgroundColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }"
|
||||
>
|
||||
댓글 등록
|
||||
</span>
|
||||
<span
|
||||
class="inline-flex h-10 items-center border-b-2 px-1 text-sm font-bold"
|
||||
:style="{ borderColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR), color: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR) }"
|
||||
>
|
||||
활성 TOC
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<AdminBrandSettingsCard
|
||||
v-model:brand-color="form.brandColor"
|
||||
:editing="editBrand"
|
||||
:saving="savingBrand"
|
||||
:has-changes="hasBrandChanges"
|
||||
@begin="beginEditBrand"
|
||||
@cancel="cancelEditBrand"
|
||||
@save="saveBrandSection"
|
||||
@normalize="normalizeBrandColorInput"
|
||||
/>
|
||||
|
||||
<section
|
||||
id="admin-settings-section-announcement"
|
||||
|
||||
Reference in New Issue
Block a user