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) => {