Merge pull request #27 from dongbin420/refactor/details-page-http

Refactor/details page http

client/src/pages/DetailsPage/DetailsPage.tsx

@@ -14,7 +14,7 @@ import Spinner from '../../components/Spinner';
 import { getCookie } from '../../utils/cookie'; // 로그인 기능 완성시 사용
 
 const DetailsPage = () => {
-  const isLoggedIn = Boolean(getCookie('accessToken')); // 로그인 기능 완성시 사용
+  const isLoggedIn = Boolean(getCookie('jwtToken')); // 로그인 기능 완성시 사용
   const movieDetail = useAppSelector(selectMovieDetails);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -38,7 +38,7 @@ const DetailsPage = () => {
       try {
         const response = await api.get(`/movies/${movieId}?page=${pageNumber}`);
         dispatch(fetchMovieSuccess(response.data));
-        setTotalReviews(response.data.movie.review_count);
+        setTotalReviews(response.data.pageInfo.totalElements);
         setIsLoading(false);
       } catch (err) {
         console.error(err);
@@ -80,7 +80,7 @@ const DetailsPage = () => {
           {/* 리뷰 */}
           <div className="mx-auto my-0 max-w-[1320px] p-8">
             <div className="mb-6 flex justify-between">
-              <p className="text-xl font-medium">리뷰 {movieDetail?.movie.review_count}개</p>
+              <p className="text-xl font-medium">리뷰 {movieDetail?.pageInfo.totalElements}개</p>
               <button
                 onClick={openModal}
                 className="w-24 rounded-lg bg-theme1 text-white hover:bg-yellow-200"

client/src/pages/DetailsPage/Review/Review.tsx

@@ -8,16 +8,19 @@ import CommentForm from './Comment/CommentForm/CommentForm';
 import { IoMdArrowDropdown, IoMdArrowDropup } from 'react-icons/io';
 import { ReviewContent } from '../assets/types/movieTypes';
 import { getCookie } from '../../../utils/cookie'; // 로그인 기능 완성시 사용
+import { useNavigate } from 'react-router-dom';
 
 export interface ReviewProps {
   review: ReviewContent;
 }
 
 const Review = ({ review }: ReviewProps) => {
-  const token = getCookie('accessToken'); // 로그인 기능 완성시 사용
+  const token = getCookie('jwtToken'); // 로그인 기능 완성시 사용
   const [isExpandOpen, setIsExandOpen] = useState<boolean>(false);
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
+  const navigate = useNavigate();
+
   const expandOpenHandler: () => void = () => {
     setIsExandOpen(!isExpandOpen);
   };
@@ -39,7 +42,7 @@ const Review = ({ review }: ReviewProps) => {
       });
       console.log(response);
       alert('삭제되었습니다.');
-      window.location.reload();
+      navigate(`/movies/${review.docId}?page=1`);
     } catch (err) {
       console.error(err);
       alert('에러가 발생했습니다. 다시 시도해주세요: ' + err);

client/src/pages/DetailsPage/Review/ReviewBottom/ReviewBottom.tsx

@@ -1,14 +1,15 @@
 import api from '../../assets/api/axiosInstance';
-import { useState } from 'react';
+// import { useState } from 'react';
 import Tag from '../../UI/Tag';
 import { MdOutlineThumbUp } from 'react-icons/md';
 import { ReviewProps } from '../Review';
 import { getCookie } from '../../../../utils/cookie'; // 로그인 기능 완성시 사용
 
 const ReviewBottom = ({ review }: ReviewProps) => {
-  const isLoggedIn = Boolean(getCookie('accessToken')); // 로그인 기능 완성시 사용
-  const token = getCookie('accessToken');
-  const [likes, setLikes] = useState<number>(review.likes); // 좋아요 요청만 요청 성공시 상태 변경(페이지 리프레쉬 -> 사용자경험에 좋지않음)
+  const isLoggedIn = Boolean(getCookie('jwtToken')); // 로그인 기능 완성시 사용
+  const token = getCookie('jwtToken');
+  // const [likes, setLikes] = useState<number>(review.likes); // 좋아요 요청만 요청 성공시 상태 변경(페이지 리프레쉬 -> 사용자경험에 좋지않음)
+  // 처음 likes가져와서 렌더링 하는 과정에서 상태가 변경되지 않는거같음 그래서 그냥 일단 refresh하는걸로
 
   // 좋아요 클릭 post 요청 // 예상 endpoint: `/review/{review-id}/likes`
   // 로그인 기능 완성시 사용
@@ -29,7 +30,9 @@ const ReviewBottom = ({ review }: ReviewProps) => {
           }
         );
         console.log(response);
-        setLikes((prev) => prev + 1);
+        alert('추가되었습니다.');
+        window.location.reload();
+        // setLikes((prev) => prev + 1);
       } catch (err) {
         console.error(err);
         alert('에러가 발생했습니다. 다시 시도해주세요: ' + err);
@@ -69,7 +72,7 @@ const ReviewBottom = ({ review }: ReviewProps) => {
           <div className="rounded-full p-2 hover:bg-yellow-100">
             <MdOutlineThumbUp onClick={likeClickHandler} className="cursor-pointer" />
           </div>
-          <div>{likes}</div>
+          <div>{review.likes}</div>
         </div>
 
         {/* 싫어요 기능 제거 */}

client/src/pages/DetailsPage/UI/ReviewModal/ModalForm/ModalForm.tsx

@@ -21,7 +21,8 @@ const tags: string[] = [
 ];
 
 const ModalForm = ({ closeModal, movieId, review }: ModalProps) => {
-  const token = getCookie('accessToken');
+  const token = getCookie('jwtToken');
+  console.log(token);
   const movieDetail = useAppSelector(selectMovieDetails);
   const [selectedTags, setSelectedTags] = useState<string[]>(review ? review.tags : []);
   const [reviewContent, setReviewContent] = useState<string>(review ? review.content : '');
@@ -89,6 +90,7 @@ const ModalForm = ({ closeModal, movieId, review }: ModalProps) => {
           console.log(response);
           alert('등록되었습니다.');
           window.location.reload();
+          // 해당 페이지 리뷰5개일땐, 다음페이지로 넘겨줌. 5개 미만일땐 해당페이지 새로고침 (나중에 적용)
         } catch (err) {
           console.error(err);
           alert('에러가 발생했습니다. 다시 시도해주세요: ' + err);

client/src/pages/DetailsPage/UI/Tag.tsx

@@ -1,9 +1,15 @@
+import { Link } from 'react-router-dom';
+
 interface TagProps {
   tag: string;
 }
 
 const Tag = ({ tag }: TagProps) => {
-  return <button className="mr-2 w-20 bg-theme2 text-white hover:bg-theme3">#{tag}</button>;
+  return (
+    <button className="mr-2 w-20 bg-theme2 text-white hover:bg-theme3">
+      <Link to={`/category/tag?tag=${tag}`}>#{tag}</Link>
+    </button>
+  );
 };
 
 export default Tag;

client/src/pages/DetailsPage/assets/types/movieTypes.ts

@@ -37,7 +37,7 @@ export interface ReviewContent {
 export interface User {
   memberId: number;
   username: string;
-  profile_img: string;
+  profile_img: string | null;
 }
 
 // search 데이터에서도 사용(같은 형태)