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

components/site/SiteAnnouncementBar.vue

@@ -17,6 +17,7 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
     announcementText: '',
     announcementUrl: '',
     announcementBackgroundColor: '#15171a',
+    announcementAlignment: 'center',
     updatedAt: null
   })
 })
@@ -48,6 +49,8 @@ const announcementLink = computed(() => normalizeAnnouncementUrl(siteSettings.va
 
 const snoozeLabel = computed(() => `${ANNOUNCEMENT_SNOOZE_DAYS}일간 보지 않기`)
 
+const announcementAlignment = computed(() => siteSettings.value?.announcementAlignment === 'left' ? 'left' : 'center')
+
 const barStyle = computed(() => {
   const backgroundColor = siteSettings.value?.announcementBackgroundColor || '#15171a'
   return {
@@ -158,11 +161,17 @@ onBeforeUnmount(() => {
         aria-label="사이트 공지"
         :aria-hidden="(!expanded).toString()"
       >
-        <div class="site-announcement-bar__inner relative mx-auto flex min-h-9 max-w-[1294px] items-center justify-center gap-3 px-4 py-2.5 sm:px-6 lg:px-8">
+        <div
+          class="site-announcement-bar__inner relative mx-auto flex min-h-9 max-w-[1294px] items-center gap-3 px-4 py-2.5 sm:px-6 lg:px-8"
+          :class="announcementAlignment === 'left' ? 'justify-start' : 'justify-center'"
+        >
           <component
             :is="announcementLink ? 'a' : 'span'"
-            class="site-announcement-bar__text min-w-0 flex-1 line-clamp-2 px-6 sm:px-8"
-            :class="announcementLink ? 'hover:underline' : ''"
+            class="site-announcement-bar__text min-w-0 line-clamp-2 px-6 sm:px-8"
+            :class="[
+              announcementLink ? 'hover:underline' : '',
+              announcementAlignment === 'left' ? 'flex-1 text-left' : 'flex-1 text-center'
+            ]"
             :href="announcementLink || undefined"
             :target="announcementLink ? '_blank' : undefined"
             :rel="announcementLink ? 'noreferrer' : undefined"