Fix/버그 수정 여러개 (#31)

* 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
wafflestudio21-5 · Jan 31, 2024 · 8083e4f · 8083e4f
1 parent 325e10c
commit 8083e4f
Show file tree

Hide file tree

Showing 18 changed files with 331 additions and 96 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<OutletContextType>();
+  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 (
     <li className={styles.cardCon}>
@@ -27,29 +65,57 @@ export default function CommentCard({ comment }: { comment: CommentType }) {
           </div>
         )}
       </div>
-      <div className={styles.commentContentContainer}>
-        <CommentContentBox comment={comment} />
+      <div
+        className={
+          styles.commentContentContainer +
+          (inContentPage ? " " + styles.inContentPage : "")
+        }
+      >
+        <CommentContentBox
+          comment={comment}
+          spoiler={spoiler}
+          setSpoiler={setSpoiler}
+        />
       </div>
 
       <div className={styles.commentFeedbackCon}>
         <img
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgZmlsbD0iIzc4Nzg3OCI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik02Ljc1IDkuNDg1aC0zYTEgMSAwIDAgMC0xIDF2MTBhMSAxIDAgMCAwIDEgMWgzYTEgMSAwIDAgMCAxLTF2LTEwYTEgMSAwIDAgMC0xLTFNMjAuNjU3IDguNTY2YTIuMzYzIDIuMzYzIDAgMCAwLTEuNzc5LS44MTNIMTYuNjJsLjE2NC0uNjI3Yy4xMzctLjUyOC4yMDEtMS4xMi4yMDEtMS44NjMgMC0xLjkxOS0xLjM3NS0yLjc3OC0yLjczOC0yLjc3OC0uNDQ0IDAtLjc2Ni4xMjMtLjk4Ni4zNzYtLjIuMjI3LS4yODIuNTMtLjI0My45MzVsLjAzIDEuMjMtMi45MDMgMi45NGMtLjU5My42LS44OTQgMS4yMy0uODk0IDEuODcydjkuNjQ3YS41LjUgMCAwIDAgLjUuNWg3LjY4N2EyLjM4OCAyLjM4OCAwIDAgMCAyLjM0OC0yLjA3bDEuNDQ1LTcuNDUyYTIuNDQgMi40NCAwIDAgMC0uNTc0LTEuODk3Ii8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K"
           alt=""
         />
-        {comment.like_count ?? comment.likes_count}
+        {likeExceptMe + (likeByMe ? 1 : 0)}
         <img
           src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGZpbGw9IiM3ODc4NzgiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTkuODU3IDE3Ljc4Nkw2IDIxdi00LjkxYy0xLjg0MS0xLjM3My0zLTMuMzY5LTMtNS41OUMzIDYuMzU4IDcuMDMgMyAxMiAzczkgMy4zNTggOSA3LjVjMCA0LjE0Mi00LjAzIDcuNS05IDcuNS0uNzM5IDAtMS40NTYtLjA3NC0yLjE0My0uMjE0eiIvPgo8L3N2Zz4K"
           alt=""
         />
         {comment.reply_count}
       </div>
+      <div className={styles.commentLikeBtnBox}>
+        <button
+          className={likeByMe ? styles.liked : ""}
+          disabled={spoiler || likeGoing}
+          onClick={likeClicked}
+        >
+          좋아요
+        </button>
+      </div>
     </li>
   );
 }
 
-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 }) {
         </div>
       )}
       <div className={styles.commentTextBox}>
-        <div className={styles.commentText}>
+        <div
+          className={
+            styles.commentText +
+            (inContentPage ? " " + styles.inContentPage : "")
+          }
+        >
           {!onHiddenMoviedata && (
             <p
               className={styles.movieTitle}
@@ -86,13 +157,26 @@ function CommentContentBox({ comment }: { comment: CommentType }) {
               영화 · {new Date(comment.movie.release_date).getFullYear()}
             </p>
           )}
-          <span
-            onClick={() => {
-              navigate(`/comments/${comment.id}`);
-            }}
-          >
-            {comment.content}
-          </span>
+          {spoiler ? (
+            <div className={styles.spoiler}>
+              이 코멘트에는 스포일러가 있습니다.{" "}
+              <button
+                onClick={() => {
+                  setSpoiler(false);
+                }}
+              >
+                보기
+              </button>
+            </div>
+          ) : (
+            <span
+              onClick={() => {
+                navigate(`/comments/${comment.id}`);
+              }}
+            >
+              {comment.content}
+            </span>
+          )}
         </div>
       </div>
     </>

diff --git 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<OutletContextType>();
   const { id: commentId } = useParams();
 
   return (
@@ -164,7 +166,10 @@ function LikeReplyBar({
       <div className={styles.likeReplyGrid}>
         <button
           onClick={() => {
-            if (!accessToken) return;
+            if (!accessToken) {
+              setCurrentModal("login");
+              return;
+            }
             if (!commentId) return;
             postToggleCommentLike(parseInt(commentId), accessToken)
               .then(defaultResponseHandler)
@@ -219,6 +224,10 @@ function LikeReplyBar({
         </button>
         <button
           onClick={() => {
+            if (!isLogined) {
+              setCurrentModal("login");
+              return;
+            }
             setCurrentModalState({ type: "createReply" });
           }}
         >
@@ -275,7 +284,7 @@ export default function CommentInfo({
         setNextRepliesUrl(repliesResponse.next);
       })
       .catch(() => alert("잘못된 요청입니다"));
-  }, [commentId]);
+  }, [commentId, accessToken]);
 
   // 무한스크롤 페이지네이션 특성상 단순히 데이터 리패칭을 할 수 없음 따라서 state를 직접 변경한다.
   const deleteReplyState = (replyId: number) => {