어나운스 바 설정 확장 v1.5.38

pages/admin/settings/index.vue

@@ -1,5 +1,12 @@
 <script setup>
-import { ANNOUNCEMENT_BACKGROUND_PRESETS } from '~/lib/announcement-bar.js'
+import {
+  ANNOUNCEMENT_ALIGNMENT_OPTIONS,
+  ANNOUNCEMENT_BACKGROUND_PRESETS,
+  DEFAULT_ANNOUNCEMENT_ALIGNMENT,
+  DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR,
+  normalizeAnnouncementAlignment,
+  normalizeAnnouncementBackgroundColor
+} from '~/lib/announcement-bar.js'
 import { DEFAULT_BRAND_COLOR, normalizeBrandColor } from '~/lib/brand-color.js'
 import {
   normalizeSignupBlockedUsernames,
@@ -99,7 +106,8 @@ const announcementSnapshot = reactive({
   announcementEnabled: false,
   announcementText: '',
   announcementUrl: '',
-  announcementBackgroundColor: '#15171a'
+  announcementBackgroundColor: DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR,
+  announcementAlignment: DEFAULT_ANNOUNCEMENT_ALIGNMENT
 })
 /** 편집 시작 시점의 스팸 필터(취소 시 복원용) */
 const spamSnapshot = reactive({
@@ -140,7 +148,8 @@ const form = reactive({
   announcementEnabled: Boolean(settings.value?.announcementEnabled),
   announcementText: settings.value?.announcementText || '',
   announcementUrl: settings.value?.announcementUrl || '',
-  announcementBackgroundColor: settings.value?.announcementBackgroundColor || '#15171a',
+  announcementBackgroundColor: normalizeAnnouncementBackgroundColor(settings.value?.announcementBackgroundColor || DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR),
+  announcementAlignment: normalizeAnnouncementAlignment(settings.value?.announcementAlignment || DEFAULT_ANNOUNCEMENT_ALIGNMENT),
   signupBlockedUsernames: normalizeSignupBlockedUsernames(settings.value?.signupBlockedUsernames),
   adsTxt: settings.value?.adsTxt || '',
   customHeadCode: settings.value?.customHeadCode || '',
@@ -201,7 +210,8 @@ const hasAnnouncementChanges = computed(() => customizeAnnouncement.value && (
   form.announcementEnabled !== announcementSnapshot.announcementEnabled
   || form.announcementText !== announcementSnapshot.announcementText
   || form.announcementUrl !== announcementSnapshot.announcementUrl
-  || form.announcementBackgroundColor !== announcementSnapshot.announcementBackgroundColor
+  || normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor) !== normalizeAnnouncementBackgroundColor(announcementSnapshot.announcementBackgroundColor)
+  || normalizeAnnouncementAlignment(form.announcementAlignment) !== normalizeAnnouncementAlignment(announcementSnapshot.announcementAlignment)
 ))
 
 /**
@@ -1063,7 +1073,8 @@ const buildSiteSettingsPayload = () => ({
   announcementEnabled: Boolean(form.announcementEnabled),
   announcementText: form.announcementText || '',
   announcementUrl: form.announcementUrl || '',
-  announcementBackgroundColor: form.announcementBackgroundColor || '#15171a',
+  announcementBackgroundColor: normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor || DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR),
+  announcementAlignment: normalizeAnnouncementAlignment(form.announcementAlignment || DEFAULT_ANNOUNCEMENT_ALIGNMENT),
   signupBlockedUsernames: normalizeSignupBlockedUsernames(form.signupBlockedUsernames),
   adsTxt: form.adsTxt || '',
   customHeadCode: form.customHeadCode || '',
@@ -1444,7 +1455,8 @@ const beginCustomizeAnnouncement = () => {
   announcementSnapshot.announcementEnabled = form.announcementEnabled
   announcementSnapshot.announcementText = form.announcementText
   announcementSnapshot.announcementUrl = form.announcementUrl
-  announcementSnapshot.announcementBackgroundColor = form.announcementBackgroundColor
+  announcementSnapshot.announcementBackgroundColor = normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor || DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR)
+  announcementSnapshot.announcementAlignment = normalizeAnnouncementAlignment(form.announcementAlignment || DEFAULT_ANNOUNCEMENT_ALIGNMENT)
   customizeAnnouncement.value = true
 }
 
@@ -1457,6 +1469,7 @@ const cancelCustomizeAnnouncement = () => {
   form.announcementText = announcementSnapshot.announcementText
   form.announcementUrl = announcementSnapshot.announcementUrl
   form.announcementBackgroundColor = announcementSnapshot.announcementBackgroundColor
+  form.announcementAlignment = announcementSnapshot.announcementAlignment
   customizeAnnouncement.value = false
 }
 
@@ -1478,7 +1491,8 @@ const saveAnnouncementSection = async () => {
     announcementSnapshot.announcementEnabled = form.announcementEnabled
     announcementSnapshot.announcementText = form.announcementText
     announcementSnapshot.announcementUrl = form.announcementUrl
-    announcementSnapshot.announcementBackgroundColor = form.announcementBackgroundColor
+    announcementSnapshot.announcementBackgroundColor = normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor || DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR)
+    announcementSnapshot.announcementAlignment = normalizeAnnouncementAlignment(form.announcementAlignment || DEFAULT_ANNOUNCEMENT_ALIGNMENT)
     customizeAnnouncement.value = false
   }
 }
@@ -2605,20 +2619,55 @@ onBeforeUnmount(() => {
 
               <div class="admin-settings-screen__field grid gap-2 text-sm">
                 <span class="font-medium text-[#3f4650]">배경색</span>
-                <div class="admin-settings-screen__announcement-colors flex flex-wrap items-center gap-3">
+                <div class="admin-settings-screen__announcement-color-editor flex flex-wrap items-center gap-3">
+                  <div class="admin-settings-screen__announcement-colors flex flex-wrap items-center gap-2">
+                    <button
+                      v-for="preset in ANNOUNCEMENT_BACKGROUND_PRESETS"
+                      :key="preset.id"
+                      class="admin-settings-screen__announcement-color relative inline-flex size-9 items-center justify-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15171a]"
+                      :class="normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor) === preset.value ? 'border-[#22a06b] ring-2 ring-[#22a06b] ring-offset-2' : 'border-[#dce0e5]'"
+                      type="button"
+                      :style="{ backgroundColor: preset.value }"
+                      :title="preset.label"
+                      :aria-label="`${preset.label} 배경`"
+                      :aria-pressed="normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor) === preset.value"
+                      @click="form.announcementBackgroundColor = preset.value"
+                    >
+                      <span class="sr-only">{{ preset.label }}</span>
+                    </button>
+                  </div>
+                  <label class="admin-settings-screen__announcement-color-input inline-flex h-10 items-center gap-2 rounded-md border border-[#dce0e5] bg-white px-2">
+                    <input
+                      class="size-7 rounded border-0 bg-transparent p-0"
+                      type="color"
+                      :value="normalizeAnnouncementBackgroundColor(form.announcementBackgroundColor || DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR)"
+                      aria-label="어나운스 바 배경색 선택"
+                      @input="form.announcementBackgroundColor = $event.target.value"
+                    >
+                    <input
+                      v-model="form.announcementBackgroundColor"
+                      class="h-8 w-28 border-0 bg-transparent px-1 text-sm font-semibold text-[#15171a] outline-none"
+                      maxlength="7"
+                      placeholder="#15171a"
+                      aria-label="어나운스 바 배경색 직접 입력"
+                    >
+                  </label>
+                </div>
+              </div>
+
+              <div class="admin-settings-screen__field grid gap-2 text-sm">
+                <span class="font-medium text-[#3f4650]">텍스트 정렬</span>
+                <div class="admin-settings-screen__announcement-alignment inline-flex w-full rounded-md border border-[#dce0e5] bg-white p-1 sm:w-auto">
                   <button
-                    v-for="preset in ANNOUNCEMENT_BACKGROUND_PRESETS"
-                    :key="preset.id"
-                    class="admin-settings-screen__announcement-color relative inline-flex size-9 items-center justify-center rounded-full border transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#15171a]"
-                    :class="form.announcementBackgroundColor === preset.value ? 'border-[#22a06b] ring-2 ring-[#22a06b] ring-offset-2' : 'border-[#dce0e5]'"
+                    v-for="option in ANNOUNCEMENT_ALIGNMENT_OPTIONS"
+                    :key="option.value"
+                    class="admin-settings-screen__announcement-align-option inline-flex h-9 flex-1 items-center justify-center rounded px-4 text-sm font-semibold transition sm:min-w-24"
+                    :class="normalizeAnnouncementAlignment(form.announcementAlignment) === option.value ? 'bg-[#15171a] text-white' : 'text-[#657080] hover:bg-[#f4f6f8] hover:text-[#15171a]'"
                     type="button"
-                    :style="{ backgroundColor: preset.value }"
-                    :title="preset.label"
-                    :aria-label="`${preset.label} 배경`"
-                    :aria-pressed="form.announcementBackgroundColor === preset.value"
-                    @click="form.announcementBackgroundColor = preset.value"
+                    :aria-pressed="normalizeAnnouncementAlignment(form.announcementAlignment) === option.value"
+                    @click="form.announcementAlignment = option.value"
                   >
-                    <span class="sr-only">{{ preset.label }}</span>
+                    {{ option.label }}
                   </button>
                 </div>
               </div>