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

SNS 아이콘 직접 설정 개선 v1.5.40

Browse Source
This commit is contained in:
zenn
2026-06-02 17:22:38 +09:00
parent 4da1ade2cf
commit b3c7f26d10
11 changed files with 113 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1250,7 +1250,8 @@ const addSocialLink = () => {
id: `social-${Date.now()}`,
icon: SOCIAL_ICON_PRESETS[0].icon,
label: SOCIAL_ICON_PRESETS[0].label,
url: ''
url: '',
iconSvg: ''
}
]
}
@@ -1272,8 +1273,16 @@ const removeSocialLink = (index) => {
*/
const updateSocialLinkIcon = (index, icon) => {
const preset = getSocialIconPreset(icon)
const currentPreset = getSocialIconPreset(form.socialLinks[index].icon)
form.socialLinks[index].icon = preset.icon
form.socialLinks[index].label = preset.label
if (!form.socialLinks[index].label || form.socialLinks[index].label === currentPreset.label) {
form.socialLinks[index].label = preset.label
}
if (preset.icon !== 'custom') {
form.socialLinks[index].iconSvg = ''
}
}
/**
@@ -2200,7 +2209,7 @@ onBeforeUnmount(() => {
<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-[180px_minmax(0,1fr)_auto] md:items-center"
class="grid gap-3 rounded-lg border border-[#edf0f2] bg-[#fafafa] p-3 md:grid-cols-[170px_minmax(0,0.7fr)_minmax(0,1fr)_auto] md:items-start"
>
<label class="grid gap-1.5 text-sm">
<span class="font-medium text-[#3f4650]">아이콘</span>
@@ -2221,6 +2230,15 @@ onBeforeUnmount(() => {
<svg class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-[#394047]" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6" /></svg>
</div>
</label>
<label class="grid gap-1.5 text-sm">
<span class="font-medium text-[#3f4650]">이름</span>
<input
v-model="item.label"
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="표시 이름"
>
</label>
<label class="grid gap-1.5 text-sm">
<span class="font-medium text-[#3f4650]">주소</span>
<input
@@ -2231,12 +2249,26 @@ onBeforeUnmount(() => {
>
</label>
<button
class="h-10 rounded-md border border-[#ffd1d1] bg-white px-4 text-sm font-semibold text-[#d73939] transition-colors hover:bg-[#fff5f5]"
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-4"
>
<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]"