계정관리/사용자관리 페이징 추가

src/entities/account/ui/user-manage-wrap.tsx

@@ -6,11 +6,13 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { UserManageAuthList } from './user-manage-auth-list';
 import { useUserFindMutation } from '@/entities/user/api/use-user-find-mutation';
-import { UserListItem } from '@/entities/user/model/types';
+import { UserFindParams, UserFindResponse, UserListItem } from '@/entities/user/model/types';
 import { useStore } from '@/shared/model/store';
 import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
+import useIntersectionObserver from '@/widgets/intersection-observer';
+import { DefaultRequestPagination } from '@/entities/common/model/types';
 
 export const UserManageWrap = () => {
   const { t } = useTranslation();
@@ -22,18 +24,71 @@ export const UserManageWrap = () => {
     return value.value === userMid;
   });
 
+  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
   const [mid, setMid] = useState<string>((midItem.length > 0)? userMid: '');
   const [userItems, setUserItems] = useState<Array<UserListItem>>([]);
-  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   
   const { mutateAsync: userFind } = useUserFindMutation();
 
-  const callList = () => {
+  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
-    setPageParam(pageParam);
+    entries.forEach((entry: IntersectionObserverEntry) => {
-    userFind({ mid: mid, page: pageParam }).then((rs) => {
+      if(entry.isIntersecting){
-      console.log('API Response:', rs);
+        if(onActionIntersect && !!pageParam.cursor){
-      console.log('Content:', rs.content);
+          setOnActionIntersect(false);
-      setUserItems(rs.content || []);
+          callList('page');
+        } 
+      }
+    });
+  };
+
+  const { setTarget } = useIntersectionObserver({ 
+    threshold: 1, 
+    onIntersect 
+  });
+
+  const callList = (type?: string) => {
+    let params: UserFindParams = {
+      mid: mid,
+      page: {
+        ...pageParam
+      }
+    };
+    if(type !== 'page' && params.page){
+      params.page.cursor = null;
+    }
+
+    userFind(params).then((rs: UserFindResponse) => {
+      // setUserItems(rs.content || []);
+      if(type === 'page'){
+        setUserItems([
+          ...userItems,
+          ...rs.content
+        ]);
+      }
+      else{
+        setUserItems(rs.content);
+      }
+			if(rs.hasNext 
+				&& rs.nextCursor !== pageParam.cursor
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      ){
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: rs.nextCursor }
+        });
+      }
+      else{
+        setPageParam({
+          ...pageParam,
+          ...{ cursor: null }
+        });
+			}
+			setOnActionIntersect(
+        !!rs.hasNext 
+				&& rs.nextCursor !== pageParam.cursor
+        && rs.content.length === DEFAULT_PAGE_PARAM.size
+      );
     }).catch((e: any) => {
       if(e.response?.data?.error?.message){
         snackBar(e.response?.data?.error?.message);
@@ -86,10 +141,13 @@ export const UserManageWrap = () => {
 
         <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
           { (!!userItems && userItems.length > 0) &&
-            <UserManageAuthList
+            <>
-              userItems={ userItems }
+              <UserManageAuthList
-              mid={ mid }
+                userItems={ userItems }
-            ></UserManageAuthList>
+                mid={ mid }
+              ></UserManageAuthList>
+              <div ref={ setTarget }></div>
+            </>
           }
         </div>
 

src/entities/user/model/types.ts

@@ -59,7 +59,7 @@ export interface UserFindResponse extends DefaulResponsePagination {
 
 export interface UserFindParams {
   mid: string;
-  page: DefaultRequestPagination;
+  page?: DefaultRequestPagination;
 };
 
 export interface UserExistsUseridParams {