fix : 콘텐츠 페이지 등 버그 수정 (#29)

* 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 * fix : 버그 수정 --------- Co-authored-by: ComPhyPark <[email protected]>
wafflestudio21-5 · Jan 26, 2024 · e950472 · e950472
1 parent 4d42f2f
commit e950472
Show file tree

Hide file tree

Showing 23 changed files with 186 additions and 68 deletions.
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
     <meta property="og:site_name" content="왓챠피디아" />
     <meta property="og:locale" content="ko_KR" />
 
-    <title>왓챠피디아 - 영화, 책, TV 프로그램 추천 및 평가 서비스</title>
+    <title>와플피디아 - 영화 평가 서비스</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/apis/content.ts b/src/apis/content.ts
@@ -8,12 +8,21 @@ export async function getContentListRequest(
   order: string,
   accessToken?: string,
 ) {
-  if (!accessToken) return fetch(`${BASE_API_URL}/contents?order=${order}`);
+  const headers: HeadersInit = accessToken
+    ? {
+        Authorization: "Bearer " + accessToken,
+      }
+    : {};
+
+  if (order === "box-office")
+    return fetch(`${BASE_API_URL}/contentTest/movies/boxoffice/update/`, {
+      method: "GET",
+      headers: headers,
+    });
+
   return fetch(`${BASE_API_URL}/contents?order=${order}`, {
     method: "GET",
-    headers: {
-      Authorization: "Bearer " + accessToken,
-    },
+    headers: headers,
   });
 }
 

diff --git a/src/apis/user.ts b/src/apis/user.ts
@@ -100,3 +100,15 @@ export async function putUpdateWatchingState(
     }),
   });
 }
