[#10] 홈페이지 가상스크롤 적용

apps/client/src/shared/hooks/index.ts

@@ -7,7 +7,6 @@ export { useSaveWorkspace } from './queries/useSaveWorkspace';
 export { usePostImage } from './queries/usePostImage';
 export { useDeleteImage } from './queries/useDeleteImage';
 
-export { useWindowSize } from './css/useWindowSize';
 export { useCssTooltip } from './css/useCssTooltip';
 export { useCssOptions } from './css/useCssOptions';
 export { useCssOptionItem } from './css/useCssOptionItem';
@@ -16,3 +15,6 @@ export { workspaceKeys } from './query-key/workspaceKeys';
 
 export { usePreventLeaveWorkspacePage } from './usePreventLeaveWorkspacePage';
 export { useInfiniteScroll } from './useInfiniteScroll';
+export { useScrollPosition } from './useScrollPosition';
+export { useWindowSize } from './useWindowSize';
+export { useVirtualScroll } from './useVirtualScroll';

apps/client/src/shared/hooks/useScrollPosition.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useScrollPosition = () => {
+  const [scrollPosition, setScrollPosition] = useState<number>(0);
+  const ticking = useRef(false);
+
+  useEffect(() => {
+    const onScroll = () => {
+      if (!ticking.current) {
+        requestAnimationFrame(() => {
+          setScrollPosition(window.scrollY);
+          ticking.current = false;
+        });
+        ticking.current = true;
+      }
+    };
+    window.addEventListener('scroll', onScroll);
+
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
+  return { scrollPosition };
+};

apps/client/src/shared/hooks/useVirtualScroll.ts

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+import { useScrollPosition, useWindowSize } from '@/shared/hooks';
+
+const calculateNumOfNodePadding = (windowWidth: number): number => {
+  if (windowWidth < 640) {
+    return 1;
+  } else if (windowWidth < 768) {
+    return 2;
+  } else if (windowWidth < 1024) {
+    return 3;
+  }
+  return 4;
+};
+
+export const useVirtualScroll = <T>({
+  data,
+  topSectionHeight = 0,
+  renderedItemHeight,
+  gapY = 0,
+}: {
+  data: T[] | undefined;
+  topSectionHeight?: number;
+  renderedItemHeight: number;
+  gapY: number;
+}) => {
+  const { scrollPosition } = useScrollPosition();
+  const { screenHeight, screenWidth } = useWindowSize();
+
+  const [renderedData, setRenderedData] = useState<T[]>([]);
+
+  const nodePadding = calculateNumOfNodePadding(screenWidth);
+  const start = Math.max(
+    0,
+    Math.floor((scrollPosition - topSectionHeight) / (renderedItemHeight + gapY)) * nodePadding
+  );
+  const offsetY = Math.floor(start / nodePadding) * (renderedItemHeight + gapY);
+  const [totalHeight, setTotalHeight] = useState(0);
+
+  useEffect(() => {
+    if (!data) {
+      return;
+    }
+
+    setRenderedData(
+      data.slice(
+        start,
+        start +
+          Math.floor(screenHeight / (renderedItemHeight + gapY)) * nodePadding +
+          2 * nodePadding
+      )
+    );
+    setTotalHeight(Math.ceil(data!.length / nodePadding) * (renderedItemHeight + gapY));
+  }, [start, screenHeight, data]);
+
+  return { renderedData, offsetY, totalHeight };
+};

apps/client/src/widgets/home/WorkspaceContainer/WorkspaceContainer.tsx

@@ -1,7 +1,8 @@
 import { EmptyWorkspace, WorkspaceGrid, WorkspaceHeader, WorkspaceList } from '@/widgets';
-import { useGetWorkspaceList, useInfiniteScroll } from '@/shared/hooks';
+import { useGetWorkspaceList, useInfiniteScroll, useVirtualScroll } from '@/shared/hooks';
 
 import { SkeletonWorkspaceList } from '@/shared/ui';
+import { TWorkspace } from '@/shared/types';
 import { WorkspaceLoadError } from '@/entities';
 
 /**
@@ -13,6 +14,13 @@ export const WorkspaceContainer = () => {
   const { hasNextPage, fetchNextPage, isPending, isFetchingNextPage, isError, workspaceList } =
     useGetWorkspaceList();
 
+  const { renderedData, offsetY, totalHeight } = useVirtualScroll<TWorkspace>({
+    data: workspaceList,
+    topSectionHeight: 594,
+    renderedItemHeight: 262,
+    gapY: 32,
+  });
+
   const fetchCallback: IntersectionObserverCallback = (entries, observer) => {
     entries.forEach((entry) => {
       if (entry.isIntersecting && hasNextPage) {
@@ -39,10 +47,16 @@ export const WorkspaceContainer = () => {
         (workspaceList.length === 0 ? (
           <EmptyWorkspace />
         ) : (
-          <WorkspaceGrid>
-            <WorkspaceList workspaceList={workspaceList} />
-            {isFetchingNextPage && <SkeletonWorkspaceList skeletonNum={8} />}
-          </WorkspaceGrid>
+          <div
+            style={{
+              height: `${totalHeight}px`,
+            }}
+          >
+            <WorkspaceGrid offsetY={offsetY}>
+              <WorkspaceList workspaceList={renderedData} />
+              {isFetchingNextPage && <SkeletonWorkspaceList skeletonNum={8} />}
+            </WorkspaceGrid>
+          </div>
         ))
       )}
       {!isPending && !isFetchingNextPage && hasNextPage && (

apps/client/src/widgets/home/WorkspaceGrid/WorkspaceGrid.tsx

@@ -1,13 +1,22 @@
-import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
 
 /**
  *
  * @description
  * 워크스페이스 그리드 컴포넌트
  */
-export const WorkspaceGrid = ({ children }: PropsWithChildren) => {
+export const WorkspaceGrid = ({
+  offsetY = 0,
+  children,
+}: {
+  offsetY?: number;
+  children: ReactNode;
+}) => {
   return (
-    <div>
+    <div
+      style={{ transform: offsetY > 0 ? `translateY(${offsetY + 32}px)` : 'none' }}
+      will-change="transform"
+    >
       <div className="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
         {children}
       </div>