브랜드 컬러 설정 추가 v1.5.36

pages/admin/settings/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ANNOUNCEMENT_BACKGROUND_PRESETS } from '~/lib/announcement-bar.js'
+import { DEFAULT_BRAND_COLOR, normalizeBrandColor } from '~/lib/brand-color.js'
 import {
   normalizeSignupBlockedUsernames,
   parseSignupBlockedUsernamesFromText
@@ -15,6 +16,7 @@ const savingTitleDesc = ref(false)
 const savingMisc = ref(false)
 const savingPost = ref(false)
 const savingHomeCover = ref(false)
+const savingBrand = ref(false)
 const savingAnnouncement = ref(false)
 const savingSpam = ref(false)
 const savingSiteCode = ref(false)
@@ -56,6 +58,8 @@ const editMisc = ref(false)
 const editPost = ref(false)
 /** 메인 화면 커버 카드 편집 모드 여부 */
 const editHomeCover = ref(false)
+/** 브랜드 컬러 카드 편집 모드 여부 */
+const editBrand = ref(false)
 /** 어나운스 바 맞춤 설정 패널 열림 여부 */
 const customizeAnnouncement = ref(false)
 /** 스팸 필터 카드 편집 모드 여부 */
@@ -86,6 +90,10 @@ const homeCoverSnapshot = reactive({
   homeCoverTitle: '',
   homeCoverText: ''
 })
+/** 편집 시작 시점의 브랜드 설정(취소 시 복원용) */
+const brandSnapshot = reactive({
+  brandColor: DEFAULT_BRAND_COLOR
+})
 /** 맞춤 설정 시작 시점의 어나운스 바(취소 시 복원용) */
 const announcementSnapshot = reactive({
   announcementEnabled: false,
@@ -128,6 +136,7 @@ const form = reactive({
   homeCoverDarkImageUrl: settings.value?.homeCoverDarkImageUrl || '',
   homeCoverTitle: settings.value?.homeCoverTitle || '',
   homeCoverText: settings.value?.homeCoverText || '',
+  brandColor: normalizeBrandColor(settings.value?.brandColor || DEFAULT_BRAND_COLOR),
   announcementEnabled: Boolean(settings.value?.announcementEnabled),
   announcementText: settings.value?.announcementText || '',
   announcementUrl: settings.value?.announcementUrl || '',
@@ -177,6 +186,13 @@ const hasHomeCoverChanges = computed(() => editHomeCover.value && (
   || form.homeCoverText !== homeCoverSnapshot.homeCoverText
 ))
 
+/**
+ * 브랜드 설정 변경 여부
+ * @returns {boolean} 변경 여부
+ */
+const hasBrandChanges = computed(() => editBrand.value
+  && normalizeBrandColor(form.brandColor) !== normalizeBrandColor(brandSnapshot.brandColor))
+
 /**
  * 어나운스 바 변경 여부
  * @returns {boolean} 변경 여부
@@ -471,6 +487,7 @@ const settingsNavGroups = [
     heading: '사이트',
     items: [
       { id: 'admin-settings-section-home-cover', label: '메인 화면', keywords: 'home cover hero banner image', iconId: 'home-cover' },
+      { id: 'admin-settings-section-brand', label: '브랜드', keywords: 'brand design accent color point 포인트 컬러', iconId: 'site-code' },
       { id: 'admin-settings-section-announcement', label: '어나운스 바', keywords: 'announcement banner notice', iconId: 'announcement' },
       { id: 'admin-settings-section-site-code', label: '사이트 코드', keywords: 'ads ads.txt head footer script code adsense', iconId: 'site-code' }
     ]
@@ -1042,6 +1059,7 @@ const buildSiteSettingsPayload = () => ({
   homeCoverDarkImageUrl: form.homeCoverDarkImageUrl || '',
   homeCoverTitle: form.homeCoverTitle || '',
   homeCoverText: form.homeCoverText || '',
+  brandColor: normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR),
   announcementEnabled: Boolean(form.announcementEnabled),
   announcementText: form.announcementText || '',
   announcementUrl: form.announcementUrl || '',
@@ -1369,6 +1387,55 @@ const saveHomeCoverSection = async () => {
   }
 }
 
+/**
+ * 브랜드 설정 편집 모드 진입
+ * @returns {void}
+ */
+const beginEditBrand = () => {
+  brandSnapshot.brandColor = normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR)
+  form.brandColor = brandSnapshot.brandColor
+  editBrand.value = true
+}
+
+/**
+ * 브랜드 설정 편집 취소
+ * @returns {void}
+ */
+const cancelEditBrand = () => {
+  form.brandColor = brandSnapshot.brandColor
+  editBrand.value = false
+}
+
+/**
+ * 브랜드 컬러 입력값을 정규화한다.
+ * @returns {void}
+ */
+const normalizeBrandColorInput = () => {
+  form.brandColor = normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR)
+}
+
+/**
+ * 브랜드 설정 저장
+ * @returns {Promise<void>}
+ */
+const saveBrandSection = async () => {
+  normalizeBrandColorInput()
+
+  if (!hasBrandChanges.value) {
+    return
+  }
+
+  const ok = await persistSiteSettings({
+    successToast: '브랜드 컬러가 저장되었습니다.',
+    savingFlag: savingBrand
+  })
+
+  if (ok) {
+    brandSnapshot.brandColor = normalizeBrandColor(form.brandColor || DEFAULT_BRAND_COLOR)
+    editBrand.value = false
+  }
+}
+
 /**
  * 어나운스 바 맞춤 설정 패널을 연다.
  * @returns {void}
@@ -2310,6 +2377,129 @@ 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>
+
           <section
             id="admin-settings-section-announcement"
             class="admin-settings-screen__card admin-settings-screen__card--announcement 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"