Fix: Similar.jsx 컴포넌트 렌더링 안됨

SSUMC-6th · May 21, 2024 · 4950d56 · 4950d56
1 parent 8e81238
commit 4950d56
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 11 deletions.
diff --git a/umi-6week/TMDB-site/src/App.jsx b/umi-6week/TMDB-site/src/App.jsx
@@ -13,10 +13,12 @@ import ErrorPage from "./pages/ErrorPage";
 import MovieDetailPage from "./pages/MovieDetailPage";
 import SignUpPage from "./pages/SignUpPage";
 import LogInPage from "./pages/LogInPage";
+import ScrollToTop from "./components/ScrollTop";
 
 function App() {
   return (
     <>
+      <ScrollToTop />
       <Routes>
         <Route path="/" element={<MainPage />} />
         <Route path="/nowplaying" element={<NowPlayingPage />} />

diff --git a/umi-6week/TMDB-site/src/components/Loading.jsx b/umi-6week/TMDB-site/src/components/Loading.jsx
@@ -26,7 +26,7 @@ function Loading() {
   return (
     <Background>
       <img src={Rolling} alt="Loading..." width="5%" />
-      <Text>Loading...</Text>
+      <Text>LOADING...</Text>
     </Background>
   );
 }

diff --git a/umi-6week/TMDB-site/src/components/PosterItem.jsx b/umi-6week/TMDB-site/src/components/PosterItem.jsx
@@ -90,7 +90,6 @@ function PosterItem({ id, title, voteAverage, overview, posterPath }) {
         <PosterOutline>
           <Title>{title}</Title>
           <Vote>
-            {/* <img src="src/assets/star.png" width="12px" height="12px" /> */}
             <VoteAverage>⭐️ {voteAverage}</VoteAverage>
           </Vote>
         </PosterOutline>

diff --git a/umi-6week/TMDB-site/src/components/ScrollTop.jsx b/umi-6week/TMDB-site/src/components/ScrollTop.jsx
@@ -0,0 +1,14 @@
+// eslint-disable-next-line no-unused-vars
+import React from "react";
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return null;
+}
diff --git a/umi-6week/TMDB-site/src/components/SimilarData.jsx b/umi-6week/TMDB-site/src/components/SimilarData.jsx
@@ -66,6 +66,19 @@ const LoadText = styled.h3`
   margin: 20px 0px;
 `;
 
+// componentDidMount(){
+//   this.getMovies();
+// }
+
+// componentDidUpdate(preProps){
+//   console.log('update!');
+//   if(preProps.locaton.pathname !== this.props.locaton.pathname){
+//     console.log(true);
+//     this.setState({loading: true});
+//     this.getMovies();
+//   }
+// }
+
 // eslint-disable-next-line react/prop-types
 function SimilarData({ movie_id, selected_movie }) {
   const [movies, setMovies] = useState([]);

diff --git a/umi-6week/TMDB-site/src/pages/MovieDetailPage.jsx b/umi-6week/TMDB-site/src/pages/MovieDetailPage.jsx
@@ -129,15 +129,7 @@ function MovieDetailPage() {
       }
     };
     getMovies();
-  }, []);
-
-  // const starCount = () => {
-  //   const star = [];
-  //   for (let i = 0; i < Math.floor(movies.vote_average); i++) {
-  //     star.push("⭐️ ");
-  //   }
-  //   return star;
-  // };
+  }, [movies]);
 
   return (
     <Wrapper>