@byeolnaerim/flex-layout 0.0.5 → 0.0.7

package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js

@@ -0,0 +1,116 @@
+import { useState, useRef, useEffect } from 'react';
+import { useDragCapture, dropMovementEventSubject } from './useDrag';
+
+function useFlexLayoutSplitScreen({
+  isSplitInitial = false,
+  parentDirection,
+  directionInitial = "row",
+  selfContainerName,
+  parentLayoutName,
+  layoutName
+}) {
+  const [direction, setDirection] = useState(
+    directionInitial
+  );
+  const [isSplit, setIsSplit] = useState(isSplitInitial);
+  const [boundaryContainerSize, setBoundaryContainerSize] = useState(null);
+  const [centerDropTargetComponent, setCenterDropTargetComponent] = useState([]);
+  const [afterDropTargetComponent, setAfterDropTargetComponent] = useState([]);
+  const [beforeDropTargetComponent, setBeforeDropTargetComponent] = useState([]);
+  const layoutRef = useRef(null);
+  const dragState = useDragCapture(layoutRef);
+  useEffect(() => {
+    if (!dragState) {
+      setBoundaryContainerSize(null);
+      return;
+    }
+    const {
+      isDrop,
+      isDragging,
+      positionName,
+      containerName,
+      children: dropComponent,
+      isOver,
+      navigationTitle,
+      dropEndCallback,
+      x,
+      y,
+      screenKey
+    } = dragState;
+    const orderName = positionName === "leftBoundary" || positionName === "topBoundary" ? "before" : positionName === "rightBoundary" || positionName === "bottomBoundary" ? "after" : "center";
+    if ((isOver || isDrop) && boundaryContainerSize) {
+      setBoundaryContainerSize(null);
+    }
+    if (selfContainerName.startsWith(containerName)) {
+      return;
+    }
+    if (isDrop && screenKey) {
+      const dropDirection = positionName === "leftBoundary" || positionName === "rightBoundary" ? "row" : "column";
+      if (!isSplit && !isOver) {
+        if (positionName !== "centerBoundary" && dropDirection !== parentDirection) {
+          setIsSplit(true);
+          setDirection(dropDirection);
+        }
+        dropMovementEventSubject.next({
+          state: "append",
+          targetContainerName: containerName,
+          targetParentLayoutName: parentLayoutName,
+          targetLayoutName: layoutName,
+          targetComponent: dropComponent,
+          orderName,
+          x,
+          y,
+          dropEndCallback,
+          dropTargetComponentEvent: {
+            navigationTitle,
+            dropDocumentOutsideOption: dragState?.dropDocumentOutsideOption,
+            direction: dropDirection,
+            screenKey
+          }
+        });
+      }
+    }
+    if (isDragging && !isSplit && !isOver) {
+      const newSize = {
+        left: positionName === "rightBoundary" ? "50%" : "0",
+        top: positionName === "bottomBoundary" ? "50%" : "0",
+        width: positionName === "leftBoundary" || positionName === "rightBoundary" ? "50%" : "100%",
+        height: positionName === "topBoundary" || positionName === "bottomBoundary" ? "50%" : "100%"
+      };
+      if (JSON.stringify(boundaryContainerSize) !== JSON.stringify(newSize)) {
+        setBoundaryContainerSize(newSize);
+      }
+    }
+  }, [
+    dragState,
+    isSplit,
+    boundaryContainerSize,
+    parentLayoutName,
+    layoutName,
+    selfContainerName,
+    direction
+  ]);
+  return {
+    direction,
+    setDirection,
+    isSplit,
+    setIsSplit,
+    boundaryContainerSize,
+    //setBoundaryContainerSize,
+    centerDropTargetComponent,
+    afterDropTargetComponent,
+    beforeDropTargetComponent,
+    setAfterDropTargetComponent,
+    setBeforeDropTargetComponent,
+    setCenterDropTargetComponent,
+    //dropTargetComponent,
+    //setDropTargetComponent,
+    //setDropPosition,
+    isOver: dragState?.isOver,
+    layoutRef
+  };
+}
+
+export { useFlexLayoutSplitScreen };
+//# sourceMappingURL=useFlexLayoutSplitScreen.js.map
+//# sourceMappingURL=useFlexLayoutSplitScreen.js.map

