[남기연] sprint9

next/src/hooks/useMediaQuery.ts

@@ -0,0 +1,39 @@
+import { useState, useEffect } from "react";
+// 479, 767, 1023
+
+type MediaQuery = {
+  isMobile: boolean;
+  isTablet: boolean;
+  isDesktop: boolean;
+};
+
+export function useMediaQuery(): MediaQuery {
+  const [pageSize, setPageSize] = useState({
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+  });
+
+  const updatePageSize = () => {
+    const width = window.innerWidth;
+
+    setPageSize({
+      isMobile: width < 480,
+      isTablet: width >= 480 && width < 768,
+      isDesktop: width >= 768,
+    });
+  };
+  // 추후 디바운스 활용해서 최적화 도전(공부필요).
+  useEffect(() => {
+    updatePageSize();
+
+    const handleResize = () => updatePageSize();
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return pageSize;
+}

next/src/pages/boards/components/BestPosts.tsx

@@ -3,38 +3,22 @@ import BestPost from "./BestPost";
 import styles from "./BestPosts.module.css";
 import { useEffect, useState } from "react";
 import fetchPosts from "@/lib/fetch-posts";
+import { useMediaQuery } from "@/hooks/useMediaQuery";
 
 interface BestPostProps {
   initialBestPosts: Post[];
 }
 
-// 479, 767, 1023
-
 export default function BestPosts({ initialBestPosts }: BestPostProps) {
+  const { isMobile, isTablet, isDesktop } = useMediaQuery();
   const [pageSize, setPageSize] = useState(3);
   const [bestPosts, setBestPosts] = useState<Post[]>(initialBestPosts);
 
-  const pageSizeCheck = () => {
-    const pageWidth = window.innerWidth;
-    if (pageWidth < 480) {
-      setPageSize(1);
-    } else if (pageWidth >= 480 && pageWidth < 768) {
-      setPageSize(2);
-    } else {
-      setPageSize(3);
-    }
-  };
-
   useEffect(() => {
-    pageSizeCheck();
-
-    const handleResize = () => pageSizeCheck();
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
+    if (isMobile) setPageSize(1);
+    if (isTablet) setPageSize(2);
+    if (isDesktop) setPageSize(3);
+  }, [isMobile, isTablet, isDesktop]);
 
   useEffect(() => {
     const fetchBestPosts = async () => {
@@ -43,6 +27,7 @@ export default function BestPosts({ initialBestPosts }: BestPostProps) {
     };
     fetchBestPosts();
   }, [pageSize]);
+
   return (
     <div className={styles.container}>
       <h3 className={styles.title}>베스트 게시글</h3>