From a439af5b622778c733085a92ff60c4ab02dc0357 Mon Sep 17 00:00:00 2001
From: zenn <zenn.message@gmail.com>
Date: Thu, 7 May 2026 18:16:20 +0900
Subject: [PATCH] =?UTF-8?q?=ED=99=88=20Featured=20=EC=8A=AC=EB=9D=BC?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=20=ED=8F=AD=EC=9D=84=20=EC=9B=90=EB=B3=B8=20?=
 =?UTF-8?q?=EB=B9=84=EC=9C=A8=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=84=B8=EB=B6=80=20=EC=A1=B0=EC=A0=95.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

브레이크포인트별 카드 노출 비율(1.4/1.6/2.6)에 맞춘 폭 계산식을 적용하고, 좌우 이동량도 실제 카드 폭 기준으로 계산해 슬라이드 이동 감각을 원본에 가깝게 보정했다.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/update.md  |  1 +
 pages/index.vue | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/docs/update.md b/docs/update.md
index 97cec91..781ac80 100644
--- a/docs/update.md
+++ b/docs/update.md
@@ -19,6 +19,7 @@
 - 홈 Latest와 태그 상세 목록 카드 우하단 hover 화살표 액션 버튼 추가.
 - 홈 Latest와 태그 상세 목록 카드의 우하단 액션 화살표를 텍스트에서 SVG 아이콘으로 교체.
 - 홈 Featured 영역을 그리드에서 가로 슬라이드 트랙(좌우 버튼 이동) 구조로 변경.
+- 홈 Featured 슬라이드 폭을 브레이크포인트별 1.4/1.6/2.6 카드 비율 계산식으로 보정.
 - 기술 명세 현재 버전을 v0.0.45로 갱신.
 
 ## v0.0.44
diff --git a/pages/index.vue b/pages/index.vue
index 46e4acc..810eb0d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -74,7 +74,10 @@ const scrollFeatured = (direction) => {
     return
   }
 
-  const offset = direction === 'left' ? -268 : 268
+  const firstCard = featuredTrackRef.value.querySelector('[data-featured-slide]')
+  const cardWidth = firstCard ? firstCard.getBoundingClientRect().width : 244
+  const gap = 24
+  const offset = direction === 'left' ? -(cardWidth + gap) : cardWidth + gap
 
   featuredTrackRef.value.scrollBy({
     left: offset,
@@ -118,13 +121,14 @@ const scrollFeatured = (direction) => {
         </div>
         <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"
+          class="mt-4 flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth pb-1 [--slides:1.4] sm:[--slides:1.6] lg:[--slides:2.6] [-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 w-[244px] shrink-0 snap-start overflow-hidden rounded-[10px] sm:w-[260px] lg:w-[244px]"
+            class="group relative block aspect-video w-[calc((100%-(24px*(var(--slides)-1)))/var(--slides))] shrink-0 snap-start overflow-hidden rounded-[10px]"
+            data-featured-slide
           >
             <img
               v-if="post.featuredImage"