SNS와 어나운스 설정 카드 분리
This commit is contained in:
199
components/admin/AdminAnnouncementSettingsCard.vue
Normal file
199
components/admin/AdminAnnouncementSettingsCard.vue
Normal file
@@ -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>
|
||||
214
components/admin/AdminSocialSettingsCard.vue
Normal file
214
components/admin/AdminSocialSettingsCard.vue
Normal file
@@ -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>
|
||||
@@ -258,10 +258,12 @@
|
||||
| pages/admin/tags/index.vue | 태그 관리(메인 태그 드래그 정렬 자동 저장·more vert 메뉴, 일반 태그 배지 more vert 메뉴·검색/정렬, 태그 추가 버튼), 액션 피드백 토스트 |
|
||||
| pages/admin/tags/new.vue | 태그 생성 |
|
||||
| pages/admin/tags/[id].vue | 태그 수정 |
|
||||
| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **블로그 제목·설명** 편집 상태·저장 요청·스냅샷 복원 연결, **사이트 정보** 편집 상태·저장 요청·로고 업로드 처리 연결, **POST 설정** 편집 상태·저장 요청·스냅샷 복원 연결, **SNS 정보**(아이콘 프리셋+주소 목록형 관리), **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **브랜드** 컬러 정규화·편집 상태·저장 요청 연결, **어나운스 바**(사용 토글·맞춤 설정·hex 배경색·텍스트 정렬·읽기 모드 비활성 톤), **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
|
||||
| pages/admin/settings/index.vue | 사이트 설정 Ghost형 전체 화면, 카드별 필드만 PATCH하고 성공 필드만 폼에 반영하는 독립 저장, **블로그 제목·설명** 편집 상태·저장 요청·스냅샷 복원 연결, **사이트 정보** 편집 상태·저장 요청·로고 업로드 처리 연결, **SNS 정보** 편집 상태·저장 요청 연결, **POST 설정** 편집 상태·저장 요청·스냅샷 복원 연결, **메인 화면**(라이트·다크 커버 상하 개별 프리뷰·드롭존 업로드·오버레이 텍스트), **브랜드** 컬러 정규화·편집 상태·저장 요청 연결, **어나운스 바** 편집 상태·저장 요청 연결, **스팸 필터** 편집 상태·저장 요청·값 정규화 연결, **사이트 용량** 데이터 조회·새로고침 이벤트 연결, **게시물 내보내기** 요청 body 생성·작업 등록·목록 갱신·작업 액션 연결, **게시물 가져오기** 파일 검증·작업 생성 요청·작업 센터 모달 연결, 진행 중 요청 버튼 잠금 |
|
||||
| components/admin/AdminBrandSettingsCard.vue | 관리자 설정 브랜드 컬러 카드(읽기 미리보기·색상 입력·텍스트 입력·예시 배지·저장 이벤트) |
|
||||
| components/admin/AdminTitleDescriptionSettingsCard.vue | 관리자 설정 블로그 제목·설명 카드(읽기 행·편집 입력·공개 화면 미리보기·저장 이벤트) |
|
||||
| components/admin/AdminSiteInfoSettingsCard.vue | 관리자 설정 사이트 정보 카드(로고 미리보기·로고 파일 선택·사이트 URL·저작권 문구·저장 이벤트) |
|
||||
| components/admin/AdminSocialSettingsCard.vue | 관리자 설정 SNS 정보 카드(링크 읽기 배지·아이콘 프리셋·주소·사용자 SVG·저장 이벤트) |
|
||||
| components/admin/AdminAnnouncementSettingsCard.vue | 관리자 설정 어나운스 바 카드(사용 토글·문구·링크·배경색·정렬·저장 이벤트) |
|
||||
| components/admin/AdminPostSettingsCard.vue | 관리자 설정 POST 설정 카드(수정일 표시·태그 최대 개수·공개 목록 표시개수·업로드 제한·저장 이벤트) |
|
||||
| components/admin/AdminBackupSummaryCard.vue | 관리자 설정 사이트 용량 카드(콘텐츠 수량·미디어 용량·자동 생성 이미지·내보내기 파일·큰 파일·새로고침 이벤트) |
|
||||
| components/admin/AdminPostExportJobList.vue | 관리자 설정 최근 내보내기 작업 목록 카드(상태·진행도·실패 상세·파일 선택·선택 다운로드 이벤트) |
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
- 거대 컴포넌트 책임 분리 진행.
|
||||
- `components/admin/AdminMarkdownEditor.vue`: 미디어 모달, 슬래시 명령, 히스토리·선택 복원, 라이브/소스 전환 로직을 단계적으로 composable 또는 하위 컴포넌트로 분리.
|
||||
- `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량·게시물 가져오기·게시물 내보내기 요청·최근 내보내기 작업 목록·스팸 필터·브랜드·POST 설정·블로그 제목/설명·사이트 정보처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
|
||||
- `pages/admin/settings/index.vue`: Import 작업 센터·사이트 용량·게시물 가져오기·게시물 내보내기 요청·최근 내보내기 작업 목록·스팸 필터·브랜드·POST 설정·블로그 제목/설명·사이트 정보·SNS 정보·어나운스 바처럼 설정 카드별 저장·상태·검증 로직을 카드 컴포넌트 또는 composable 단위로 추가 분리.
|
||||
- `pages/admin/settings/index.vue`: 업로드 제한 셀렉트가 블로그 제목·설명 읽기 카드 안에 있으나 저장 필드는 POST 설정에 묶여 있어, 별도 업로드 제한 카드 또는 POST 설정 편집 영역으로 위치와 저장 흐름을 정리.
|
||||
- `components/content/ContentMarkdownRenderer.vue`: 파싱·블록 렌더링·라이브 편집 중개·라이트박스·광고 삽입 책임을 분리.
|
||||
- `components/admin/AdminPostForm.vue`: 태그 입력, 대표 이미지 선택, 발행/초안 저장 상태, 우측 설정 패널 책임을 분리.
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# 업데이트 이력
|
||||
|
||||
## v1.11.29
|
||||
|
||||
- 관리자 설정의 SNS 정보 카드를 `AdminSocialSettingsCard` 컴포넌트로 분리.
|
||||
- 관리자 설정의 어나운스 바 카드를 `AdminAnnouncementSettingsCard` 컴포넌트로 분리.
|
||||
- 설정 화면은 SNS·어나운스 바 편집 상태와 저장 요청만 담당하도록 정리.
|
||||
|
||||
## v1.11.28
|
||||
|
||||
- 관리자 설정의 사이트 정보 카드를 `AdminSiteInfoSettingsCard` 컴포넌트로 분리.
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "sori.studio",
|
||||
"version": "1.11.28",
|
||||
"version": "1.11.29",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "sori.studio",
|
||||
"version": "1.11.28",
|
||||
"version": "1.11.29",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@nuxtjs/tailwindcss": "^6.14.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sori.studio",
|
||||
"version": "1.11.28",
|
||||
"version": "1.11.29",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"imports": {
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<script setup>
|
||||
import {
|
||||
ANNOUNCEMENT_ALIGNMENT_OPTIONS,
|
||||
ANNOUNCEMENT_BACKGROUND_PRESETS,
|
||||
DEFAULT_ANNOUNCEMENT_ALIGNMENT,
|
||||
DEFAULT_ANNOUNCEMENT_BACKGROUND_COLOR,
|
||||
normalizeAnnouncementAlignment,
|
||||
@@ -13,8 +11,6 @@ import {
|
||||
parseSignupBlockedUsernamesFromText
|
||||
} from '~/lib/signup-blocked-usernames.js'
|
||||
import {
|
||||
SOCIAL_ICON_PRESETS,
|
||||
getSocialIconPreset,
|
||||
normalizeSocialLinks
|
||||
} from '~/lib/social-links.js'
|
||||
import {
|
||||
@@ -111,10 +107,6 @@ const displayCountSelectOptions = DISPLAY_COUNT_OPTIONS.map((option) => ({
|
||||
value: option,
|
||||
label: `${option}개`
|
||||
}))
|
||||
const socialIconSelectOptions = SOCIAL_ICON_PRESETS.map((preset) => ({
|
||||
value: preset.icon,
|
||||
label: preset.label
|
||||
}))
|
||||
const postExportDateRangeModeOptions = [
|
||||
{ value: 'all', label: '전체' },
|
||||
{ value: 'year', label: '특정년' },
|
||||
@@ -1412,48 +1404,6 @@ const cancelEditSocial = () => {
|
||||
editSocial.value = false
|
||||
}
|
||||
|
||||
/**
|
||||
* SNS 링크 항목을 추가한다.
|
||||
* @returns {void}
|
||||
*/
|
||||
const addSocialLink = () => {
|
||||
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 {number} index - 제거할 항목 순서
|
||||
* @returns {void}
|
||||
*/
|
||||
const removeSocialLink = (index) => {
|
||||
form.socialLinks = form.socialLinks.filter((_, itemIndex) => itemIndex !== index)
|
||||
}
|
||||
|
||||
/**
|
||||
* SNS 링크 아이콘을 변경한다.
|
||||
* @param {number} index - 항목 순서
|
||||
* @param {string} icon - 아이콘 키
|
||||
* @returns {void}
|
||||
*/
|
||||
const updateSocialLinkIcon = (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 = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* SNS 정보를 저장한다.
|
||||
* @returns {Promise<void>}
|
||||
@@ -2204,132 +2154,15 @@ onBeforeUnmount(() => {
|
||||
@upload-logo="uploadLogo"
|
||||
/>
|
||||
|
||||
<section
|
||||
id="admin-settings-section-social"
|
||||
class="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="!editSocial"
|
||||
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="!editSocial">
|
||||
<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="beginEditSocial"
|
||||
>
|
||||
편집
|
||||
</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="savingSocial"
|
||||
@click="cancelEditSocial"
|
||||
>
|
||||
취소
|
||||
</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="savingSocial || !hasSocialChanges"
|
||||
@click="saveSocialSection"
|
||||
>
|
||||
{{ savingSocial ? '저장 중' : '저장' }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!editSocial"
|
||||
class="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-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(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(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"
|
||||
>
|
||||
SNS 링크 추가
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<AdminSocialSettingsCard
|
||||
:form="form"
|
||||
:editing="editSocial"
|
||||
:saving="savingSocial"
|
||||
:has-changes="hasSocialChanges"
|
||||
@begin="beginEditSocial"
|
||||
@cancel="cancelEditSocial"
|
||||
@save="saveSocialSection"
|
||||
/>
|
||||
|
||||
<h2 class="admin-settings-screen__section-heading z-20 mb-px pt-10 text-2xl font-bold tracking-tight text-[#15171a]">
|
||||
게시물
|
||||
@@ -2633,165 +2466,15 @@ onBeforeUnmount(() => {
|
||||
@normalize="normalizeBrandColorInput"
|
||||
/>
|
||||
|
||||
<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"
|
||||
>
|
||||
<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="!customizeAnnouncement"
|
||||
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="!customizeAnnouncement">
|
||||
<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="beginCustomizeAnnouncement"
|
||||
>
|
||||
맞춤 설정
|
||||
</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="savingAnnouncement"
|
||||
@click="cancelCustomizeAnnouncement"
|
||||
>
|
||||
취소
|
||||
</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="savingAnnouncement || !hasAnnouncementChanges"
|
||||
@click="saveAnnouncementSection"
|
||||
>
|
||||
{{ savingAnnouncement ? '저장 중' : '저장' }}
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label
|
||||
v-if="!customizeAnnouncement"
|
||||
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-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>
|
||||
<AdminAnnouncementSettingsCard
|
||||
:form="form"
|
||||
:editing="customizeAnnouncement"
|
||||
:saving="savingAnnouncement"
|
||||
:has-changes="hasAnnouncementChanges"
|
||||
@begin="beginCustomizeAnnouncement"
|
||||
@cancel="cancelCustomizeAnnouncement"
|
||||
@save="saveAnnouncementSection"
|
||||
/>
|
||||
|
||||
<AdminSiteCodeSettingsCard
|
||||
:form="form"
|
||||
|
||||
Reference in New Issue
Block a user