Merge pull request #65 from RyuDongHo/main

[5, 6주차/다일] 워크북 제출합니다.
UMC-Inha · Nov 16, 2024 · db4996e · db4996e
2 parents 581ac3b + 40b7e78
commit db4996e
Show file tree

Hide file tree

Showing 143 changed files with 18,514 additions and 41 deletions.
diff --git a/keyword/chapter05/keyword.md b/keyword/chapter05/keyword.md
diff --git a/keyword/chapter06/keyword.md b/keyword/chapter06/keyword.md
diff --git a/mission/chapter04/mission/package-lock.json b/mission/chapter04/mission/package-lock.json
diff --git a/mission/chapter04/mission/package.json b/mission/chapter04/mission/package.json
@@ -13,6 +13,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-intersection-observer": "^9.13.1",
     "react-router-dom": "^6.26.2",
     "styled-components": "^6.1.13",
     "styled-reset": "^4.5.2"

diff --git a/mission/chapter04/mission/src/1_Page/MovieDetailPage/api/useMovieProvider.js b/mission/chapter04/mission/src/1_Page/MovieDetailPage/api/useMovieProvider.js
@@ -28,4 +28,4 @@ const useMovieProvider = (id) => {
   }, [id]);
   return [movieProvider, loading];
 };
-export default useMovieProvider;
+export default useMovieProvider; 
diff --git a/mission/chapter04/mission/src/1_Page/MovieListPage/ui/MovieList/api/useMovieList.js b/mission/chapter04/mission/src/1_Page/MovieListPage/ui/MovieList/api/useMovieList.js
@@ -13,16 +13,18 @@ const useMovieList = (category, page) => {
         "GET",
         `${BASE_URL}/movie/${category}?language=ko-KR&page=${page}`
       );
-      result.results.forEach(e => {
+      result.results.forEach((e) => {
         e.poster_path = `${BASE_IMG_URL}${BASE_IMG_SIZE}${e.poster_path}`;
       });
-
-      setMovieList((prevList) => [
-        ...prevList,
-        ...result.results
-      ]);
-
+      // if(page % 5 == 0){
+      //   window.scrollTo({ top: 0});
+      //   setMovieList(result.results);
+      // } else{
+      //   setMovieList((prevList) => [...prevList, ...result.results]);
+      // }
+      setMovieList((prevList) => [...prevList, ...result.results]);
       setLoading(false);
+      console.log(page, "page")
     };
 
     fetchMovie();

diff --git a/mission/chapter04/mission/src/1_Page/MovieListPage/ui/MovieList/index.jsx b/mission/chapter04/mission/src/1_Page/MovieListPage/ui/MovieList/index.jsx
@@ -3,45 +3,30 @@ import STYLE from "./style";
 import React from "react";
 import Movie from "./ui/Movie";
 import { useParams } from "react-router-dom";
-const MovieList = React.memo(() => {
+import { useInView } from "react-intersection-observer";
+const MovieList = () => {
   const { category } = useParams();
   const [page, setPage] = React.useState(1);
   const [movieList, loading] = useMovieList(category, page);
 
-  const observer = React.useRef();
-  // const lastMovieElementRef = React.useCallback(
-  //   (node) => {
-  //     if (loading) return;
-  //     if (observer.current) observer.current.disconnect();
-  //     observer.current = new IntersectionObserver((entries) => {
-  //       if (entries[0].isIntersecting) {
-  //         setPage((prevPage) => prevPage + 1); // 페이지 증가
-  //       }
-  //     });
-  //     if (node) observer.current.observe(node);
-  //   },
-  //   [loading]
-  // );
-  const lastMovieElementRef = (node) => {
-    if (loading) return;
-    if (observer.current) observer.current.disconnect();
-    observer.current = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        setPage((prevPage) => prevPage + 1); // 페이지 증가
-      }
-    });
-    if (node) observer.current.observe(node);
-  }
+  const { ref, inView } = useInView({
+    threshold: 0,
+  });
+
+  React.useEffect(() =>{
+    if(inView && !loading){
+      setPage((prev) => prev+1);
+    }
+  }, [inView, loading])
+
+  if (loading) return <div>still loading...</div>; // API loading
 
-  if (loading) return <div>still loading...</div>;
   return (
     <STYLE.MovieList>
       {movieList.map((elem, index) => {
-        // 마지막 아이템에 ref 추가하여 관찰
-        console.log(index + "렌더링");
         return (
           <Movie
-            lastMovieElementRef={index === movieList.length - 1 ? lastMovieElementRef : null}
+            observe={index === movieList.length - 1 ? ref : null}
             key={index}
             data={elem}
           />
@@ -50,7 +35,7 @@ const MovieList = React.memo(() => {
       {loading && <div>Loading more movies...</div>}
     </STYLE.MovieList>
   );
-});
-MovieList.displayName= "MovieList"
+};
+MovieList.displayName = "MovieList";
 
 export default MovieList;
diff --git a/mission/chapter04/mission/src/1_Page/MovieListPage/ui/MovieList/ui/Movie/index.jsx b/mission/chapter04/mission/src/1_Page/MovieListPage/ui/MovieList/ui/Movie/index.jsx
@@ -2,11 +2,11 @@ import STYLE from "./style";
 import { useNavigate } from "react-router-dom";
 import { handleNavigation } from "../../../../../../3_Shared/model/handleNavigate";
 const Movie = (props) => {
-  const { lastMovieElementRef, data} = props;
+  const { observe, data} = props;
   const { poster_path, title, release_date, id } = data;
   const navigate = useNavigate();
   return (
-    <STYLE.Movie ref={lastMovieElementRef} onClick={()=>{handleNavigation(navigate, `/movie-detail/${id}`);}}>
+    <STYLE.Movie ref={observe} onClick={()=>{handleNavigation(navigate, `/movie-detail/${id}`);}}>
       <STYLE.Thumbnail src={`${poster_path}`} alt="movie poster" />
       <STYLE.ThumbnailHoverEffectDiv />
       <STYLE.MovieInfo>

diff --git a/mission/chapter04/mission/src/3_Shared/lib/useThrottle.js b/mission/chapter04/mission/src/3_Shared/lib/useThrottle.js
@@ -0,0 +1,14 @@
+import React from "react";
+const useThrottle = (callback, delay = 1000) => {
+  let lastCallTime = React.useRef(Date.now());
+
+  return () => {
+    const timeElapsed = Date.now() - lastCallTime.current;
+    if(timeElapsed >= delay) {
+      callback();
+      lastCallTime.current = Date.now();
+    }
+  }
+};
+
+export default useThrottle;