diff --git a/docs/update.md b/docs/update.md index fe508bc..97cec91 100644 --- a/docs/update.md +++ b/docs/update.md @@ -18,6 +18,7 @@ - 홈 중앙 메인 영역을 원본 Thred 구조에 맞춰 Hero/Featured/Latest 섹션 간격과 내부 보더 정렬 기준으로 재구성. - 홈 Latest와 태그 상세 목록 카드 우하단 hover 화살표 액션 버튼 추가. - 홈 Latest와 태그 상세 목록 카드의 우하단 액션 화살표를 텍스트에서 SVG 아이콘으로 교체. +- 홈 Featured 영역을 그리드에서 가로 슬라이드 트랙(좌우 버튼 이동) 구조로 변경. - 기술 명세 현재 버전을 v0.0.45로 갱신. ## v0.0.44 diff --git a/pages/index.vue b/pages/index.vue index 9fb1a9c..46e4acc 100644 --- a/pages/index.vue +++ b/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' + }) +}