From 97fe11475ae742fb3faa2097f900c5c3bde648b6 Mon Sep 17 00:00:00 2001
From: sonagi98 <ubini01@gmail.com>
Date: Mon, 24 Jul 2023 20:14:34 +0900
Subject: [PATCH] =?UTF-8?q?fix=20/=20=EC=A0=95=EB=B3=B4=EA=B0=80=20?=
 =?UTF-8?q?=EB=A1=9C=EB=94=A9=EB=90=9C=20=ED=9B=84=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=EB=90=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/MyPage/Bookmarks/MyBookmarks.tsx    |  2 +-
 client/src/pages/MyPage/MyPage.tsx            | 15 +++++++++--
 client/src/pages/MyPage/Reviews/MyReviews.tsx | 26 +++++++++++--------
 client/src/pages/MyPage/UI/ShortMovieList.tsx | 26 ++++++++++---------
 4 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/client/src/pages/MyPage/Bookmarks/MyBookmarks.tsx b/client/src/pages/MyPage/Bookmarks/MyBookmarks.tsx
index 6b46b28..ed5d457 100644
--- 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
index f33e52e..84cbf8b 100644
--- 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
index fb023c8..4cd6589 100644
--- 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
index 4bf9eea..2e059b0 100644
--- 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>