From c1961f7643a940832d5d7e74cfeb8a8c21f67269 Mon Sep 17 00:00:00 2001
From: mihee <s2809h29@gmail.com>
Date: Mon, 25 Dec 2023 23:15:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=95=A0=EB=8B=88=20=EC=83=81=EC=84=B8?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=82=B4=EA=B0=80=20=EB=82=A8?=
 =?UTF-8?q?=EA=B8=B4=20=EB=A6=AC=EB=B7=B0=20=EC=98=81=EC=97=AD=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20#338?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reviews/components/ReviewRating/index.tsx | 37 +++++++++++++++---
 .../reviews/components/ReviewRating/style.ts  | 39 +++++++++++++++++++
 2 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/src/features/reviews/components/ReviewRating/index.tsx b/src/features/reviews/components/ReviewRating/index.tsx
index e4f13934..2ebabe8c 100644
--- 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
index 8868c3af..1a87162b 100644
--- 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;
+  }
+`;