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('name'); + const [reviews, setReview] = useState([]); const [reviewCounter, setReviewCounter] = useState(0); const [user, setUser] = useState({ @@ -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
Loading...
; + } return (
- +
); 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
Loading...
; + } return (
내가 작성한 리뷰
{reviewCounter > 0 ? ( - + ) : (
아직 작성한 리뷰가 없어요.
)} 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 = ({ movies }) => { @@ -19,12 +21,12 @@ const shortMovieList: React.FC = ({ movies }) => { {movies.map((movie: MoviePosterProps, index: number) => ( ))}