From 8083e4f1f78ae59f01ba8ef917c46ed0bb3816e2 Mon Sep 17 00:00:00 2001 From: ComPhyPark <69303148+ComPhyPark@users.noreply.github.com> Date: Wed, 31 Jan 2024 12:49:17 +0900 Subject: [PATCH] =?UTF-8?q?Fix/=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EC=97=AC=EB=9F=AC=EA=B0=9C=20(#31)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 로그인 필요 시 모달 띄우기 * feat: 메인 페이지 로딩 전 기본 정보 * fix: 코멘트 페이지 로그인 모달 띄우기 * fix: 박스오피스 순위 내평점 * feat: 영화 상세 페이지 평가한 사람수 * fix: 코멘트 리스트 페이지 뒤로가기 * fix: CommentCard 스포일러 * fix: commentcard/mycommentbox 줄 수 제한' * feat: commentcard 좋아요 버튼 * fix: 코멘트 리스트 좋아요 여부 * fix: 좋아요 누른 코멘트 리스트에 좋아요 표시 * fix: 유저 하위 페이지 commentcard 좋아요 반영 * fix: 검색창에서 username 대신 nickname * fix: 코멘트 길면 포스터 작아지는 현상 수정 * fix: 영화상세 페이지 아닌 곳에서는 줄 수 제한 없음 * fix: 메인페이지 기본데이터 약간 수정 * fix: 메인페이지 기본데이터 약간 수정 2 --- src/apis/comment.ts | 20 +++- src/apis/user.ts | 19 ++- src/components/CommentCard.module.scss | 42 +++++-- src/components/CommentCard.tsx | 110 +++++++++++++++--- src/components/CommentInfo.tsx | 17 ++- src/components/Content.tsx | 38 +++--- src/components/ContentList.module.scss | 3 +- src/components/ContentList.tsx | 67 ++++++++--- src/components/MyCommentBox.module.scss | 8 +- src/components/ReplyList.tsx | 9 +- src/components/SearchBar.module.scss | 1 + src/components/SearchUserList.tsx | 6 +- src/components/StarRating.tsx | 5 +- src/pages/CommentListPage.tsx | 23 +++- src/pages/ContentPage.tsx | 2 +- src/pages/user/UserLikesCommentListPage.tsx | 39 +++---- src/pages/user/UserWrittenCommentListPage.tsx | 17 ++- src/type.ts | 1 + 18 files changed, 331 insertions(+), 96 deletions(-) diff --git a/src/apis/comment.ts b/src/apis/comment.ts index 5f42ead..8a54ced 100644 --- a/src/apis/comment.ts +++ b/src/apis/comment.ts @@ -2,11 +2,29 @@ import { BASE_API_URL } from "./const"; export async function getCommentListRequest( movieCD: string, + accessToken?: string, sortQuery?: string, ) { - if (!sortQuery) return fetch(`${BASE_API_URL}/contents/${movieCD}/comments`); + if (!sortQuery) { + return fetch(`${BASE_API_URL}/contents/${movieCD}/comments`, { + method: "GET", + headers: accessToken + ? { + Authorization: "Bearer " + accessToken, + } + : {}, + }); + } return fetch( `${BASE_API_URL}/contents/${movieCD}/comments/?order=${sortQuery}`, + { + method: "GET", + headers: accessToken + ? { + Authorization: "Bearer " + accessToken, + } + : {}, + }, ); } diff --git a/src/apis/user.ts b/src/apis/user.ts index a24109b..7d3cbf3 100644 --- a/src/apis/user.ts +++ b/src/apis/user.ts @@ -37,13 +37,28 @@ export async function postUnFollow(accessToken: string, userId: number) { export async function getUserWrittenComments( userId: number, + accessToken?: string, query?: "like" | "created" | "high-rating" | "low-rating", ) { if (!query) { - return fetch(`${BASE_API_URL}/users/${userId}/comments/`); + return fetch(`${BASE_API_URL}/users/${userId}/comments/`, { + method: "GET", + headers: accessToken + ? { + Authorization: "Bearer " + accessToken, + } + : {}, + }); } - return fetch(`${BASE_API_URL}/users/${userId}/comments/?order=${query}`); + return fetch(`${BASE_API_URL}/users/${userId}/comments/?order=${query}`, { + method: "GET", + headers: accessToken + ? { + Authorization: "Bearer " + accessToken, + } + : {}, + }); } export async function getUserRatingMovies( diff --git a/src/components/CommentCard.module.scss b/src/components/CommentCard.module.scss index 07b9473..b8d40d6 100644 --- a/src/components/CommentCard.module.scss +++ b/src/components/CommentCard.module.scss @@ -53,10 +53,10 @@ margin: 20px 0; display: flex; align-items: center; - height: 150px; + min-height: 120px; .posterBox { width: 20%; - min-width: 100px; + min-width: 20%; img { cursor: pointer; @@ -68,8 +68,7 @@ } .commentTextBox { margin-left: auto; - - height: 120px; + min-height: 120px; margin: 12px 0 15px 0; .movieTitle { @@ -87,17 +86,37 @@ margin: 0px 0px 7px; } .commentText { - display: block; line-height: 24px; font-size: 14px; font-weight: 400; - word-break: break-all; - white-space-collapse: preserve; + white-space: pre-wrap; + word-break: break-word; cursor: pointer; + + .spoiler { + button { + cursor: pointer; + background: none; + border: none; + color: rgb(255, 47, 110); + font-size: 15px; + } + } + } + .commentText.inContentPage { + text-overflow: ellipsis; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 5; + -webkit-box-orient: vertical; } } } + .commentContentContainer.inContentPage { + height: 120px; + } + .commentFeedbackCon { display: flex; align-items: center; @@ -127,9 +146,18 @@ color: $pink; cursor: pointer; } + button:disabled { + color: rgba(255, 47, 110, 0.5); + cursor: default; + } .liked { background: rgb(255, 47, 110); color: rgb(255, 255, 255); } + .liked:disabled { + background: rgba(255, 47, 110, 0.5); + color: rgb(255, 255, 255); + cursor: default; + } } } diff --git a/src/components/CommentCard.tsx b/src/components/CommentCard.tsx index 1428ad9..c152634 100644 --- a/src/components/CommentCard.tsx +++ b/src/components/CommentCard.tsx @@ -2,10 +2,48 @@ import { CommentType } from "../type"; import styles from "./CommentCard.module.scss"; import profileDefault from "../assets/user_default.jpg"; -import { Link, useNavigate } from "react-router-dom"; +import { + Link, + useLocation, + useNavigate, + useOutletContext, +} from "react-router-dom"; +import { useState } from "react"; +import { useAuthContext } from "../contexts/authContext"; +import { OutletContextType } from "../pages/Layout"; +import { postToggleCommentLike } from "../apis/comment"; +import { defaultResponseHandler } from "../apis/custom"; export default function CommentCard({ comment }: { comment: CommentType }) { // user 하위 페이지에서 코멘트를 불러오는 경우, movie의 정보를 이용해야 한다. + console.log(comment); + const { accessToken } = useAuthContext(); + const { setCurrentModal } = useOutletContext(); + const likeExceptMe = + (comment.like_count ?? comment.likes_count) - + (comment.liked_by_user ? 1 : 0); + const [likeByMe, setLikeByMe] = useState(comment.liked_by_user); + const [likeGoing, setLikeGoing] = useState(false); + const [spoiler, setSpoiler] = useState(comment.has_spoiler); + const inContentPage = /^\/contents\/\d+$/.test(location.pathname); + + const likeClicked = () => { + if (!accessToken) { + setCurrentModal("login"); + return; + } + setLikeGoing(true); + postToggleCommentLike(comment.id, accessToken) + .then(defaultResponseHandler) + .then(() => { + setLikeByMe(!likeByMe); + setLikeGoing(false); + }) + .catch((e) => { + setLikeGoing(false); + console.log(e); + }); + }; return (
  • @@ -27,8 +65,17 @@ export default function CommentCard({ comment }: { comment: CommentType }) { )} -
    - +
    +
    @@ -36,20 +83,39 @@ export default function CommentCard({ comment }: { comment: CommentType }) { src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgZmlsbD0iIzc4Nzg3OCI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik02Ljc1IDkuNDg1aC0zYTEgMSAwIDAgMC0xIDF2MTBhMSAxIDAgMCAwIDEgMWgzYTEgMSAwIDAgMCAxLTF2LTEwYTEgMSAwIDAgMC0xLTFNMjAuNjU3IDguNTY2YTIuMzYzIDIuMzYzIDAgMCAwLTEuNzc5LS44MTNIMTYuNjJsLjE2NC0uNjI3Yy4xMzctLjUyOC4yMDEtMS4xMi4yMDEtMS44NjMgMC0xLjkxOS0xLjM3NS0yLjc3OC0yLjczOC0yLjc3OC0uNDQ0IDAtLjc2Ni4xMjMtLjk4Ni4zNzYtLjIuMjI3LS4yODIuNTMtLjI0My45MzVsLjAzIDEuMjMtMi45MDMgMi45NGMtLjU5My42LS44OTQgMS4yMy0uODk0IDEuODcydjkuNjQ3YS41LjUgMCAwIDAgLjUuNWg3LjY4N2EyLjM4OCAyLjM4OCAwIDAgMCAyLjM0OC0yLjA3bDEuNDQ1LTcuNDUyYTIuNDQgMi40NCAwIDAgMC0uNTc0LTEuODk3Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K" alt="" /> - {comment.like_count ?? comment.likes_count} + {likeExceptMe + (likeByMe ? 1 : 0)} {comment.reply_count}
    +
    + +
    • ); } -function CommentContentBox({ comment }: { comment: CommentType }) { +function CommentContentBox({ + comment, + spoiler, + setSpoiler, +}: { + comment: CommentType; + spoiler: boolean; + setSpoiler: (s: boolean) => void; +}) { const navigate = useNavigate(); + const location = useLocation(); const onHiddenMoviedata = window.location.pathname.includes("contents"); + const inContentPage = /^\/contents\/\d+$/.test(location.pathname); return ( <> @@ -65,7 +131,12 @@ function CommentContentBox({ comment }: { comment: CommentType }) { )}
    -
    +
    {!onHiddenMoviedata && (

    )} - { - navigate(`/comments/${comment.id}`); - }} - > - {comment.content} - + {spoiler ? ( +

    + 이 코멘트에는 스포일러가 있습니다.{" "} + +
    + ) : ( + { + navigate(`/comments/${comment.id}`); + }} + > + {comment.content} + + )}
    diff --git a/src/components/CommentInfo.tsx b/src/components/CommentInfo.tsx index e186157..e7a82d0 100644 --- a/src/components/CommentInfo.tsx +++ b/src/components/CommentInfo.tsx @@ -1,4 +1,4 @@ -import { Link, useParams } from "react-router-dom"; +import { Link, useOutletContext, useParams } from "react-router-dom"; import userImage from "../assets/user_default.jpg"; import styles from "./CommentInfo.module.scss"; @@ -16,6 +16,7 @@ import { getCommentReplies } from "../apis/comment"; import DeleteComReplyModal from "./DeleteComReplyModal"; import { MdEdit } from "react-icons/md"; import { RiDeleteBin6Line } from "react-icons/ri"; +import { OutletContextType } from "../pages/Layout"; function CommentHeader({ comment }: { comment: CommentType }) { const { movie, rating, created_by, created_at } = comment; @@ -155,7 +156,8 @@ function LikeReplyBar({ ) => void; refetchComment: () => void; }) { - const { accessToken } = useAuthContext(); + const { isLogined, accessToken } = useAuthContext(); + const { setCurrentModal } = useOutletContext(); const { id: commentId } = useParams(); return ( @@ -164,7 +166,10 @@ function LikeReplyBar({
    • { - myState?.my_state === "want_to_watch" - ? setMyStateHandler(null) - : setMyStateHandler("want_to_watch"); + isLogined + ? myState?.my_state === "want_to_watch" + ? setMyStateHandler(null) + : setMyStateHandler("want_to_watch") + : setLayoutCurrentModal("login"); }} >
      @@ -159,9 +162,11 @@ function ContentPanel({
    • { - content.my_comment !== null - ? setCurrentModal("updateComment") - : setCurrentModal("createComment"); + isLogined + ? content.my_comment !== null + ? setCurrentModal("updateComment") + : setCurrentModal("createComment") + : setLayoutCurrentModal("login"); }} >
      @@ -173,9 +178,11 @@ function ContentPanel({
    • { - myState?.my_state === "watching" - ? setMyStateHandler(null) - : setMyStateHandler("watching"); + isLogined + ? myState?.my_state === "watching" + ? setMyStateHandler(null) + : setMyStateHandler("watching") + : setLayoutCurrentModal("login"); }} >
      @@ -263,8 +270,9 @@ function ContentCast({ content }: { content: MovieType }) { function ContentComments({ content }: { content: MovieType }) { const [comments, setComments] = useState([]); const [commentsLength, setCommentsLength] = useState(null); + const { accessToken } = useAuthContext(); useEffect(() => { - getCommentListRequest(content.movieCD) + getCommentListRequest(content.movieCD, accessToken ?? undefined) .then(defaultResponseHandler) .then((data: CommentsResType) => { const commentsResponse = data; diff --git a/src/components/ContentList.module.scss b/src/components/ContentList.module.scss index 56b3891..d50095f 100644 --- a/src/components/ContentList.module.scss +++ b/src/components/ContentList.module.scss @@ -59,7 +59,8 @@ border-radius: 5px; overflow: hidden; aspect-ratio: 0.6862; - img { + background-color: $light-gray; + .poster { width: 100%; height: 100%; } diff --git a/src/components/ContentList.tsx b/src/components/ContentList.tsx index 58c40b1..cd33760 100644 --- a/src/components/ContentList.tsx +++ b/src/components/ContentList.tsx @@ -25,13 +25,21 @@ function ContentCell(content: MovieType, rank: number) {
    • - + {content.poster ? ( + + ) : ( +
      + )}
      {rank}
      {content.title_ko}
      - {content.release_date.substring(0, 4)} · {content.prod_country} + {content.prod_country + ? content.release_date.substring(0, 4) + + " · " + + content.prod_country + : "ㅤ"}
      {content.my_rate ? (
      @@ -64,7 +72,29 @@ export default function ContentList({ title, order }: ContentListProps) { const [isLast, setIsLast] = useState(false); const [isFirst, setIsFirst] = useState(true); - const [contents, setContents] = useState([]); + const [contents, setContents] = useState( + new Array(9) + .fill({ + movieCD: 0, + title_ko: "ㅤ", + release_date: "", + prod_country: "", + poster: "", + average_rate: null, + my_rate: null, + }) + .concat([ + { + movieCD: 0, + title_ko: "ㅤ", + release_date: "", + prod_country: "", + poster: "", + average_rate: 5, + my_rate: null, + }, + ]), + ); const { accessToken } = useAuthContext(); @@ -73,25 +103,28 @@ export default function ContentList({ title, order }: ContentListProps) { ? getContentListRequest(order, accessToken ?? undefined) .then(defaultResponseHandler) .then((data) => { - console.log(title, order); - console.log(data); - setContents( - data.map((movieRes: { movie: MovieType; rank: number }) => { - const movie = movieRes.movie; - return { - ...movie, - poster: movie.poster.replace("http", "https"), - }; - }), + data.map( + (movieRes: { + movie: MovieType; + my_rate: number | null; + rank: number; + }) => { + const movie = movieRes.movie; + return { + ...movie, + poster: movie.poster.replace("http", "https"), + my_rate: movieRes.my_rate + ? { my_rate: movieRes.my_rate } + : null, + }; + }, + ), ); }) : getContentListRequest(order, accessToken ?? undefined) .then(defaultResponseHandler) .then((data) => { - console.log(title, order); - console.log(data); - setContents( data.map((movie: MovieType) => { return { @@ -101,7 +134,7 @@ export default function ContentList({ title, order }: ContentListProps) { }), ); }); - }, [order]); + }, [order, accessToken]); function handleRightClick() { const scrollWidth = carouselUlRef.current?.scrollWidth; diff --git a/src/components/MyCommentBox.module.scss b/src/components/MyCommentBox.module.scss index e4f8443..2c935cc 100644 --- a/src/components/MyCommentBox.module.scss +++ b/src/components/MyCommentBox.module.scss @@ -26,12 +26,18 @@ } .commentText { - width: 100%; + flex: 1 1 0%; margin-right: 20px; line-height: 20px; font-size: 15px; font-weight: 400; color: $light-black; + word-break: break-word; + text-overflow: ellipsis; + overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; @media (max-width: $small-screen) { text-align: center; diff --git a/src/components/ReplyList.tsx b/src/components/ReplyList.tsx index 19ff721..eb1ac5e 100644 --- a/src/components/ReplyList.tsx +++ b/src/components/ReplyList.tsx @@ -1,6 +1,6 @@ import styles from "./ReplyList.module.scss"; import userImage from "../assets/user_default.jpg"; -import { Link } from "react-router-dom"; +import { Link, useOutletContext } from "react-router-dom"; import elapsedTime from "../utils/elapsedTime"; import { BsThreeDotsVertical } from "react-icons/bs"; @@ -11,6 +11,7 @@ import { getNextCommentReplies, postToggleReplyLike } from "../apis/comment"; import { ReplyType } from "../type"; import { useAuthContext } from "../contexts/authContext"; +import { OutletContextType } from "../pages/Layout"; function Reply({ reply, @@ -27,6 +28,7 @@ function Reply({ reply.like_count, ); const { accessToken, myUserData } = useAuthContext(); + const { setCurrentModal } = useOutletContext(); useEffect(() => { document.addEventListener("click", handleOutsideClick); @@ -61,7 +63,10 @@ function Reply({ diff --git a/src/components/StarRating.tsx b/src/components/StarRating.tsx index 42cc64c..9485f41 100644 --- a/src/components/StarRating.tsx +++ b/src/components/StarRating.tsx @@ -8,6 +8,8 @@ import { } from "../apis/content"; import { useAuthContext } from "../contexts/authContext"; import { defaultResponseHandler } from "../apis/custom"; +import { useOutletContext } from "react-router-dom"; +import { OutletContextType } from "../pages/Layout"; type StarProps = { fill: "full" | "half" | "empty"; @@ -72,6 +74,7 @@ export default function StarRating({ const [selectedRating, setSelectedRating] = useState(savedRating); const [hover, setHover] = useState(false); const { isLogined, accessToken } = useAuthContext(); + const { setCurrentModal } = useOutletContext(); const onMouseEnterStar = (rating: number) => { setSelectedRating(rating); @@ -83,7 +86,7 @@ export default function StarRating({ }; const onClickStarHandler = (rating: number) => { if (!isLogined) { - // loginModal; + setCurrentModal("login"); } else { if (myRate) { if (rating === savedRating) { diff --git a/src/pages/CommentListPage.tsx b/src/pages/CommentListPage.tsx index dc057c9..dbf89bb 100644 --- a/src/pages/CommentListPage.tsx +++ b/src/pages/CommentListPage.tsx @@ -2,12 +2,13 @@ import styles from "./CommentListPage.module.scss"; import CommentCard from "../components/CommentCard"; import { useEffect, useState } from "react"; import { CommentType } from "../type"; -import { useParams } from "react-router-dom"; +import { Link, useParams } from "react-router-dom"; import { getCommentListRequest } from "../apis/comment"; import { defaultResponseHandler } from "../apis/custom"; import { SortQueryType } from "../type"; import SortMoadal from "../components/SortModal"; import useChangeTitle from "../hooks/useChangeTitle"; +import { useAuthContext } from "../contexts/authContext"; export default function CommentListPage() { const { id: movieCD } = useParams(); @@ -16,10 +17,11 @@ export default function CommentListPage() { const [sortQuery, setSortQuery] = useState("like"); const [currentModal, setCurrenModal] = useState(null); const { setTitle } = useChangeTitle(); + const { accessToken } = useAuthContext(); useEffect(() => { movieCD && - getCommentListRequest(movieCD, sortQuery) + getCommentListRequest(movieCD, accessToken ?? undefined, sortQuery) .then(defaultResponseHandler) .then((data) => { const commentsResponse = data; @@ -38,7 +40,14 @@ export default function CommentListPage() { if (window.innerHeight + scrollTop + 150 >= scrollHeight) { nextCommentsUrl && - fetch(nextCommentsUrl) + fetch(nextCommentsUrl, { + method: "GET", + headers: accessToken + ? { + Authorization: "Bearer " + accessToken, + } + : {}, + }) .then(defaultResponseHandler) .then((data) => { const commentsResponse = data; @@ -65,7 +74,9 @@ export default function CommentListPage() { )}
      -
        - {comments.map((comment, index) => ( - // commentId가 같은 것이 있어서 index 임시 + {comments.map((comment) => ( + ))}
      diff --git a/src/pages/ContentPage.tsx b/src/pages/ContentPage.tsx index 656dbb6..2fabba0 100644 --- a/src/pages/ContentPage.tsx +++ b/src/pages/ContentPage.tsx @@ -30,7 +30,7 @@ export default function ContentPage() { .catch(() => { alert("잘못된 요청입니다"); }); - }, [id, accessToken, refetch]); + }, [id, accessToken, setTitle, refetch]); return (
      diff --git a/src/pages/user/UserLikesCommentListPage.tsx b/src/pages/user/UserLikesCommentListPage.tsx index 08c72df..af82958 100644 --- a/src/pages/user/UserLikesCommentListPage.tsx +++ b/src/pages/user/UserLikesCommentListPage.tsx @@ -24,7 +24,11 @@ export default function UserLikesCommentListPage() { .then(defaultResponseHandler) .then((data) => { const commentsResponse = data; - setComments(commentsResponse.results); + setComments( + commentsResponse.results.map((comment: CommentType) => { + return { ...comment, liked_by_user: true }; + }), + ); setNextCommentsUrl(commentsResponse.next); }) .catch(() => alert("잘못된 요청입니다")) @@ -44,7 +48,13 @@ export default function UserLikesCommentListPage() { .then(defaultResponseHandler) .then((data) => { const commentsResponse = data; - setComments(comments.concat(commentsResponse.results)); + setComments( + comments.concat( + commentsResponse.results.map((comment: CommentType) => { + return { ...comment, liked_by_user: true }; + }), + ), + ); setNextCommentsUrl(commentsResponse.next); }) .catch(() => alert("잘못된 요청입니다")); @@ -55,23 +65,6 @@ export default function UserLikesCommentListPage() { return () => window.removeEventListener("scroll", handleScroll); }, [comments]); - useEffect(() => { - if (!accessToken) return; - if (!userId) return; - - getMyLikesComments(accessToken) - .then(defaultResponseHandler) - .then((data) => { - const commentsResponse = data; - setComments(commentsResponse.results); - setNextCommentsUrl(commentsResponse.next); - }) - .catch(() => alert("잘못된 요청입니다")) - .finally(() => { - setLoading(false); - }); - }, []); - useEffect(() => { const handleScroll = () => { const { scrollTop, scrollHeight } = document.documentElement; @@ -83,7 +76,13 @@ export default function UserLikesCommentListPage() { .then(defaultResponseHandler) .then((data) => { const commentsResponse = data; - setComments(comments.concat(commentsResponse.results)); + setComments( + comments.concat( + commentsResponse.results.map((comment: CommentType) => { + return { ...comment, liked_by_user: true }; + }), + ), + ); setNextCommentsUrl(commentsResponse.next); }) .catch(() => alert("잘못된 요청입니다")); diff --git a/src/pages/user/UserWrittenCommentListPage.tsx b/src/pages/user/UserWrittenCommentListPage.tsx index 7782e79..7f1964f 100644 --- a/src/pages/user/UserWrittenCommentListPage.tsx +++ b/src/pages/user/UserWrittenCommentListPage.tsx @@ -9,9 +9,11 @@ import { defaultResponseHandler } from "../../apis/custom"; import { CommentType, SortQueryType } from "../../type"; import SortMoadal from "../../components/SortModal"; +import { useAuthContext } from "../../contexts/authContext"; export default function UserWrittenCommentListPage() { const navigate = useNavigate(); + const { accessToken } = useAuthContext(); const { id: userId } = useParams(); const [comments, setComments] = useState(null); const [loading, setLoading] = useState(true); @@ -22,7 +24,11 @@ export default function UserWrittenCommentListPage() { useEffect(() => { userId && - getUserWrittenComments(parseInt(userId), sortQuery) + getUserWrittenComments( + parseInt(userId), + accessToken ?? undefined, + sortQuery, + ) .then(defaultResponseHandler) .then((data) => { console.log("success!!!!", data); @@ -44,7 +50,14 @@ export default function UserWrittenCommentListPage() { if (window.innerHeight + scrollTop + 150 >= scrollHeight) { nextCommentsUrl && comments && - fetch(nextCommentsUrl) + fetch(nextCommentsUrl, { + method: "GET", + headers: accessToken + ? { + Authorization: "Bearer " + accessToken, + } + : {}, + }) .then(defaultResponseHandler) .then((data) => { console.log("scroll success :", data); diff --git a/src/type.ts b/src/type.ts index 5a06f9a..965e44a 100644 --- a/src/type.ts +++ b/src/type.ts @@ -24,6 +24,7 @@ export type MovieType = { prod_country: string; poster: string; release_date: string; + rates_count: number; // option cumulative_audience: number | null; screening: boolean;