From 67c1b63f3798c02bf23b80d07ec719a500b88a44 Mon Sep 17 00:00:00 2001
From: SNUPI <joohaem@daum.net>
Date: Fri, 17 Mar 2023 01:16:37 +0900
Subject: [PATCH] feat: scrollable container custom hook

---
 .../@common/hooks/useScrollableContainer.ts   | 34 +++++++++++++++++++
 .../MainPage/BestPiickle/index.tsx            |  4 ++-
 src/@components/MainPage/Medley/index.tsx     |  4 ++-
 3 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 src/@components/@common/hooks/useScrollableContainer.ts

diff --git a/src/@components/@common/hooks/useScrollableContainer.ts b/src/@components/@common/hooks/useScrollableContainer.ts
new file mode 100644
index 00000000..2bff02ee
--- /dev/null
+++ b/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,
+    },
+  };
+}
diff --git a/src/@components/MainPage/BestPiickle/index.tsx b/src/@components/MainPage/BestPiickle/index.tsx
index cf1badbf..4cc5bf4c 100644
--- a/src/@components/MainPage/BestPiickle/index.tsx
+++ b/src/@components/MainPage/BestPiickle/index.tsx
@@ -1,5 +1,6 @@
 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";
@@ -7,13 +8,14 @@ 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} />;
diff --git a/src/@components/MainPage/Medley/index.tsx b/src/@components/MainPage/Medley/index.tsx
index 8311616a..60012430 100644
--- a/src/@components/MainPage/Medley/index.tsx
+++ b/src/@components/MainPage/Medley/index.tsx
@@ -1,3 +1,4 @@
+import useScrollableContainer from "../../@common/hooks/useScrollableContainer";
 import Loading from "../../@common/Loading";
 import { useMedleyLists } from "../hooks/useMedleyLists";
 import MedleyCard from "./MedleyCard";
@@ -5,13 +6,14 @@ 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>