SNS와 어나운스 설정 카드 분리

components/admin/AdminAnnouncementSettingsCard.vue

@@ -0,0 +1,199 @@
+<script setup>
+import {
+  ANNOUNCEMENT_ALIGNMENT_OPTIONS,
+  ANNOUNCEMENT_BACKGROUND_PRESETS,
+  DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR,
+  normalizeAnnouncementAlignment,
+  normalizeAnnouncementBackgroundColor
+} from '~/lib/announcement-bar.js'
+
+/**
+ * 어나운스 바 설정 카드
+ * @property {Object} form - 사이트 설정 폼 객체
+ * @property {boolean} editing - 편집 모드 여부
+ * @property {boolean} saving - 저장 중 여부
+ * @property {boolean} hasChanges - 변경 여부
+ */
+defineProps({
+  form: {
+    type: Object,
+    required: true
+  },
+  editing: {
+    type: Boolean,
+    default: false
+  },
+  saving: {
+    type: Boolean,
+    default: false
+  },
+  hasChanges: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['begin', 'cancel', 'save'])
+</script>
+
+<template>
+  <section
+    id="admin-settings-section-announcement"
+    class="admin-announcement-settings-card 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"
+  >
+    <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="!editing"
+          class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
+        >
+          홈페이지 상단에 중요한 공지나 링크를 표시합니다.<br>방문자는 X로 이번 방문만 닫거나, 7일간 보지 않기를 선택할 수 있습니다.<br>공지를 수정·저장하면 다시 노출됩니다.
+        </p>
+      </div>
+      <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
+        <template v-if="!editing">
+          <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="$emit('begin')"
+          >
+            맞춤 설정
+          </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="saving"
+            @click="$emit('cancel')"
+          >
+            취소
+          </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="saving || !hasChanges"
+            @click="$emit('save')"
+          >
+            {{ saving ? '저장 중' : '저장' }}
+          </button>
+        </template>
+      </div>
+    </div>
+
+    <label
+      v-if="!editing"
+      class="admin-settings-screen__announcement-toggle flex items-center justify-between gap-4 border-t border-[#eceff2] pt-5 text-sm"
+    >
+      <span class="font-bold text-[#15171a]">사용</span>
+      <span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 cursor-not-allowed items-center opacity-55 grayscale" aria-disabled="true">
+        <input
+          :checked="form.announcementEnabled"
+          class="peer sr-only"
+          type="checkbox"
+          disabled
+          aria-label="어나운스 바 사용"
+        >
+        <span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#6d747d]" aria-hidden="true" />
+        <span class="relative ml-1 size-5 rounded-full bg-[#f4f6f8] shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
+      </span>
+    </label>
+
+    <div
+      v-else
+      class="admin-announcement-settings-card__edit admin-settings-screen__announcement-edit grid gap-6 border-t border-[#eceff2] pt-5"
+    >
+      <label class="admin-settings-screen__announcement-toggle flex items-center justify-between gap-4 text-sm">
+        <span class="font-bold text-[#15171a]">사용</span>
+        <span class="admin-settings-screen__post-toggle-control relative inline-flex h-7 w-12 shrink-0 items-center">
+          <input
+            v-model="form.announcementEnabled"
+            class="peer sr-only"
+            type="checkbox"
+            aria-label="어나운스 바 사용"
+          >
+          <span class="absolute inset-0 rounded-full bg-[#c8ced3] transition-colors peer-checked:bg-[#15171a]" aria-hidden="true" />
+          <span class="relative ml-1 size-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-5" aria-hidden="true" />
+        </span>
+      </label>
+
+      <label class="admin-settings-screen__field grid gap-2 text-sm">
+        <span class="font-medium text-[#3f4650]">어나운스</span>
+        <input
+          v-model="form.announcementText"
+          class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+          maxlength="200"
+          placeholder="공지 문구"
+        >
+      </label>
+
+      <label class="admin-settings-screen__field grid gap-2 text-sm">
+        <span class="font-medium text-[#3f4650]">링크 (선택)</span>
+        <input
+          v-model="form.announcementUrl"
+          class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+          maxlength="500"
+          placeholder="https://… 또는 /경로 (비우면 링크 없음)"
+        >
+      </label>
+
+      <div class="admin-settings-screen__field grid gap-2 text-sm">
+        <span class="font-medium text-[#3f4650]">배경색</span>
+        <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="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"
+            :aria-pressed="normalizeAnnouncementAlignment(form.announcementAlignment) === option.value"
+            @click="form.announcementAlignment = option.value"
+          >
+            {{ option.label }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>

components/admin/AdminSocialSettingsCard.vue

@@ -0,0 +1,214 @@
+<script setup>
+import {
+  SOCIAL_ICON_PRESETS,
+  getSocialIconPreset,
+  normalizeSocialLinks
+} from '~/lib/social-links.js'
+
+const socialIconSelectOptions = SOCIAL_ICON_PRESETS.map((preset) => ({
+  value: preset.icon,
+  label: preset.label
+}))
+
+/**
+ * SNS 설정 카드
+ * @property {Object} form - 사이트 설정 폼 객체
+ * @property {boolean} editing - 편집 모드 여부
+ * @property {boolean} saving - 저장 중 여부
+ * @property {boolean} hasChanges - 변경 여부
+ */
+defineProps({
+  form: {
+    type: Object,
+    required: true
+  },
+  editing: {
+    type: Boolean,
+    default: false
+  },
+  saving: {
+    type: Boolean,
+    default: false
+  },
+  hasChanges: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['begin', 'cancel', 'save'])
+
+/**
+ * SNS 링크 항목을 추가한다.
+ * @param {Object} form - 사이트 설정 폼 객체
+ * @returns {void}
+ */
+const addSocialLink = (form) => {
+  form.socialLinks = [
+    ...normalizeSocialLinks(form.socialLinks),
+    {
+      id: `social-${Date.now()}`,
+      icon: SOCIAL_ICON_PRESETS[0].icon,
+      label: SOCIAL_ICON_PRESETS[0].label,
+      url: '',
+      iconSvg: ''
+    }
+  ]
+}
+
+/**
+ * SNS 링크 항목을 제거한다.
+ * @param {Object} form - 사이트 설정 폼 객체
+ * @param {number} index - 제거할 항목 순서
+ * @returns {void}
+ */
+const removeSocialLink = (form, index) => {
+  form.socialLinks = form.socialLinks.filter((_, itemIndex) => itemIndex !== index)
+}
+
+/**
+ * SNS 링크 아이콘을 변경한다.
+ * @param {Object} form - 사이트 설정 폼 객체
+ * @param {number} index - 항목 순서
+ * @param {string} icon - 아이콘 키
+ * @returns {void}
+ */
+const updateSocialLinkIcon = (form, index, icon) => {
+  const preset = getSocialIconPreset(icon)
+  form.socialLinks[index].icon = preset.icon
+  form.socialLinks[index].label = preset.label
+
+  if (preset.icon !== 'custom') {
+    form.socialLinks[index].iconSvg = ''
+  }
+}
+</script>
+
+<template>
+  <section
+    id="admin-settings-section-social"
+    class="admin-social-settings-card admin-settings-screen__card rounded-xl border border-[#e6e8eb] bg-white p-6 shadow-[0_1px_2px_rgba(15,23,42,0.04)]"
+  >
+    <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">
+          SNS 정보
+        </h2>
+        <p
+          v-if="!editing"
+          class="mr-5 mt-1 text-pretty text-sm leading-relaxed text-[#657080]"
+        >
+          오른쪽 사이드바 FOLLOW 영역에 표시할 아이콘과 주소를 관리합니다.
+        </p>
+      </div>
+      <div class="-mr-1 mt-[-5px] flex shrink-0 items-center justify-start gap-2">
+        <template v-if="!editing">
+          <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="$emit('begin')"
+          >
+            편집
+          </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="saving"
+            @click="$emit('cancel')"
+          >
+            취소
+          </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="saving || !hasChanges"
+            @click="$emit('save')"
+          >
+            {{ saving ? '저장 중' : '저장' }}
+          </button>
+        </template>
+      </div>
+    </div>
+
+    <div
+      v-if="!editing"
+      class="admin-social-settings-card__readonly admin-settings-screen__social-readonly pt-5"
+    >
+      <div
+        v-if="normalizeSocialLinks(form.socialLinks).length"
+        class="flex flex-wrap gap-2"
+      >
+        <span
+          v-for="item in normalizeSocialLinks(form.socialLinks)"
+          :key="item.id"
+          class="inline-flex items-center gap-2 rounded-full border border-[#dce0e5] bg-[#f7f8fa] px-3 py-1.5 text-sm font-semibold text-[#15171a]"
+        >
+          <span>{{ item.label }}</span>
+          <span class="max-w-[220px] truncate text-xs font-medium text-[#657080]">{{ item.url }}</span>
+        </span>
+      </div>
+      <p v-else class="text-sm text-[#657080]">
+        등록된 SNS 링크가 없습니다. 공개 화면의 FOLLOW 아이콘도 표시되지 않습니다.
+      </p>
+    </div>
+
+    <div v-else class="admin-social-settings-card__edit admin-settings-screen__social-edit grid gap-4 border-t border-[#eceff2] pt-5">
+      <div
+        v-for="(item, index) in form.socialLinks"
+        :key="item.id || index"
+        class="grid gap-3 rounded-lg border border-[#edf0f2] bg-[#fafafa] p-3 md:grid-cols-[220px_minmax(0,1fr)_auto] md:items-start"
+      >
+        <div class="grid gap-1.5 text-sm">
+          <span class="font-medium text-[#3f4650]">아이콘</span>
+          <AdminSelectInput
+            :model-value="item.icon"
+            :options="socialIconSelectOptions"
+            label="SNS 아이콘"
+            select-class="admin-settings-screen__select h-10 rounded-md border-[#dce0e5] text-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+            width-class="w-full"
+            @update:model-value="(icon) => updateSocialLinkIcon(form, index, icon)"
+          />
+        </div>
+        <label class="grid gap-1.5 text-sm">
+          <span class="font-medium text-[#3f4650]">주소</span>
+          <input
+            v-model="item.url"
+            class="h-10 rounded-md border border-[#dce0e5] bg-white px-3 text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+            type="text"
+            :placeholder="getSocialIconPreset(item.icon).placeholder"
+          >
+        </label>
+        <button
+          class="mt-[26px] h-10 rounded-md border border-[#ffd1d1] bg-white px-4 text-sm font-semibold text-[#d73939] transition-colors hover:bg-[#fff5f5]"
+          type="button"
+          @click="removeSocialLink(form, index)"
+        >
+          삭제
+        </button>
+        <label
+          v-if="item.icon === 'custom'"
+          class="grid gap-1.5 text-sm md:col-span-3"
+        >
+          <span class="font-medium text-[#3f4650]">사용자 SVG 아이콘</span>
+          <textarea
+            v-model="item.iconSvg"
+            class="min-h-24 rounded-md border border-[#dce0e5] bg-white px-3 py-2 font-mono text-xs leading-relaxed text-[#15171a] outline-none focus:border-[#15171a] focus:ring-1 focus:ring-[#15171a]"
+            placeholder="<svg ...>...</svg>"
+          />
+          <span class="text-xs leading-relaxed text-[#8b95a1]">
+            새 SNS 아이콘은 SVG 코드를 붙여 넣어 사용할 수 있습니다. 저장 시 기본적인 위험 태그는 제거됩니다.
+          </span>
+        </label>
+      </div>
+      <button
+        class="inline-flex h-10 w-fit items-center justify-center rounded-md border border-[#dce0e5] bg-white px-4 text-sm font-semibold text-[#15171a] transition-colors hover:bg-[#f3f5f7]"
+        type="button"
+        @click="addSocialLink(form)"
+      >
+        SNS 링크 추가
+      </button>
+    </div>
+  </section>
+</template>