215 lines
7.4 KiB
Vue
215 lines
7.4 KiB
Vue
<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>
|