feat: 애니 상세페이지 내가 남긴 리뷰 영역 추가 #338

oduck-team · Dec 25, 2023 · c1961f7 · c1961f7
1 parent d3408e5
commit c1961f7
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 6 deletions.
diff --git a/src/features/reviews/components/ReviewRating/index.tsx b/src/features/reviews/components/ReviewRating/index.tsx
@@ -5,13 +5,18 @@ import Rating from "@/components/Rating";
 import useToast from "@/components/Toast/useToast";
 import LoginAlertModal from "@/features/auth/components/LoginAlertModal";
 import useAuth from "@/features/auth/hooks/useAuth";
+import useEvaluation from "@/features/reviews/hook/useEvaluation";
+import useGetEvaluation from "@/features/reviews/hook/useGetEvaluation";
 import useDebounce from "@/hooks/useDebounce";
-
-import useEvaluation from "../../hook/useEvaluation";
-import useGetEvaluation from "../../hook/useGetEvaluation";
+import useReadMoreText from "@/hooks/useReadMoreText";
 
 import ShortReviewModal from "./ShortReviewModal";
-import { ReviewRecommend } from "./style";
+import {
+  ReviewRecommend,
+  EvaluationRecommend,
+  UserReview,
+  Content,
+} from "./style";
 
 interface ReviewRatingProps {
   animeId: number;
@@ -30,6 +35,9 @@ export default function ReviewRating({ animeId }: ReviewRatingProps) {
   const { data: evaluation } = useGetEvaluation(animeId);
   const evaluationMutation = useEvaluation({ animeId, hasReview });
 
+  const { textRef, isOpen, isShowReadMoreButton, handleReadMoreButtonToggle } =
+    useReadMoreText();
+
   const handleRate = useDebounce((value: number) => {
     if (!user) {
       setIsLoginModalVisible(true);
@@ -55,14 +63,31 @@ export default function ReviewRating({ animeId }: ReviewRatingProps) {
         size="lg"
         onRate={handleRate}
       />
-      {evaluation && (
+      {!evaluation && (
+        <EvaluationRecommend>드래그해서 별점을 남겨보세요</EvaluationRecommend>
+      )}
+      {evaluation && !hasReview && (
         <ReviewRecommend>
           <button onClick={() => setIsReviewModalVisible(true)}>
             한 줄 리뷰를 남겨보세요
           </button>
         </ReviewRecommend>
       )}
-      {hasReview && "TODO: 사용자 리뷰 렌더링 "}
+      {hasReview && (
+        <UserReview>
+          <h3>내 평가</h3>
+          <Content className={isOpen ? undefined : "ellipsis"} ref={textRef}>
+            아주 긴 리뷰 내용 아주 긴 리뷰 내용 아주 긴 리뷰 내용 아주 긴 리뷰
+            내용 아주 긴 리뷰 내용 아주 긴 리뷰 내용 아주 긴 리뷰 내용 아주 긴
+            리뷰 내용 아주 긴 리뷰 내용
+          </Content>
+          {isShowReadMoreButton && (
+            <button onClick={handleReadMoreButtonToggle}>
+              {isOpen ? "접기" : "더보기"}
+            </button>
+          )}
+        </UserReview>
+      )}
 
       <AnimatePresence>
         {isReviewModalVisible && (

diff --git a/src/features/reviews/components/ReviewRating/style.ts b/src/features/reviews/components/ReviewRating/style.ts
@@ -17,3 +17,42 @@ export const ReviewRecommend = styled.div`
     cursor: pointer;
   }
 `;
+
+export const EvaluationRecommend = styled.span`
+  ${({ theme }) => theme.typo["micro-r"]};
+  color: ${({ theme }) => theme.colors.neutral["60"]};
+`;
+
+export const UserReview = styled.div`
+  width: 100%;
+  padding: 12px 0px 10px;
+
+  h3 {
+    margin-bottom: 10px;
+  }
+
+  h3,
+  p {
+    ${({ theme }) => theme.typo["body-2-r"]};
+  }
+
+  button {
+    all: unset;
+    ${({ theme }) => theme.typo["body-2-r"]};
+    color: ${({ theme }) => theme.colors["neutral"]["80"]};
+    cursor: pointer;
+  }
+`;
+
+export const Content = styled.p`
+  color: ${({ theme }) => theme.colors["neutral"]["80"]};
+  margin-top: 10px;
+  word-break: break-all;
+
+  &.ellipsis {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+`;