Merge pull request #300 from oduck-team/feature/233

feat: 애니 리뷰 목록 조회 추가 및 변경 사항 적용
oduck-team · Nov 19, 2023 · 0c12927 · 0c12927
2 parents b7a8442 + 51abd49
commit 0c12927
Show file tree

Hide file tree

Showing 24 changed files with 206 additions and 141 deletions.
diff --git a/src/contexts/OduckApiContext.tsx b/src/contexts/OduckApiContext.tsx
@@ -31,8 +31,8 @@ const animeApi = new AnimeApi();
 const genreApi = new GenreApi();
 const bookmarkApi = new BookmarkApi();
 const fileApi = new FileApi();
-const reviewApi = new ReviewDevApi();
-// const reviewApi = new ReviewApi();
+// const reviewApi = new ReviewDevApi();
+const reviewApi = new ReviewApi();
 
 export function OduckApiProvider({ children }: StrictPropsWithChildren) {
   return (

diff --git a/src/features/animes/routes/Detail/Reviews/Empty.style.ts b/src/features/animes/routes/Detail/Reviews/Empty.style.ts
@@ -0,0 +1,27 @@
+import styled from "@emotion/styled";
+
+export const EmptyReivewContainer = styled.div`
+  width: 100%;
+  padding: 26px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+
+  button {
+    width: fit-content;
+    font-weight: 500;
+    font-size: 14px;
+    padding: 8px 24px;
+  }
+`;
+
+export const EmptyImage = styled.img`
+  width: 80px;
+  height: 80px;
+`;
+
+export const Message = styled.h1`
+  ${({ theme }) => theme.typo["body-2-r"]};
+  color: ${({ theme }) => theme.colors["neutral"]["40"]};
+`;
diff --git a/src/features/animes/routes/Detail/Reviews/Empty.tsx b/src/features/animes/routes/Detail/Reviews/Empty.tsx
@@ -0,0 +1,20 @@
+import Button from "@/components/Button";
+
+import { EmptyImage, EmptyReivewContainer, Message } from "./Empty.style";
+
+export default function EmptyReview() {
+  // 리뷰 작성하기 클릭 시 최상단으로 이동
+  const handleClick = () => {
+    window.scrollTo(0, 0);
+  };
+
+  return (
+    <EmptyReivewContainer>
+      <EmptyImage src="/logo/logo-empty.png" alt="empty" />
+      <Message>작성된 리뷰가 없어요. 첫 리뷰를 작성해 보세요.</Message>
+      <Button size="lg" name="리뷰 작성하기" onClick={handleClick}>
+        리뷰 작성하기
+      </Button>
+    </EmptyReivewContainer>
+  );
+}
diff --git a/src/features/animes/routes/Detail/Reviews/index.tsx b/src/features/animes/routes/Detail/Reviews/index.tsx
@@ -1,10 +1,12 @@
 import Chip from "@/components/Chip";
+import useAuth from "@/features/auth/hooks/useAuth";
 import { ReviewInfo } from "@/features/reviews/api/review";
 import ReviewCard from "@/features/reviews/components/ReviewCard";
 import { ReviewSortOption } from "@/features/reviews/hook/useGetAnimeReviews";
 
 import LoadingReviews from "../LoadingReviews";
 
+import EmptyReview from "./Empty";
 import { Section, TotalReviews } from "./style";
 
 interface Props {
@@ -24,27 +26,33 @@ export default function Reviews({
   selectedOption,
   handleChipClick,
 }: Props) {
+  const { user } = useAuth();
+
   return (
     <Section>
       <h1>한 줄 리뷰</h1>
-      <TotalReviews>
-        총 {totalReviewCount.toLocaleString()}명이 리뷰를 남겨 주셨어요
-      </TotalReviews>
-      <ul>
-        {sortOptions.map((option, i) => (
-          <li key={option.label}>
-            <Chip
-              variant="selectable"
-              onClick={() => handleChipClick(i)}
-              active={selectedOption.label === option.label}
-            >
-              {option.label}
-            </Chip>
-          </li>
-        ))}
-      </ul>
+      {!isLoading && reviews.length === 0 && <EmptyReview />}
+      {(isLoading || (!isLoading && reviews.length !== 0)) && (
+        <div>
+          <TotalReviews>
+            총 {totalReviewCount.toLocaleString()}명이 리뷰를 남겨 주셨어요
+          </TotalReviews>
+          <ul>
+            {sortOptions.map((option, i) => (
+              <li key={option.label}>
+                <Chip
+                  variant="selectable"
+                  onClick={() => handleChipClick(i)}
+                  active={selectedOption.label === option.label}
+                >
+                  {option.label}
+                </Chip>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
       {isLoading && <LoadingReviews />}
-      {/* { TODO: 리뷰가 0개일 때 디자인 적용 } */}
       {!isLoading && reviews.length !== 0 && (
         <ul>
           {reviews.map((review, i) => (
@@ -60,8 +68,8 @@ export default function Reviews({
                   isSpoiler={review.isSpoiler}
                 />
                 <ReviewCard.ActionBar
-                  isMine={review.isMine}
-                  isLiked={review.isLiked}
+                  isMine={user?.name === review.name}
+                  isLike={review.isLike}
                   likeCount={review.likeCount}
                   createdAt={review.createdAt}
                 />

diff --git a/src/features/animes/routes/Detail/Reviews/style.ts b/src/features/animes/routes/Detail/Reviews/style.ts
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { SectionContainer } from "../Section.style";
 
 export const Section = styled(SectionContainer)`
-  & > ul:first-of-type {
+  div > ul {
     display: flex;
     gap: 4px;
     padding-bottom: 16px;

diff --git a/src/features/common/routes/Home/RecentReview/index.tsx b/src/features/common/routes/Home/RecentReview/index.tsx
@@ -46,7 +46,7 @@ export default function RecentReview() {
                 <ReviewCard.ActionBar
                   createdAt={data.pages[0].createdAt}
                   isMine={user?.name === data.pages[0].name ? true : false}
-                  isLiked={data.pages[0].isLiked}
+                  isLike={data.pages[0].isLike}
                   likeCount={data.pages[0].likeCount}
                   isTimeAgo={true}
                 />

diff --git a/src/features/reviews/api/mock/anime_review_list1.json b/src/features/reviews/api/mock/anime_review_list1.json
@@ -8,7 +8,7 @@
       "score": 5,
       "content": "밥친구네요",
       "isSpoiler": false,
-      "isLiked": true,
+      "isLike": true,
       "likeCount": 100,
       "isMine": false,
       "createdAt": "2023-11-03T20:04:31.859"
@@ -21,7 +21,7 @@
       "score": 9,
       "content": "스포가잇는리뷰내용",
       "isSpoiler": true,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 50,
       "isMine": false,
       "createdAt": "2023-11-05T21:05:31.859"
@@ -34,7 +34,7 @@
       "score": 7,
       "content": "리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰입니다. 리뷰",
       "isSpoiler": false,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 40,
       "isMine": false,
       "createdAt": "2023-11-02T21:05:31.859"
@@ -47,7 +47,7 @@
       "score": 7,
       "content": "다음 시즌 얼른 나왔으면",
       "isSpoiler": true,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 28,
       "isMine": false,
       "createdAt": "2023-11-01T21:05:31.859"
@@ -60,7 +60,7 @@
       "score": 10,
       "content": "정말 재밌네요",
       "isSpoiler": true,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 20,
       "isMine": false,
       "createdAt": "2023-11-06T20:05:31.859"
@@ -73,7 +73,7 @@
       "score": 8,
       "content": "최고의 반전의 반전",
       "isSpoiler": false,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 16,
       "isMine": false,
       "createdAt": "2023-11-06T21:05:31.859"
@@ -86,7 +86,7 @@
       "score": 3,
       "content": "으헝헝헝헝헝헝헝헝헝헝헝",
       "isSpoiler": false,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 12,
       "isMine": false,
       "createdAt": "2023-10-31T21:05:31.859"
@@ -99,7 +99,7 @@
       "score": 10,
       "content": "후기후기후기후기후기후기",
       "isSpoiler": true,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 7,
       "isMine": false,
       "createdAt": "2023-10-30T21:05:31.859"
@@ -112,7 +112,7 @@
       "score": 6,
       "content": "주변에추천못할것같은애니",
       "isSpoiler": true,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 5,
       "isMine": false,
       "createdAt": "2023-11-03T21:05:31.859"
@@ -126,7 +126,7 @@
       "score": 8,
       "content": "뭐이런애니가다있지",
       "isSpoiler": false,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-11-04T21:05:31.859"

diff --git a/src/features/reviews/api/mock/anime_review_list2.json b/src/features/reviews/api/mock/anime_review_list2.json
@@ -8,7 +8,7 @@
       "score": 5,
       "content": "밥친구네요",
       "isSpoiler": false,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-11-03T20:04:31.859"
@@ -21,7 +21,7 @@
       "score": 9,
       "content": "스포가잇는리뷰내용",
       "isSpoiler": true,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-11-05T21:05:31.859"
@@ -34,7 +34,7 @@
       "score": 7,
       "content": "하ㅏㅎ하ㅏㅏ하하하하하하하",
       "isSpoiler": false,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-11-02T21:05:31.859"
@@ -47,7 +47,7 @@
       "score": 7,
       "content": "다음 시즌 얼른 나왔으면",
       "isSpoiler": true,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-11-01T21:05:31.859"
@@ -60,7 +60,7 @@
       "score": 10,
       "content": "정말 재밌네요",
       "isSpoiler": true,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-11-06T20:05:31.859"
@@ -73,7 +73,7 @@
       "score": 8,
       "content": "최고의 반전의 반전",
       "isSpoiler": false,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-11-06T21:05:31.859"
@@ -86,7 +86,7 @@
       "score": 3,
       "content": "으헝헝헝헝헝헝헝헝헝헝헝",
       "isSpoiler": false,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-10-31T21:05:31.859"
@@ -99,7 +99,7 @@
       "score": 10,
       "content": "후기후기후기후기후기후기",
       "isSpoiler": true,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-10-30T21:05:31.859"
@@ -112,7 +112,7 @@
       "score": 6,
       "content": "주변에추천못할것같은애니",
       "isSpoiler": true,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-11-03T21:05:31.859"
@@ -126,7 +126,7 @@
       "score": 8,
       "content": "뭐이런애니가다있지",
       "isSpoiler": false,
-      "isLiked": false,
+      "isLike": false,
       "likeCount": 0,
       "isMine": false,
       "createdAt": "2023-11-04T21:05:31.859"