package/dist/flex-layout/hooks/useFlexLayoutSplitScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useFlexLayoutSplitScreen.ts"],"names":[],"mappings":"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","file":"useFlexLayoutSplitScreen.js","sourcesContent":["// useFlexLayoutSplitScreen.js\r\nimport { useEffect, useRef, useState } from \"react\";\r\nimport {\r\n\tdropMovementEventSubject,\r\n\tDropTargetComponent,\r\n\tuseDragCapture,\r\n} from \"./useDrag\";\r\n\r\nexport function useFlexLayoutSplitScreen({\r\n\tisSplitInitial = false,\r\n\tparentDirection,\r\n\tdirectionInitial = \"row\",\r\n\tselfContainerName,\r\n\tparentLayoutName,\r\n\tlayoutName,\r\n}: {\r\n\tisSplitInitial: boolean;\r\n\tparentDirection?: \"row\" | \"column\" | null;\r\n\tdirectionInitial: \"row\" | \"column\";\r\n\tselfContainerName: string;\r\n\tparentLayoutName: string;\r\n\tlayoutName: string;\r\n}) {\r\n\tconst [direction, setDirection] = useState<\"row\" | \"column\">(\r\n\t\tdirectionInitial,\r\n\t);\r\n\r\n\tconst [isSplit, setIsSplit] = useState<boolean>(isSplitInitial);\r\n\tconst [boundaryContainerSize, setBoundaryContainerSize] = useState<{\r\n\t\tleft: string;\r\n\t\ttop: string;\r\n\t\twidth: string;\r\n\t\theight: string;\r\n\t} | null>(null);\r\n\tconst [centerDropTargetComponent, setCenterDropTargetComponent] = useState<\r\n\t\tDropTargetComponent[]\r\n\t>([]);\r\n\tconst [afterDropTargetComponent, setAfterDropTargetComponent] = useState<\r\n\t\tDropTargetComponent[]\r\n\t>([]);\r\n\tconst [beforeDropTargetComponent, setBeforeDropTargetComponent] = useState<\r\n\t\tDropTargetComponent[]\r\n\t>([]);\r\n\tconst layoutRef = useRef<HTMLDivElement>(null);\r\n\r\n\tconst dragState = useDragCapture(layoutRef);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!dragState) {\r\n\t\t\tsetBoundaryContainerSize(null);\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconst {\r\n\t\t\tisDrop,\r\n\t\t\tisDragging,\r\n\t\t\tpositionName,\r\n\t\t\tcontainerName,\r\n\t\t\tchildren: dropComponent,\r\n\t\t\tisOver,\r\n\t\t\tnavigationTitle,\r\n\t\t\tdropEndCallback,\r\n\t\t\tx,\r\n\t\t\ty,\r\n\t\t\tscreenKey,\r\n\t\t} = dragState;\r\n\t\tconst orderName =\r\n\t\t\tpositionName === \"leftBoundary\" || positionName === \"topBoundary\"\r\n\t\t\t\t? \"before\"\r\n\t\t\t\t: positionName === \"rightBoundary\" ||\r\n\t\t\t\t\t  positionName === \"bottomBoundary\"\r\n\t\t\t\t\t? \"after\"\r\n\t\t\t\t\t: \"center\";\r\n\t\t// if (selfContainerName === containerName) {\r\n\t\t//     setBoundaryContainerSize(null);\r\n\t\t//     return;\r\n\t\t// }\r\n\r\n\t\tif ((isOver || isDrop) && boundaryContainerSize) {\r\n\t\t\tsetBoundaryContainerSize(null);\r\n\t\t}\r\n\r\n\t\tif (selfContainerName.startsWith(containerName)) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif (isDrop && screenKey) {\r\n\t\t\t// if (isDuplication) {\r\n\t\t\t//     setDuplicationInfo({ isDuplication, containerName });\r\n\t\t\t// }\r\n\t\t\t// console.log('isDuplication:::', isDuplication);\r\n\t\t\tconst dropDirection =\r\n\t\t\t\tpositionName === \"leftBoundary\" ||\r\n\t\t\t\tpositionName === \"rightBoundary\"\r\n\t\t\t\t\t? \"row\"\r\n\t\t\t\t\t: \"column\";\r\n\t\t\t// if (!parentDirection) {\r\n\t\t\t//     console.log(isSplit, positionName !== 'centerBoundary', isOver);\r\n\t\t\t// }\r\n\t\t\tif (\r\n\t\t\t\t!isSplit &&\r\n\t\t\t\t!isOver\r\n\t\t\t\t//!isDuplication\r\n\t\t\t) {\r\n\t\t\t\t//setDirection(dropDirection);\r\n\t\t\t\t//if (positionName !== 'centerBoundary') {\r\n\t\t\t\tif (\r\n\t\t\t\t\tpositionName !== \"centerBoundary\" &&\r\n\t\t\t\t\tdropDirection !== parentDirection\r\n\t\t\t\t) {\r\n\t\t\t\t\tsetIsSplit(true);\r\n\t\t\t\t\tsetDirection(dropDirection);\r\n\t\t\t\t}\r\n\t\t\t\tdropMovementEventSubject.next({\r\n\t\t\t\t\tstate: \"append\",\r\n\t\t\t\t\ttargetContainerName: containerName,\r\n\t\t\t\t\ttargetParentLayoutName: parentLayoutName,\r\n\t\t\t\t\ttargetLayoutName: layoutName,\r\n\t\t\t\t\ttargetComponent: dropComponent,\r\n\t\t\t\t\torderName,\r\n\t\t\t\t\tx,\r\n\t\t\t\t\ty,\r\n\t\t\t\t\tdropEndCallback,\r\n\t\t\t\t\tdropTargetComponentEvent: {\r\n\t\t\t\t\t\tnavigationTitle,\r\n\t\t\t\t\t\tdropDocumentOutsideOption:\r\n\t\t\t\t\t\t\tdragState?.dropDocumentOutsideOption,\r\n\t\t\t\t\t\tdirection: dropDirection,\r\n\t\t\t\t\t\tscreenKey,\r\n\t\t\t\t\t},\r\n\t\t\t\t});\r\n\t\t\t\t// } else {\r\n\t\t\t\t//     dropMovementEventSubject.next({\r\n\t\t\t\t//         state: 'append',\r\n\t\t\t\t//         targetContainerName: containerName,\r\n\t\t\t\t//         targetParentLayoutName: parentLayoutName,\r\n\t\t\t\t//         targetLayoutName: layoutName,\r\n\t\t\t\t//         targetComponent: dropComponent,\r\n\t\t\t\t//         orderName: orderName,\r\n\t\t\t\t//         x,\r\n\t\t\t\t//         y,\r\n\t\t\t\t//         dropEndCallback,\r\n\t\t\t\t//         dropTargetComponentEvent: {\r\n\t\t\t\t//             navigationTitle,\r\n\t\t\t\t//             dropDocumentOutsideOption:\r\n\t\t\t\t//                 dragState?.dropDocumentOutsideOption,\r\n\t\t\t\t//             direction: direction,\r\n\t\t\t\t//         },\r\n\t\t\t\t//     });\r\n\t\t\t\t// }\r\n\t\t\t}\r\n\t\t\t// else if (\r\n\t\t\t//     isSplit &&\r\n\t\t\t//     positionName !== 'centerBoundary' &&\r\n\t\t\t//     !isOver\r\n\t\t\t// ) {\r\n\t\t\t//     if (!isFirstSplitUpdatedRef.current) {\r\n\t\t\t//         isFirstSplitUpdatedRef.current = true;\r\n\t\t\t//         return;\r\n\t\t\t//     }\r\n\t\t\t//     updateDropTargetComponents(\r\n\t\t\t//         positionName,\r\n\t\t\t//         containerName,\r\n\t\t\t//         dropComponent\r\n\t\t\t//     );\r\n\t\t\t// }\r\n\t\t}\r\n\t\tif (isDragging && !isSplit && !isOver) {\r\n\t\t\tconst newSize = {\r\n\t\t\t\tleft: positionName === \"rightBoundary\" ? \"50%\" : \"0\",\r\n\t\t\t\ttop: positionName === \"bottomBoundary\" ? \"50%\" : \"0\",\r\n\t\t\t\twidth:\r\n\t\t\t\t\tpositionName === \"leftBoundary\" ||\r\n\t\t\t\t\tpositionName === \"rightBoundary\"\r\n\t\t\t\t\t\t? \"50%\"\r\n\t\t\t\t\t\t: \"100%\",\r\n\t\t\t\theight:\r\n\t\t\t\t\tpositionName === \"topBoundary\" ||\r\n\t\t\t\t\tpositionName === \"bottomBoundary\"\r\n\t\t\t\t\t\t? \"50%\"\r\n\t\t\t\t\t\t: \"100%\",\r\n\t\t\t};\r\n\t\t\t// 이전 상태와 비교\r\n\t\t\tif (\r\n\t\t\t\tJSON.stringify(boundaryContainerSize) !==\r\n\t\t\t\tJSON.stringify(newSize)\r\n\t\t\t) {\r\n\t\t\t\tsetBoundaryContainerSize(newSize);\r\n\t\t\t}\r\n\t\t}\r\n\t}, [\r\n\t\tdragState,\r\n\t\tisSplit,\r\n\t\tboundaryContainerSize,\r\n\t\tparentLayoutName,\r\n\t\tlayoutName,\r\n\t\tselfContainerName,\r\n\t\tdirection,\r\n\t]);\r\n\treturn {\r\n\t\tdirection,\r\n\t\tsetDirection,\r\n\t\tisSplit,\r\n\t\tsetIsSplit,\r\n\t\tboundaryContainerSize,\r\n\t\t//setBoundaryContainerSize,\r\n\t\tcenterDropTargetComponent,\r\n\t\tafterDropTargetComponent,\r\n\t\tbeforeDropTargetComponent,\r\n\t\tsetAfterDropTargetComponent,\r\n\t\tsetBeforeDropTargetComponent,\r\n\t\tsetCenterDropTargetComponent,\r\n\t\t//dropTargetComponent,\r\n\t\t//setDropTargetComponent,\r\n\t\t//setDropPosition,\r\n\t\tisOver: dragState?.isOver,\r\n\t\tlayoutRef,\r\n\t};\r\n}\r\n"]}

