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

lib/social-links.js

@@ -10,6 +10,7 @@ export const SOCIAL_ICON_PRESETS = [
   { icon: 'facebook', label: 'Facebook', placeholder: 'https://facebook.com/...' },
   { icon: 'linkedin', label: 'LinkedIn', placeholder: 'https://linkedin.com/in/...' },
   { icon: 'rss', label: 'RSS', placeholder: '/rss/' },
+  { icon: 'custom', label: '직접 SVG', placeholder: 'https://...' },
   { icon: 'link', label: 'Link', placeholder: 'https://...' }
 ]
 
@@ -46,8 +47,12 @@ export const normalizeSocialLinkUrl = (value) => {
     return trimmed
   }
 
+  const normalized = trimmed.startsWith('//')
+    ? `https:${trimmed}`
+    : (/^[a-z][a-z0-9+.-]*:/i.test(trimmed) ? trimmed : `https://${trimmed}`)
+
   try {
-    const parsed = new URL(trimmed)
+    const parsed = new URL(normalized)
     if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
       return parsed.toString()
     }
@@ -58,11 +63,38 @@ export const normalizeSocialLinkUrl = (value) => {
   return ''
 }
 
+/**
+ * 사용자 지정 SNS SVG 아이콘을 정리한다.
+ * @param {unknown} value - SVG 입력값
+ * @returns {string} 정리된 SVG
+ */
+export const normalizeSocialIconSvg = (value) => {
+  const svg = String(value || '').trim().slice(0, 4000)
+  const lower = svg.toLowerCase()
+
+  if (!svg || !lower.startsWith('<svg') || !lower.endsWith('</svg>')) {
+    return ''
+  }
+
+  if (
+    lower.includes('<script')
+    || lower.includes('<foreignobject')
+    || lower.includes('<iframe')
+    || lower.includes('<object')
+    || lower.includes('javascript:')
+    || /\son[a-z]+\s*=/i.test(svg)
+  ) {
+    return ''
+  }
+
+  return svg
+}
+
 /**
  * SNS 링크 항목을 정리한다.
  * @param {unknown} item - 입력 항목
  * @param {number} index - 항목 순서
- * @returns {{ id: string, icon: string, label: string, url: string }|null} 정리된 항목
+ * @returns {{ id: string, icon: string, label: string, url: string, iconSvg: string }|null} 정리된 항목
  */
 export const normalizeSocialLinkItem = (item, index = 0) => {
   if (!item || typeof item !== 'object' || Array.isArray(item)) {
@@ -71,6 +103,9 @@ export const normalizeSocialLinkItem = (item, index = 0) => {
 
   const preset = getSocialIconPreset(item.icon)
   const url = normalizeSocialLinkUrl(item.url)
+  const iconSvg = preset.icon === 'custom'
+    ? normalizeSocialIconSvg(item.iconSvg || item.customIconSvg)
+    : ''
 
   if (!url) {
     return null
@@ -80,14 +115,15 @@ export const normalizeSocialLinkItem = (item, index = 0) => {
     id: String(item.id || `${preset.icon}-${index + 1}`).trim().slice(0, 80),
     icon: preset.icon,
     label: String(item.label || preset.label).trim().slice(0, 80),
-    url
+    url,
+    iconSvg
   }
 }
 
 /**
  * SNS 링크 목록을 저장 가능한 형태로 정리한다.
  * @param {unknown} value - 입력 목록
- * @returns {Array<{ id: string, icon: string, label: string, url: string }>} 정리된 SNS 링크 목록
+ * @returns {Array<{ id: string, icon: string, label: string, url: string, iconSvg: string }>} 정리된 SNS 링크 목록
  */
 export const normalizeSocialLinks = (value) => {
   const source = Array.isArray(value)
@@ -103,12 +139,13 @@ export const normalizeSocialLinks = (value) => {
 /**
  * 저장된 SNS 링크 중 실제 노출할 항목만 반환한다.
  * @param {unknown} value - SNS 링크 목록
- * @returns {Array<{ id: string, label: string, href: string, icon: string, external: boolean }>} 노출 링크
+ * @returns {Array<{ id: string, label: string, href: string, icon: string, iconSvg: string, external: boolean }>} 노출 링크
  */
 export const getVisibleSocialLinks = (value) => normalizeSocialLinks(value).map((item) => ({
   id: item.id,
   label: item.label,
   href: item.url,
   icon: item.icon,
+  iconSvg: item.iconSvg,
   external: !item.url.startsWith('/') && !item.url.startsWith('mailto:')
 }))