zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
zenn
2026-07-24 10:50:03 +09:00
parent ab974c8988
commit a76dcc8111
8 changed files with 444 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

353
pages/admin/settings/index.vue
View File

@@ -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"