package/dist/flex-layout/hooks/useListPaging.cjs

@@ -0,0 +1,179 @@
+'use strict';
+
+var react = require('react');
+
+const useListPagingForSentinel = ({
+  //initPageNumber,
+  //initPageSize,
+  onReachTerminal
+}) => {
+  const [firstChildNode, setFirstChildNode] = react.useState(null);
+  const [lastChildNode, setLastChildNode] = react.useState(null);
+  const observerRef = react.useRef(null);
+  const firstChildRef = react.useCallback((node) => {
+    setFirstChildNode(node);
+  }, []);
+  const lastChildRef = react.useCallback((node) => {
+    setLastChildNode(node);
+  }, []);
+  react.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
+  };
+};
+const usePaginationViewNumber = ({
+  initPageNumber
+}) => {
+  const [showCurrentPageNumber, setShowCurrentPageNumber] = react.useState(initPageNumber);
+  const observerRef = react.useRef(null);
+  const showCurrentPageObserveTarget = react.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);
+    },
+    []
+  );
+  react.useEffect(() => {
+    const currentObserver = observerRef.current;
+    return () => {
+      if (currentObserver) {
+        currentObserver.disconnect();
+      }
+    };
+  }, []);
+  return {
+    showCurrentPageNumber,
+    showCurrentPageObserveTarget
+  };
+};
+const usePagingHandler = ({
+  lastCallPageNumber,
+  dataListRef
+}) => {
+  const jumpingPageNumberRef = react.useRef(lastCallPageNumber);
+  react.useEffect(() => {
+    if (jumpingPageNumberRef.current) {
+      setTimeout(() => {
+        jumpingPageNumberRef.current = null;
+      }, 1e3);
+    }
+  }, [jumpingPageNumberRef]);
+  const paginationScrollIntoViewTarget = react.useRef({});
+  const pageNumberRef = react.useRef(lastCallPageNumber);
+  const setPaginationRef = react.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
+  };
+};
+
+exports.useListPagingForSentinel = useListPagingForSentinel;
+exports.usePaginationViewNumber = usePaginationViewNumber;
+exports.usePagingHandler = usePagingHandler;
+//# sourceMappingURL=useListPaging.cjs.map
+//# sourceMappingURL=useListPaging.cjs.map

