fix / 정보가 로딩된 후 화면 렌더링되도록 변경

codestates-seb · Jul 24, 2023 · 97fe114 · 97fe114
1 parent 81d237d
commit 97fe114
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 26 deletions.
diff --git a/client/src/pages/MyPage/Bookmarks/MyBookmarks.tsx b/client/src/pages/MyPage/Bookmarks/MyBookmarks.tsx
@@ -34,7 +34,7 @@ const MyBookmarks = ({ id }: MyBookmarkProps) => {
     };
 
     fetchBookmarks();
-  }, []);
+  }, [id, token]);
 
   // api 연결 후 수정
   const bookmarkList = [...bookmarks];

diff --git a/client/src/pages/MyPage/MyPage.tsx b/client/src/pages/MyPage/MyPage.tsx
@@ -10,7 +10,9 @@ import { getCookie } from '../../utils/cookie';
 const MyPage = () => {
   //TODO: hook으로 분리
   const token = getCookie('jwtToken');
+  const [isLoading, setIsLoading] = useState(true);
   // const [username, setName] = useState<string>('name');
+  const [reviews, setReview] = useState([]);
   const [reviewCounter, setReviewCounter] = useState<number>(0);
 
   const [user, setUser] = useState<User>({
@@ -41,6 +43,8 @@ const MyPage = () => {
             reviews: 0,
             memberId: data.memberId,
           });
+          setIsLoading(false);
+          // console.log(user);
         } else {
           console.log('failed to fetch UserInfo:', res.data);
         }
@@ -51,12 +55,19 @@ const MyPage = () => {
 
     fetchInfo();
   }, []);
-
+  if (isLoading) {
+    return <div> Loading...</div>;
+  }
   return (
     <div className="flex flex-col justify-center px-20">
       <UserInfo info={user} />
       <MyBookmarks id={user.memberId} />
-      <MyReviews reviewCounter={user.reviews} setReviewCount={setReviewCounter} />
+      <MyReviews
+        reviews={reviews}
+        setReview={setReview}
+        reviewCounter={user.reviews}
+        setReviewCount={setReviewCounter}
+      />
       <DeleteUserBtn id={user.memberId} />
     </div>
   );

diff --git a/client/src/pages/MyPage/Reviews/MyReviews.tsx b/client/src/pages/MyPage/Reviews/MyReviews.tsx
@@ -2,17 +2,19 @@ import { useEffect, useState } from 'react';
 import ShortMovieList from '../UI/ShortMovieList';
 import axios from 'axios';
 import { getCookie } from '../../../utils/cookie';
-// import { movies } from '../../UI/datalist';
 
 interface MyReviewProps {
+  reviews: any;
+  setReview: any;
   reviewCounter: number;
   setReviewCount: any;
 }
 
-const MyReviews = ({ reviewCounter, setReviewCount }: MyReviewProps) => {
+const MyReviews = ({ reviews, setReview, reviewCounter, setReviewCount }: MyReviewProps) => {
   // TODO: 페이지네이션 컴포넌트 만들고 페이지네이션으로 변경
   const token = getCookie('jwtToken');
-  const [reviews, setReview] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
   useEffect(() => {
     const fetchReviews = async () => {
       try {
@@ -26,9 +28,13 @@ const MyReviews = ({ reviewCounter, setReviewCount }: MyReviewProps) => {
           }
         );
         if (res.status === 200) {
-          const data = res.data;
+          const response = res.data;
+          const data = response.data;
           setReview(data);
           setReviewCount(reviews.length);
+          console.log('data:', data);
+          console.log('reviews: ', reviews);
+          setIsLoading(false);
         } else {
           console.log('Failed to fetch review data:', res.data);
         }
@@ -38,19 +44,17 @@ const MyReviews = ({ reviewCounter, setReviewCount }: MyReviewProps) => {
     };
 
     fetchReviews();
-  }, []);
-
-  const moviesToRender = reviews;
-  // api 연결시 수정 예정 코드
-  // const temp: string[] = [];
-  // const reviewList = [...temp];
+  }, [reviewCounter]);
 
+  if (isLoading) {
+    return <div> Loading...</div>;
+  }
   return (
     <div>
       <div className="text-2xl font-semibold"> 내가 작성한 리뷰 </div>
       <div className="flex items-center justify-center">
         {reviewCounter > 0 ? (
-          <ShortMovieList movies={moviesToRender} />
+          <ShortMovieList movies={reviews} />
         ) : (
           <div className="pb-28 pt-24 text-xl opacity-80">아직 작성한 리뷰가 없어요.</div>
         )}

diff --git a/client/src/pages/MyPage/UI/ShortMovieList.tsx b/client/src/pages/MyPage/UI/ShortMovieList.tsx
@@ -5,12 +5,14 @@ interface movieListProps {
 }
 
 interface MoviePosterProps {
-  movieId: string;
-  title: string;
-  releaseDate: string;
-  score: number;
-  bookmarked: boolean;
-  posterUrl: string;
+  movie: {
+    docId: string;
+    title: string;
+    releaseDate: string;
+    score: number;
+    bookmarked: boolean;
+    posters: string;
+  };
 }
 
 const shortMovieList: React.FC<movieListProps> = ({ movies }) => {
@@ -19,12 +21,12 @@ const shortMovieList: React.FC<movieListProps> = ({ movies }) => {
       {movies.map((movie: MoviePosterProps, index: number) => (
         <MoviePoster
           key={index}
-          movieId={movie.movieId}
-          title={movie.title}
-          releaseDate={movie.releaseDate}
-          score={movie.score}
-          bookmarked={movie.bookmarked}
-          posterUrl={movie.posterUrl}
+          movieId={movie.movie.docId}
+          title={movie.movie.title}
+          releaseDate={movie.movie.releaseDate}
+          score={movie.movie.score}
+          bookmarked={movie.movie.bookmarked}
+          posterUrl={movie.movie.posters}
         />
       ))}
     </div>