feat: scrollable container custom hook

src/@components/@common/hooks/useScrollableContainer.ts

@@ -0,0 +1,34 @@
+import { useRef, useState } from "react";
+
+export default function useScrollableContainer() {
+  const containerRef = useRef<HTMLElement | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [startX, setStartX] = useState(0);
+
+  function handleMouseDown(event: React.MouseEvent<HTMLElement, MouseEvent>) {
+    setIsDragging(true);
+    setStartX(event.pageX);
+  }
+
+  function handleMouseMove(event: React.MouseEvent<HTMLElement, MouseEvent>) {
+    const container = containerRef.current;
+    if (!isDragging || !container) return;
+
+    container.scrollLeft += startX - event.pageX;
+    setStartX(event.pageX);
+  }
+
+  function handleMouseUp() {
+    setIsDragging(false);
+  }
+
+  return {
+    scrollableContainerProps: {
+      ref: containerRef,
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseUp,
+    },
+  };
+}

src/@components/MainPage/BestPiickle/index.tsx

@@ -1,19 +1,21 @@
 import { headingTitles } from "../../../util/main/headingTitles";
 import HeadingTitleContainer from "../../@common/HeadingTitleContainer";
+import useScrollableContainer from "../../@common/hooks/useScrollableContainer";
 import Loading from "../../@common/Loading";
 import { useBestPiickle } from "../hooks/useBestPiickle";
 import BestPiickleCard from "./BestPiickleCard";
 import St from "./style";
 
 export default function BestPiickle() {
   const { bestPiickle } = useBestPiickle();
+  const { scrollableContainerProps } = useScrollableContainer();
 
   return (
     <St.Root>
       <HeadingTitleContainer headingTitles={headingTitles[0]} />
 
       {bestPiickle ? (
-        <St.SliderWrapper>
+        <St.SliderWrapper {...scrollableContainerProps}>
           {bestPiickle &&
             bestPiickle.data.slice(0, 5).map((bestPiickle, idx) => {
               return <BestPiickleCard key={bestPiickle._id} bestPiickle={bestPiickle} idx={idx} />;

src/@components/MainPage/Medley/index.tsx

@@ -1,17 +1,19 @@
+import useScrollableContainer from "../../@common/hooks/useScrollableContainer";
 import Loading from "../../@common/Loading";
 import { useMedleyLists } from "../hooks/useMedleyLists";
 import MedleyCard from "./MedleyCard";
 import St from "./style";
 
 export default function Medley() {
   const { randomMedleyLists, isLoading } = useMedleyLists();
+  const { scrollableContainerProps } = useScrollableContainer();
 
   if (isLoading) return <Loading backgroundColor="white" />;
 
   return (
     <St.Container>
       <St.Title>👍 여러분을 위해 피클이 직접 뽑은 주제들!</St.Title>
-      <St.Medley>
+      <St.Medley {...scrollableContainerProps}>
         {randomMedleyLists &&
           randomMedleyLists.map((medleyCard) => <MedleyCard key={medleyCard._id} medleyCard={medleyCard} />)}
       </St.Medley>