package/dist/flex-layout/hooks/useListPaging.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useListPaging.ts"],"names":["useState","useRef","useCallback","useEffect","observer"],"mappings":"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","file":"useListPaging.cjs","sourcesContent":["import {\r\n\tMutableRefObject,\r\n\tuseCallback,\r\n\tuseEffect,\r\n\tuseRef,\r\n\tuseState,\r\n} from \"react\";\r\n\r\nexport type OnReachTerminalType = {\r\n\tisFirst: boolean;\r\n\tisLast: boolean;\r\n\tobserver: IntersectionObserver;\r\n};\r\ninterface UseListPagingForInfinityProps {\r\n\tonReachTerminal?: (onReachTerminalData: OnReachTerminalType) => void;\r\n}\r\nexport const useListPagingForSentinel = <E extends HTMLElement>({\r\n\t//initPageNumber,\r\n\t//initPageSize,\r\n\tonReachTerminal,\r\n}: UseListPagingForInfinityProps): {\r\n\tfirstChildRef: (node: E | null) => void;\r\n\tlastChildRef: (node: E | null) => void;\r\n\t//pageNumber: number;\r\n\t//pageSize: number;\r\n\t//setPageNumber: Dispatch<SetStateAction<number>>;\r\n\t//setPageSize: Dispatch<SetStateAction<number>>;\r\n} => {\r\n\tconst [firstChildNode, setFirstChildNode] = useState<E | null>(null);\r\n\tconst [lastChildNode, setLastChildNode] = useState<E | null>(null);\r\n\tconst observerRef = useRef<IntersectionObserver | null>(null);\r\n\r\n\tconst firstChildRef = useCallback((node: E | null) => {\r\n\t\tsetFirstChildNode(node);\r\n\t}, []);\r\n\r\n\tconst lastChildRef = useCallback((node: E | null) => {\r\n\t\tsetLastChildNode(node);\r\n\t}, []);\r\n\t// 페이지 번호가 변경될 때마다 데이터 로드를 위한 콜백 호출\r\n\r\n\tuseEffect(() => {\r\n\t\tif (firstChildNode && observerRef.current)\r\n\t\t\tobserverRef.current.unobserve(firstChildNode);\r\n\t\tif (lastChildNode && observerRef.current)\r\n\t\t\tobserverRef.current.unobserve(lastChildNode);\r\n\t\tconst handleIntersect: IntersectionObserverCallback = (\r\n\t\t\tentries,\r\n\t\t\tobserver,\r\n\t\t) => {\r\n\t\t\tentries.forEach((entry) => {\r\n\t\t\t\tif (entry.isIntersecting) {\r\n\t\t\t\t\tif (entry.target === firstChildNode) {\r\n\t\t\t\t\t\tif (onReachTerminal)\r\n\t\t\t\t\t\t\tonReachTerminal({\r\n\t\t\t\t\t\t\t\tisFirst: true,\r\n\t\t\t\t\t\t\t\tisLast: false,\r\n\t\t\t\t\t\t\t\tobserver,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif (entry.target === lastChildNode) {\r\n\t\t\t\t\t\tif (onReachTerminal)\r\n\t\t\t\t\t\t\tonReachTerminal({\r\n\t\t\t\t\t\t\t\tisFirst: false,\r\n\t\t\t\t\t\t\t\tisLast: true,\r\n\t\t\t\t\t\t\t\tobserver,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t};\r\n\r\n\t\tconst observer = new IntersectionObserver(handleIntersect, {\r\n\t\t\tthreshold: 0.1,\r\n\t\t});\r\n\r\n\t\tobserverRef.current = observer;\r\n\r\n\t\tif (firstChildNode) observer.observe(firstChildNode);\r\n\t\tif (lastChildNode) observer.observe(lastChildNode);\r\n\r\n\t\treturn () => {\r\n\t\t\tif (observerRef.current) {\r\n\t\t\t\t// if (firstChildNode)\r\n\t\t\t\t//     observerRef.current.unobserve(firstChildNode);\r\n\t\t\t\t// if (lastChildNode) observerRef.current.unobserve(lastChildNode);\r\n\t\t\t\tobserverRef.current.disconnect();\r\n\t\t\t}\r\n\t\t};\r\n\t}, [firstChildNode, lastChildNode]);\r\n\r\n\treturn {\r\n\t\tfirstChildRef,\r\n\t\tlastChildRef,\r\n\t};\r\n};\r\n\r\nexport const usePaginationViewNumber = ({\r\n\tinitPageNumber,\r\n}: {\r\n\tinitPageNumber: number;\r\n}) => {\r\n\tconst [showCurrentPageNumber, setShowCurrentPageNumber] =\r\n\t\tuseState<number>(initPageNumber);\r\n\r\n\tconst observerRef = useRef<IntersectionObserver | null>(null);\r\n\tconst showCurrentPageObserveTarget = useCallback(\r\n\t\t(node: HTMLElement | null) => {\r\n\t\t\tif (!node) return;\r\n\r\n\t\t\t// 아직 observer가 없으면 새로 생성\r\n\t\t\tif (!observerRef.current) {\r\n\t\t\t\tobserverRef.current = new IntersectionObserver(\r\n\t\t\t\t\t(entries) => {\r\n\t\t\t\t\t\tentries.forEach((entry) => {\r\n\t\t\t\t\t\t\tif (entry.isIntersecting) {\r\n\t\t\t\t\t\t\t\tconst pageIndexAttr =\r\n\t\t\t\t\t\t\t\t\tentry.target.getAttribute(\r\n\t\t\t\t\t\t\t\t\t\t\"data-page-index\",\r\n\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\tif (!pageIndexAttr) return;\r\n\t\t\t\t\t\t\t\t// if (!entry.target.hasAttribute('data-is-first'))\r\n\t\t\t\t\t\t\t\t//     return;\r\n\t\t\t\t\t\t\t\tconst pageIndex = parseInt(pageIndexAttr, 10);\r\n\t\t\t\t\t\t\t\tsetShowCurrentPageNumber(pageIndex);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tthreshold: 0.1, // 예: 10% 이상 보여야 intersect로 판단\r\n\t\t\t\t\t},\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\t// 해당 노드를 관찰\r\n\t\t\tobserverRef.current.observe(node);\r\n\t\t},\r\n\t\t[],\r\n\t);\r\n\tuseEffect(() => {\r\n\t\tconst currentObserver = observerRef.current;\r\n\t\treturn () => {\r\n\t\t\tif (currentObserver) {\r\n\t\t\t\tcurrentObserver.disconnect();\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\treturn {\r\n\t\tshowCurrentPageNumber,\r\n\t\tshowCurrentPageObserveTarget,\r\n\t};\r\n};\r\n\r\nexport const usePagingHandler = <T>({\r\n\tlastCallPageNumber,\r\n\tdataListRef,\r\n}: {\r\n\tlastCallPageNumber: number;\r\n\tdataListRef: MutableRefObject<Array<T[] | null>>;\r\n}) => {\r\n\tconst jumpingPageNumberRef = useRef<number | null>(lastCallPageNumber);\r\n\tuseEffect(() => {\r\n\t\tif (jumpingPageNumberRef.current) {\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t\t}, 1000);\r\n\t\t}\r\n\t}, [jumpingPageNumberRef]);\r\n\tconst paginationScrollIntoViewTarget = useRef<\r\n\t\tRecord<number, HTMLDivElement | null>\r\n\t>({});\r\n\tconst pageNumberRef = useRef<number>(lastCallPageNumber);\r\n\r\n\tconst setPaginationRef = useCallback(\r\n\t\t(i: number) => (node: HTMLDivElement | null) => {\r\n\t\t\tif (!node) return;\r\n\r\n\t\t\tpaginationScrollIntoViewTarget.current[i] = node;\r\n\r\n\t\t\t// jumpingPageNumberRef에 값이 있고, 그 값이 현재 i와 같으면 스크롤\r\n\t\t\tif (\r\n\t\t\t\tjumpingPageNumberRef.current !== null &&\r\n\t\t\t\ti === jumpingPageNumberRef.current\r\n\t\t\t) {\r\n\t\t\t\tnode.scrollIntoView({\r\n\t\t\t\t\tbehavior: \"instant\", // 필요한 경우 'smooth' 등으로 수정 가능\r\n\t\t\t\t\tblock: \"start\",\r\n\t\t\t\t});\r\n\t\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t\t}\r\n\t\t},\r\n\t\t[],\r\n\t);\r\n\r\n\t//스크롤이 “첫 아이템” 혹은 “마지막 아이템”에 닿을 때 호출\r\n\tconst handleReachTerminal = (\r\n\t\t{ isFirst, isLast, observer }: OnReachTerminalType,\r\n\t\tdataCallFetch: (callPageNumber: number) => void,\r\n\t) => {\r\n\t\t// 이미 다른 페이지로 점프 중이면, 중복 호출 방지\r\n\t\tif (dataListRef.current.length === 0) return;\r\n\t\tif (jumpingPageNumberRef.current != null) return;\r\n\t\tif (!isFirst && !isLast) return;\r\n\r\n\t\tconst callPageNumber = isFirst\r\n\t\t\t? Math.max(pageNumberRef.current - 1, 0)\r\n\t\t\t: pageNumberRef.current + 1;\r\n\r\n\t\tif (\r\n\t\t\tdataListRef.current[callPageNumber] != null &&\r\n\t\t\t(dataListRef.current[callPageNumber]?.length || 0) > 0\r\n\t\t)\r\n\t\t\treturn;\r\n\t\tjumpingPageNumberRef.current = callPageNumber;\r\n\t\tsetTimeout(() => {\r\n\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t}, 1000);\r\n\t\tdataCallFetch(callPageNumber);\r\n\t};\r\n\r\n\t//페이지네이션에서 페이지 번호를 직접 클릭했을 시\r\n\tconst handleClickPageChange = (\r\n\t\tpage: number,\r\n\t\tdataCallFetch: (callPageNumber: number) => void,\r\n\t) => {\r\n\t\t// PaginationLayer는 1-based, 내부 로직은 0-based\r\n\t\t// 이미 캐싱된 페이지가 있다면, 스크롤만 이동\r\n\t\tconst pageData = dataListRef.current[page];\r\n\r\n\t\t// 이미 캐싱된 페이지가 있다면, 스크롤만 이동\r\n\t\tif (\r\n\t\t\tpageData != null &&\r\n\t\t\tArray.isArray(pageData) &&\r\n\t\t\tpageData.length > 0\r\n\t\t) {\r\n\t\t\tpaginationScrollIntoViewTarget.current[page]?.scrollIntoView({\r\n\t\t\t\tbehavior: \"smooth\",\r\n\t\t\t\tblock: \"start\",\r\n\t\t\t});\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tjumpingPageNumberRef.current = page;\r\n\t\tsetTimeout(() => {\r\n\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t}, 1000);\r\n\t\tdataCallFetch(page);\r\n\t};\r\n\treturn {\r\n\t\tjumpingPageNumberRef,\r\n\t\tpaginationScrollIntoViewTarget,\r\n\t\tpageNumberRef,\r\n\t\tsetPaginationRef,\r\n\t\thandleReachTerminal,\r\n\t\thandleClickPageChange,\r\n\t};\r\n};\r\n"]}

