[FE] 홈 가로 스크롤 목록 마우스 드래그 미동작 수정 #536

현상

홈 화면 주간 TOP 5 목록을 데스크톱 브라우저에서 마우스로 좌우 드래그해도 넘어가지 않는다. 웨일에서 최초 확인했고, Orca 내장 브라우저(Chromium)에서 좌표 기반 마우스 down → move → up을 자동화로 재현했을 때도 scrollLeft가 0에서 변하지 않았다. 터치와 트랙패드 가로 스와이프로는 동작한다.

원인

src/components/feature/home/_components/HomeFeaturedItemList.tsx:13의 목록 컨테이너가 네이티브 overflow-x-auto만 사용하고 드래그 핸들러(pointerdown/pointermove 등)가 없다. 데스크톱 마우스 드래그는 브라우저 기본 동작으로 overflow 컨테이너를 스크롤하지 않으므로 브라우저 종류와 무관하게 동작하지 않는다. 여기에 scrollbar-hide로 스크롤바까지 숨겨서 마우스 사용자에게는 조작 수단이 없다.

<div className="whitespace-nowrap overflow-x-auto overflow-y-hidden flex space-x-8 scrollbar-hide">

컨테이너 자체는 스크롤 가능하다(scrollWidth 782 / clientWidth 443, JS로 scrollLeft 설정 시 반영됨). 입력 수단만 없는 상태다.

범위

• 주간 TOP 5(HomeFeaturedItemList)에 마우스 드래그 스크롤을 적용한다. 배너가 이미 쓰는 embla-carousel-react 기반 공용 Carousel(src/components/ui/Display/carousel.tsx)로 감싸고 dragFree: true, containScroll: 'trimSnaps'를 쓰는 방식을 우선 검토한다. 새 의존성은 추가하지 않는다.
• 같은 패턴(overflow-x-auto + scrollbar-hide, 드래그 핸들러 없음)을 쓰는 아래 위치도 같은 증상이 예상되므로 함께 점검하고 적용 여부를 정한다.
  • src/components/feature/home/HomeTastingEventPreview.tsx:58 (홈 시음회 탭)
  • src/components/ui/Form/CategorySelector.tsx:64
  • src/components/ui/Navigation/Tab/variants/BookmarkTab.tsx:47
  • src/app/(primary)/explore/_components/WhiskeyListItem.tsx:90
• 라이브러리 전환이 부담되면 pointer 이벤트로 scrollLeft를 갱신하는 공용 useDragScroll 훅을 만들어 위 위치에 적용하는 대안을 택한다. 현재 저장소에 해당 훅은 없다.

확인 범위

• 데스크톱 마우스 드래그로 목록이 좌우로 이동하고, 드래그 후 손을 떼었을 때 카드 링크 클릭이 오발동하지 않는지 확인한다.
• 기존 터치·트랙패드 스와이프 동작이 유지되는지 확인한다.
• 마지막 항목의 우측 여백(pr-25)과 탭 전환 시 스크롤 위치 초기화가 기존과 같은지 확인한다.

비고

• 확인 기준: bottle-note-frontend main 927589f (origin/main과 동일), 2026.10.29
• 백엔드 변경 없음