From 45548012942ce50ed847f1ddd342285cc396e678 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 7 May 2026 18:03:56 +0900
Subject: [PATCH] =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EB=B0=B0=EC=A7=80=20?=
 =?UTF-8?q?=EA=B5=AC=EB=B6=84=EC=9E=90=EC=99=80=20=EC=9A=B0=EC=B8=A1=20Fol?=
 =?UTF-8?q?low=20=EC=95=84=EC=9D=B4=EC=BD=98=EC=9D=84=20=EC=9B=90=EB=B3=B8?=
 =?UTF-8?q?=20=ED=8C=A8=ED=84=B4=EC=9C=BC=EB=A1=9C=20=EB=B3=B4=EC=A0=95.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

태그 상세 메타에서 복수 태그 글은 첫 태그만 배지로 표시하고 구분자 겹침을 제거했으며, 우측 사이드바 Follow 영역을 소셜 아이콘 링크 행으로 교체해 시각 구성을 정리했다.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/site/RightSidebar.vue | 112 +++++++++++++++++++++++++++++--
 docs/update.md                   |   2 +
 pages/tag/[slug].vue             |   8 ++-
 3 files changed, 114 insertions(+), 8 deletions(-)

diff --git a/components/site/RightSidebar.vue b/components/site/RightSidebar.vue
index 476a628..529abe0 100644
--- a/components/site/RightSidebar.vue
+++ b/components/site/RightSidebar.vue
@@ -1,4 +1,13 @@
 <script setup>
+const followLinks = [
+  { id: 'facebook', label: 'Facebook', href: 'https://facebook.com', icon: 'facebook' },
+  { id: 'x', label: 'X', href: 'https://x.com', icon: 'x' },
+  { id: 'github', label: 'Github', href: 'https://github.com', icon: 'github' },
+  { id: 'instagram', label: 'Instagram', href: 'https://instagram.com', icon: 'instagram' },
+  { id: 'linkedin', label: 'Linkedin', href: 'https://linkedin.com', icon: 'linkedin' },
+  { id: 'rss', label: 'RSS', href: '/rss/', icon: 'rss' }
+]
+
 const { data: siteSettings } = await useFetch('/api/site-settings', {
   default: () => ({
     title: 'sori.studio',
@@ -39,11 +48,104 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
           <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
             Follow
           </p>
-          <div class="right-sidebar__social flex gap-3 text-sm">
-            <span>f</span>
-            <span>𝕏</span>
-            <span>rss</span>
-          </div>
+          <nav class="right-sidebar__social relative z-10 flex flex-wrap items-center gap-1 text-sm text-[var(--site-text)]">
+            <a
+              v-for="item in followLinks"
+              :key="item.id"
+              class="site-interactive p-0.5 hover:opacity-75"
+              :href="item.href"
+              :aria-label="item.label"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <svg
+                v-if="item.icon === 'facebook'"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-4 w-4"
+              >
+                <path d="M7 10v4h3v7h4v-7h3l1-4h-4V8a1 1 0 0 1 1-1h3V3h-3a5 5 0 0 0-5 5v2z" />
+              </svg>
+              <svg
+                v-else-if="item.icon === 'x'"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-4 w-4"
+              >
+                <path d="M4 4l11.733 16H20L8.267 4z" />
+                <path d="M4 20l6.768-6.768m2.46-2.46L20 4" />
+              </svg>
+              <svg
+                v-else-if="item.icon === 'github'"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-4 w-4"
+              >
+                <path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0c-2.4-1.6-3.5-1.3-3.5-1.3a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21" />
+              </svg>
+              <svg
+                v-else-if="item.icon === 'instagram'"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-4 w-4"
+              >
+                <rect x="4" y="4" width="16" height="16" rx="4" />
+                <circle cx="12" cy="12" r="3" />
+                <line x1="16.5" y1="7.5" x2="16.5" y2="7.501" />
+              </svg>
+              <svg
+                v-else-if="item.icon === 'linkedin'"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-4 w-4"
+              >
+                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+                <rect x="2" y="9" width="4" height="12" />
+                <circle cx="4" cy="4" r="2" />
+              </svg>
+              <svg
+                v-else
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="h-4 w-4"
+              >
+                <circle cx="5" cy="19" r="1" />
+                <path d="M4 4a16 16 0 0 1 16 16" />
+                <path d="M4 11a9 9 0 0 1 9 9" />
+              </svg>
+              <span class="sr-only">{{ item.label }}</span>
+            </a>
+          </nav>
         </div>
       </div>
 
diff --git a/docs/update.md b/docs/update.md
index 28fc092..fd448a5 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -13,6 +13,8 @@
 - 태그 목록 페이지를 원본 Thred 구조에 맞춰 중앙 히어로와 3열 태그 카드 레이아웃으로 재구성.
 - 태그 상세 페이지(`tag/[slug]`)를 원본 Thred 구조에 맞춰 헤더 간격과 리스트형 게시물 카드 레이아웃으로 재구성.
 - 태그 상세 페이지 게시물 메타 영역에 featured 강조, 태그 컬러 배지, 구분자 스타일을 원본 패턴에 맞춰 보정.
+- 태그 상세 페이지에서 복수 태그 글은 첫 번째 태그만 배지로 표시하고, 배지와 `/` 구분자가 겹치지 않도록 메타 구조 수정.
+- 오른쪽 사이드바 Follow 영역을 원본 패턴의 소셜 아이콘 링크 행으로 교체.
 - 기술 명세 현재 버전을 v0.0.45로 갱신.
 
 ## v0.0.44
diff --git a/pages/tag/[slug].vue b/pages/tag/[slug].vue
index 5c9b869..5345ac9 100644
--- a/pages/tag/[slug].vue
+++ b/pages/tag/[slug].vue
@@ -36,8 +36,8 @@ const tagPosts = computed(() => posts.value
     title: post.title,
     excerpt: post.excerpt,
     featuredImage: post.featuredImage,
-    tag: tag.value?.name || slug.value.toUpperCase(),
-    tagColor: tag.value?.color || '#4d4d4d',
+    tag: tags.value.find((item) => item.slug === (post.tags?.[0] || slug.value))?.name || (post.tags?.[0] || slug.value).toUpperCase(),
+    tagColor: tags.value.find((item) => item.slug === (post.tags?.[0] || slug.value))?.color || '#4d4d4d',
     isFeatured: index === 0,
     publishedAt: formatPostDate(post.publishedAt),
     to: `/post/${post.slug}`
@@ -97,14 +97,16 @@ const tagPosts = computed(() => posts.value
                 <p class="flex-1 line-clamp-2 text-[0.8rem] leading-tight site-muted">
                   {{ post.excerpt }}
                 </p>
-                <div class="flex flex-wrap items-center gap-2 text-xs site-muted [&>*:not(:last-child)]:after:ml-2 [&>*:not(:last-child)]:after:text-[var(--site-line)] [&>*:not(:last-child)]:after:content-['/'] sm:[&>*:not(:last-child)]:after:ml-1.5">
+                <div class="flex flex-wrap items-center gap-2 text-xs site-muted sm:gap-1.5">
                   <time>{{ post.publishedAt }}</time>
+                  <span class="text-[var(--site-line)]">/</span>
                   <span
                     class="rounded-sm px-1.5 py-px font-medium text-[var(--site-text)]"
                     :style="{ backgroundColor: `${post.tagColor}1a` }"
                   >
                     {{ post.tag }}
                   </span>
+                  <span class="text-[var(--site-line)]">/</span>
                   <span class="flex items-center gap-0.5">
                     <span>◌</span>
                     <span>0</span>