package/dist/{hooks.d.ts → flex-layout/hooks/useListPaging.d.ts}

@@ -1,10 +1,5 @@
-export { D as DragStateResultType, a as DragStateType, b as DropMovementEventType, c as DropPositionOrderName, d as DropTargetComponent, e as DropTargetComponentEvent, F as FolderEventType, P as PositionName, f as allSplitScreenCount, g as dragState, h as dropMovementEventSubject, i as folderEventSubject, s as setFolderEvent, u as useDragCapture, j as useDragEvents, k as useFolderEvent } from './useDrag-DR01Ob3s.js';
-import { MutableRefObject } from 'react';
-import 'rxjs';
-import './FlexLayoutSplitScreenDragBox-eCtq4kLd.js';
-import 'react/jsx-runtime';
-
-type OnReachTerminalType = {
+import { MutableRefObject } from "react";
+export type OnReachTerminalType = {
     isFirst: boolean;
     isLast: boolean;
     observer: IntersectionObserver;
@@ -12,17 +7,17 @@ type OnReachTerminalType = {
 interface UseListPagingForInfinityProps {
     onReachTerminal?: (onReachTerminalData: OnReachTerminalType) => void;
 }
-declare const useListPagingForSentinel: <E extends HTMLElement>({ onReachTerminal, }: UseListPagingForInfinityProps) => {
+export declare const useListPagingForSentinel: <E extends HTMLElement>({ onReachTerminal, }: UseListPagingForInfinityProps) => {
     firstChildRef: (node: E | null) => void;
     lastChildRef: (node: E | null) => void;
 };
-declare const usePaginationViewNumber: ({ initPageNumber, }: {
+export declare const usePaginationViewNumber: ({ initPageNumber, }: {
     initPageNumber: number;
 }) => {
     showCurrentPageNumber: number;
     showCurrentPageObserveTarget: (node: HTMLElement | null) => void;
 };
-declare const usePagingHandler: <T>({ lastCallPageNumber, dataListRef, }: {
+export declare const usePagingHandler: <T>({ lastCallPageNumber, dataListRef, }: {
     lastCallPageNumber: number;
     dataListRef: MutableRefObject<Array<T[] | null>>;
 }) => {
@@ -33,5 +28,4 @@ declare const usePagingHandler: <T>({ lastCallPageNumber, dataListRef, }: {
     handleReachTerminal: ({ isFirst, isLast, observer }: OnReachTerminalType, dataCallFetch: (callPageNumber: number) => void) => void;
     handleClickPageChange: (page: number, dataCallFetch: (callPageNumber: number) => void) => void;
 };
-
-export { type OnReachTerminalType, useListPagingForSentinel, usePaginationViewNumber, usePagingHandler };
+export {};

package/dist/flex-layout/hooks/useListPaging.js

@@ -0,0 +1,175 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+
+const 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
+  };
+};
+const 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
+  };
+};
+const 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 { useListPagingForSentinel, usePaginationViewNumber, usePagingHandler };
+//# sourceMappingURL=useListPaging.js.map
+//# sourceMappingURL=useListPaging.js.map

package/dist/flex-layout/hooks/useListPaging.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/flex-layout/hooks/useListPaging.ts"],"names":["observer"],"mappings":"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","file":"useListPaging.js","sourcesContent":["import {\r\n\tMutableRefObject,\r\n\tuseCallback,\r\n\tuseEffect,\r\n\tuseRef,\r\n\tuseState,\r\n} from \"react\";\r\n\r\nexport type OnReachTerminalType = {\r\n\tisFirst: boolean;\r\n\tisLast: boolean;\r\n\tobserver: IntersectionObserver;\r\n};\r\ninterface UseListPagingForInfinityProps {\r\n\tonReachTerminal?: (onReachTerminalData: OnReachTerminalType) => void;\r\n}\r\nexport const useListPagingForSentinel = <E extends HTMLElement>({\r\n\t//initPageNumber,\r\n\t//initPageSize,\r\n\tonReachTerminal,\r\n}: UseListPagingForInfinityProps): {\r\n\tfirstChildRef: (node: E | null) => void;\r\n\tlastChildRef: (node: E | null) => void;\r\n\t//pageNumber: number;\r\n\t//pageSize: number;\r\n\t//setPageNumber: Dispatch<SetStateAction<number>>;\r\n\t//setPageSize: Dispatch<SetStateAction<number>>;\r\n} => {\r\n\tconst [firstChildNode, setFirstChildNode] = useState<E | null>(null);\r\n\tconst [lastChildNode, setLastChildNode] = useState<E | null>(null);\r\n\tconst observerRef = useRef<IntersectionObserver | null>(null);\r\n\r\n\tconst firstChildRef = useCallback((node: E | null) => {\r\n\t\tsetFirstChildNode(node);\r\n\t}, []);\r\n\r\n\tconst lastChildRef = useCallback((node: E | null) => {\r\n\t\tsetLastChildNode(node);\r\n\t}, []);\r\n\t// 페이지 번호가 변경될 때마다 데이터 로드를 위한 콜백 호출\r\n\r\n\tuseEffect(() => {\r\n\t\tif (firstChildNode && observerRef.current)\r\n\t\t\tobserverRef.current.unobserve(firstChildNode);\r\n\t\tif (lastChildNode && observerRef.current)\r\n\t\t\tobserverRef.current.unobserve(lastChildNode);\r\n\t\tconst handleIntersect: IntersectionObserverCallback = (\r\n\t\t\tentries,\r\n\t\t\tobserver,\r\n\t\t) => {\r\n\t\t\tentries.forEach((entry) => {\r\n\t\t\t\tif (entry.isIntersecting) {\r\n\t\t\t\t\tif (entry.target === firstChildNode) {\r\n\t\t\t\t\t\tif (onReachTerminal)\r\n\t\t\t\t\t\t\tonReachTerminal({\r\n\t\t\t\t\t\t\t\tisFirst: true,\r\n\t\t\t\t\t\t\t\tisLast: false,\r\n\t\t\t\t\t\t\t\tobserver,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t\tif (entry.target === lastChildNode) {\r\n\t\t\t\t\t\tif (onReachTerminal)\r\n\t\t\t\t\t\t\tonReachTerminal({\r\n\t\t\t\t\t\t\t\tisFirst: false,\r\n\t\t\t\t\t\t\t\tisLast: true,\r\n\t\t\t\t\t\t\t\tobserver,\r\n\t\t\t\t\t\t\t});\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t};\r\n\r\n\t\tconst observer = new IntersectionObserver(handleIntersect, {\r\n\t\t\tthreshold: 0.1,\r\n\t\t});\r\n\r\n\t\tobserverRef.current = observer;\r\n\r\n\t\tif (firstChildNode) observer.observe(firstChildNode);\r\n\t\tif (lastChildNode) observer.observe(lastChildNode);\r\n\r\n\t\treturn () => {\r\n\t\t\tif (observerRef.current) {\r\n\t\t\t\t// if (firstChildNode)\r\n\t\t\t\t//     observerRef.current.unobserve(firstChildNode);\r\n\t\t\t\t// if (lastChildNode) observerRef.current.unobserve(lastChildNode);\r\n\t\t\t\tobserverRef.current.disconnect();\r\n\t\t\t}\r\n\t\t};\r\n\t}, [firstChildNode, lastChildNode]);\r\n\r\n\treturn {\r\n\t\tfirstChildRef,\r\n\t\tlastChildRef,\r\n\t};\r\n};\r\n\r\nexport const usePaginationViewNumber = ({\r\n\tinitPageNumber,\r\n}: {\r\n\tinitPageNumber: number;\r\n}) => {\r\n\tconst [showCurrentPageNumber, setShowCurrentPageNumber] =\r\n\t\tuseState<number>(initPageNumber);\r\n\r\n\tconst observerRef = useRef<IntersectionObserver | null>(null);\r\n\tconst showCurrentPageObserveTarget = useCallback(\r\n\t\t(node: HTMLElement | null) => {\r\n\t\t\tif (!node) return;\r\n\r\n\t\t\t// 아직 observer가 없으면 새로 생성\r\n\t\t\tif (!observerRef.current) {\r\n\t\t\t\tobserverRef.current = new IntersectionObserver(\r\n\t\t\t\t\t(entries) => {\r\n\t\t\t\t\t\tentries.forEach((entry) => {\r\n\t\t\t\t\t\t\tif (entry.isIntersecting) {\r\n\t\t\t\t\t\t\t\tconst pageIndexAttr =\r\n\t\t\t\t\t\t\t\t\tentry.target.getAttribute(\r\n\t\t\t\t\t\t\t\t\t\t\"data-page-index\",\r\n\t\t\t\t\t\t\t\t\t);\r\n\t\t\t\t\t\t\t\tif (!pageIndexAttr) return;\r\n\t\t\t\t\t\t\t\t// if (!entry.target.hasAttribute('data-is-first'))\r\n\t\t\t\t\t\t\t\t//     return;\r\n\t\t\t\t\t\t\t\tconst pageIndex = parseInt(pageIndexAttr, 10);\r\n\t\t\t\t\t\t\t\tsetShowCurrentPageNumber(pageIndex);\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t});\r\n\t\t\t\t\t},\r\n\t\t\t\t\t{\r\n\t\t\t\t\t\tthreshold: 0.1, // 예: 10% 이상 보여야 intersect로 판단\r\n\t\t\t\t\t},\r\n\t\t\t\t);\r\n\t\t\t}\r\n\r\n\t\t\t// 해당 노드를 관찰\r\n\t\t\tobserverRef.current.observe(node);\r\n\t\t},\r\n\t\t[],\r\n\t);\r\n\tuseEffect(() => {\r\n\t\tconst currentObserver = observerRef.current;\r\n\t\treturn () => {\r\n\t\t\tif (currentObserver) {\r\n\t\t\t\tcurrentObserver.disconnect();\r\n\t\t\t}\r\n\t\t};\r\n\t}, []);\r\n\treturn {\r\n\t\tshowCurrentPageNumber,\r\n\t\tshowCurrentPageObserveTarget,\r\n\t};\r\n};\r\n\r\nexport const usePagingHandler = <T>({\r\n\tlastCallPageNumber,\r\n\tdataListRef,\r\n}: {\r\n\tlastCallPageNumber: number;\r\n\tdataListRef: MutableRefObject<Array<T[] | null>>;\r\n}) => {\r\n\tconst jumpingPageNumberRef = useRef<number | null>(lastCallPageNumber);\r\n\tuseEffect(() => {\r\n\t\tif (jumpingPageNumberRef.current) {\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t\t}, 1000);\r\n\t\t}\r\n\t}, [jumpingPageNumberRef]);\r\n\tconst paginationScrollIntoViewTarget = useRef<\r\n\t\tRecord<number, HTMLDivElement | null>\r\n\t>({});\r\n\tconst pageNumberRef = useRef<number>(lastCallPageNumber);\r\n\r\n\tconst setPaginationRef = useCallback(\r\n\t\t(i: number) => (node: HTMLDivElement | null) => {\r\n\t\t\tif (!node) return;\r\n\r\n\t\t\tpaginationScrollIntoViewTarget.current[i] = node;\r\n\r\n\t\t\t// jumpingPageNumberRef에 값이 있고, 그 값이 현재 i와 같으면 스크롤\r\n\t\t\tif (\r\n\t\t\t\tjumpingPageNumberRef.current !== null &&\r\n\t\t\t\ti === jumpingPageNumberRef.current\r\n\t\t\t) {\r\n\t\t\t\tnode.scrollIntoView({\r\n\t\t\t\t\tbehavior: \"instant\", // 필요한 경우 'smooth' 등으로 수정 가능\r\n\t\t\t\t\tblock: \"start\",\r\n\t\t\t\t});\r\n\t\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t\t}\r\n\t\t},\r\n\t\t[],\r\n\t);\r\n\r\n\t//스크롤이 “첫 아이템” 혹은 “마지막 아이템”에 닿을 때 호출\r\n\tconst handleReachTerminal = (\r\n\t\t{ isFirst, isLast, observer }: OnReachTerminalType,\r\n\t\tdataCallFetch: (callPageNumber: number) => void,\r\n\t) => {\r\n\t\t// 이미 다른 페이지로 점프 중이면, 중복 호출 방지\r\n\t\tif (dataListRef.current.length === 0) return;\r\n\t\tif (jumpingPageNumberRef.current != null) return;\r\n\t\tif (!isFirst && !isLast) return;\r\n\r\n\t\tconst callPageNumber = isFirst\r\n\t\t\t? Math.max(pageNumberRef.current - 1, 0)\r\n\t\t\t: pageNumberRef.current + 1;\r\n\r\n\t\tif (\r\n\t\t\tdataListRef.current[callPageNumber] != null &&\r\n\t\t\t(dataListRef.current[callPageNumber]?.length || 0) > 0\r\n\t\t)\r\n\t\t\treturn;\r\n\t\tjumpingPageNumberRef.current = callPageNumber;\r\n\t\tsetTimeout(() => {\r\n\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t}, 1000);\r\n\t\tdataCallFetch(callPageNumber);\r\n\t};\r\n\r\n\t//페이지네이션에서 페이지 번호를 직접 클릭했을 시\r\n\tconst handleClickPageChange = (\r\n\t\tpage: number,\r\n\t\tdataCallFetch: (callPageNumber: number) => void,\r\n\t) => {\r\n\t\t// PaginationLayer는 1-based, 내부 로직은 0-based\r\n\t\t// 이미 캐싱된 페이지가 있다면, 스크롤만 이동\r\n\t\tconst pageData = dataListRef.current[page];\r\n\r\n\t\t// 이미 캐싱된 페이지가 있다면, 스크롤만 이동\r\n\t\tif (\r\n\t\t\tpageData != null &&\r\n\t\t\tArray.isArray(pageData) &&\r\n\t\t\tpageData.length > 0\r\n\t\t) {\r\n\t\t\tpaginationScrollIntoViewTarget.current[page]?.scrollIntoView({\r\n\t\t\t\tbehavior: \"smooth\",\r\n\t\t\t\tblock: \"start\",\r\n\t\t\t});\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tjumpingPageNumberRef.current = page;\r\n\t\tsetTimeout(() => {\r\n\t\t\tjumpingPageNumberRef.current = null;\r\n\t\t}, 1000);\r\n\t\tdataCallFetch(page);\r\n\t};\r\n\treturn {\r\n\t\tjumpingPageNumberRef,\r\n\t\tpaginationScrollIntoViewTarget,\r\n\t\tpageNumberRef,\r\n\t\tsetPaginationRef,\r\n\t\thandleReachTerminal,\r\n\t\thandleClickPageChange,\r\n\t};\r\n};\r\n"]}