Loading...
;
+ }
+
+ const renderMovies = () => {
+ const moviesToRender = showAllMovies ? movies : movies.slice(0, 5);
+ return (
+
+
+ );
+ };
+
+ return (
+ + {genreFromQuery ? `${genreFromQuery} Most Reviewed` : `#${tagFromQuery} Most Reviewed`} + {showAllMovies ? ( + + ) : ( + <> + )} +
+
+ {moviesToRender.map((movie, index) => (
+
+
+ {renderMovies()}
+ {!showAllMovies && movies.length > 5 && (
+
+ )}
+
+ );
+};
+export default CategorymostReview;
diff --git a/client/src/pages/CategoryPage/components/CategoryTopScore.tsx b/client/src/pages/CategoryPage/components/CategoryTopScore.tsx
new file mode 100644
index 0000000..dfbcc6f
--- /dev/null
+++ b/client/src/pages/CategoryPage/components/CategoryTopScore.tsx
@@ -0,0 +1,112 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import MoviePoster from '../../UI/MoivePoster';
+import { useLocation } from 'react-router-dom';
+
+interface Movie {
+ title: string;
+ docId: string;
+ repRlsDate: string;
+ score: number;
+ bookmarked: boolean;
+ posterUrl: string;
+}
+
+const CategoryTopScore: React.FC = () => {
+ const [showAllMovies, setShowAllMovies] = useState(false);
+ const [movies, setMovies] = useStateLoading...
;
+ }
+
+ const renderMovies = () => {
+ const moviesToRender = showAllMovies ? movies : movies.slice(0, 5);
+ return (
+
+
+ );
+ };
+
+ return (
+ + {genreFromQuery ? `${genreFromQuery} Top Score` : `#${tagFromQuery} Top Score`} + {showAllMovies ? ( + + ) : ( + <> + )} +
+
+ {moviesToRender.map((movie, index) => (
+
+
+ {renderMovies()}
+ {!showAllMovies && movies.length > 5 && (
+
+ )}
+
+ );
+};
+export default CategoryTopScore;
diff --git a/client/src/pages/DetailsPage/DetailsPage.tsx b/client/src/pages/DetailsPage/DetailsPage.tsx
index 37a808d..e1afbcf 100644
--- a/client/src/pages/DetailsPage/DetailsPage.tsx
+++ b/client/src/pages/DetailsPage/DetailsPage.tsx
@@ -1,71 +1,122 @@
+import api from './assets/api/axiosInstance';
import { useAppSelector, useAppDispatch } from '../../redux-toolkit/hooks';
import { fetchMovieSuccess, selectMovieDetails } from '../../redux-toolkit/slices/movieDetailSlice';
import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { getMovies } from './assets/api/movieApi';
+import { useParams, useSearchParams } from 'react-router-dom';
import MovieTitle from './MovieTitle/MovieTitle';
import MovieInfo from './MovieInfo/MovieInfo';
import Review from './Review/Review';
-import CreateReviewModal from './UI/CreateReviewModal/CreateReviewModal';
+import ReviewModal from './UI/ReviewModal/ReviewModal';
+import Pagination from './UI/Pagination';
+import MoviePoster from '../UI/MoivePoster';
+import ErrorPage from '../ErrorPage/ErrorPage';
+import Spinner from '../../components/Spinner';
+import { getCookie } from '../../utils/cookie'; // 로그인 기능 완성시 사용
const DetailsPage = () => {
- const dispatch = useAppDispatch();
+ const isLoggedIn = Boolean(getCookie('jwtToken')); // 로그인 기능 완성시 사용
const movieDetail = useAppSelector(selectMovieDetails);
const [isModalOpen, setIsModalOpen] = useState
- (false);
+ const [stillUrl, setStillUrl] = useState('');
+
+ const preventModalClick = (event: React.MouseEvent) => {
+ event.stopPropagation();
+ };
+
+ const openModal = (still: string) => {
+ setIsModalOpen(true);
+ setStillUrl(still);
+ };
+ const closeModal = () => {
+ setIsModalOpen(false);
+ };
+
return (
-
-
-
- {movieDetail?.review.rev.map((review, index) => {
- return 리뷰 {movieDetail?.movie.review_count}개
- -비슷한 장르의 영화
- - {/* 컴포넌트로 들어갈 예정 */} -
-
- {isModalOpen && 영화
- 영화
- 영화
- 영화
- 영화
+ {isError ? (
+
+
-
+
+ {/* 추천영화 */}
+
+
+ {movieDetail?.movie.reviews.map((review, index) => {
+ return 리뷰 {movieDetail?.pageInfo.totalElements}개
+ +
+
+
+
+ {/* 리뷰작성모달 */}
+ {isModalOpen && 비슷한 장르의 영화
+
+ {movieDetail?.recommended_movies &&
+ movieDetail?.recommended_movies.map((movie, index) => (
+
+
-
갤러리
-
-
- 
-
-
- 
-
-
- 
-
-
- 
+ <>
+
+ {isModalOpen && (
+
+
- 갤러리
+
+ {movieDetail?.movie.stills.map((still, index) => (
+
+ {/* 버튼이 아니어도 onClick 이벤트 줄 수 있게, 아래 줄에 한해서 eslint 무시 */}
+ {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */}
+ ![]()
openModal(still)}
+ className="h-full w-full cursor-pointer duration-300 ease-in-out hover:scale-110"
+ src={still}
+ alt="still"
+ />
+
+ ))}
+
+ )}
+
);
};
diff --git a/client/src/pages/DetailsPage/MovieInfo/MovieInfoTop/MovieInfoTop.tsx b/client/src/pages/DetailsPage/MovieInfo/MovieInfoTop/MovieInfoTop.tsx
index 70510fe..94077be 100644
--- a/client/src/pages/DetailsPage/MovieInfo/MovieInfoTop/MovieInfoTop.tsx
+++ b/client/src/pages/DetailsPage/MovieInfo/MovieInfoTop/MovieInfoTop.tsx
@@ -1,55 +1,49 @@
import { useAppSelector } from '../../../../redux-toolkit/hooks';
import { selectMovieDetails } from '../../../../redux-toolkit/slices/movieDetailSlice';
import Person from '../../UI/Person';
-import directorImg from '../../assets/director-img.jpg';
-import actress1Img from '../../assets/actress-1.jpg';
-import actor1Img from '../../assets/actor-1.jpg';
import { AiFillStar } from 'react-icons/ai';
import { FaPlay } from 'react-icons/fa';
-const people = [
- {
- name: '미야자키 하야오',
- img: directorImg,
- },
- {
- name: '히이라기 루미',
- img: actress1Img,
- },
- {
- name: '이리노 미유',
- img: actor1Img,
- },
-];
-
const MovieInfoTop = () => {
const movieDetail = useAppSelector(selectMovieDetails);
return (
-
+ 
+
+
-
- 
+
+
-
-
평균 별점
+
+
- 평점
{movieDetail?.movie.score}
-({movieDetail?.movie.review_count}명)
+{movieDetail?.movie.score}
+({movieDetail?.movie.review_count}명)
{movieDetail?.movie.description}
-감독
-출연
-
- {movieDetail?.movie.배우.map((actor, index) => {
- return
diff --git a/client/src/pages/DetailsPage/MovieTitle/MovieTitle.tsx b/client/src/pages/DetailsPage/MovieTitle/MovieTitle.tsx
index 6b228d3..7d0aa90 100644
--- a/client/src/pages/DetailsPage/MovieTitle/MovieTitle.tsx
+++ b/client/src/pages/DetailsPage/MovieTitle/MovieTitle.tsx
@@ -1,19 +1,43 @@
-import mainImg from '../assets/mockup-main-img.jpg';
import { useAppSelector } from '../../../redux-toolkit/hooks';
import { selectMovieDetails } from '../../../redux-toolkit/slices/movieDetailSlice';
const MovieTitle = () => {
const movieDetail = useAppSelector(selectMovieDetails);
+
return (
- {movieDetail?.movie.description}
+감독
+출연
+
+ {movieDetail?.movie.actors.map((actor, index) => {
+ return
- 
-
- (false);
+ const prevCommentInput = '기존 댓글'; // 서버로부터 받아온 기존 댓글내용
+ const expandEditOpenHandler: () => void = () => {
+ setIsEditExandOpen(!isEditExpandOpen);
+ };
+ const handleCommentInputDelete = () => {
+ // DELETE 요청 // 댓글 id 이용
+ };
return (
- ) => {
+ setCommentInput(e.target.value);
+ };
+
+ // 댓글작성 post 요청, 댓글수정 patch 요청
+ const handleCommentInputSubmit = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (prevCommentInput) {
+ // PATCH 요청
+ } else {
+ // POST 요청
+ }
+ };
+ console.log(commentInput);
+ return (
+
+ );
+};
+
+export default CommentForm;
diff --git a/client/src/pages/DetailsPage/Review/Review.tsx b/client/src/pages/DetailsPage/Review/Review.tsx
index 3ee259a..ddfe076 100644
--- a/client/src/pages/DetailsPage/Review/Review.tsx
+++ b/client/src/pages/DetailsPage/Review/Review.tsx
@@ -1,28 +1,74 @@
+import api from '../assets/api/axiosInstance';
import { useState } from 'react';
import ReviewTop from './ReviewTop/ReviewTop';
import ReviewBottom from './ReviewBottom/ReviewBottom';
import Comment from './Comment/Comment';
+import ReviewModal from '../UI/ReviewModal/ReviewModal';
+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('jwtToken'); // 로그인 기능 완성시 사용
const [isExpandOpen, setIsExandOpen] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const navigate = useNavigate();
+
const expandOpenHandler: () => void = () => {
setIsExandOpen(!isExpandOpen);
};
+ const openModal = () => {
+ setIsModalOpen(true);
+ };
+ const closeModal = () => {
+ setIsModalOpen(false);
+ };
+
+ //리뷰 삭제(DELETE 요청) // 예상 endpoint: `/reviews/${review.reviewId}`
+ const handleReviewDelete = async () => {
+ try {
+ const response = await api.delete(`/reviews/${review.reviewId}`, {
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ console.log(response);
+ alert('삭제되었습니다.');
+ navigate(`/movies/${review.docId}?page=1`);
+ } catch (err) {
+ console.error(err);
+ alert('에러가 발생했습니다. 다시 시도해주세요: ' + err);
+ }
+ };
+
return (
<>
(false); // 나중에 실제 로그인 상태 이용
- const [likes, setLikes] = useState(review.like); // 리다이렉트를 사용하면, 상태를 이렇게 수동으로 변경하지 않아도 될 수도..
+ const isLoggedIn = Boolean(getCookie('jwtToken')); // 로그인 기능 완성시 사용
+ const token = getCookie('jwtToken');
+ // const [likes, setLikes] = useState(review.likes); // 좋아요 요청만 요청 성공시 상태 변경(페이지 리프레쉬 -> 사용자경험에 좋지않음)
+ // 처음 likes가져와서 렌더링 하는 과정에서 상태가 변경되지 않는거같음 그래서 그냥 일단 refresh하는걸로
- const handleLike: () => void = () => {
- if (!isLogin) {
- alert('로그인을 해주세요');
+ // 좋아요 클릭 post 요청 // 예상 endpoint: `/review/{review-id}/likes`
+ // 로그인 기능 완성시 사용
+ // 같은 유저가 같은 리뷰 좋아요 두 번 눌렀을때의 로직 고민해봐야함.
+ const likeClickHandler = async () => {
+ if (!isLoggedIn) {
+ alert('로그인을 해주세요.');
} else {
- setLikes((prev) => prev + 1);
+ try {
+ const response = await api.post(
+ `/review/${review.reviewId}/likes`,
+ {},
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`, // 이걸 보내야하는지 안보내도 되는지 모르겠음
+ },
+ }
+ );
+ console.log(response);
+ alert('추가되었습니다.');
+ window.location.reload();
+ // setLikes((prev) => prev + 1);
+ } catch (err) {
+ console.error(err);
+ alert('에러가 발생했습니다. 다시 시도해주세요: ' + err);
+ }
}
};
+
+ // const likeClickHandler = async () => {
+ // try {
+ // const response = await api.post(
+ // `/review/${review.reviewId}/likes`,
+ // {},
+ // {
+ // headers: {
+ // 'Content-Type': 'application/json',
+ // // Authorization: `Bearer ${token}`,
+ // },
+ // }
+ // );
+ // console.log(response);
+ // setLikes((prev) => prev + 1);
+ // } catch (err) {
+ // console.error(err);
+ // alert('에러가 발생했습니다. 다시 시도해주세요: ' + err);
+ // }
+ // };
+
return (
(review ? review.tags : []);
- const [reviewContent, setReviewContent] = useState(review ? review.content : '');
- const [score, setScore] = useState(review ? review.score : 0);
-
- console.log(selectedTags);
-
- const addTagHandler = (tag: string) => {
- const updatedTags = [...selectedTags];
- if (updatedTags.includes(tag)) {
- const index = updatedTags.indexOf(tag);
- updatedTags.splice(index, 1);
- } else {
- updatedTags.push(tag);
- }
- setSelectedTags(updatedTags);
- };
-
- const handleContentChange = (event: React.ChangeEvent) => {
- setReviewContent(event.target.value);
- };
-
- const handleStarClick = (newRating: number) => {
- setScore(newRating);
- };
-
- // const handleFormSubmit = async (event: React.FormEvent) => {
- // event.preventDefault();
-
- // const createdReviewData = {
- // movieId: 1,
- // userId: 1,
- // userImg: '',
- // userName: '',
- // score: score,
- // content: reviewContent,
- // tags: selectedTags,
- // likes: 0,
- // comments: [],
- // };
-
- // try {
- // const redirectLocation = await postReview(createdReviewData, movieId);
- // return redirect(redirectLocation);
- // } catch (err) {
- // console.error('Error submitting review:', err);
- // }
- // };
-
- return (
-
- );
-};
-
-export default ModalForm;
diff --git a/client/src/pages/DetailsPage/UI/Pagination.tsx b/client/src/pages/DetailsPage/UI/Pagination.tsx
new file mode 100644
index 0000000..95b2f56
--- /dev/null
+++ b/client/src/pages/DetailsPage/UI/Pagination.tsx
@@ -0,0 +1,52 @@
+import { useState } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+interface PaginationProps {
+ totalReviews: number;
+ movieId?: string;
+ pageNumber: number;
+}
+
+const Pagination = ({ totalReviews, movieId, pageNumber }: PaginationProps) => {
+ const navigate = useNavigate();
+ const [pageWindow, setPageWindow] = useState([1, 2, 3, 4, 5]);
+ const reviewPerPage = 5;
+ const totalPages = Math.ceil(totalReviews / reviewPerPage);
+ const nextPages = () => {
+ const newPageWindow = pageWindow.map((page) => page + 5);
+ setPageWindow(newPageWindow);
+ navigate(`/movies/${movieId}?page=${newPageWindow[0]}`);
+ };
+ const previousPages = () => {
+ const newPageWindow = pageWindow.map((page) => page - 5);
+ setPageWindow(newPageWindow);
+ navigate(`/movies/${movieId}?page=${newPageWindow[4]}`);
+ };
+ return (
+ <>
+ {pageNumber > 5 && (
+
+ )}
+ {pageWindow.map(
+ (page) =>
+ page <= totalPages && (
+
+ {page}
+
+ )
+ )}
+ {totalPages > 5 && totalPages > pageWindow[4] && (
+
+ )}
+
+ );
+};
+
+export default Pagination;
diff --git a/client/src/pages/DetailsPage/UI/Person.tsx b/client/src/pages/DetailsPage/UI/Person.tsx
index c912963..c2a3847 100644
--- a/client/src/pages/DetailsPage/UI/Person.tsx
+++ b/client/src/pages/DetailsPage/UI/Person.tsx
@@ -1,13 +1,25 @@
+import { Link } from 'react-router-dom';
+
interface PersonProps {
- img: string;
+ // img: string;
name: string | undefined;
+ role?: string;
}
+// 디폴트 프로필사진
+const defaultProfile =
+ 'https://thebulletin.org/wp-content/themes/atomic-bulletin/resources/assets/images/person-dummy.jpg';
-const Person = ({ img, name }: PersonProps) => {
+const Person = ({ name, role }: PersonProps) => {
+ const handleClick = () => {
+ window.scrollTo(0, 0);
+ };
return (
-
-
+ // background img사용해서, absolute 사용할 필요 없어짐
+ {movieDetail?.movie.title}
-(영어제목)
-(개봉년도) · {movieDetail?.movie.genre} · (국가)
-{movieDetail?.movie.running_time} · (연령)
-
+
);
diff --git a/client/src/pages/DetailsPage/Review/Comment/Comment.tsx b/client/src/pages/DetailsPage/Review/Comment/Comment.tsx
index 104fc12..8fac28b 100644
--- a/client/src/pages/DetailsPage/Review/Comment/Comment.tsx
+++ b/client/src/pages/DetailsPage/Review/Comment/Comment.tsx
@@ -1,11 +1,42 @@
+import { useState } from 'react';
import UserForComment from '../../UI/UserForComment';
+import CommentForm from './CommentForm/CommentForm';
const Comment = () => {
+ const [isEditExpandOpen, setIsEditExandOpen] = useState
+
{movieDetail?.movie.title}
+{movieDetail?.movie.titleEng}
++ {movieDetail?.movie.repRlsDate} ·{' '} + {movieDetail?.movie.genre.length !== 0 ? movieDetail?.movie.genre : '(장르)'} ·{' '} + {movieDetail?.movie.nation.length !== 0 ? movieDetail?.movie.nation : '(국가)'} +
++ {movieDetail?.movie.runtime.length !== 0 + ? movieDetail?.movie.runtime + '분' + : '(상영시간)'}{' '} + · {movieDetail?.movie.rating.length !== 0 ? movieDetail?.movie.rating : '(연령)'} +
-
+ <>
+ (댓글 내용)
-
+
+ {isEditExpandOpen && (
+
+
+ {/* 수정 및 삭제버튼 쿠키의 유저정보(아마 id)와 해당 댓글의 유저id가 일치하는 경우에만 렌더링 */}
+ (댓글 내용)
+
+
+
+
+
+
+ )}
+
);
};
diff --git a/client/src/pages/DetailsPage/Review/Comment/CommentForm/CommentForm.tsx b/client/src/pages/DetailsPage/Review/Comment/CommentForm/CommentForm.tsx
new file mode 100644
index 0000000..adcc174
--- /dev/null
+++ b/client/src/pages/DetailsPage/Review/Comment/CommentForm/CommentForm.tsx
@@ -0,0 +1,40 @@
+import { useState } from 'react';
+
+interface PrevCommentInputProps {
+ prevCommentInput?: string;
+}
+
+const CommentForm = ({ prevCommentInput }: PrevCommentInputProps) => {
+ const [commentInput, setCommentInput] = useState(prevCommentInput ? prevCommentInput : '');
+
+ const handleCommentInputChange = (e: React.ChangeEvent{review.content}
+
+
{review.content}
+
+ {/* 수정 및 삭제버튼 쿠키의 유저정보(아마 id)와 해당 리뷰의 유저id가 일치하는 경우에만 렌더링 */}
+
+
+
+
+
+ {isModalOpen &&
{isExpandOpen ? (
{isExpandOpen ? (
<>
+
-
);
diff --git a/client/src/pages/DetailsPage/UI/CreateReviewModal/ModalForm/ModalForm.tsx b/client/src/pages/DetailsPage/UI/CreateReviewModal/ModalForm/ModalForm.tsx
deleted file mode 100644
index 5b6fd08..0000000
--- a/client/src/pages/DetailsPage/UI/CreateReviewModal/ModalForm/ModalForm.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { useState } from 'react';
-import ModalTag from './ModalTag/ModalTag';
-import RatingStars from 'react-rating-stars-component';
-import { ReviewContent } from '../../../assets/types/movieTypes';
-// import { postReview } from '../../../assets/api/movieApi';
-// import { redirect } from 'react-router-dom';
-
-const tags: string[] = [
- '#태그1',
- '#태그2',
- '#태그3',
- '#태그4',
- '#태그5',
- '#태그6',
- '#태그7',
- '#태그8',
- '#태그9',
- '#태그10',
-];
-
-interface ModalFormProps {
- movieId: string | undefined;
- review?: ReviewContent;
-}
-
-const ModalForm = ({ movieId, review }: ModalFormProps) => {
- const [selectedTags, setSelectedTags] = useState
+
{review.tags.map((tag, index) => (
);
diff --git a/client/src/pages/DetailsPage/Review/ReviewTop/ReviewTop.tsx b/client/src/pages/DetailsPage/Review/ReviewTop/ReviewTop.tsx
index b0f9393..d50401c 100644
--- a/client/src/pages/DetailsPage/Review/ReviewTop/ReviewTop.tsx
+++ b/client/src/pages/DetailsPage/Review/ReviewTop/ReviewTop.tsx
@@ -11,12 +11,12 @@ const ReviewTop = ({ review }: ReviewProps) => {
{Array(Math.floor(review.score))
.fill('')
.map((_, index) => (
-
-
-
- {likes}
+ {review.likes}
+
+ {/* 싫어요 기능 제거 */}
+ {/*
*/}
(싫어요 개수)
-
- 
- (review ? review.tags : []);
+ const [reviewContent, setReviewContent] = useState(review ? review.content : '');
+ const [score, setScore] = useState(review ? review.score : 0);
+
+ // 폼에서 태그 추가
+ const addTagHandler = (tag: string) => {
+ const updatedTags = [...selectedTags];
+ if (updatedTags.includes(tag)) {
+ const index = updatedTags.indexOf(tag);
+ updatedTags.splice(index, 1);
+ } else {
+ updatedTags.push(tag);
+ }
+ setSelectedTags(updatedTags);
+ };
+
+ // 폼에서 리뷰내용 추가
+ const handleContentChange = (event: React.ChangeEvent) => {
+ setReviewContent(event.target.value);
+ };
+
+ // 폼에서 별점 추가
+ const handleStarClick = (newRating: number) => {
+ setScore(newRating);
+ };
+
+ // 리뷰 등록 및 수정(조건부 POST, PATCH 요청) // 예상 endpoint: `/movies/{movie-id}/reviews`(POST) // PATCH는 `/reviews/${review.reviewId}`
+ const handleReviewFormSubmit = async (event: React.FormEvent) => {
+ event.preventDefault();
+
+ // patch, post 둘다 리뷰 전체데이터 전송 (새 리뷰, 수정된 리뷰)
+ const reviewData = {
+ score: score,
+ content: reviewContent,
+ tags: selectedTags,
+ genre: movieDetail?.movie.genre,
+ };
+ if (reviewData.content && reviewData.score !== 0) {
+ if (review) {
+ try {
+ const response = await api.patch(`/reviews/${review.reviewId}`, reviewData, {
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ closeModal();
+ console.log(response);
+ alert('수정되었습니다.');
+ window.location.reload();
+ } catch (err) {
+ console.error(err);
+ alert('에러가 발생했습니다. 다시 시도해주세요: ' + err);
+ }
+ } else {
+ try {
+ const response = await api.post(`/movies/${movieId}/reviews`, reviewData, {
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ });
+ closeModal();
+ console.log(response);
+ alert('등록되었습니다.');
+ window.location.reload();
+ // 해당 페이지 리뷰5개일땐, 다음페이지로 넘겨줌. 5개 미만일땐 해당페이지 새로고침 (나중에 적용)
+ } catch (err) {
+ console.error(err);
+ alert('에러가 발생했습니다. 다시 시도해주세요: ' + err);
+ }
+ }
+ } else {
+ alert('리뷰내용 또는 별점을 추가해주세요!');
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default ModalForm;
diff --git a/client/src/pages/DetailsPage/UI/CreateReviewModal/ModalForm/ModalTag/ModalTag.tsx b/client/src/pages/DetailsPage/UI/ReviewModal/ModalForm/ModalTag/ModalTag.tsx
similarity index 98%
rename from client/src/pages/DetailsPage/UI/CreateReviewModal/ModalForm/ModalTag/ModalTag.tsx
rename to client/src/pages/DetailsPage/UI/ReviewModal/ModalForm/ModalTag/ModalTag.tsx
index 2dcbaba..4af5202 100644
--- a/client/src/pages/DetailsPage/UI/CreateReviewModal/ModalForm/ModalTag/ModalTag.tsx
+++ b/client/src/pages/DetailsPage/UI/ReviewModal/ModalForm/ModalTag/ModalTag.tsx
@@ -23,7 +23,7 @@ const ModalTag = ({ tag, addTagHandler, isSelected }: ModalTagProps) => {
: 'mb-2 mr-2 w-20 bg-theme2 text-white hover:bg-theme3'
}
>
- {tag}
+ #{tag}
);
};
diff --git a/client/src/pages/DetailsPage/UI/CreateReviewModal/ModalForm/react-rating-stars-component.d.ts b/client/src/pages/DetailsPage/UI/ReviewModal/ModalForm/react-rating-stars-component.d.ts
similarity index 100%
rename from client/src/pages/DetailsPage/UI/CreateReviewModal/ModalForm/react-rating-stars-component.d.ts
rename to client/src/pages/DetailsPage/UI/ReviewModal/ModalForm/react-rating-stars-component.d.ts
diff --git a/client/src/pages/DetailsPage/UI/CreateReviewModal/CreateReviewModal.tsx b/client/src/pages/DetailsPage/UI/ReviewModal/ReviewModal.tsx
similarity index 56%
rename from client/src/pages/DetailsPage/UI/CreateReviewModal/CreateReviewModal.tsx
rename to client/src/pages/DetailsPage/UI/ReviewModal/ReviewModal.tsx
index 0de429b..38609a3 100644
--- a/client/src/pages/DetailsPage/UI/CreateReviewModal/CreateReviewModal.tsx
+++ b/client/src/pages/DetailsPage/UI/ReviewModal/ReviewModal.tsx
@@ -1,32 +1,33 @@
import ModalForm from './ModalForm/ModalForm';
-import { ReviewContent } from './../../assets/types/movieTypes';
+import { ReviewContent } from '../../assets/types/movieTypes';
type CloseModalFn = () => void;
-interface ModalProps {
+export interface ModalProps {
closeModal: CloseModalFn;
- movieId: string | undefined;
+ movieId?: string;
review?: ReviewContent;
}
-const CreateReviewModal = ({ closeModal, movieId, review }: ModalProps) => {
+const ReviewModal = ({ closeModal, movieId, review }: ModalProps) => {
const preventModalClick = (event: React.MouseEvent) => {
event.stopPropagation();
};
+
return (
);
};
-export default CreateReviewModal;
+export default ReviewModal;
diff --git a/client/src/pages/DetailsPage/UI/Tag.tsx b/client/src/pages/DetailsPage/UI/Tag.tsx
index 9505413..bbfdf45 100644
--- a/client/src/pages/DetailsPage/UI/Tag.tsx
+++ b/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 ;
+ return (
+
+ );
};
export default Tag;
diff --git a/client/src/pages/DetailsPage/UI/UserForComment.tsx b/client/src/pages/DetailsPage/UI/UserForComment.tsx
index 1d53fdc..19d0ce5 100644
--- a/client/src/pages/DetailsPage/UI/UserForComment.tsx
+++ b/client/src/pages/DetailsPage/UI/UserForComment.tsx
@@ -1,10 +1,12 @@
-import profileImg from '../assets/profile.jpg';
+// 디폴트 프로필사진
+const defaultProfile =
+ 'https://thebulletin.org/wp-content/themes/atomic-bulletin/resources/assets/images/person-dummy.jpg';
const UserForComment = () => {
return (
{name}
+
+
+ 
+
);
};
diff --git a/client/src/pages/DetailsPage/UI/ReviewModal/ModalForm/ModalForm.tsx b/client/src/pages/DetailsPage/UI/ReviewModal/ModalForm/ModalForm.tsx
new file mode 100644
index 0000000..3b93352
--- /dev/null
+++ b/client/src/pages/DetailsPage/UI/ReviewModal/ModalForm/ModalForm.tsx
@@ -0,0 +1,141 @@
+import api from '../../../assets/api/axiosInstance';
+import RatingStars from 'react-rating-stars-component';
+import { useState } from 'react';
+import { useAppSelector } from '../../../../../redux-toolkit/hooks';
+import { selectMovieDetails } from '../../../../../redux-toolkit/slices/movieDetailSlice';
+import { ModalProps } from '../ReviewModal';
+import { getCookie } from '../../../../../utils/cookie'; // 로그인 기능 완성시 사용
+import ModalTag from './ModalTag/ModalTag';
+
+const tags: string[] = [
+ '감동',
+ '음악',
+ '힐링',
+ '킬링타임',
+ '모험',
+ '창의적',
+ '영상미',
+ '영감',
+ '긴장감',
+ '반전',
+];
+
+const ModalForm = ({ closeModal, movieId, review }: ModalProps) => {
+ const token = getCookie('jwtToken');
+ console.log(token);
+ const movieDetail = useAppSelector(selectMovieDetails);
+ const [selectedTags, setSelectedTags] = useState{name}
+ {role &&{role} 역
} +
-
-
- 
+
diff --git a/client/src/pages/DetailsPage/UI/UserForPost.tsx b/client/src/pages/DetailsPage/UI/UserForPost.tsx
index a1df3aa..939f6f7 100644
--- a/client/src/pages/DetailsPage/UI/UserForPost.tsx
+++ b/client/src/pages/DetailsPage/UI/UserForPost.tsx
@@ -1,13 +1,24 @@
-import profileImg from '../assets/profile.jpg';
import { ReviewProps } from '../Review/Review';
+// 디폴트 프로필사진
+const defaultProfile =
+ 'https://thebulletin.org/wp-content/themes/atomic-bulletin/resources/assets/images/person-dummy.jpg';
+
const UserForPost = ({ review }: ReviewProps) => {
+ console.log(review);
return (
+
(유저 이름)
- => {
-// const response = await api.get('');
-// return response.data;
-// };
-
-// export const postReview = async (review: Review, movieId: string | undefined): Promise => {
-// const response = await api.post(`/movies/${movieId}/reviews`, review);
-// const redirectLocation: string = response.headers.location;
-// return redirectLocation;
-// };
-
-export const getMovies = async (): Promise => {
- const response = await axios.get('/mockupdata/moviedetails.json');
- return response.data;
-};
diff --git a/client/src/pages/DetailsPage/assets/director-img.jpg b/client/src/pages/DetailsPage/assets/director-img.jpg
deleted file mode 100644
index ec013e3..0000000
Binary files a/client/src/pages/DetailsPage/assets/director-img.jpg and /dev/null differ
diff --git a/client/src/pages/DetailsPage/assets/mockup-main-img.jpg b/client/src/pages/DetailsPage/assets/mockup-main-img.jpg
deleted file mode 100644
index 0a766d1..0000000
Binary files a/client/src/pages/DetailsPage/assets/mockup-main-img.jpg and /dev/null differ
diff --git a/client/src/pages/DetailsPage/assets/photo-1.jpg b/client/src/pages/DetailsPage/assets/photo-1.jpg
deleted file mode 100644
index ef79eb7..0000000
Binary files a/client/src/pages/DetailsPage/assets/photo-1.jpg and /dev/null differ
diff --git a/client/src/pages/DetailsPage/assets/photo-2.jpg b/client/src/pages/DetailsPage/assets/photo-2.jpg
deleted file mode 100644
index a81e5c5..0000000
Binary files a/client/src/pages/DetailsPage/assets/photo-2.jpg and /dev/null differ
diff --git a/client/src/pages/DetailsPage/assets/photo-3.jpg b/client/src/pages/DetailsPage/assets/photo-3.jpg
deleted file mode 100644
index 77d54c6..0000000
Binary files a/client/src/pages/DetailsPage/assets/photo-3.jpg and /dev/null differ
diff --git a/client/src/pages/DetailsPage/assets/photo-4.jpg b/client/src/pages/DetailsPage/assets/photo-4.jpg
deleted file mode 100644
index 67fa24c..0000000
Binary files a/client/src/pages/DetailsPage/assets/photo-4.jpg and /dev/null differ
diff --git a/client/src/pages/DetailsPage/assets/profile.jpg b/client/src/pages/DetailsPage/assets/profile.jpg
deleted file mode 100644
index e69da09..0000000
Binary files a/client/src/pages/DetailsPage/assets/profile.jpg and /dev/null differ
diff --git a/client/src/pages/DetailsPage/assets/types/movieTypes.ts b/client/src/pages/DetailsPage/assets/types/movieTypes.ts
index 3666968..4c8f88f 100644
--- a/client/src/pages/DetailsPage/assets/types/movieTypes.ts
+++ b/client/src/pages/DetailsPage/assets/types/movieTypes.ts
@@ -1,45 +1,63 @@
export interface Movie {
+ docId: string;
title: string;
+ titleEng: string;
description: string;
genre: string;
- running_time: string;
- poster_url: string;
+ runtime: string;
+ repRlsDate: string;
+ nation: string;
+ rating: string;
+ posterUrl: string;
score: number;
- review_count: 6;
- 스태프: Staff[];
- 배우: Actor[];
-}
-
-export interface Staff {
- director: string;
+ review_count: number;
+ directorNm: string;
+ trailer: null | string;
+ backdrop: null | string;
+ actors: Actor[];
+ stills: string[];
+ reviews: ReviewContent[];
}
export interface Actor {
actor: string;
-}
-
-export interface Review {
- rev: ReviewContent[];
+ role: string;
}
export interface ReviewContent {
+ docId: string;
+ reviewId: number;
score: number;
- username: string;
content: string;
+ likes: number;
tags: string[];
- like: number;
+ user: User; // 백엔드쪽에서 아직구현x
}
+export interface User {
+ memberId: number;
+ username: string;
+ profile_img: string | null;
+}
+
+// search 데이터에서도 사용(같은 형태)
export interface Recommend {
- id: number;
+ docId: string;
title: string;
- release_date: string;
+ repRlsDate: string;
score: number;
- poster_url: string;
+ posterUrl: string;
+}
+
+export interface PageInfo {
+ page: number;
+ size: number;
+ totalElements: number;
+ totalPages: number;
}
-export interface MovieDataResponse {
+export interface MovieDetailData {
movie: Movie;
- review: Review;
- recommend: Recommend[];
+ pageInfo: PageInfo;
+ recommended_movies: Recommend[];
}
diff --git a/client/src/pages/ErrorPage/ErrorPage.tsx b/client/src/pages/ErrorPage/ErrorPage.tsx
new file mode 100644
index 0000000..1a89ada
--- /dev/null
+++ b/client/src/pages/ErrorPage/ErrorPage.tsx
@@ -0,0 +1,19 @@
+import { Link } from 'react-router-dom';
+
+const ErrorPage = () => {
+ return (
+ ) => {
+ setUserEmail(e.target.value);
+ };
+
+ const handlePasswordChange = (e: React.ChangeEvent) => {
+ setUserPassword(e.target.value);
+ };
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
@@ -21,44 +28,40 @@ const LoginPage: React.FC = () => {
}
try {
- const response = await axios.post(
- `${URL}/login`, // API 주소
- JSON.stringify({
- email: userEmail,
- password: userPassword,
- }),
- {
- headers: {
- 'Content-Type': 'application/json',
- 'Access-Control-Allow-Origin': '*',
- withCredentials: true,
- },
- }
- );
-
- console.log(response.headers);
- window.alert('님, 환영합니다!');
- navigate('/');
+ const response = await api.post('/auth/login', {
+ email: userEmail,
+ password: userPassword,
+ });
+ const authHeader = response.headers.authorization;
+ if (authHeader && authHeader.startsWith('Bearer ')) {
+ setCookie('jwtToken', authHeader.substring(7));
+ }
+ if (response.status === 200) {
+ window.alert('환영합니다!');
+ navigate('/');
+ } else {
+ window.alert('아이디 또는 비밀번호를 다시 확인해 주세요.');
+ }
} catch (err) {
console.log(err);
- window.alert('로그인에 실패하였습니다.');
+ window.alert('아이디 또는 비밀번호를 다시 확인해 주세요.');
}
};
return (
- ('name');
+ const [reviews, setReview] = useState([]);
+ const [reviewCounter, setReviewCounter] = useState(0);
+
+ const [user, setUser] = useState({
+ username: 'name',
+ reviews: reviewCounter,
+ memberId: 0,
+ });
+
+ useEffect(() => {
+ const fetchInfo = async () => {
+ try {
+ const res = await axios.get(
+ 'http://ec2-54-180-85-209.ap-northeast-2.compute.amazonaws.com:8080/members/mypage',
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+
+ if (res.status === 200) {
+ const data = res.data;
+ // console.log(data);
+ // setName(data.username);
+ setUser({
+ username: data.username,
+ reviews: 0,
+ memberId: data.memberId,
+ });
+ setIsLoading(false);
+ // console.log(user);
+ } else {
+ console.log('failed to fetch UserInfo:', res.data);
+ }
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ fetchInfo();
+ }, []);
+ if (isLoading) {
+ return = ({ movies }) => {
+ return (
+ ) => {
+ setName(e.target.value);
+ };
+
+ const handlePwChange = (e: React.ChangeEvent) => {
+ setPw(e.target.value);
+ };
+
+ const submitChange = () => {
+ // post 요청 보내기
+ axios({
+ method: 'post',
+ url: '/',
+ data: {
+ username: name,
+ password: pw,
+ image: img,
+ },
+ })
+ .then((res) => {
+ console.log(res);
+ console.log('수정 완료');
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ };
+
+ return (
+ (false);
+ const openInfoEditModal = useCallback(() => {
+ setModalOpen(!isModalOpen);
+ }, []);
+
+ return (
+ (`/members/${id}/reviews`);
+ return response.data;
+ } catch {
+ console.log('404 error');
+ }
+}
diff --git a/client/src/pages/MyPage/assets/api/axiosinstance.ts b/client/src/pages/MyPage/assets/api/axiosinstance.ts
new file mode 100644
index 0000000..9281467
--- /dev/null
+++ b/client/src/pages/MyPage/assets/api/axiosinstance.ts
@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+// const API = axios.create({
+// baseURL: import.meta.env.REACT_APP_API_URL,
+// });
+
+const API = axios.create({
+ baseURL: 'http://ec2-54-180-85-209.ap-northeast-2.compute.amazonaws.com:8080/',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ withCredentials: true,
+});
+
+export default API;
diff --git a/client/src/pages/MyPage/assets/types/User.ts b/client/src/pages/MyPage/assets/types/User.ts
new file mode 100644
index 0000000..9279844
--- /dev/null
+++ b/client/src/pages/MyPage/assets/types/User.ts
@@ -0,0 +1,27 @@
+export interface User {
+ username: string;
+ reviews: number;
+ memberId: number;
+}
+
+export interface UserInfoRes {
+ username: string;
+ profile_Img: string;
+ memberId: number;
+}
+
+export interface BookmarkDataResponse {
+ movie: {
+ docId: number;
+ title: string;
+ repRlsDate: string;
+ posterUrl: string;
+ };
+ rev: {
+ score: number;
+ username: string;
+ content: string;
+ tags: string[];
+ like: number;
+ };
+}
diff --git a/client/src/pages/RedirectPage/RedirectPage.tsx b/client/src/pages/RedirectPage/RedirectPage.tsx
new file mode 100644
index 0000000..8fa8bb4
--- /dev/null
+++ b/client/src/pages/RedirectPage/RedirectPage.tsx
@@ -0,0 +1,35 @@
+import axios from 'axios';
+import { useEffect } from 'react';
+import Spinner from '../../components/Spinner';
+
+//카카오로그인 리다이렉트 페이지라고 가정, 인가코드 받아서 서버에 넘기고 엑세스 토큰 받아오는 부분
+const RedirectPage = () => {
+ const getAccessToken = async (kakaoAuthCode: string): Promise => {
+ try {
+ const response = await axios.post('http://localhost:3000/login', { kakaoAuthCode }); //추후 주소 변경
+ const accessToken = response.data.accessToken;
+ // const user = response.data.user;
+ // console.log(user);
+ localStorage.setItem('AC_Token', accessToken);
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ useEffect(() => {
+ const kakaoAuthCode = new URL(window.location.href).searchParams.get('code');
+ // console.log('코드잘오니?:', kakaoAuthCode); 잘 오는 거 확인! 구현 완료 후 삭제
+ if (kakaoAuthCode) {
+ getAccessToken(kakaoAuthCode);
+ }
+ }, []);
+
+ return (
+ ([]);
+ const [highScoreData, setHighScoreData] = useState([]);
+ const [isLoading, setIsLoading] = useState(true);
+ const [isError, setIsError] = useState(false);
+
+ const [searchParams] = useSearchParams();
+ const keyword = searchParams.get('keyword');
+
+ // 해당 검색데이터 get 요청 // 예상 endpoint: `/search?keyword=${keyword}`
+ // 목업 데이터 `/mockupdata/searchdata.json`
+ useEffect(() => {
+ const fetchSearchData = async () => {
+ try {
+ const searchResponse = await api.get(`/search?keyword=${keyword}`);
+
+ setSearchData(searchResponse.data.movie);
+ setHighScoreData(searchResponse.data.recommended_movies);
+ setIsLoading(false);
+ } catch (err) {
+ console.error(err);
+ setIsError(true);
+ setIsLoading(false);
+ }
+ };
+ fetchSearchData();
+ }, [keyword]);
+
+ return (
+ <>
+ {isError ? (
+ ) => {
+ setuserName(e.target.value);
+ };
+
+ const handleEmailChange = (e: React.ChangeEvent) => {
+ setUserEmail(e.target.value);
+ };
- const signupOnClickHandler = async (e: React.FormEvent) => {
+ const handlePasswordChange = (e: React.ChangeEvent) => {
+ setUserPassword(e.target.value);
+ };
+
+ const handleConfirmPasswordChange = (e: React.ChangeEvent) => {
+ setConfirmPassword(e.target.value);
+ };
+
+ const handleSignup = async (e: React.FormEvent) => {
e.preventDefault();
if (isValid) {
try {
- const response = await axios.post(
- `${URL}/signup`, //api 나오는 대로 변경
- JSON.stringify({
- name: displayName,
- email: userEmail,
- password: userPassword,
- }),
- {
- headers: {
- 'Content-Type': 'application/json',
- 'Access-Control-Allow-Origin': '*',
- withCredentials: true,
- },
- }
- );
-
+ const response = await api.post('/members', {
+ email: userEmail,
+ username: userName,
+ password: userPassword,
+ });
console.log(response.headers);
window.alert('회원가입에 성공하였습니다.');
navigate('/login');
} catch (err) {
- console.log(err);
- window.alert('회원가입에 실패하였습니다.');
+ if (isAxiosError(err) && err.response?.status === 409) {
+ window.alert('이미 사용 중인 이름 또는 이메일입니다.');
+ } else {
+ console.log(err);
+ window.alert('회원가입에 실패하였습니다.');
+ }
}
}
};
return (
-
-
+
);
};
diff --git a/client/src/pages/DetailsPage/assets/actor-1.jpg b/client/src/pages/DetailsPage/assets/actor-1.jpg
deleted file mode 100644
index a211741..0000000
Binary files a/client/src/pages/DetailsPage/assets/actor-1.jpg and /dev/null differ
diff --git a/client/src/pages/DetailsPage/assets/actress-1.jpg b/client/src/pages/DetailsPage/assets/actress-1.jpg
deleted file mode 100644
index 1043441..0000000
Binary files a/client/src/pages/DetailsPage/assets/actress-1.jpg and /dev/null differ
diff --git a/client/src/pages/DetailsPage/assets/api/axiosInstance.ts b/client/src/pages/DetailsPage/assets/api/axiosInstance.ts
index 081df0a..fb196fb 100644
--- a/client/src/pages/DetailsPage/assets/api/axiosInstance.ts
+++ b/client/src/pages/DetailsPage/assets/api/axiosInstance.ts
@@ -1,7 +1,10 @@
import axios from 'axios';
const api = axios.create({
- baseURL: import.meta.env.REACT_APP_API_URL,
+ baseURL: 'http://ec2-54-180-85-209.ap-northeast-2.compute.amazonaws.com:8080',
+ // headers: {
+ // 'Content-Type': 'application/json',
+ // },
});
export default api;
diff --git a/client/src/pages/DetailsPage/assets/api/movieApi.ts b/client/src/pages/DetailsPage/assets/api/movieApi.ts
deleted file mode 100644
index 81c2c6d..0000000
--- a/client/src/pages/DetailsPage/assets/api/movieApi.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// 실제 데이터 사용시 사용할 코드
-import axios from 'axios';
-// import api from './axiosInstance';
-// import { Review } from '../types/reviewTypes';
-import { MovieDataResponse } from '../types/movieTypes';
-
-// export const getMovies = async (): Promise
+
- {review.username}
+ {/* 유저관련 정보 아직 서버로부터 안들어옴 */}
+ {review.user.username ? review.user.username : 'user'}
+
+
+ );
+};
+
+export default ErrorPage;
diff --git a/client/src/pages/LoginPage/LoginPage.tsx b/client/src/pages/LoginPage/LoginPage.tsx
index e7c3e7f..1b3f145 100644
--- a/client/src/pages/LoginPage/LoginPage.tsx
+++ b/client/src/pages/LoginPage/LoginPage.tsx
@@ -1,7 +1,8 @@
import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
-import axios from 'axios';
+import api from '../../utils/api';
import SocialLogin from '../../components/SocialLogin';
+import { setCookie } from '../../utils/cookie';
const LoginPage: React.FC = () => {
const [userEmail, setUserEmail] = useState('');
@@ -10,7 +11,13 @@ const LoginPage: React.FC = () => {
const navigate = useNavigate();
- const URL = '';
+ const handleEmailChange = (e: React.ChangeEventOOPS!
+요청하신 페이지를 찾을 수 없습니다.
+ +
-
+
+
+
);
};
diff --git a/client/src/pages/MainPage/Main.tsx b/client/src/pages/MainPage/Main.tsx
deleted file mode 100644
index 06e61f5..0000000
--- a/client/src/pages/MainPage/Main.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import MoviePoster from '../UI/MoivePoster';
-
-const movie = {
- title: 'Avengers: Endgame',
- releaseDate: '2019',
- rating: 8.4,
- bookmarked: true,
- posterUrl: 'https://m.media-amazon.com/images/I/91zzAMkVCUL._AC_UF894,1000_QL80_.jpg',
-};
-
-const Main = () => {
- return (
-
-
- );
-};
-
-export default Main;
diff --git a/client/src/pages/MainPage/MainPage.tsx b/client/src/pages/MainPage/MainPage.tsx
new file mode 100644
index 0000000..4324f3c
--- /dev/null
+++ b/client/src/pages/MainPage/MainPage.tsx
@@ -0,0 +1,15 @@
+import BoxOfficeMovies from '../UI/BoxOffice';
+import HighRatings from '../UI/HighRatings';
+import HighReviewCount from '../UI/HightReviewCount';
+
+const MainPage: React.FC = () => {
+ return (
+
-
-
+
+ );
+};
+
+export default MainPage;
diff --git a/client/src/pages/MyPage/Bookmarks/MyBookmarks.tsx b/client/src/pages/MyPage/Bookmarks/MyBookmarks.tsx
new file mode 100644
index 0000000..ed5d457
--- /dev/null
+++ b/client/src/pages/MyPage/Bookmarks/MyBookmarks.tsx
@@ -0,0 +1,58 @@
+import ShortMovieList from '../UI/ShortMovieList';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { getCookie } from '../../../utils/cookie';
+
+interface MyBookmarkProps {
+ id: number;
+}
+
+const MyBookmarks = ({ id }: MyBookmarkProps) => {
+ const token = getCookie('jwtToken');
+ const [bookmarks, setBookmark] = useState([]);
+ useEffect(() => {
+ const fetchBookmarks = async () => {
+ try {
+ const res = await axios.get(
+ `http://ec2-54-180-85-209.ap-northeast-2.compute.amazonaws.com:8080/members/${id}/bookmarks`,
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+ if (res.status === 200) {
+ const data = res.data;
+ setBookmark(data);
+ } else {
+ console.log('Failed to fetch bookmark data:', res.data);
+ }
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ fetchBookmarks();
+ }, [id, token]);
+
+ // api 연결 후 수정
+ const bookmarkList = [...bookmarks];
+ const moviesToRender = bookmarkList.slice(0, 5);
+ const bookmarksCounter = bookmarkList.length;
+
+ return (
+
+
+ );
+};
+
+export default MyBookmarks;
diff --git a/client/src/pages/MyPage/MyPage.tsx b/client/src/pages/MyPage/MyPage.tsx
new file mode 100644
index 0000000..84cbf8b
--- /dev/null
+++ b/client/src/pages/MyPage/MyPage.tsx
@@ -0,0 +1,76 @@
+import { useState, useEffect } from 'react';
+import axios from 'axios';
+import MyBookmarks from './Bookmarks/MyBookmarks';
+import MyReviews from './Reviews/MyReviews';
+import UserInfo from './UserInfo/UserInfo';
+import DeleteUserBtn from './UI/deleteUserBtn';
+import { User } from './assets/types/User';
+import { getCookie } from '../../utils/cookie';
+
+const MyPage = () => {
+ //TODO: hook으로 분리
+ const token = getCookie('jwtToken');
+ const [isLoading, setIsLoading] = useState(true);
+ // const [username, setName] = useState 나의 북마크
+
+ {bookmarksCounter > 0 ? (
+
+ 마음에 드는 영화를 북마크해 보세요.
+ )}
+ Loading...
;
+ }
+ return (
+
+
+ );
+};
+
+export default MyPage;
diff --git a/client/src/pages/MyPage/Reviews/MyReviews.tsx b/client/src/pages/MyPage/Reviews/MyReviews.tsx
new file mode 100644
index 0000000..4cd6589
--- /dev/null
+++ b/client/src/pages/MyPage/Reviews/MyReviews.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import ShortMovieList from '../UI/ShortMovieList';
+import axios from 'axios';
+import { getCookie } from '../../../utils/cookie';
+
+interface MyReviewProps {
+ reviews: any;
+ setReview: any;
+ reviewCounter: number;
+ setReviewCount: any;
+}
+
+const MyReviews = ({ reviews, setReview, reviewCounter, setReviewCount }: MyReviewProps) => {
+ // TODO: 페이지네이션 컴포넌트 만들고 페이지네이션으로 변경
+ const token = getCookie('jwtToken');
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ const fetchReviews = async () => {
+ try {
+ const res = await axios.get(
+ 'http://ec2-54-180-85-209.ap-northeast-2.compute.amazonaws.com:8080/members/reviews?page=1',
+ {
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ }
+ );
+ if (res.status === 200) {
+ 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);
+ }
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ fetchReviews();
+ }, [reviewCounter]);
+
+ if (isLoading) {
+ return Loading...
;
+ }
+ return (
+
+
+ );
+};
+
+export default MyReviews;
diff --git a/client/src/pages/MyPage/UI/ProfileImg.tsx b/client/src/pages/MyPage/UI/ProfileImg.tsx
new file mode 100644
index 0000000..2d2ffb3
--- /dev/null
+++ b/client/src/pages/MyPage/UI/ProfileImg.tsx
@@ -0,0 +1,13 @@
+interface props {
+ url: string;
+}
+
+const ProfileImg = ({ url }: props) => {
+ return (
+ 내가 작성한 리뷰
+
+ {reviewCounter > 0 ? (
+
+ 아직 작성한 리뷰가 없어요.
+ )}
+
+ 
+
+ );
+};
+
+export default ProfileImg;
diff --git a/client/src/pages/MyPage/UI/ShortMovieList.tsx b/client/src/pages/MyPage/UI/ShortMovieList.tsx
new file mode 100644
index 0000000..2e059b0
--- /dev/null
+++ b/client/src/pages/MyPage/UI/ShortMovieList.tsx
@@ -0,0 +1,36 @@
+import MoviePoster from '../../UI/MoivePoster';
+
+interface movieListProps {
+ movies: any;
+}
+
+interface MoviePosterProps {
+ movie: {
+ docId: string;
+ title: string;
+ releaseDate: string;
+ score: number;
+ bookmarked: boolean;
+ posters: string;
+ };
+}
+
+const shortMovieList: React.FC
+ {movies.map((movie: MoviePosterProps, index: number) => (
+
+ );
+};
+
+export default shortMovieList;
diff --git a/client/src/pages/MyPage/UI/deleteUserBtn.tsx b/client/src/pages/MyPage/UI/deleteUserBtn.tsx
new file mode 100644
index 0000000..e4374a8
--- /dev/null
+++ b/client/src/pages/MyPage/UI/deleteUserBtn.tsx
@@ -0,0 +1,36 @@
+import axios from 'axios';
+
+interface DeleteBtnProps {
+ id: number;
+}
+
+const DeleteUserBtn = ({ id }: DeleteBtnProps) => {
+ const deleteUser = async () => {
+ try {
+ const res = await axios.delete(
+ `http://ec2-54-180-85-209.ap-northeast-2.compute.amazonaws.com:8080/members/${id}`
+ );
+ if (res.status === 200) {
+ console.log('user deleted');
+ } else {
+ console.log('failed to delete user:', res);
+ }
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ const handleBtnClick = () => {
+ deleteUser();
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default DeleteUserBtn;
diff --git a/client/src/pages/MyPage/UserInfo/InfoEditModal.tsx b/client/src/pages/MyPage/UserInfo/InfoEditModal.tsx
new file mode 100644
index 0000000..7b943e1
--- /dev/null
+++ b/client/src/pages/MyPage/UserInfo/InfoEditModal.tsx
@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+interface InfoProps {
+ setModalOpen: any;
+ username: string;
+ password: string;
+ imgUrl: string;
+}
+
+const InfoEditModal = ({ setModalOpen, username, password, imgUrl }: InfoProps) => {
+ const [name, setName] = useState(username);
+ const [pw, setPw] = useState(password);
+ const [img, setImgUrl] = useState(imgUrl);
+
+ const cancelChange = () => {
+ setName(username);
+ setPw(password);
+ setImgUrl(imgUrl);
+ setModalOpen(false);
+ };
+
+ const handleNameChange = (e: React.ChangeEvent
+
+ );
+};
+
+export default InfoEditModal;
diff --git a/client/src/pages/MyPage/UserInfo/UserInfo.tsx b/client/src/pages/MyPage/UserInfo/UserInfo.tsx
new file mode 100644
index 0000000..25af082
--- /dev/null
+++ b/client/src/pages/MyPage/UserInfo/UserInfo.tsx
@@ -0,0 +1,56 @@
+import { useCallback, useState } from 'react';
+import { User } from '../assets/types/User';
+import ProfileImg from '../UI/ProfileImg';
+// import InfoEditModal from './InfoEditModal';
+// import axios from 'axios';
+
+//테스트용 유저 정보
+// const user: User = {
+// username: 'Chunsik',
+// password: '1234',
+// image: 'https://media.tenor.com/DtO_BhH5NUAAAAAC/chunsik-%EC%B6%98%EC%8B%9D.gif',
+// reviews: 4,
+// };
+
+interface userInfoProps {
+ info: User;
+}
+
+const UserInfo = ({ info }: userInfoProps) => {
+ const [isModalOpen, setModalOpen] = useState 정보 수정
+
+
+
+
+ 새로운 닉네임:
+
+
+
+
+
+ 새로운 비밀번호:
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default UserInfo;
diff --git a/client/src/pages/MyPage/assets/api/MyBookmarkApi.ts b/client/src/pages/MyPage/assets/api/MyBookmarkApi.ts
new file mode 100644
index 0000000..2b686c1
--- /dev/null
+++ b/client/src/pages/MyPage/assets/api/MyBookmarkApi.ts
@@ -0,0 +1,12 @@
+// import axios from 'axios';
+import API from './axiosinstance';
+import { BookmarkDataResponse } from '../types/User';
+
+export async function getMyBookmarks(id: number) {
+ try {
+ const response = await API.get
+
+ {/*
+
+
+
+ {info.username}
+
+ {`작성한 리뷰: ${info.reviews}개`}
+
+ {isModalOpen && (
+
*/}
+
+
+ );
+};
+
+export default RedirectPage;
diff --git a/client/src/pages/SearchPage/SearchPage.tsx b/client/src/pages/SearchPage/SearchPage.tsx
new file mode 100644
index 0000000..c67ed32
--- /dev/null
+++ b/client/src/pages/SearchPage/SearchPage.tsx
@@ -0,0 +1,109 @@
+import api from '../DetailsPage/assets/api/axiosInstance';
+import { useSearchParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Recommend } from '../DetailsPage/assets/types/movieTypes';
+import Spinner from '../../components/Spinner';
+import ErrorPage from '../ErrorPage/ErrorPage';
+import MoviePoster from '../UI/MoivePoster';
+import searchErrImg from './assets/searchErr.png';
+
+const SearchPage = () => {
+ const [searchData, setSearchData] = useState카카오톡에서 로그인 중!
+
+
+ ) : (
+
+
+ )}
+
+ );
+};
+
+export default SearchPage;
diff --git a/client/src/pages/SearchPage/assets/searchErr.png b/client/src/pages/SearchPage/assets/searchErr.png
new file mode 100644
index 0000000..514b27b
Binary files /dev/null and b/client/src/pages/SearchPage/assets/searchErr.png differ
diff --git a/client/src/pages/SignupPage/SignupPage.tsx b/client/src/pages/SignupPage/SignupPage.tsx
index 3f2e3c5..c425a70 100644
--- a/client/src/pages/SignupPage/SignupPage.tsx
+++ b/client/src/pages/SignupPage/SignupPage.tsx
@@ -1,12 +1,14 @@
import { useState, useEffect } from 'react';
+import { isAxiosError } from 'axios';
import { useNavigate, Link } from 'react-router-dom';
-import axios from 'axios';
+import { emailValidationRegex, pwValidationRegex } from '../../constants/constants';
import SocialLogin from '../../components/SocialLogin';
+import api from '../../utils/api';
const SignupPage: React.FC = () => {
- const [displayName, setDisplayName] = useState('');
- const [displayNameValid, setDisplayNameValid] = useState(false);
- const [displayNameError, setDisplayNameError] = useState('');
+ const [userName, setuserName] = useState('');
+ const [userNameValid, setuserNameValid] = useState(false);
+ const [userNameError, setuserNameError] = useState('');
const [userEmail, setUserEmail] = useState('');
const [userEmailValid, setUserEmailValid] = useState(false);
@@ -22,29 +24,24 @@ const SignupPage: React.FC = () => {
const navigate = useNavigate();
- const URL = '';
-
useEffect(() => {
- if (displayName.length === 0) {
- setDisplayNameValid(false);
- setDisplayNameError('');
- } else if (displayName.length >= 2) {
- setDisplayNameValid(true);
- setDisplayNameError('');
+ if (userName.length === 0) {
+ setuserNameValid(false);
+ setuserNameError('');
+ } else if (userName.length >= 2) {
+ setuserNameValid(true);
+ setuserNameError('');
} else {
- setDisplayNameValid(false);
- setDisplayNameError('이름은 2자 이상이어야 합니다.');
+ setuserNameValid(false);
+ setuserNameError('이름은 2자 이상이어야 합니다.');
}
- }, [displayName]);
+ }, [userName]);
useEffect(() => {
- const regex1 =
- /^(([^<>()\\[\].,;:\s@"]+(\.[^<>()\\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
-
if (userEmail.length === 0) {
setUserEmailValid(false);
setUserEmailError('');
- } else if (regex1.test(userEmail)) {
+ } else if (emailValidationRegex.test(userEmail)) {
setUserEmailValid(true);
setUserEmailError('');
} else {
@@ -54,12 +51,10 @@ const SignupPage: React.FC = () => {
}, [userEmail]);
useEffect(() => {
- const regex2 = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;
-
if (userPassword.length === 0) {
setUserPasswordValid(false);
setUserPasswordError('');
- } else if (regex2.test(userPassword)) {
+ } else if (pwValidationRegex.test(userPassword)) {
setUserPasswordValid(true);
setUserPasswordError('');
} else {
@@ -81,55 +76,64 @@ const SignupPage: React.FC = () => {
}
}, [confirmPassword, userPassword]);
- const isValid = userEmailValid && displayNameValid && userPasswordValid && confirmPasswordValid;
+ const isValid = userEmailValid && userNameValid && userPasswordValid && confirmPasswordValid;
+
+ const handleNameChange = (e: React.ChangeEvent"{keyword}"
+ {/* 검색결과가 없을때 */} + {searchData.length === 0 ? ( + <> +
+ 
+
+ 이런영화는 어떠세요?
+
+ {highScoreData.map((movie, index) => (
+
+
+ ) : (
+ <>
+ {/* 검색결과가 있을때 */}
+ 검색 결과
+
+ {searchData.map((movie, index) => (
+
+ 이런영화는 어떠세요?
+
+ {highScoreData.map((movie, index) => (
+
+
+ )}
+
-