홈 Featured 영역을 가로 슬라이드 트랙으로 전환.

원본 패턴에 맞춰 Featured를 3열 그리드에서 가로 스크롤 슬라이드 구조로 바꾸고, 좌우 버튼으로 트랙 이동이 가능하도록 상호작용을 추가했다.

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/update.md

@@ -18,6 +18,7 @@
 - 홈 중앙 메인 영역을 원본 Thred 구조에 맞춰 Hero/Featured/Latest 섹션 간격과 내부 보더 정렬 기준으로 재구성.
 - 홈 Latest와 태그 상세 목록 카드 우하단 hover 화살표 액션 버튼 추가.
 - 홈 Latest와 태그 상세 목록 카드의 우하단 액션 화살표를 텍스트에서 SVG 아이콘으로 교체.
+- 홈 Featured 영역을 그리드에서 가로 슬라이드 트랙(좌우 버튼 이동) 구조로 변경.
 - 기술 명세 현재 버전을 v0.0.45로 갱신.
 
 ## v0.0.44

pages/index.vue

@@ -61,6 +61,26 @@ const mapLatestPost = (post, index) => {
 
 const featuredPosts = computed(() => posts.value.slice(0, 6))
 const latestPosts = computed(() => posts.value.map(mapLatestPost))
+
+const featuredTrackRef = ref(null)
+
+/**
+ * Featured 가로 트랙을 좌우로 이동한다.
+ * @param {'left' | 'right'} direction - 이동 방향
+ * @returns {void}
+ */
+const scrollFeatured = (direction) => {
+  if (!featuredTrackRef.value) {
+    return
+  }
+
+  const offset = direction === 'left' ? -268 : 268
+
+  featuredTrackRef.value.scrollBy({
+    left: offset,
+    behavior: 'smooth'
+  })
+}
 </script>
 
 <template>
@@ -92,16 +112,19 @@ const latestPosts = computed(() => posts.value.map(mapLatestPost))
         <div class="flex items-end justify-between gap-2 border-b border-[var(--site-line)] pb-2">
           <h2 class="text-sm font-medium uppercase site-muted">Featured</h2>
           <div class="flex justify-between gap-2">
-            <button class="cursor-pointer p-1 hover:opacity-75" type="button" aria-label="Previous">‹</button>
-            <button class="cursor-pointer p-1 hover:opacity-75" type="button" aria-label="Next">›</button>
+            <button class="cursor-pointer p-1 hover:opacity-75" type="button" aria-label="Previous" @click="scrollFeatured('left')">‹</button>
+            <button class="cursor-pointer p-1 hover:opacity-75" type="button" aria-label="Next" @click="scrollFeatured('right')">›</button>
           </div>
         </div>
-        <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div
+          ref="featuredTrackRef"
+          class="mt-4 flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        >
           <NuxtLink
             v-for="post in featuredPosts"
             :key="`featured-${post.slug}`"
             :to="`/post/${post.slug}`"
-            class="group relative block aspect-video overflow-hidden rounded-[10px]"
+            class="group relative block aspect-video w-[244px] shrink-0 snap-start overflow-hidden rounded-[10px] sm:w-[260px] lg:w-[244px]"
           >
             <img
               v-if="post.featuredImage"