공개 화면 카드 상호작용 수정

pages/index.vue

@@ -236,6 +236,7 @@ const carouselDragState = reactive({
   startX: 0,
   startScrollLeft: 0,
   lastDeltaX: 0,
+  dragThreshold: 4,
   moved: false,
   suppressClick: false
 })
@@ -605,13 +606,13 @@ const startCarouselDrag = (event, key) => {
   carouselDragState.startX = event.clientX
   carouselDragState.startScrollLeft = track.scrollLeft
   carouselDragState.lastDeltaX = 0
+  carouselDragState.dragThreshold = event.pointerType === 'mouse' ? 4 : 8
   carouselDragState.moved = false
   carouselDragTrack = track
   bindCarouselDragDocumentEvents()
   if (track.setPointerCapture) {
     track.setPointerCapture(event.pointerId)
   }
-  event.preventDefault()
 }
 
 /**
@@ -631,7 +632,7 @@ const moveCarouselDrag = (event) => {
 
   const deltaX = event.clientX - carouselDragState.startX
   carouselDragState.lastDeltaX = deltaX
-  if (Math.abs(deltaX) > 1) {
+  if (Math.abs(deltaX) >= carouselDragState.dragThreshold) {
     carouselDragState.moved = true
   }
 

pages/posts/index.vue

@@ -49,13 +49,14 @@ const { data: postsResponse } = await useFetch('/api/posts', {
 /**
  * 태그 슬러그로 공개 태그 정보를 찾는다.
  * @param {string | undefined} slug - 태그 슬러그
- * @returns {{ name: string, slug: string }} 태그 정보
+ * @returns {{ name: string, slug: string, color: string }} 태그 정보
  */
 const getTagMeta = (slug) => {
   if (!slug) {
     return {
       name: '',
-      slug: ''
+      slug: '',
+      color: '#4d4d4d'
     }
   }
 
@@ -63,7 +64,8 @@ const getTagMeta = (slug) => {
 
   return {
     name: matchedTag?.name || String(slug).toUpperCase(),
-    slug
+    slug,
+    color: matchedTag?.color || '#4d4d4d'
   }
 }
 
@@ -87,6 +89,7 @@ const postCards = computed(() => (postsResponse.value?.items || []).map((post) =
     featuredImageThumbnail: post.featuredImageThumbnail || '',
     tag: primaryTag.name,
     tagSlug: primaryTag.slug,
+    tagColor: primaryTag.color,
     publishedAt: formatPostDate(post.publishedAt),
     to: `/post/${post.slug}`
   }