Feat/영화상세 페이지 등의 여러가지 (#28)

* fix: name * fix: main carousel long title bug * feat: rate count fetching * fix: star rating bug * fix: 평가가 없을 경우 영화상세 에러 * fix: 코멘트 수정/삭제 아이콘 바뀌어있었음 * feat: 별점에 따라 메시지 바꾸기 * fix: 메인페이지 불편한 스크롤 * star rating cancel * fix: removing logs * feat: comment page like animation * feat: footer rate number
wafflestudio21-5 · Jan 26, 2024 · 4d42f2f · 4d42f2f
1 parent 21c3041
commit 4d42f2f
Show file tree

Hide file tree

Showing 32 changed files with 263 additions and 153 deletions.
diff --git a/src/apis/auth.ts b/src/apis/auth.ts
@@ -1,4 +1,3 @@
-
 import { SortQueryType } from "../type";
 
 import { BASE_API_URL } from "./const";
@@ -8,7 +7,7 @@ export async function postSignup(
   nickname: string,
   username: string,
   password1: string,
-  password2: string
+  password2: string,
 ) {
   return fetch(`${BASE_API_AUTH_URL}/auth/token/register/`, {
     method: "POST",
@@ -72,10 +71,9 @@ export async function deleteWithDrawalUser(accessToken: string) {
   });
 }
 
-
 export async function getMyLikesComments(
   accessToken: string,
-  query?: SortQueryType
+  query?: SortQueryType,
 ) {
   if (!query) {
     return fetch(
@@ -84,7 +82,7 @@ export async function getMyLikesComments(
         headers: {
           Authorization: `Bearer ${accessToken}`,
         },
-      }
+      },
     );
   }
 
@@ -97,7 +95,7 @@ export async function getMyLikesComments(
 
 export async function getNextMyLikesComments(
   accessToken: string,
-  nextUrl: string
+  nextUrl: string,
 ) {
   return fetch(nextUrl, {
     headers: {

diff --git a/src/apis/comment.ts b/src/apis/comment.ts
@@ -1,22 +1,20 @@
 import { BASE_API_URL } from "./const";
 
-
 export async function getCommentListRequest(
   movieCD: string,
-  sortQuery?: string
+  sortQuery?: string,
 ) {
   if (!sortQuery) return fetch(`${BASE_API_URL}/contents/${movieCD}/comments`);
   return fetch(
-    `${BASE_API_URL}/contents/${movieCD}/comments/?order=${sortQuery}`
+    `${BASE_API_URL}/contents/${movieCD}/comments/?order=${sortQuery}`,
   );
-
 }
 
 export async function createCommentRequest(
   movieCD: string,
   accessToken: string,
   content: string,
-  has_spoiler: boolean
+  has_spoiler: boolean,
 ) {
   return fetch(`${BASE_API_URL}/contents/${movieCD}/comments/`, {
     method: "POST",
@@ -34,7 +32,7 @@ export async function createCommentRequest(
 //특정 코멘트 아이디의 코멘트를 알 수 있다.
 export async function getCommentRequest(
   commentId: number,
-  accessToken?: string
+  accessToken?: string,
 ) {
   if (!accessToken) return fetch(`${BASE_API_URL}/comments/${commentId}`);
   return fetch(`${BASE_API_URL}/comments/${commentId}`, {
@@ -49,7 +47,7 @@ export async function updateCommentRequest(
   commentId: number,
   accessToken: string,
   content: string,
-  hasSpoiler: boolean
+  hasSpoiler: boolean,
 ) {
   return fetch(`${BASE_API_URL}/comments/${commentId}`, {
     method: "PUT",
@@ -78,13 +76,12 @@ export async function deleteCommentRequest(id: number, accessToken: string) {
 
 export async function getCommentReplies(
   commentId: number,
-  accessToken?: string
+  accessToken?: string,
 ) {
   if (!accessToken)
     return fetch(`${BASE_API_URL}/comments/${commentId}/replies/`);
 
   return fetch(`${BASE_API_URL}/comments/${commentId}/replies/`, {
-
     method: "GET",
     headers: {
       Authorization: "Bearer " + accessToken,
@@ -93,24 +90,21 @@ export async function getCommentReplies(
 }
 export async function getNextCommentReplies(
   nextUrl: string,
-  accessToken?: string
+  accessToken?: string,
 ) {
   if (!accessToken) return fetch(nextUrl);
   return fetch(nextUrl, {
-
     method: "GET",
     headers: {
       Authorization: "Bearer " + accessToken,
     },
   });
 }
 
-
-
 export async function postCreateReply(
   commentId: number,
   accessToken: string,
-  content: string
+  content: string,
 ) {
   return fetch(`${BASE_API_URL}/comments/${commentId}/replies/`, {
     method: "POST",
@@ -126,7 +120,7 @@ export async function postCreateReply(
 export async function putUpdateReply(
   reply_id: number,
   accessToken: string,
-  content: string
+  content: string,
 ) {
   return fetch(`${BASE_API_URL}/comments/replies/${reply_id}`, {
     method: "PUT",
@@ -150,7 +144,7 @@ export async function deleteReply(reply_id: number, accessToken: string) {
 
 export async function postToggleReplyLike(
   replyId: number,
-  accessToken: string
+  accessToken: string,
 ) {
   return fetch(`${BASE_API_URL}/comments/replies/${replyId}/like`, {
     method: "POST",
@@ -162,7 +156,7 @@ export async function postToggleReplyLike(
 
 export async function postToggleCommentLike(
   comment_id: number,
-  accessToken: string
+  accessToken: string,
 ) {
   return fetch(`${BASE_API_URL}/comments/${comment_id}/like`, {
     method: "POST",

diff --git a/src/apis/content.ts b/src/apis/content.ts
@@ -6,7 +6,7 @@ import { BASE_API_URL } from "./const";
 // 나중에 바꾸기
 export async function getContentListRequest(
   order: string,
-  accessToken?: string
+  accessToken?: string,
 ) {
   if (!accessToken) return fetch(`${BASE_API_URL}/contents?order=${order}`);
   return fetch(`${BASE_API_URL}/contents?order=${order}`, {
@@ -30,7 +30,7 @@ export async function getContentRequest(movieCD: string, accessToken?: string) {
 export async function createRatingRequest(
   movieCD: string,
   rate: number,
-  accessToken: string
+  accessToken: string,
 ) {
   return fetch(`${BASE_API_URL}/contents/${movieCD}/rate`, {
     method: "POST",
@@ -47,7 +47,7 @@ export async function createRatingRequest(
 export async function updateRatingRequest(
   rateId: number,
   rate: number,
-  accessToken: string
+  accessToken: string,
 ) {
   return fetch(`${BASE_API_URL}/contents/rates/${rateId}`, {
     method: "PUT",
@@ -72,3 +72,12 @@ export async function deleteRatingRequest(rateId: number, accessToken: string) {
     credentials: "include",
   });
 }
+
+export async function getRatesCount() {
+  return fetch(`${BASE_API_URL}/contents/rates/count`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}
diff --git a/src/apis/others.ts b/src/apis/others.ts
diff --git a/src/apis/user.ts b/src/apis/user.ts
@@ -37,7 +37,7 @@ export async function postUnFollow(accessToken: string, userId: number) {
 
 export async function getUserWrittenComments(
   userId: number,
-  query?: "like" | "created" | "high-rating" | "low-rating"
+  query?: "like" | "created" | "high-rating" | "low-rating",
 ) {
   if (!query) {
     return fetch(`${BASE_API_URL}/users/${userId}/comments/`);
@@ -51,7 +51,7 @@ export async function getUserRatingMovies(
   query: {
     order?: "high-rating" | "low-rating" | "created";
     rate?: number;
-  }
+  },
 ) {
   const result = Object.entries(query)
     .map(([key, value]) => `${key}=${value}`)
@@ -69,7 +69,7 @@ export async function getUserWantToWatch(userId: number) {
 export async function postCreateWatchingState(
   movieCD: string,
   accessToken: string,
-  user_state: "watching" | "want_to_watch" | "not_interested" | null
+  user_state: "watching" | "want_to_watch" | "not_interested" | null,
 ) {
   return fetch(`${BASE_API_URL}/contents/${movieCD}/state`, {
     method: "POST",
@@ -87,7 +87,7 @@ export async function postCreateWatchingState(
 export async function putUpdateWatchingState(
   state_id: number,
   accessToken: string,
-  user_state: "watching" | "want_to_watch" | "not_interested" | null
+  user_state: "watching" | "want_to_watch" | "not_interested" | null,
 ) {
   return fetch(`${BASE_API_URL}/contents/states/${state_id}`, {
     method: "PUT",

diff --git a/src/components/CommentCard.module.scss b/src/components/CommentCard.module.scss
@@ -95,7 +95,6 @@
         white-space-collapse: preserve;
         cursor: pointer;
       }
-
     }
   }
 

diff --git a/src/components/CommentCard.tsx b/src/components/CommentCard.tsx
@@ -4,11 +4,9 @@ import styles from "./CommentCard.module.scss";
 import profileDefault from "../assets/user_default.jpg";
 import { Link, useNavigate } from "react-router-dom";
 
-
 export default function CommentCard({ comment }: { comment: CommentType }) {
   // user 하위 페이지에서 코멘트를 불러오는 경우, movie의 정보를 이용해야 한다.
 
-
   return (
     <li className={styles.cardCon}>
       <div className={styles.commentHead}>
@@ -30,9 +28,7 @@ export default function CommentCard({ comment }: { comment: CommentType }) {
         )}
       </div>
       <div className={styles.commentContentContainer}>
-
         <CommentContentBox comment={comment} />
-
       </div>
 
       <div className={styles.commentFeedbackCon}>

diff --git a/src/components/CommentInfo.module.scss b/src/components/CommentInfo.module.scss
@@ -212,6 +212,7 @@
         color: rgb(255, 47, 110);
         .likeSvg {
           color: rgb(255, 47, 110);
+          animation: 300ms ease 0s 1 normal none running boing;
         }
       }
 
@@ -227,3 +228,9 @@
     }
   }
 }
+
+@keyframes boing {
+  50% {
+    transform: scale(1.5) rotate(-20deg);
+  }
+}
diff --git a/src/components/CommentInfo.tsx b/src/components/CommentInfo.tsx
@@ -76,7 +76,7 @@ function CommentHeader({ comment }: { comment: CommentType }) {
 
 function CommentBody({ comment }: { comment: CommentType }) {
   const [preventWatchSpoiler, setPreventWatchSpoiler] = useState<boolean>(
-    comment.has_spoiler
+    comment.has_spoiler,
   );
 
   if (preventWatchSpoiler)
@@ -151,7 +151,7 @@ function LikeReplyBar({
   setCurrentModalState: (
     value:
       | { type: "createReply" }
-      | { type: "updateReply"; targetReply: ReplyType }
+      | { type: "updateReply"; targetReply: ReplyType },
   ) => void;
   refetchComment: () => void;
 }) {
@@ -285,7 +285,7 @@ export default function CommentInfo({
   const updateReplyState = (resonseReply: ReplyType) => {
     const { id: responseId } = resonseReply;
     setReplies(
-      replies.map((reply) => (reply.id === responseId ? resonseReply : reply))
+      replies.map((reply) => (reply.id === responseId ? resonseReply : reply)),
     );
   };
   const addReplyState = (reply: ReplyType) => {

diff --git a/src/components/CommentPageWriteModal.tsx b/src/components/CommentPageWriteModal.tsx
@@ -32,14 +32,14 @@ export default function CommentPageWriteModal({
   const [hasSpoiler, setHasSpoiler] = useState<boolean | null>(
     modalType === "updateComment"
       ? currentModalState.targetComment.has_spoiler
-      : null
+      : null,
   );
   const [contentInput, setContentInput] = useState(
     modalType === "updateReply"
       ? currentModalState.targetReply.content
       : modalType === "updateComment"
-      ? currentModalState.targetComment.content
-      : ""
+        ? currentModalState.targetComment.content
+        : "",
   );
   const { accessToken } = useAuthContext();
   const { id: commentId } = useParams();
@@ -115,7 +115,7 @@ export default function CommentPageWriteModal({
                       postCreateReply(
                         parseInt(commentId),
                         accessToken,
-                        contentInput
+                        contentInput,
                       )
                         .then(defaultResponseHandler)
                         .then((data: ReplyType) => {
@@ -129,7 +129,7 @@ export default function CommentPageWriteModal({
                       putUpdateReply(
                         currentModalState.targetReply.id,
                         accessToken,
-                        contentInput
+                        contentInput,
                       )
                         .then(defaultResponseHandler)
                         .then((data: ReplyType) => {
@@ -147,7 +147,7 @@ export default function CommentPageWriteModal({
                         parseInt(commentId),
                         accessToken,
                         contentInput,
-                        hasSpoiler
+                        hasSpoiler,
                       )
                         .then(defaultResponseHandler)
                         .then(() => {

diff --git a/src/components/Content.module.scss b/src/components/Content.module.scss
@@ -135,7 +135,7 @@
           line-height: 42px;
           font-size: 36px;
           font-weight: 400;
-          color: $pink;
+          color: $medium-gray;
         }
       }
       .reviewMenuCon {
-Original file line number
+Diff line change
@@ Expand Up / @@ -95,7 +95,6 @@ @@
             white-space-collapse: preserve;
             cursor: pointer;
           }
         }
       }
@@ Expand Down @@