From 9a8f76f80f8ccd00fa1a77ec06c99e8e9c771af1 Mon Sep 17 00:00:00 2001
From: 99-zziy <wldud8229@gmail.com>
Date: Sat, 23 Sep 2023 20:39:36 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20window=20size=20=EC=B2=B4=ED=82=B9?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20=EB=B0=A9=EB=B2=95=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useCheckWindowSize.ts | 26 ++++++++++++++++++++++++++
 src/pages/project.tsx           |  4 +++-
 src/utils/pagination.ts         | 10 ++++------
 3 files changed, 33 insertions(+), 7 deletions(-)
 create mode 100644 src/hooks/useCheckWindowSize.ts

diff --git a/src/hooks/useCheckWindowSize.ts b/src/hooks/useCheckWindowSize.ts
new file mode 100644
index 00000000..0be36173
--- /dev/null
+++ b/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,
+  };
+};
diff --git a/src/pages/project.tsx b/src/pages/project.tsx
index 2de80406..3460850f 100644
--- a/src/pages/project.tsx
+++ b/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`}
diff --git a/src/utils/pagination.ts b/src/utils/pagination.ts
index 4da0e6e7..0adf48cd 100644
--- a/src/utils/pagination.ts
+++ b/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);
 };