@byeolnaerim/flex-layout 0.0.3 → 0.0.5

package/dist/hooks.js

@@ -0,0 +1,409 @@
+import equal from 'fast-deep-equal';
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { Subject, BehaviorSubject, map, distinctUntilChanged } from 'rxjs';
+
+// src/flex-layout/hooks/useDrag.ts
+
+// src/flex-layout/utils/FlexLayoutUtils.ts
+var lastTouchEvent;
+function getClientXy(event) {
+  let clientX;
+  let clientY;
+  if (window.MouseEvent && event instanceof window.MouseEvent) {
+    clientX = event.clientX;
+    clientY = event.clientY;
+  } else if (window.TouchEvent && event instanceof window.TouchEvent) {
+    const _event = event.touches.length == 0 ? lastTouchEvent : event;
+    clientX = _event.touches[0].clientX;
+    clientY = _event.touches[0].clientY;
+    lastTouchEvent = event;
+  } else {
+    return;
+  }
+  return { clientX, clientY };
+}
+
+// src/flex-layout/hooks/useDrag.ts
+var dragState = new Subject();
+var filterChildren = (obj) => {
+  const { children, ...rest } = obj || {};
+  return rest;
+};
+var useDragCapture = (targetRef) => {
+  const stateRef = useRef(null);
+  const forceUpdate = useRef(0);
+  useEffect(() => {
+    const subscription = dragState.pipe(
+      map((value) => {
+        if (!targetRef || !targetRef.current) return null;
+        const { x, y } = value;
+        const rect = targetRef.current.getBoundingClientRect();
+        const {
+          width,
+          height,
+          x: rectX,
+          y: rectY,
+          right,
+          bottom
+        } = rect;
+        let isOver = false;
+        if (x < rectX || x > right || y < rectY || y > bottom) {
+          isOver = true;
+        }
+        const leftBoundary = rectX + width * 0.2;
+        const rightBoundary = right - width * 0.2;
+        const topBoundary = rectY + height * 0.2;
+        const bottomBoundary = bottom - height * 0.2;
+        let position = "centerBoundary";
+        if (x < leftBoundary) {
+          position = "leftBoundary";
+        } else if (x > rightBoundary) {
+          position = "rightBoundary";
+        } else if (y < topBoundary) {
+          position = "topBoundary";
+        } else if (y > bottomBoundary) {
+          position = "bottomBoundary";
+        }
+        return {
+          positionName: position,
+          isOver,
+          ...value
+        };
+      }),
+      distinctUntilChanged(
+        (prev, curr) => equal(filterChildren(prev), filterChildren(curr))
+      )
+    ).subscribe({
+      next: (value) => {
+        if (value && !equal(
+          filterChildren(stateRef.current),
+          filterChildren(value)
+        )) {
+          stateRef.current = value;
+          forceUpdate.current++;
+        }
+      },
+      error: (err) => console.error(err)
+    });
+    return () => subscription.unsubscribe();
+  }, [targetRef]);
+  const [, rerender] = useState({});
+  useEffect(() => {
+    const interval = setInterval(() => {
+      rerender({});
+    }, 50);
+    return () => clearInterval(interval);
+  }, []);
+  return stateRef.current;
+};
+var dropMovementEventSubject = new Subject();
+var allSplitScreenCount = new BehaviorSubject(0);
+var useDragEvents = ({
+  isBlockingActiveInput = false
+}) => {
+  const dragResumeTimer = useRef(null);
+  const scrollThreshold = 10;
+  const isScrolling = useRef(false);
+  const isPending = useRef(false);
+  const isMouseDown = useRef(false);
+  const isDragging = useRef(false);
+  const touchStartX = useRef(0);
+  const touchStartY = useRef(0);
+  const handleStart = useCallback(
+    ({
+      event: _event,
+      dragStartCallback
+    }) => {
+      const event = _event instanceof Event ? _event : _event.nativeEvent;
+      if (dragResumeTimer.current) {
+        clearTimeout(dragResumeTimer.current);
+        dragResumeTimer.current = null;
+      }
+      if (event.target.contentEditable === "true" || isBlockingActiveInput && document.activeElement === event.target) {
+        return;
+      }
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+      isPending.current = true;
+      isMouseDown.current = true;
+      if (event instanceof globalThis.TouchEvent) {
+        const touch = event.touches[0];
+        touchStartX.current = touch.clientX;
+        touchStartY.current = touch.clientY;
+      } else if (event instanceof globalThis.MouseEvent) {
+        touchStartX.current = event.clientX;
+        touchStartY.current = event.clientY;
+      }
+      setTimeout(() => {
+        if (!isPending.current || isScrolling.current) return;
+        isPending.current = false;
+        isDragging.current = true;
+        const xy = getClientXy(event);
+        if (!xy) return;
+        const { clientX, clientY } = xy;
+        dragStartCallback({ x: clientX, y: clientY });
+      }, 300);
+    },
+    [isBlockingActiveInput]
+  );
+  const handleMove = useCallback(
+    ({
+      event: _event,
+      notDragCallback,
+      dragStartCallback,
+      moveingCallback
+    }) => {
+      if (!isMouseDown.current) return;
+      const event = _event instanceof Event ? _event : _event.nativeEvent;
+      const xy = getClientXy(event);
+      if (!xy) return;
+      const { clientX, clientY } = xy;
+      const deltaX = Math.abs(clientX - touchStartX.current);
+      const deltaY = Math.abs(clientY - touchStartY.current);
+      if (isPending.current && (deltaX > scrollThreshold || deltaY > scrollThreshold)) {
+        isScrolling.current = true;
+        isPending.current = false;
+        isDragging.current = false;
+        if (notDragCallback)
+          notDragCallback({ x: clientX, y: clientY });
+        if (dragResumeTimer.current) {
+          clearTimeout(dragResumeTimer.current);
+          dragResumeTimer.current = null;
+        }
+        dragResumeTimer.current = setTimeout(() => {
+          if (!isMouseDown.current) return;
+          if (dragStartCallback)
+            dragStartCallback({ x: clientX, y: clientY });
+          isPending.current = true;
+          isScrolling.current = false;
+          handleStart({ event: _event, dragStartCallback });
+        }, 400);
+        return;
+      }
+      if (!isDragging.current || isPending.current) return;
+      moveingCallback({ x: clientX, y: clientY });
+    },
+    [isBlockingActiveInput]
+  );
+  const handleEnd = useCallback(
+    ({
+      event: _event,
+      dragEndCallback
+    }) => {
+      isScrolling.current = false;
+      isMouseDown.current = false;
+      if (isPending.current) {
+        isPending.current = false;
+        return;
+      }
+      const event = _event instanceof Event ? _event : _event.nativeEvent;
+      if (!isDragging.current) return;
+      isDragging.current = false;
+      const xy = getClientXy(event);
+      if (!xy) return;
+      const { clientX, clientY } = xy;
+      dragEndCallback({ x: clientX, y: clientY });
+    },
+    [isBlockingActiveInput]
+  );
+  return {
+    handleStart,
+    handleMove,
+    handleEnd
+  };
+};
+var folderEventSubject = new Subject();
+var setFolderEvent = (newValue) => {
+  folderEventSubject.next(newValue);
+};
+var useFolderEvent = () => {
+  const [folderEvent, setFolderEvent2] = useState(
+    null
+  );
+  useEffect(() => {
+    const subscription = folderEventSubject.subscribe((e) => {
+      if (!e) return;
+      setFolderEvent2(e);
+    });
+    return () => {
+      if (subscription) {
+        subscription.unsubscribe();
+      }
+    };
+  }, []);
+  return { folderEvent };
+};
+var useListPagingForSentinel = ({
+  //initPageNumber,
+  //initPageSize,
+  onReachTerminal
+}) => {
+  const [firstChildNode, setFirstChildNode] = useState(null);
+  const [lastChildNode, setLastChildNode] = useState(null);
+  const observerRef = useRef(null);
+  const firstChildRef = useCallback((node) => {
+    setFirstChildNode(node);
+  }, []);
+  const lastChildRef = useCallback((node) => {
+    setLastChildNode(node);
+  }, []);
+  useEffect(() => {
+    if (firstChildNode && observerRef.current)
+      observerRef.current.unobserve(firstChildNode);
+    if (lastChildNode && observerRef.current)
+      observerRef.current.unobserve(lastChildNode);
+    const handleIntersect = (entries, observer2) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          if (entry.target === firstChildNode) {
+            if (onReachTerminal)
+              onReachTerminal({
+                isFirst: true,
+                isLast: false,
+                observer: observer2
+              });
+          }
+          if (entry.target === lastChildNode) {
+            if (onReachTerminal)
+              onReachTerminal({
+                isFirst: false,
+                isLast: true,
+                observer: observer2
+              });
+          }
+        }
+      });
+    };
+    const observer = new IntersectionObserver(handleIntersect, {
+      threshold: 0.1
+    });
+    observerRef.current = observer;
+    if (firstChildNode) observer.observe(firstChildNode);
+    if (lastChildNode) observer.observe(lastChildNode);
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [firstChildNode, lastChildNode]);
+  return {
+    firstChildRef,
+    lastChildRef
+  };
+};
+var usePaginationViewNumber = ({
+  initPageNumber
+}) => {
+  const [showCurrentPageNumber, setShowCurrentPageNumber] = useState(initPageNumber);
+  const observerRef = useRef(null);
+  const showCurrentPageObserveTarget = useCallback(
+    (node) => {
+      if (!node) return;
+      if (!observerRef.current) {
+        observerRef.current = new IntersectionObserver(
+          (entries) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                const pageIndexAttr = entry.target.getAttribute(
+                  "data-page-index"
+                );
+                if (!pageIndexAttr) return;
+                const pageIndex = parseInt(pageIndexAttr, 10);
+                setShowCurrentPageNumber(pageIndex);
+              }
+            });
+          },
+          {
+            threshold: 0.1
+            // 예: 10% 이상 보여야 intersect로 판단
+          }
+        );
+      }
+      observerRef.current.observe(node);
+    },
+    []
+  );
+  useEffect(() => {
+    const currentObserver = observerRef.current;
+    return () => {
+      if (currentObserver) {
+        currentObserver.disconnect();
+      }
+    };
+  }, []);
+  return {
+    showCurrentPageNumber,
+    showCurrentPageObserveTarget
+  };
+};
+var usePagingHandler = ({
+  lastCallPageNumber,
+  dataListRef
+}) => {
+  const jumpingPageNumberRef = useRef(lastCallPageNumber);
+  useEffect(() => {
+    if (jumpingPageNumberRef.current) {
+      setTimeout(() => {
+        jumpingPageNumberRef.current = null;
+      }, 1e3);
+    }
+  }, [jumpingPageNumberRef]);
+  const paginationScrollIntoViewTarget = useRef({});
+  const pageNumberRef = useRef(lastCallPageNumber);
+  const setPaginationRef = useCallback(
+    (i) => (node) => {
+      if (!node) return;
+      paginationScrollIntoViewTarget.current[i] = node;
+      if (jumpingPageNumberRef.current !== null && i === jumpingPageNumberRef.current) {
+        node.scrollIntoView({
+          behavior: "instant",
+          // 필요한 경우 'smooth' 등으로 수정 가능
+          block: "start"
+        });
+        jumpingPageNumberRef.current = null;
+      }
+    },
+    []
+  );
+  const handleReachTerminal = ({ isFirst, isLast, observer }, dataCallFetch) => {
+    if (dataListRef.current.length === 0) return;
+    if (jumpingPageNumberRef.current != null) return;
+    if (!isFirst && !isLast) return;
+    const callPageNumber = isFirst ? Math.max(pageNumberRef.current - 1, 0) : pageNumberRef.current + 1;
+    if (dataListRef.current[callPageNumber] != null && (dataListRef.current[callPageNumber]?.length || 0) > 0)
+      return;
+    jumpingPageNumberRef.current = callPageNumber;
+    setTimeout(() => {
+      jumpingPageNumberRef.current = null;
+    }, 1e3);
+    dataCallFetch(callPageNumber);
+  };
+  const handleClickPageChange = (page, dataCallFetch) => {
+    const pageData = dataListRef.current[page];
+    if (pageData != null && Array.isArray(pageData) && pageData.length > 0) {
+      paginationScrollIntoViewTarget.current[page]?.scrollIntoView({
+        behavior: "smooth",
+        block: "start"
+      });
+      return;
+    }
+    jumpingPageNumberRef.current = page;
+    setTimeout(() => {
+      jumpingPageNumberRef.current = null;
+    }, 1e3);
+    dataCallFetch(page);
+  };
+  return {
+    jumpingPageNumberRef,
+    paginationScrollIntoViewTarget,
+    pageNumberRef,
+    setPaginationRef,
+    handleReachTerminal,
+    handleClickPageChange
+  };
+};
+
+export { allSplitScreenCount, dragState, dropMovementEventSubject, folderEventSubject, setFolderEvent, useDragCapture, useDragEvents, useFolderEvent, useListPagingForSentinel, usePaginationViewNumber, usePagingHandler };
+//# sourceMappingURL=hooks.js.map
+//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/flex-layout/utils/FlexLayoutUtils.ts","../src/flex-layout/hooks/useDrag.ts","../src/flex-layout/hooks/useListPaging.ts"],"names":["setFolderEvent","useState","useRef","useCallback","useEffect","observer"],"mappings":"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","file":"hooks.js","sourcesContent":["export function isDocumentOut({ x, y }: { x: number; y: number }) {\r\n    if (typeof window == 'undefined') return;\r\n    const { innerWidth, innerHeight, scrollX, scrollY } = window;\r\n\r\n    return (\r\n        x < 0 || y < 0 || x > innerWidth + scrollX || y > innerHeight + scrollY\r\n    );\r\n}\r\n\r\nlet lastTouchEvent: globalThis.TouchEvent;\r\nexport function getClientXy(event: Event) {\r\n    let clientX: number;\r\n    let clientY: number;\r\n    if (window.MouseEvent && event instanceof window.MouseEvent) {\r\n        clientX = event.clientX;\r\n        clientY = event.clientY;\r\n    } else if (window.TouchEvent && event instanceof window.TouchEvent) {\r\n        const _event = event.touches.length == 0 ? lastTouchEvent : event;\r\n        clientX = _event!.touches[0].clientX;\r\n        clientY = _event!.touches[0].clientY;\r\n        lastTouchEvent = event;\r\n    } else {\r\n        return; // 해당 이벤트 타입이 MouseEvent나 TouchEvent가 아니라면 무시\r\n    }\r\n    return { clientX, clientY };\r\n}\r\n\r\nexport function isOverMove(elementSize: number, elementMinSize: number) {\r\n    return (\r\n        Math.floor(elementSize) <= 0 ||\r\n        (isNaN(elementMinSize)\r\n            ? false\r\n            : elementMinSize >= Math.floor(elementSize))\r\n    );\r\n}\r\n\r\nexport function findNotCloseFlexContent(\r\n    target: HTMLElement | Element | null,\r\n    direction: 'previousElementSibling' | 'nextElementSibling'\r\n) {\r\n    if (!target) return target;\r\n    let _target = target as HTMLElement;\r\n    const isCloseCheck = () => {\r\n        let grow =\r\n            parseFloat(window.getComputedStyle(_target).flex.split(' ')[0]) ||\r\n            0;\r\n        if (grow == 0) {\r\n            return true;\r\n        } else {\r\n            return false;\r\n        }\r\n    };\r\n    while (isCloseCheck()) {\r\n        let nextTarget = _target[direction]?.[direction];\r\n        _target = nextTarget as HTMLElement;\r\n        if (!_target) {\r\n            break;\r\n        }\r\n    }\r\n    return _target as HTMLElement | HTMLDivElement | null;\r\n}\r\n\r\nexport function remain(flexContainerList: Array<HTMLElement>) {\r\n    return new Promise(resolve => {\r\n        let notGrowList: Array<HTMLElement> = [];\r\n        let totalGrow = flexContainerList.reduce((t, e, i) => {\r\n            if (e.hasAttribute('data-grow') == false) {\r\n                notGrowList.push(e);\r\n                return t;\r\n            }\r\n            let grow = parseFloat(e.dataset.grow || '');\r\n            e.style.flex = `${grow} 1 0%`;\r\n            t -= grow;\r\n            return t;\r\n        }, flexContainerList.length);\r\n\r\n        if (notGrowList.length != 0) {\r\n            resize(notGrowList, totalGrow);\r\n        }\r\n\r\n        resolve(flexContainerList);\r\n    });\r\n}\r\n\r\nexport function resize(list: Array<HTMLElement>, totalGrow: number) {\r\n    return new Promise(resolve => {\r\n        // totalGrow 값을 리스트의 개수로 나누어 균등 할당\r\n        let resizeWeight = totalGrow / list.length;\r\n        list.forEach(e => {\r\n            e.dataset.grow = resizeWeight.toString();\r\n            e.style.flex = `${resizeWeight} 1 0%`;\r\n        });\r\n        resolve(resizeWeight);\r\n    });\r\n}\r\n\r\nexport function mathWeight(totalCount: number, totalGrow: number) {\r\n    return 1 + (totalGrow - totalCount) / totalCount;\r\n}\r\nexport function mathGrow(\r\n    childSize: number,\r\n    parentSize: number,\r\n    containerCount: number\r\n) {\r\n    return containerCount * (childSize / parentSize);\r\n}\r\n\r\nexport function getGrow(growTarget: HTMLElement | Element) {\r\n    const target =\r\n        growTarget instanceof Element\r\n            ? (growTarget as HTMLElement)\r\n            : growTarget;\r\n    return (\r\n        parseFloat(target.style.flex.split(' ')[0]) ||\r\n        parseFloat(target.dataset.grow || '')\r\n    );\r\n}\r\n\r\nexport function closeFlex(\r\n    resizeTarget: HTMLElement,\r\n    containers: HTMLElement[],\r\n    {\r\n        isResize = false,\r\n        isDsiabledResizePanel = false,\r\n        sizeName,\r\n    }: {\r\n        isResize?: boolean;\r\n        isDsiabledResizePanel?: boolean;\r\n        sizeName: 'width' | 'height';\r\n    }\r\n) {\r\n    return new Promise(resolve => {\r\n        if (!resizeTarget.hasAttribute('data-is_resize_panel')) {\r\n            // resolve(resizeTarget);\r\n            // return;\r\n        } else if (isDsiabledResizePanel) {\r\n            resizeTarget.dataset.is_resize_panel = 'false';\r\n        }\r\n\r\n        resizeTarget.dataset.prev_grow = getGrow(resizeTarget).toString();\r\n\r\n        let notCloseList = containers.filter(\r\n            e => e.style.flex != '0 1 0%' && e != resizeTarget\r\n        );\r\n        let notCloseAndOpenTargetList = [...notCloseList, resizeTarget];\r\n        //let resizeWeight = this.mathWeight(notCloseList, this.#forResizeList.length);\r\n        notCloseAndOpenTargetList.forEach(e => {\r\n            e.style.transition = 'flex 0.5s';\r\n            e.ontransitionend = event => {\r\n                if (event.propertyName != 'flex-grow') {\r\n                    return;\r\n                }\r\n                notCloseAndOpenTargetList.forEach(\r\n                    e => (e.style.transition = '')\r\n                );\r\n                //e.style.transition = '';\r\n                e.ontransitionend = () => {};\r\n            };\r\n\r\n            if (e == resizeTarget) {\r\n                e.dataset.grow = '0';\r\n                e.style.flex = `0 1 0%`;\r\n                return;\r\n            }\r\n\r\n            if (isResize) {\r\n                return;\r\n            }\r\n\r\n            let percent = getGrow(e) / containers.length;\r\n            //let percentWeight = this.#forResizeList.length * percent;\r\n            //let remainWeight = resizeWeight * percent;\r\n            if (notCloseList.length == 1) {\r\n                e.dataset.grow = containers.length.toString();\r\n                e.style.flex = `${containers.length} 1 0%`;\r\n                return;\r\n            }\r\n            e.dataset.grow = (containers.length * percent).toString();\r\n            e.style.flex = `${containers.length * percent} 1 0%`;\r\n        });\r\n\r\n        if (isResize) {\r\n            resize(notCloseList, containers.length);\r\n        }\r\n\r\n        resolve(resizeTarget);\r\n    });\r\n}\r\n\r\nexport function openFlex(\r\n    resizeTarget: HTMLElement,\r\n    containers: HTMLElement[],\r\n    {\r\n        isPrevSizeOpen = false,\r\n        isResize = false,\r\n        openGrowImportant = 0,\r\n        sizeName,\r\n    }: {\r\n        isPrevSizeOpen?: boolean;\r\n        isResize?: boolean;\r\n        openGrowImportant?: number;\r\n        sizeName?: 'width' | 'height'; // 유니언 타입으로 수정\r\n    }\r\n) {\r\n    return new Promise(resolve => {\r\n        if (!resizeTarget.hasAttribute('data-is_resize_panel')) {\r\n            // resolve(resizeTarget);\r\n            // return;\r\n        } else if (\r\n            resizeTarget.hasAttribute('data-is_resize_panel') &&\r\n            resizeTarget.dataset.is_resize_panel == 'false'\r\n        ) {\r\n            resizeTarget.dataset.is_resize_panel = 'true';\r\n        }\r\n\r\n        let notCloseList = containers.filter(\r\n            e => e.style.flex != '0 1 0%' && e != resizeTarget\r\n        );\r\n        let notCloseAndOpenTargetList = [...notCloseList, resizeTarget];\r\n        //let resizeWeight = this.mathWeight(notCloseAndOpenTargetList, this.#forResizeList.length);\r\n        let openTargetGrow = 1;\r\n        const sizeStyleName = ('client' +\r\n            sizeName!.charAt(0).toUpperCase() +\r\n            sizeName!.substring(1)) as 'clientHeight' | 'clientWidth';\r\n        const parentSize =\r\n            (sizeName &&\r\n                resizeTarget.parentElement &&\r\n                resizeTarget.parentElement[sizeStyleName]) ||\r\n            0;\r\n        if (isPrevSizeOpen && resizeTarget.hasAttribute('data-prev_grow')) {\r\n            openTargetGrow =\r\n                parseFloat(resizeTarget.dataset.prev_grow || '1') || 1;\r\n            //resizeTarget.removeAttribute('data-prev_grow');\r\n        } else if (parentSize && parentSize !== 0) {\r\n            openTargetGrow =\r\n                (parentSize / notCloseList.length / (parentSize - 1)) *\r\n                containers.length;\r\n        } else {\r\n            openTargetGrow = 1;\r\n        }\r\n        if (openGrowImportant) {\r\n            openTargetGrow = openGrowImportant;\r\n        }\r\n        openTargetGrow = openTargetGrow === Infinity ? 1 : openTargetGrow;\r\n        //notCloseList.forEach(e=>{\r\n        notCloseAndOpenTargetList.forEach(e => {\r\n            e.style.transition = 'flex 0.5s';\r\n            e.ontransitionend = event => {\r\n                if (event.propertyName != 'flex-grow') {\r\n                    return;\r\n                }\r\n                notCloseAndOpenTargetList.forEach(\r\n                    e => (e.style.transition = '')\r\n                );\r\n                //e.style.transition = '';\r\n                e.ontransitionend = () => {};\r\n            };\r\n\r\n            if (e == resizeTarget) {\r\n                resizeTarget.dataset.grow = openTargetGrow.toString();\r\n                resizeTarget.style.flex = `${openTargetGrow} 1 0%`;\r\n                return;\r\n            }\r\n\r\n            if (isResize) {\r\n                return;\r\n            }\r\n\r\n            let grow =\r\n                (parentSize / notCloseList.length / (parentSize - 1)) *\r\n                (containers.length - openTargetGrow);\r\n            grow = grow === Infinity ? 1 : grow;\r\n            //let percent = getGrow(e) / totalGrow - openTargetGrow / totalGrow;\r\n            e.dataset.grow = grow.toString();\r\n\r\n            e.style.flex = `${grow} 1 0%`;\r\n        });\r\n\r\n        if (isResize) {\r\n            resize(notCloseAndOpenTargetList, containers.length);\r\n        }\r\n\r\n        resolve(openTargetGrow);\r\n    });\r\n}\r\n","import equal from \"fast-deep-equal\";\r\nimport {\r\n\tReactElement,\r\n\tRefObject,\r\n\tuseCallback,\r\n\tuseEffect,\r\n\tuseRef,\r\n\tuseState,\r\n} from \"react\";\r\nimport { BehaviorSubject, distinctUntilChanged, map, Subject } from \"rxjs\";\r\nimport { DropDocumentOutsideOption } from \"../components/FlexLayoutSplitScreenDragBox\";\r\nimport { getClientXy } from \"../utils/FlexLayoutUtils\";\r\nexport interface DragStateType {\r\n\tisDragging: boolean;\r\n\tisDrop: boolean;\r\n\tnavigationTitle?: string;\r\n\tchildren?: ReactElement;\r\n\tcontainerName: string;\r\n\tx: number;\r\n\ty: number;\r\n\tdropDocumentOutsideOption?: DropDocumentOutsideOption;\r\n\tdropEndCallback?: ({\r\n\t\tx,\r\n\t\ty,\r\n\t\tcontainerName,\r\n\t}: {\r\n\t\tx: number;\r\n\t\ty: number;\r\n\t\tcontainerName: string;\r\n\t}) => void;\r\n\tscreenKey?: string;\r\n\tcustomData?: Record<string, string | number | boolean | undefined>;\r\n}\r\nexport type PositionName =\r\n\t| \"centerBoundary\"\r\n\t| \"leftBoundary\"\r\n\t| \"rightBoundary\"\r\n\t| \"topBoundary\"\r\n\t| \"bottomBoundary\";\r\n\r\nexport interface DragStateResultType extends DragStateType {\r\n\tpositionName: PositionName;\r\n\tisOver: boolean;\r\n}\r\nexport const dragState = new Subject<DragStateType>();\r\nconst filterChildren = (obj: any) => {\r\n\t// 객체 복사 후 children 속성 제거\r\n\tconst { children, ...rest } = obj || {};\r\n\treturn rest;\r\n};\r\n\r\nexport const useDragCapture = (targetRef: RefObject<HTMLElement | null>) => {\r\n\tconst stateRef = useRef<DragStateResultType | null>(null); // 상태를 저장하는 useRef\r\n\tconst forceUpdate = useRef(0); // 강제로 업데이트를 트리거하기 위한 변수\r\n\r\n\tuseEffect(() => {\r\n\t\tconst subscription = dragState\r\n\t\t\t.pipe(\r\n\t\t\t\tmap((value) => {\r\n\t\t\t\t\tif (!targetRef || !targetRef.current) return null;\r\n\r\n\t\t\t\t\tconst { x, y } = value;\r\n\t\t\t\t\tconst rect = targetRef.current.getBoundingClientRect();\r\n\t\t\t\t\tconst {\r\n\t\t\t\t\t\twidth,\r\n\t\t\t\t\t\theight,\r\n\t\t\t\t\t\tx: rectX,\r\n\t\t\t\t\t\ty: rectY,\r\n\t\t\t\t\t\tright,\r\n\t\t\t\t\t\tbottom,\r\n\t\t\t\t\t} = rect;\r\n\r\n\t\t\t\t\tlet isOver = false;\r\n\t\t\t\t\tif (x < rectX || x > right || y < rectY || y > bottom) {\r\n\t\t\t\t\t\tisOver = true;\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tconst leftBoundary = rectX + width * 0.2;\r\n\t\t\t\t\tconst rightBoundary = right - width * 0.2;\r\n\t\t\t\t\tconst topBoundary = rectY + height * 0.2;\r\n\t\t\t\t\tconst bottomBoundary = bottom - height * 0.2;\r\n\r\n\t\t\t\t\tlet position = \"centerBoundary\";\r\n\t\t\t\t\tif (x < leftBoundary) {\r\n\t\t\t\t\t\tposition = \"leftBoundary\";\r\n\t\t\t\t\t} else if (x > rightBoundary) {\r\n\t\t\t\t\t\tposition = \"rightBoundary\";\r\n\t\t\t\t\t} else if (y < topBoundary) {\r\n\t\t\t\t\t\tposition = \"topBoundary\";\r\n\t\t\t\t\t} else if (y > bottomBoundary) {\r\n\t\t\t\t\t\tposition = \"bottomBoundary\";\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\treturn {\r\n\t\t\t\t\t\tpositionName: position as PositionName,\r\n\t\t\t\t\t\tisOver,\r\n\t\t\t\t\t\t...value,\r\n\t\t\t\t\t};\r\n\t\t\t\t}),\r\n\t\t\t\tdistinctUntilChanged((prev, curr) =>\r\n\t\t\t\t\tequal(filterChildren(prev), filterChildren(curr)),\r\n\t\t\t\t),\r\n\t\t\t)\r\n\t\t\t.subscribe({\r\n\t\t\t\tnext: (value) => {\r\n\t\t\t\t\tif (\r\n\t\t\t\t\t\tvalue &&\r\n\t\t\t\t\t\t!equal(\r\n\t\t\t\t\t\t\tfilterChildren(stateRef.current),\r\n\t\t\t\t\t\t\tfilterChildren(value),\r\n\t\t\t\t\t\t)\r\n\t\t\t\t\t) {\r\n\t\t\t\t\t\tstateRef.current = value; // 상태를 업데이트\r\n\t\t\t\t\t\tforceUpdate.current++; // 업데이트 트리거\r\n\t\t\t\t\t}\r\n\t\t\t\t},\r\n\t\t\t\terror: (err) => console.error(err),\r\n\t\t\t});\r\n\r\n\t\treturn () => subscription.unsubscribe();\r\n\t}, [targetRef]);\r\n\r\n\t// 강제 렌더링을 트리거하기 위한 업데이트\r\n\tconst [, rerender] = useState({});\r\n\tuseEffect(() => {\r\n\t\tconst interval = setInterval(() => {\r\n\t\t\trerender({}); // 변경된 ref 상태를 반영\r\n\t\t}, 50); // 50ms 간격으로 렌더링 반영\r\n\t\treturn () => clearInterval(interval);\r\n\t}, []);\r\n\r\n\treturn stateRef.current;\r\n};\r\nexport interface DropTargetComponent {\r\n\tcontainerName: string;\r\n\tcomponent: ReactElement;\r\n\tnavigationTitle?: string;\r\n\tdropDocumentOutsideOption?: DropDocumentOutsideOption;\r\n\tscreenKey: string;\r\n}\r\nexport type DropPositionOrderName = \"before\" | \"center\" | \"after\";\r\n\r\nexport interface DropMovementEventType {\r\n\tstate: \"remove\" | \"append\" | \"change\";\r\n\ttargetParentLayoutName: string;\r\n\ttargetLayoutName: string;\r\n\ttargetContainerName: string;\r\n\ttargetComponent?: ReactElement;\r\n\tnextContainerName?: string;\r\n\tparentOrderName?: DropPositionOrderName;\r\n\torderName?: DropPositionOrderName;\r\n\tx?: number;\r\n\ty?: number;\r\n\tdropEndCallback?: ({\r\n\t\tx,\r\n\t\ty,\r\n\t\tcontainerName,\r\n\t}: {\r\n\t\tx: number;\r\n\t\ty: number;\r\n\t\tcontainerName: string;\r\n\t}) => void;\r\n\tdropTargetComponentEvent?: DropTargetComponentEvent;\r\n}\r\nexport interface DropTargetComponentEvent extends Omit<\r\n\tDropTargetComponent,\r\n\t\"containerName\" | \"component\"\r\n> {\r\n\tdirection: \"row\" | \"column\";\r\n}\r\nexport const dropMovementEventSubject = new Subject<DropMovementEventType>();\r\n\r\nexport const allSplitScreenCount = new BehaviorSubject<number>(0);\r\n\r\nexport const useDragEvents = ({\r\n\tisBlockingActiveInput = false,\r\n}: {\r\n\tisBlockingActiveInput?: boolean;\r\n}) => {\r\n\tconst dragResumeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n\tconst scrollThreshold = 10; // 이동 거리 임계값\r\n\r\n\tconst isScrolling = useRef<boolean>(false);\r\n\tconst isPending = useRef(false);\r\n\tconst isMouseDown = useRef(false);\r\n\tconst isDragging = useRef(false); // 드래그 상태 플래그\r\n\tconst touchStartX = useRef<number>(0);\r\n\tconst touchStartY = useRef<number>(0);\r\n\r\n\tconst handleStart = useCallback(\r\n\t\t({\r\n\t\t\tevent: _event,\r\n\t\t\tdragStartCallback,\r\n\t\t}: {\r\n\t\t\tevent: React.MouseEvent | React.TouchEvent | Event;\r\n\t\t\tdragStartCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t}) => {\r\n\t\t\tconst event = _event instanceof Event ? _event : _event.nativeEvent;\r\n\r\n\t\t\t// 기존 타이머가 있다면 정리\r\n\t\t\tif (dragResumeTimer.current) {\r\n\t\t\t\tclearTimeout(dragResumeTimer.current);\r\n\t\t\t\tdragResumeTimer.current = null;\r\n\t\t\t}\r\n\r\n\t\t\tif (\r\n\t\t\t\t(event.target as HTMLElement).contentEditable === \"true\" ||\r\n\t\t\t\t(isBlockingActiveInput &&\r\n\t\t\t\t\tdocument.activeElement === event.target)\r\n\t\t\t) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tif (event.cancelable) {\r\n\t\t\t\tevent.preventDefault(); // cancelable=false 면 자동 skip\r\n\t\t\t}\r\n\t\t\tisPending.current = true;\r\n\t\t\tisMouseDown.current = true;\r\n\t\t\tif (event instanceof globalThis.TouchEvent) {\r\n\t\t\t\tconst touch = event.touches[0];\r\n\t\t\t\ttouchStartX.current = touch.clientX;\r\n\t\t\t\ttouchStartY.current = touch.clientY;\r\n\t\t\t} else if (event instanceof globalThis.MouseEvent) {\r\n\t\t\t\ttouchStartX.current = event.clientX;\r\n\t\t\t\ttouchStartY.current = event.clientY;\r\n\t\t\t}\r\n\t\t\t//event.preventDefault();\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tif (!isPending.current || isScrolling.current) return; // 스크롤 중이면 드래그 취소\r\n\t\t\t\tisPending.current = false;\r\n\t\t\t\tisDragging.current = true;\r\n\r\n\t\t\t\tconst xy = getClientXy(event);\r\n\t\t\t\tif (!xy) return;\r\n\r\n\t\t\t\tconst { clientX, clientY } = xy;\r\n\r\n\t\t\t\tdragStartCallback({ x: clientX, y: clientY });\r\n\t\t\t}, 300);\r\n\t\t},\r\n\t\t[isBlockingActiveInput],\r\n\t);\r\n\r\n\tconst handleMove = useCallback(\r\n\t\t({\r\n\t\t\tevent: _event,\r\n\t\t\tnotDragCallback,\r\n\t\t\tdragStartCallback,\r\n\t\t\tmoveingCallback,\r\n\t\t}: {\r\n\t\t\tevent: React.MouseEvent | React.TouchEvent | Event;\r\n\t\t\tnotDragCallback?: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t\tdragStartCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t\tmoveingCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t}) => {\r\n\t\t\tif (!isMouseDown.current) return;\r\n\t\t\tconst event = _event instanceof Event ? _event : _event.nativeEvent;\r\n\r\n\t\t\tconst xy = getClientXy(event);\r\n\t\t\tif (!xy) return;\r\n\t\t\tconst { clientX, clientY } = xy;\r\n\t\t\tconst deltaX = Math.abs(clientX - touchStartX.current);\r\n\t\t\tconst deltaY = Math.abs(clientY - touchStartY.current);\r\n\r\n\t\t\tif (\r\n\t\t\t\tisPending.current &&\r\n\t\t\t\t(deltaX > scrollThreshold || deltaY > scrollThreshold)\r\n\t\t\t) {\r\n\t\t\t\tisScrolling.current = true; // 스크롤 중으로 설정\r\n\t\t\t\tisPending.current = false; // 드래그 취소\r\n\t\t\t\tisDragging.current = false;\r\n\r\n\t\t\t\tif (notDragCallback)\r\n\t\t\t\t\tnotDragCallback({ x: clientX, y: clientY });\r\n\t\t\t\t//if (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\r\n\t\t\t\tif (dragResumeTimer.current) {\r\n\t\t\t\t\tclearTimeout(dragResumeTimer.current);\r\n\t\t\t\t\tdragResumeTimer.current = null;\r\n\t\t\t\t}\r\n\t\t\t\tdragResumeTimer.current = setTimeout(() => {\r\n\t\t\t\t\tif (!isMouseDown.current) return;\r\n\t\t\t\t\tif (dragStartCallback)\r\n\t\t\t\t\t\tdragStartCallback({ x: clientX, y: clientY });\r\n\t\t\t\t\tisPending.current = true;\r\n\t\t\t\t\tisScrolling.current = false;\r\n\t\t\t\t\thandleStart({ event: _event, dragStartCallback });\r\n\t\t\t\t}, 400);\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\r\n\t\t\tif (!isDragging.current || isPending.current) return; // 드래그 중이 아닐 경우 무시\r\n\r\n\t\t\tmoveingCallback({ x: clientX, y: clientY });\r\n\t\t},\r\n\t\t[isBlockingActiveInput],\r\n\t);\r\n\tconst handleEnd = useCallback(\r\n\t\t({\r\n\t\t\tevent: _event,\r\n\t\t\tdragEndCallback,\r\n\t\t}: {\r\n\t\t\tevent: React.MouseEvent | React.TouchEvent | Event;\r\n\t\t\tdragEndCallback: ({ x, y }: { x: number; y: number }) => void;\r\n\t\t}) => {\r\n\t\t\tisScrolling.current = false;\r\n\t\t\tisMouseDown.current = false;\r\n\t\t\tif (isPending.current) {\r\n\t\t\t\tisPending.current = false;\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tconst event = _event instanceof Event ? _event : _event.nativeEvent;\r\n\r\n\t\t\tif (!isDragging.current) return; // 드래그 중이 아닐 경우 무시\r\n\r\n\t\t\tisDragging.current = false; // 드래그 종료\r\n\r\n\t\t\tconst xy = getClientXy(event);\r\n\t\t\tif (!xy) return;\r\n\r\n\t\t\tconst { clientX, clientY } = xy;\r\n\r\n\t\t\tdragEndCallback({ x: clientX, y: clientY });\r\n\t\t\t// const href = hrefUrlRef.current;\r\n\r\n\t\t\t// if (clonedNodeRef.current) clonedNodeRef.current.remove();\r\n\t\t\t// //console.log(clientX, clientY);\r\n\t\t\t// if (\r\n\t\t\t//     dropDocumentOutsideOption &&\r\n\t\t\t//     isDocumentOut({ x: clientX, y: clientY })\r\n\t\t\t// ) {\r\n\t\t\t//     if (\r\n\t\t\t//         dropDocumentOutsideOption.isNewTap ||\r\n\t\t\t//         (!dropDocumentOutsideOption.widthRatio &&\r\n\t\t\t//             !dropDocumentOutsideOption.heightRatio)\r\n\t\t\t//     ) {\r\n\t\t\t//         window.open(href, '_blank');\r\n\t\t\t//     } else {\r\n\t\t\t//         const width =\r\n\t\t\t//             window.innerWidth *\r\n\t\t\t//             (dropDocumentOutsideOption.widthRatio || 1);\r\n\t\t\t//         const height =\r\n\t\t\t//             window.innerHeight *\r\n\t\t\t//             (dropDocumentOutsideOption.heightRatio || 1);\r\n\t\t\t//         window.open(\r\n\t\t\t//             href,\r\n\t\t\t//             '_blank',\r\n\t\t\t//             `width=${width},height=${height},left=${window.screenLeft - clientX * -1 - width},top=${window.screenTop + clientY}`\r\n\t\t\t//         );\r\n\t\t\t//     }\r\n\t\t\t// }\r\n\r\n\t\t\t// dragState.next({\r\n\t\t\t//     isDragging: false,\r\n\t\t\t//     isDrop: true,\r\n\t\t\t//     navigationTitle,\r\n\t\t\t//     children: targetComponent,\r\n\t\t\t//     x: clientX,\r\n\t\t\t//     y: clientY,\r\n\t\t\t//     containerName,\r\n\t\t\t//     dropDocumentOutsideOption,\r\n\t\t\t//     dropEndCallback,\r\n\t\t\t//     screenKey,\r\n\t\t\t//     customData,\r\n\t\t\t// });\r\n\t\t\t//if (dropEndCallback) dropEndCallback({ x: clientX, y: clientY });\r\n\t\t},\r\n\t\t[isBlockingActiveInput],\r\n\t);\r\n\r\n\treturn {\r\n\t\thandleStart,\r\n\t\thandleMove,\r\n\t\thandleEnd,\r\n\t};\r\n};\r\n\r\nexport type FolderEventType = {\r\n\ttype: \"new\" | \"sort\" | \"title\" | \"delete\" | \"insert\" | \"update\" | \"next\";\r\n\tisFolder: boolean;\r\n\ttitle: string;\r\n\tsort?: number;\r\n\tparentId?: string;\r\n\tid?: string;\r\n\tnewData?: any;\r\n};\r\n\r\nexport const folderEventSubject = new Subject<FolderEventType>();\r\n\r\nexport const setFolderEvent = (newValue: FolderEventType) => {\r\n\tfolderEventSubject.next(newValue);\r\n};\r\n\r\nexport const useFolderEvent = () => {\r\n\tconst [folderEvent, setFolderEvent] = useState<FolderEventType | null>(\r\n\t\tnull,\r\n\t);\r\n\tuseEffect(() => {\r\n\t\tconst subscription = folderEventSubject.subscribe((e) => {\r\n\t\t\tif (!e) return;\r\n\t\t\tsetFolderEvent(e);\r\n\t\t});\r\n\r\n\t\treturn () => {\r\n\t\t\tif (subscription) {\r\n\t\t\t\tsubscription.unsubscribe();\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\r\n\treturn { folderEvent };\r\n};\r\n","import {\r\n    MutableRefObject,\r\n    RefObject,\r\n    useCallback,\r\n    useEffect,\r\n    useRef,\r\n    useState,\r\n} from 'react';\r\n\r\nexport type OnReachTerminalType = {\r\n    isFirst: boolean;\r\n    isLast: boolean;\r\n    observer: IntersectionObserver;\r\n};\r\ninterface UseListPagingForInfinityProps {\r\n    onReachTerminal?: (onReachTerminalData: OnReachTerminalType) => void;\r\n}\r\nexport const useListPagingForSentinel = <E extends HTMLElement>({\r\n    //initPageNumber,\r\n    //initPageSize,\r\n    onReachTerminal,\r\n}: UseListPagingForInfinityProps): {\r\n    firstChildRef: (node: E | null) => void;\r\n    lastChildRef: (node: E | null) => void;\r\n    //pageNumber: number;\r\n    //pageSize: number;\r\n    //setPageNumber: React.Dispatch<React.SetStateAction<number>>;\r\n    //setPageSize: React.Dispatch<React.SetStateAction<number>>;\r\n} => {\r\n    const [firstChildNode, setFirstChildNode] = useState<E | null>(null);\r\n    const [lastChildNode, setLastChildNode] = useState<E | null>(null);\r\n    const observerRef = useRef<IntersectionObserver | null>(null);\r\n\r\n    const firstChildRef = useCallback((node: E | null) => {\r\n        setFirstChildNode(node);\r\n    }, []);\r\n\r\n    const lastChildRef = useCallback((node: E | null) => {\r\n        setLastChildNode(node);\r\n    }, []);\r\n    // 페이지 번호가 변경될 때마다 데이터 로드를 위한 콜백 호출\r\n\r\n    useEffect(() => {\r\n        if (firstChildNode && observerRef.current)\r\n            observerRef.current.unobserve(firstChildNode);\r\n        if (lastChildNode && observerRef.current)\r\n            observerRef.current.unobserve(lastChildNode);\r\n        const handleIntersect: IntersectionObserverCallback = (\r\n            entries,\r\n            observer\r\n        ) => {\r\n            entries.forEach(entry => {\r\n                if (entry.isIntersecting) {\r\n                    if (entry.target === firstChildNode) {\r\n                        if (onReachTerminal)\r\n                            onReachTerminal({\r\n                                isFirst: true,\r\n                                isLast: false,\r\n                                observer,\r\n                            });\r\n                    }\r\n\r\n                    if (entry.target === lastChildNode) {\r\n                        if (onReachTerminal)\r\n                            onReachTerminal({\r\n                                isFirst: false,\r\n                                isLast: true,\r\n                                observer,\r\n                            });\r\n                    }\r\n                }\r\n            });\r\n        };\r\n\r\n        const observer = new IntersectionObserver(handleIntersect, {\r\n            threshold: 0.1,\r\n        });\r\n\r\n        observerRef.current = observer;\r\n\r\n        if (firstChildNode) observer.observe(firstChildNode);\r\n        if (lastChildNode) observer.observe(lastChildNode);\r\n\r\n        return () => {\r\n            if (observerRef.current) {\r\n                // if (firstChildNode)\r\n                //     observerRef.current.unobserve(firstChildNode);\r\n                // if (lastChildNode) observerRef.current.unobserve(lastChildNode);\r\n                observerRef.current.disconnect();\r\n            }\r\n        };\r\n    }, [firstChildNode, lastChildNode]);\r\n\r\n    return {\r\n        firstChildRef,\r\n        lastChildRef,\r\n    };\r\n};\r\n\r\nexport const usePaginationViewNumber = ({\r\n    initPageNumber,\r\n}: {\r\n    initPageNumber: number;\r\n}) => {\r\n    const [showCurrentPageNumber, setShowCurrentPageNumber] =\r\n        useState<number>(initPageNumber);\r\n\r\n    const observerRef = useRef<IntersectionObserver | null>(null);\r\n    const showCurrentPageObserveTarget = useCallback(\r\n        (node: HTMLElement | null) => {\r\n            if (!node) return;\r\n\r\n            // 아직 observer가 없으면 새로 생성\r\n            if (!observerRef.current) {\r\n                observerRef.current = new IntersectionObserver(\r\n                    entries => {\r\n                        entries.forEach(entry => {\r\n                            if (entry.isIntersecting) {\r\n                                const pageIndexAttr =\r\n                                    entry.target.getAttribute(\r\n                                        'data-page-index'\r\n                                    );\r\n                                if (!pageIndexAttr) return;\r\n                                // if (!entry.target.hasAttribute('data-is-first'))\r\n                                //     return;\r\n                                const pageIndex = parseInt(pageIndexAttr, 10);\r\n                                setShowCurrentPageNumber(pageIndex);\r\n                            }\r\n                        });\r\n                    },\r\n                    {\r\n                        threshold: 0.1, // 예: 10% 이상 보여야 intersect로 판단\r\n                    }\r\n                );\r\n            }\r\n\r\n            // 해당 노드를 관찰\r\n            observerRef.current.observe(node);\r\n        },\r\n        []\r\n    );\r\n    useEffect(() => {\r\n        const currentObserver = observerRef.current;\r\n        return () => {\r\n            if (currentObserver) {\r\n                currentObserver.disconnect();\r\n            }\r\n        };\r\n    }, []);\r\n    return {\r\n        showCurrentPageNumber,\r\n        showCurrentPageObserveTarget,\r\n    };\r\n};\r\n\r\nexport const usePagingHandler = <T>({\r\n    lastCallPageNumber,\r\n    dataListRef,\r\n}: {\r\n    lastCallPageNumber: number;\r\n    dataListRef: MutableRefObject<Array<T[] | null>>;\r\n}) => {\r\n    const jumpingPageNumberRef = useRef<number | null>(lastCallPageNumber);\r\n    useEffect(() => {\r\n        if (jumpingPageNumberRef.current) {\r\n            setTimeout(() => {\r\n                jumpingPageNumberRef.current = null;\r\n            }, 1000);\r\n        }\r\n    }, [jumpingPageNumberRef]);\r\n    const paginationScrollIntoViewTarget = useRef<\r\n        Record<number, HTMLDivElement | null>\r\n    >({});\r\n    const pageNumberRef = useRef<number>(lastCallPageNumber);\r\n\r\n    const setPaginationRef = useCallback(\r\n        (i: number) => (node: HTMLDivElement | null) => {\r\n            if (!node) return;\r\n\r\n            paginationScrollIntoViewTarget.current[i] = node;\r\n\r\n            // jumpingPageNumberRef에 값이 있고, 그 값이 현재 i와 같으면 스크롤\r\n            if (\r\n                jumpingPageNumberRef.current !== null &&\r\n                i === jumpingPageNumberRef.current\r\n            ) {\r\n                node.scrollIntoView({\r\n                    behavior: 'instant', // 필요한 경우 'smooth' 등으로 수정 가능\r\n                    block: 'start',\r\n                });\r\n                jumpingPageNumberRef.current = null;\r\n            }\r\n        },\r\n        []\r\n    );\r\n\r\n    //스크롤이 “첫 아이템” 혹은 “마지막 아이템”에 닿을 때 호출\r\n    const handleReachTerminal = (\r\n        { isFirst, isLast, observer }: OnReachTerminalType,\r\n        dataCallFetch: (callPageNumber: number) => void\r\n    ) => {\r\n        // 이미 다른 페이지로 점프 중이면, 중복 호출 방지\r\n        if (dataListRef.current.length === 0) return;\r\n        if (jumpingPageNumberRef.current != null) return;\r\n        if (!isFirst && !isLast) return;\r\n\r\n        const callPageNumber = isFirst\r\n            ? Math.max(pageNumberRef.current - 1, 0)\r\n            : pageNumberRef.current + 1;\r\n\r\n        if (\r\n            dataListRef.current[callPageNumber] != null &&\r\n            (dataListRef.current[callPageNumber]?.length || 0) > 0\r\n        )\r\n            return;\r\n        jumpingPageNumberRef.current = callPageNumber;\r\n        setTimeout(() => {\r\n            jumpingPageNumberRef.current = null;\r\n        }, 1000);\r\n        dataCallFetch(callPageNumber);\r\n    };\r\n\r\n    //페이지네이션에서 페이지 번호를 직접 클릭했을 시\r\n    const handleClickPageChange = (\r\n        page: number,\r\n        dataCallFetch: (callPageNumber: number) => void\r\n    ) => {\r\n        // PaginationLayer는 1-based, 내부 로직은 0-based\r\n        // 이미 캐싱된 페이지가 있다면, 스크롤만 이동\r\n        const pageData = dataListRef.current[page];\r\n\r\n        // 이미 캐싱된 페이지가 있다면, 스크롤만 이동\r\n        if (\r\n            pageData != null &&\r\n            Array.isArray(pageData) &&\r\n            pageData.length > 0\r\n        ) {\r\n            paginationScrollIntoViewTarget.current[page]?.scrollIntoView({\r\n                behavior: 'smooth',\r\n                block: 'start',\r\n            });\r\n            return;\r\n        }\r\n        jumpingPageNumberRef.current = page;\r\n        setTimeout(() => {\r\n            jumpingPageNumberRef.current = null;\r\n        }, 1000);\r\n        dataCallFetch(page);\r\n    };\r\n    return {\r\n        jumpingPageNumberRef,\r\n        paginationScrollIntoViewTarget,\r\n        pageNumberRef,\r\n        setPaginationRef,\r\n        handleReachTerminal,\r\n        handleClickPageChange,\r\n    };\r\n};\r\n"]}