Merge branch 'develop' of github.com:oduck-team/oduck-client into fea…

…t/298
oduck-team · Nov 21, 2023 · 81a8a18 · 81a8a18
2 parents e90be69 + bd8f80b
commit 81a8a18
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 13 deletions.
diff --git a/src/components/Layout/Sidebar.tsx b/src/components/Layout/Sidebar.tsx
@@ -112,7 +112,7 @@ export default function Sidebar({
       <div>
         {user && (
           <>
-            <Profile to="/profile">
+            <Profile to="/profile" onClick={onClose}>
               <Avatar
                 userName={user.name ? user.name : ""}
                 src={user.thumbnail}

diff --git a/src/features/animes/components/AnimeCard/index.tsx b/src/features/animes/components/AnimeCard/index.tsx
@@ -1,4 +1,7 @@
 import { Star } from "@phosphor-icons/react";
+import { Link } from "react-router-dom";
+
+import { calcStarRatingAvg } from "@/utils/common";
 
 import {
   AnimeCardContainer,
@@ -39,7 +42,9 @@ export default function AnimeCard({
         <Title>{title}</Title>
         <Rating>
           <Star weight="fill" />
-          <span> {starScoreAvg === 0 ? "평가 전" : starScoreAvg / 2} </span>
+          <span>
+            {starScoreAvg === 0 ? "평가 전" : calcStarRatingAvg(starScoreAvg)}
+          </span>
         </Rating>
       </InfoContainer>
     </AnimeCardContainer>

diff --git a/src/features/animes/hooks/useAnime.ts b/src/features/animes/hooks/useAnime.ts
@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import useAuth from "@/features/auth/hooks/useAuth";
 import { useApi } from "@/hooks/useApi";
+import { calcStarRatingAvg } from "@/utils/common";
 
 export default function useAnime(animeId: number) {
   const { animeApi } = useApi();
@@ -17,9 +18,7 @@ export default function useAnime(animeId: number) {
     queryFn: () => animeApi.getById(animeId),
   });
 
-  const starRatingAvg = data
-    ? Math.floor((data.starRatingAvg / 2) * 10) / 10
-    : 0;
+  const starRatingAvg = calcStarRatingAvg(data?.starRatingAvg);
 
   return { starRatingAvg, anime, isLoading };
 }
diff --git a/src/features/reviews/hook/useEvaluation.ts b/src/features/reviews/hook/useEvaluation.ts
@@ -33,6 +33,8 @@ export default function useEvaluation(animeId: number) {
       queryClient.invalidateQueries(["evaluation", animeId, user?.memberId]);
       // 애니 평균 평점 조회 query 무효화
       queryClient.invalidateQueries(["averageRating", animeId, user?.memberId]);
+      // 프로필 북마크 query 무효화
+      queryClient.invalidateQueries(["profile", user?.memberId, "bookmark"]);
     },
     onError: (error) => {
       if (error instanceof AxiosError && error.response?.status) {

diff --git a/src/features/users/routes/Profile/TabMenu/BookmarkCard.style.ts b/src/features/users/routes/Profile/TabMenu/BookmarkCard.style.ts
@@ -8,23 +8,30 @@ export const BookmarkCardContainer = styled.div`
   padding: 16px;
   margin: 0 -16px;
   cursor: pointer;
-  transition: background-color ease 0.1s;
 
   @media (hover: hover) and (pointer: fine) {
-    &:hover {
-      background-color: #fdfdfd;
+    &:hover img {
+      transform: scale(1.2);
     }
   }
 `;
-export const Image = styled.img`
+export const ImageContainer = styled.div`
   flex-shrink: 0;
   width: 80px;
   height: 100px;
+  overflow: hidden;
   border-radius: 4px;
-  background-color: #d9d9d9;
   margin-right: 8px;
 `;
 
+export const Image = styled.img`
+  width: 100%;
+  object-fit: cover;
+  background-color: #d9d9d9;
+  overflow: hidden;
+  transition: transform ease 0.2s;
+`;
+
 export const InfoContainer = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/src/features/users/routes/Profile/TabMenu/BookmarkCard.tsx b/src/features/users/routes/Profile/TabMenu/BookmarkCard.tsx
@@ -2,11 +2,14 @@ import { AnimatePresence } from "framer-motion";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 
+import { calcStarRatingAvg } from "@/utils/common";
+
 import {
   BookmarkCardContainer,
   BottomContainer,
   CreatedDate,
   Image,
+  ImageContainer,
   InfoContainer,
   MyScore,
   RatingContainer,
@@ -37,20 +40,28 @@ export default function BookmarkCard({ bookmark, isMine }: BookmarkCardProps) {
   return (
     <>
       <BookmarkCardContainer onClick={handleLinkToAnime}>
-        <Image src={bookmark.thumbnail} alt={bookmark.title} />
+        <ImageContainer>
+          <Image src={bookmark.thumbnail} alt={bookmark.title} />
+        </ImageContainer>
         <InfoContainer>
           <Title>{bookmark.title}</Title>
           <div>
             <RatingContainer>
               <ScoreContainer>
                 <StarIcon size={13} weight="fill" color="yellow" />
-                <Score>평균 {bookmark.avgScore / 2}</Score>
+                <Score>
+                  {bookmark.avgScore < 0 ? (
+                    <Score>평가전</Score>
+                  ) : (
+                    `별점 ${calcStarRatingAvg(bookmark.avgScore)}`
+                  )}
+                </Score>
               </ScoreContainer>
               <ScoreContainer>
                 {bookmark.myScore >= 0 && (
                   <>
                     <StarIcon size={13} weight="fill" color="blue" />
-                    <MyScore>내 평점 {bookmark.myScore / 2}</MyScore>
+                    <MyScore>내 별점 {bookmark.myScore / 2}</MyScore>
                   </>
                 )}
                 {bookmark.myScore < 0 && <Score>평가전</Score>}

diff --git a/src/utils/common.ts b/src/utils/common.ts
@@ -11,3 +11,7 @@ export function compactNumber(data: number | string, lang: Lang = "en-US") {
     maximumFractionDigits: 1,
   }).format(data);
 }
+
+export function calcStarRatingAvg(score: number | undefined) {
+  return score ? Math.floor((score / 2) * 10) / 10 : 0;
+}