200 lines
9.0 KiB
Vue
200 lines
9.0 KiB
Vue
<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>
|