Feat/#333 refactor custom hook

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

@@ -1,60 +1,109 @@
 import { useRef, useState } from "react";
 
-export default function useDraggingContainer() {
+type DragDirectionType = "X" | "Y";
+
+type EventMapperType = {
+  [key in DragDirectionType]: "pageX" | "pageY";
+};
+
+const eventMapper: EventMapperType = {
+  X: "pageX",
+  Y: "pageY",
+};
+
+const FIRST_TOUCH = 0;
+
+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 standardRef = useRef(0);
 
-  const standardX = useRef(0);
-  const [draggedX, setDraggedX] = useState(0);
+  const [isStartDragging, setIsStartDragging] = useState<boolean>(false);
+  const [isArrivedEnd, setIsArrivedEnd] = useState<boolean>(false);
+  const [dragged, setDragged] = useState<number>(0);
 
-  function handleMouseDown(event: React.MouseEvent<HTMLElement, MouseEvent>) {
+  function handleTriggerDown(event: React.SyntheticEvent<HTMLElement>) {
     setIsStartDragging(true);
 
-    currentX.current = event.pageX;
+    const page = getPageByEventType(event);
+    currentRef.current = page;
+    initializeForDragged(page);
+  }
 
-    initializeForDraggedX(event.pageX);
+  function getPageByEventType(event: React.SyntheticEvent<HTMLElement>): number {
+    const eventType = eventMapper[dragDirection];
+    if (event.nativeEvent instanceof TouchEvent) {
+      return event.nativeEvent.touches[FIRST_TOUCH][eventType];
+    }
+    if (event.nativeEvent instanceof MouseEvent) {
+      return event.nativeEvent[eventType];
+    }
+    return 0;
   }
 
-  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>) {
+  function handleTriggerMove(event: React.SyntheticEvent<HTMLElement>) {
     const container = containerRef.current;
+
     if (!container) return;
     if (!isStartDragging) return;
 
-    moveContainerByCurrentX(container, event.pageX);
+    const page = getPageByEventType(event);
+    moveContainerByCurrent(container, page);
+    handleArrivedEnd(container);
+
+    setDragged(Math.abs(page - standardRef.current));
+  }
 
-    setDraggedX(Math.abs(event.pageX - standardX.current));
+  function moveContainerByCurrent(container: HTMLElement, movedTrigger: number) {
+    const delta = currentRef.current - movedTrigger;
+    if (dragDirection === "X") {
+      container.scrollLeft += delta;
+    }
+    if (dragDirection === "Y") {
+      container.scrollTop += delta;
+    }
+    currentRef.current = movedTrigger;
   }
 
-  function moveContainerByCurrentX(container: HTMLElement, movedMouseX: number) {
-    container.scrollLeft += currentX.current - movedMouseX;
-    currentX.current = movedMouseX;
+  function handleArrivedEnd(container: HTMLElement) {
+    if (dragDirection === "X") {
+      setIsArrivedEnd(container.scrollWidth - container.scrollLeft === container.clientWidth);
+    }
+    if (dragDirection === "Y") {
+      setIsArrivedEnd(container.scrollHeight - container.scrollTop === container.clientHeight);
+    }
   }
 
-  function handleMouseUpOrLeave() {
+  function handleTriggerEnd() {
     reset();
   }
 
   function reset() {
     setIsStartDragging(false);
-    currentX.current = 0;
-    standardX.current = 0;
+    currentRef.current = 0;
+    standardRef.current = 0;
   }
 
   return {
     scrollableContainerProps: {
       ref: containerRef,
-      onMouseDown: handleMouseDown,
-      onMouseMove: handleMouseMove,
-      onMouseUp: handleMouseUpOrLeave,
-      onMouseLeave: handleMouseUpOrLeave,
+      onMouseDown: handleTriggerDown,
+      onMouseMove: handleTriggerMove,
+      onMouseUp: handleTriggerEnd,
+      onMouseLeave: handleTriggerEnd,
+
+      onTouchStart: handleTriggerDown,
+      onTouchMove: handleTriggerMove,
+      onTouchEnd: handleTriggerEnd,
+      onTouchCancel: handleTriggerEnd,
     },
-    isDragging: draggedX > 10,
+    isDragging: dragged > 10,
+    isArrivedEnd,
   };
 }

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

@@ -1,95 +1,107 @@
-import { useCallback, useRef, useState } from "react";
+import { SyntheticEvent, useRef, useState } from "react";
 
 const thresholds = {
-  offset: 150, // 이 이상 내려야 drawer 닫힘
-  transitionTime: 0.2, // 애니메이션 지속 시간
+  OFFSET: 150,
+  ANIMATION_TRANSITION_TIME: 0.2,
 };
 
+const FIRST_TOUCH = 0;
+
 export default function useDrawer(closeModal: () => void) {
   const knobRef = useRef<HTMLDivElement | null>(null);
   const containerRef = useRef<HTMLElement | null>(null);
 
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragStart, setDragStart] = useState({ y: 0 });
-  const [yOffset, setYOffset] = useState(0);
+  const currentRef = useRef(0);
+  const standardRef = useRef(0);
+
+  const [isStartDragging, setIsStartDragging] = useState<boolean>(false);
+  const [dragged, setDragged] = useState<number>(0);
+
+  function handleMouseDown(event: React.SyntheticEvent<HTMLElement>) {
+    const knob = knobRef.current;
+    if (!knob) return;
+    if (isNode(event.target) && !knob.contains(event.target)) return;
+    setIsStartDragging(true);
+
+    const page = getPageByEventType(event);
+    currentRef.current = page;
+    initializeForDragged(page);
+  }
 
-  const handleMouseDown = useCallback((e: React.MouseEvent<HTMLElement>) => {
-    if (knobRef.current && knobRef.current.contains(e.target as Node)) {
-      setIsDragging(true);
-      setDragStart({
-        y: e.clientY,
-      });
+  function isNode(target: EventTarget): target is Node {
+    return (target as Node) !== undefined;
+  }
+
+  function getPageByEventType(event: React.SyntheticEvent<HTMLElement>): number {
+    if (event.nativeEvent instanceof TouchEvent) {
+      return event.nativeEvent.touches[FIRST_TOUCH].pageY;
+    }
+    if (event.nativeEvent instanceof MouseEvent) {
+      return event.nativeEvent.pageY;
     }
-  }, []);
+    return 0;
+  }
 
-  const handleMouseMove = useCallback(
-    (e: React.MouseEvent<HTMLElement>) => {
-      if (!isDragging) return;
+  function initializeForDragged(standard: number) {
+    setDragged(0);
+    standardRef.current = standard;
+  }
 
-      const offset = Math.max(0, e.clientY - dragStart.y);
+  function handleMouseMove(event: SyntheticEvent<HTMLElement>) {
+    const container = containerRef.current;
 
-      // 모달을 드래그한 만큼 이동
-      const container = containerRef.current;
-      if (!container) return;
-      container.style.transform = `translateY(${offset}px)`;
-      setYOffset(offset);
-    },
-    [dragStart.y, isDragging],
-  );
+    if (!container) return;
+    if (!isStartDragging) return;
+
+    const page = getPageByEventType(event);
+    currentRef.current = page;
+    moveDrawerByCurrent(container, page);
+
+    setDragged(Math.abs(page - standardRef.current));
+  }
+
+  function moveDrawerByCurrent(container: HTMLElement, movedTrigger: number) {
+    const offset = Math.max(0, movedTrigger - standardRef.current);
+    container.style.transform = `translateY(${offset}px)`;
+    currentRef.current = movedTrigger;
+  }
 
-  const handleMouseUp = useCallback(() => {
+  function handleMouseUp() {
     const container = containerRef.current;
     if (!container) return;
 
-    if (yOffset > 150) {
-      container.style.transition = `transform ${thresholds.transitionTime}s ease-in-out`;
+    if (dragged > thresholds.OFFSET) {
+      container.style.transition = `transform ${thresholds.ANIMATION_TRANSITION_TIME}s ease-in-out`;
       container.style.transform = "translateY(100%)";
       setTimeout(() => {
         closeModal();
-      }, thresholds.transitionTime * 1000 + 50);
+      }, thresholds.ANIMATION_TRANSITION_TIME * 1000 + 50);
     } else {
-      container.style.transition = `transform ${thresholds.transitionTime / 2}s ease-out`;
+      container.style.transition = `transform ${thresholds.ANIMATION_TRANSITION_TIME / 2}s ease-out`;
       container.style.transform = "translateY(0)";
     }
-    setIsDragging(false);
-  }, [yOffset, closeModal]);
-
-  /**
-   * For Mobile
-   * */
-
-  const handleTouchStart = useCallback((e: React.TouchEvent<HTMLElement>) => {
-    if (knobRef.current && knobRef.current.contains(e.target as Node)) {
-      setIsDragging(true);
-      setDragStart({
-        y: e.touches[0].clientY,
-      });
-    }
-  }, []);
-
-  const handleTouchMove = useCallback(
-    (e: React.TouchEvent<HTMLElement>) => {
-      if (!isDragging) return;
 
-      const offset = Math.max(0, e.touches[0].clientY - dragStart.y);
+    reset();
+  }
 
-      const container = containerRef.current;
-      if (!container) return;
-      container.style.transform = `translateY(${offset}px)`;
-      setYOffset(offset);
-    },
-    [dragStart.y, isDragging],
-  );
+  function reset() {
+    setIsStartDragging(false);
+    currentRef.current = 0;
+    standardRef.current = 0;
+  }
 
   return {
     drawerProps: {
       ref: containerRef,
       onMouseDown: handleMouseDown,
       onMouseMove: handleMouseMove,
       onMouseUp: handleMouseUp,
-      onTouchStart: handleTouchStart,
-      onTouchMove: handleTouchMove,
+      onMouseLeave: handleMouseUp,
+
+      onTouchStart: handleMouseDown,
+      onTouchMove: handleMouseMove,
       onTouchEnd: handleMouseUp,
+      onTouchCancel: handleMouseUp,
     },
     knobRef,
   };

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/BestPiicklePage/BestPiickleRecommend/index.tsx

@@ -1,8 +1,8 @@
 import { CardList, LocationType } from "../../../types/cardCollection";
 import { HeadingTitle } from "../../../util/main/headingTitles";
 import HeadingTitleContainer from "../../@common/HeadingTitleContainer";
-import { useRecentlyBookmarked } from "../../@common/hooks/useRecentlyBookmarked";
-import { useCardsByGender } from "./hooks/useCardsByGender";
+import { useCardsByGender } from "../hooks/useCardsByGender";
+import { useRecentlyBookmarked } from "../hooks/useRecentlyBookmarked";
 import RecommendItem from "./RecommendItem";
 import * as St from "./style";