feat: window size 체킹하는 방법 수정

src/hooks/useCheckWindowSize.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+
+import { SIZE, SizeKey } from '~/styles/media';
+
+type UseCheckWindowSizeProps = SizeKey;
+
+export const useCheckWindowSize = (size: UseCheckWindowSizeProps) => {
+  const [isTargetSize, setIsTargetSize] = useState(false);
+
+  const checkWindowSize = () => {
+    setIsTargetSize(window.innerWidth <= SIZE[size]);
+  };
+
+  useEffect(() => {
+    checkWindowSize();
+    window.addEventListener('resize', checkWindowSize);
+    return () => {
+      window.removeEventListener('resize', checkWindowSize);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return {
+    isTargetSize,
+  };
+};

src/pages/project.tsx

@@ -9,6 +9,7 @@ import { Thumbnail } from '~/components/Thumbnail';
 import { Link } from '~/components/Thumbnail/Thumbnail';
 import { staggerHalf } from '~/constant/motion';
 import { PROJECT_LIST } from '~/constant/project';
+import { useCheckWindowSize } from '~/hooks/useCheckWindowSize';
 import { mediaQuery } from '~/styles/media';
 import { getCurrentProjects, getTenUnderProjects, sliceByPage } from '~/utils/pagination';
 
@@ -20,6 +21,7 @@ export default function ProjectPage() {
   const [currentTab, setCurrentTab] = useState(ALL_TAB);
   const [selectedProjectList, setSelectedProjectList] = useState(PROJECT_LIST);
   const [currentPage, setCurrentPage] = useState(FIRST_PAGE);
+  const { isTargetSize: isTabletSize } = useCheckWindowSize('tablet');
 
   useEffect(() => {
     setCurrentPage(1);
@@ -53,7 +55,7 @@ export default function ProjectPage() {
               exit="exit"
               variants={staggerHalf}
             >
-              {sliceByPage(selectedProjectList, currentPage).map(project => (
+              {sliceByPage(selectedProjectList, currentPage, isTabletSize).map(project => (
                 <Thumbnail
                   key={project.title}
                   img={`/images/project/${project.subTitle}/${project.title}.png`}

src/utils/pagination.ts

@@ -1,12 +1,10 @@
 import { Project } from '~/constant/project';
-import { SIZE } from '~/styles/media';
 
-export const sliceByPage = (projects: Project[], page: number) => {
-  if (typeof window !== 'undefined') {
-    if (window.innerWidth <= SIZE.tablet) {
-      return projects.slice(6 * (page - 1), 6 * page);
-    }
+export const sliceByPage = (projects: Project[], page: number, isTabletSize: boolean) => {
+  if (isTabletSize) {
+    return projects.slice(6 * (page - 1), 6 * page);
   }
+
   return projects.slice(9 * (page - 1), 9 * page);
 };