Feat/#333 refactor custom hook

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

@@ -8,7 +8,7 @@ export default function useDraggableYContainer() {
   const [startY, setStartY] = useState(0);
   const [movedY, setMovedY] = useState(0);
 
-  const touchSensitivity = 0.7; // 이동 감도 조절 값 (조절할 수 있음)
+  const touchSensitivity = 10; // 이동 감도 조절 값 (조절할 수 있음)
 
   function handleTouchStart(event: React.TouchEvent<HTMLElement>) {
     setIsStartDragging(true);

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

@@ -1,40 +1,47 @@
 import { useRef, useState } from "react";
 
-export default function useDraggingContainer() {
+type DragDirectionType = "X" | "Y";
+
+export default function useDraggingContainer(dragDirection: DragDirectionType) {
   const containerRef = useRef<HTMLElement | null>(null);
 
   const [isStartDragging, setIsStartDragging] = useState(false);
-  const currentX = useRef(0);
+  const currentRef = useRef(0);
 
-  const standardX = useRef(0);
-  const [draggedX, setDraggedX] = useState(0);
+  const standardRef = useRef(0);
+  const [dragged, setDragged] = useState(0);
 
   function handleMouseDown(event: React.MouseEvent<HTMLElement, MouseEvent>) {
     setIsStartDragging(true);
 
-    currentX.current = event.pageX;
+    const page = dragDirection === "X" ? event.pageX : event.pageY;
+    currentRef.current = page;
 
-    initializeForDraggedX(event.pageX);
+    initializeForDragged(page);
   }
 
-  function initializeForDraggedX(standartX: number) {
-    setDraggedX(0);
-    standardX.current = standartX;
+  function initializeForDragged(standard: number) {
+    setDragged(0);
+    standardRef.current = standard;
   }
 
   function handleMouseMove(event: React.MouseEvent<HTMLElement, MouseEvent>) {
     const container = containerRef.current;
     if (!container) return;
     if (!isStartDragging) return;
 
-    moveContainerByCurrentX(container, event.pageX);
+    const page = dragDirection === "X" ? event.pageX : event.pageY;
+
+    moveContainerByCurrent(container, page);
 
-    setDraggedX(Math.abs(event.pageX - standardX.current));
+    setDragged(Math.abs(page - standardRef.current));
   }
 
-  function moveContainerByCurrentX(container: HTMLElement, movedMouseX: number) {
-    container.scrollLeft += currentX.current - movedMouseX;
-    currentX.current = movedMouseX;
+  function moveContainerByCurrent(container: HTMLElement, movedMouseX: number) {
+    dragDirection === "X"
+      ? (container.scrollLeft += currentRef.current - movedMouseX)
+      : (container.scrollTop += currentRef.current - movedMouseX);
+    currentRef.current = movedMouseX;
   }
 
   function handleMouseUpOrLeave() {
@@ -43,8 +50,8 @@ export default function useDraggingContainer() {
 
   function reset() {
     setIsStartDragging(false);
-    currentX.current = 0;
-    standardX.current = 0;
+    currentRef.current = 0;
+    standardRef.current = 0;
   }
 
   return {
@@ -55,6 +62,6 @@ export default function useDraggingContainer() {
       onMouseUp: handleMouseUpOrLeave,
       onMouseLeave: handleMouseUpOrLeave,
     },
-    isDragging: draggedX > 10,
+    isDragging: dragged > 10,
   };
 }

src/@components/BestPiicklePage/BestPiickleRecommend/RecommendItem/index.tsx

@@ -11,7 +11,7 @@ const BEST_PIICKLE_TOTAL_COUNT = 4;
 
 export default function RecommendItem(props: RecommendProps) {
   const { recommendList } = props;
-  const { scrollableContainerProps, isDragging } = useDraggingContainer();
+  const { scrollableContainerProps, isDragging } = useDraggingContainer("X");
 
   return (
     <St.RecommemdItemContainer>

src/@components/CardCollectionPage/Card/CommentModal/index.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 import IcSubmitBtn from "../../../../asset/icon/IcSubmitBtn";
-import useDraggableYContainer from "../../../@common/hooks/useDraggableYContainer";
+import useDraggingContainer from "../../../@common/hooks/useDraggingContainer";
 import useDrawer from "../../../@common/hooks/useDrawer";
 import Modal from "../../../@common/Modal";
 import { CommentList, handleCommentController } from "../../hooks/useComments";
@@ -16,7 +16,7 @@ interface CommentModalProps {
 
 export default function CommentModal(props: CommentModalProps) {
   const { cardId, comments, onClickBackground, handleSubmitComment } = props;
-  const { scrollableContainerProps, isScrollEnd } = useDraggableYContainer();
+  const { scrollableContainerProps } = useDraggingContainer("Y");
   const { drawerProps, knobRef } = useDrawer(onClickBackground);
 
   const [answer, setAnswer] = useState<string>("");
@@ -46,7 +46,7 @@ export default function CommentModal(props: CommentModalProps) {
               </St.Comment>
             ))}
         </St.Comments>
-        {!isScrollEnd && <St.Gradient />}
+        {/* {!isScrollEnd && <St.Gradient />} */}
         <St.InputWrapper>
           <St.Input
             placeholder="답변하기"

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

@@ -10,7 +10,7 @@ import St from "./style";
 
 export default function BestPiickle() {
   const { bestPiickle } = useBestPiickle();
-  const { scrollableContainerProps, isDragging } = useDraggingContainer();
+  const { scrollableContainerProps, isDragging } = useDraggingContainer("X");
 
   return (
     <St.Root>

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

@@ -4,7 +4,7 @@ import MedleyCard from "./MedleyCard";
 import * as St from "./style";
 
 export default function Medley() {
-  const { scrollableContainerProps, isDragging } = useDraggingContainer();
+  const { scrollableContainerProps, isDragging } = useDraggingContainer("X");
   const { randomMedleyLists } = useMedleyLists();
 
   return (