+
+export async function deleteWatchingState(
+  state_id: number,
+  accessToken: string
+) {
+  return fetch(`${BASE_API_URL}/contents/states/${state_id}`, {
+    method: "DELETE",
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+}
diff --git a/src/components/CommentCard.tsx b/src/components/CommentCard.tsx
@@ -23,7 +23,7 @@ export default function CommentCard({ comment }: { comment: CommentType }) {
             >
               <path d="M22 33.444L9.83 42.327c-.784.572-1.842-.196-1.539-1.118l4.687-14.32L.769 18.06c-.787-.569-.383-1.812.588-1.81l15.067.033 4.624-14.34c.298-.924 1.606-.924 1.904 0l4.624 14.34 15.067-.033c.971-.002 1.375 1.241.588 1.81l-12.209 8.829 4.688 14.32c.302.922-.756 1.69-1.54 1.118L22 33.444z"></path>
             </svg>
-            {comment.rating.rate}
+            {comment.rating.rate.toFixed(1)}
           </div>
         )}
       </div>

diff --git a/src/components/CommonAuthModalStyle.module.scss b/src/components/CommonAuthModalStyle.module.scss
@@ -9,21 +9,23 @@
   justify-content: center;
   align-items: center;
 
-  .modalBox {
+  .signupModalBox,
+  .loginModalBox {
     width: 375px;
-    height: 580px;
+
     background-color: white;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
-    padding-top: 35px;
+    padding: 35px 0;
     position: relative;
 
     .watchaPediaLogo {
       width: 70%;
       margin: 0 auto;
       transform: scale(0.7);
     }
+
     h2 {
       font-size: 17px;
       text-align: center;

diff --git a/src/components/Content.module.scss b/src/components/Content.module.scss
@@ -57,9 +57,7 @@
       width: 280px;
       height: 400px;
       margin-bottom: 30px;
-      transition:
-        width 0.3s,
-        height 0.3s;
+      transition: width 0.3s, height 0.3s;
 
       @media (max-width: #{$medium-screen + 100}) {
         width: 200px;
@@ -233,7 +231,6 @@
     align-items: center;
     width: 100%;
     height: 100%;
-    cursor: pointer;
 
     img {
       width: 56px;

diff --git a/src/components/Content.tsx b/src/components/Content.tsx
@@ -5,12 +5,7 @@ import profileDefault from "../assets/user_default.jpg";
 import StarRating from "./StarRating";
 import CommentCard from "./CommentCard";
 
-import {
-  CommentsResType,
-  CommentType,
-  MovieType,
-  MyStateResType,
-} from "../type";
+import { CommentsResType, CommentType, MovieType } from "../type";
 
 import { MyStateType } from "../type";
 import { Link } from "react-router-dom";
@@ -19,7 +14,11 @@ import { getCommentListRequest } from "../apis/comment";
 import MyCommentBox from "./MyCommentBox";
 import WritingModal from "./WritingModal";
 import { useAuthContext } from "../contexts/authContext";
-import { postCreateWatchingState, putUpdateWatchingState } from "../apis/user";
+import {
+  deleteWatchingState,
+  postCreateWatchingState,
+  putUpdateWatchingState,
+} from "../apis/user";
 
 function ContentHeader({ content }: { content: MovieType }) {
   const backGroundStyle = {
@@ -53,37 +52,47 @@ function ContentHeader({ content }: { content: MovieType }) {
 function ContentPanel({
   content,
   setContent,
+
+  refetchContent,
 }: {
   content: MovieType;
   setContent: (content: MovieType) => void;
+  refetchContent: () => void;
+
 }) {
   const [currentModal, setCurrentModal] = useState<
     "updateComment" | "createComment" | null
   >(null);
 
-  const [myRate, setMyRate] = useState(content.my_rate);
+
+  const [myRate, setMyRate] = useState(content.my_rate ?? null);
 
   const { accessToken } = useAuthContext();
-  const [myState, setMyState] = useState<MyStateResType | null>(
-    content.my_state ?? null,
-  );
+  const myState = content.my_state ?? null;
+
+
   const setMyStateHandler = (targetState: MyStateType) => {
     if (!accessToken) return;
-    if (content.my_state === null && targetState !== null)
+    if (!targetState)
+      return (
+        content.my_state &&
+        deleteWatchingState(content.my_state.id, accessToken).then(() => {
+          refetchContent();
+        })
+      );
+
+    if (content.my_state === null)
       return postCreateWatchingState(content.movieCD, accessToken, targetState)
         .then(defaultResponseHandler)
-        .then((myState) => {
-          setMyState(myState);
+        .then(() => {
+          refetchContent();
         });
 
-    return (
-      content.my_state &&
-      putUpdateWatchingState(content.my_state.id, accessToken, targetState)
-        .then(defaultResponseHandler)
-        .then((myState) => {
-          setMyState(myState);
-        })
-    );
+    return putUpdateWatchingState(content.my_state.id, accessToken, targetState)
+      .then(defaultResponseHandler)
+      .then(() => {
+        refetchContent();
+      });
   };
   const rateStr = [
     "평가하기",
@@ -104,7 +113,7 @@ function ContentPanel({
       <div className={styles.panelCon}>
         <div className={styles.imageCon}>
           <img src={content.poster} alt="영화 포스터" />
-          <div className={styles.ratingGraph}>평점 그래프</div>
+          {/*<div className={styles.ratingGraph}>평점 그래프</div>*/}
         </div>
         <main className={styles.reviewCon}>
           <nav className={styles.reviewNav}>
@@ -131,7 +140,7 @@ function ContentPanel({
             <ul className={styles.reviewMenuCon}>
               <li
                 onClick={() => {
-                  myState?.user_state === "want_to_watch"
+                  myState?.my_state === "want_to_watch"
                     ? setMyStateHandler(null)
                     : setMyStateHandler("want_to_watch");
                 }}
@@ -141,7 +150,7 @@ function ContentPanel({
                     aria-hidden="true"
                     viewBox="0 0 24 24"
                     className={
-                      myState?.user_state === "want_to_watch"
+                      myState?.my_state === "want_to_watch"
                         ? styles.checked
                         : ""
                     }
@@ -167,7 +176,7 @@ function ContentPanel({
               </li>
               <li
                 onClick={() => {
-                  myState?.user_state === "watching"
+                  myState?.my_state === "watching"
                     ? setMyStateHandler(null)
                     : setMyStateHandler("watching");
                 }}
@@ -177,7 +186,7 @@ function ContentPanel({
                     aria-hidden="true"
                     viewBox="0 0 24 24"
                     className={
-                      myState?.user_state === "watching" ? styles.checked : ""
+                      myState?.my_state === "watching" ? styles.checked : ""
                     }
                   >
                     <path d="M12 5C7 5 2.73 8.11 1 12.5 2.73 16.89 7 20 12 20s9.27-3.11 11-7.5C21.27 8.11 17 5 12 5Zm0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5Zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3Z"></path>

diff --git a/src/components/ContentList.tsx b/src/components/ContentList.tsx
@@ -67,16 +67,42 @@ export default function ContentList({ title, order }: ContentListProps) {
   const [contents, setContents] = useState<MovieType[]>([]);
 
   const { accessToken } = useAuthContext();
+
   useEffect(() => {
-    getContentListRequest(order, accessToken ? accessToken : undefined)
-      .then(defaultResponseHandler)
-      .then((data) => {
-        setContents(
-          data.map((movie: MovieType) => {
-            return { ...movie, poster: movie.poster.replace("http", "https") };
-          }),
-        );
-      });
+
+    order === "box-office"
+      ? 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"),
+                };
+              })
+            );
+          })
+      : getContentListRequest(order, accessToken ?? undefined)
+          .then(defaultResponseHandler)
+          .then((data) => {
+            console.log(title, order);
+            console.log(data);
+
+            setContents(
+              data.map((movie: MovieType) => {
+                return {
+                  ...movie,
+                  poster: movie.poster.replace("http", "https"),
+                };
+              })
+            );
+          });
+
   }, [order]);
 
   function handleRightClick() {

diff --git a/src/components/DeleteComReplyModal.tsx b/src/components/DeleteComReplyModal.tsx
@@ -50,8 +50,7 @@ export default function DeleteComReplyModal({
                     deleteReplyState(currentModalState.targetReply.id);
                     setCurrentModalState(null);
                   })
-                  .catch((e) => {
-                    console.log(e);
+                  .catch(() => {
                     console.log("실패");
                   });
               modalType === "deleteComment" &&
@@ -61,10 +60,9 @@ export default function DeleteComReplyModal({
                 )
                   .then((res) => {
                     if (!res.ok) throw new Error("삭제 실패");
-                    window.document.location.href = `/contents/${currentModalState.targetComment.movie}`;
+                    window.document.location.href = `/contents/${currentModalState.targetComment.movie.movieCD}`;
                   })
-                  .catch((e) => {
-                    console.log(e);
+                  .catch(() => {
                     console.log("실패");
                   });
             }}

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -9,6 +9,14 @@ export default function Footer() {
   const [rates, setRates] = useState(0);
 
   useEffect(() => {
+
+    getRatesCount()
+      .then(defaultResponseHandler)
+      .then((data) => {
+        setRates(data.ratings_count);
+      });
+
+
     const interval = setInterval(() => {
       getRatesCount()
         .then(defaultResponseHandler)
@@ -25,7 +33,9 @@ export default function Footer() {
     <footer>
       <section className={styles.commentNumber}>
         <span>
-          지금까지 <em>★{rates.toLocaleString("ko-KR")} 개의</em> 평가가
+
+          지금까지 <em>★ {rates.toLocaleString("ko-KR")} 개의</em> 평가가
+
           쌓였어요.
         </span>
       </section>

diff --git a/src/components/LoginModal.tsx b/src/components/LoginModal.tsx
@@ -57,7 +57,7 @@ export default function LoginModal({ setCurrentModal }: LoginModalProps) {
       }}
     >
       <div
-        className={styles.modalBox}
+        className={styles.loginModalBox}
         onClick={(e) => {
           e.stopPropagation();
         }}

diff --git a/src/components/MyCommentBox.tsx b/src/components/MyCommentBox.tsx
@@ -55,7 +55,7 @@ export default function MyCommentBox({
                     deleteCommentRequest(my_comment.id, accessToken ?? "")
                       .then(() => {
                         setContent({ ...content, my_comment: null }); // 성공 여부를 보고 반영
-                        alert("코멘트가 삭제되었습니다.");
+                        console.log("코멘트가 삭제되었습니다.");
                         closeModal();
                       })
                       .catch(() => {

diff --git a/src/components/SignupModal.tsx b/src/components/SignupModal.tsx
@@ -93,7 +93,7 @@ export default function SignupModal({ setCurrentModal }: SignupModalProps) {
       onClick={() => setCurrentModal(null)}
     >
       <div
-        className={styles.modalBox}
+        className={styles.signupModalBox}
         onClick={(e) => {
           e.stopPropagation();
         }}

diff --git a/src/components/user/MovieListByRatingValueContainer.tsx b/src/components/user/MovieListByRatingValueContainer.tsx
@@ -57,7 +57,7 @@ function MovieCaroucelBox({ ratingNumber }: { ratingNumber: number }) {
     <>
       <div className={styles.headerByRatingNumber}>
         <h2 className={styles.titleByRatingNumber}>
-          {ratingNumber} 평가함 <span>{movieCount}</span>
+          {ratingNumber.toFixed(1)} 평가함 <span>{movieCount}</span>
         </h2>
         <div className={styles.moreMoviesButtonBox}>
           <Link to={(ratingNumber * 2).toString()}>더보기</Link>

diff --git a/src/components/user/SettingModal.tsx b/src/components/user/SettingModal.tsx
@@ -76,7 +76,7 @@ export default function SettingModal({ setCurrentModal }: SettingModalProps) {
 
 type ButtonBoxProps = {
   setAlertMessage: (
-    alertMessage: "logoutAlert" | "withdrawalAlert" | "clipboard" | null,
+    alertMessage: "logoutAlert" | "withdrawalAlert" | "clipboard" | null
   ) => void;
 };
 
@@ -158,7 +158,7 @@ function WithdrawalAlertBoxContainer({ setAlertMessage }: ButtonBoxProps) {
                 .then(defaultResponseHandler)
                 .then(() => {
                   alert("회원탈퇴 성공");
-                  window.location.reload();
+                  window.location.href = "/";
                 })
                 .catch((e) => {
                   console.log(e);