Merge pull request #313 from oduck-team/feat/312

feat: 마우스 leave 시, 내가 평가했던 별점으로 돌아가기 구현

src/components/Rating/index.tsx

@@ -31,6 +31,7 @@ export default function Rating({
   const [rating, setRating] = useState(0); // 별점
   const [save, setSave] = useState(false); // 별점 저장 여부
   const [startX, setStartX] = useState(0); // ColorStarContainer Width 계산을 위해 필요
+  const [isLoading, setIsLoading] = useState(false); // 데스크탑에서 click 후 로딩 상태
   const ContainerRef = useRef<HTMLDivElement | null>(null); // startX와 같은 이유로 필요
 
   const handleTouchDrag = (e: React.TouchEvent<HTMLDivElement>) => {
@@ -46,9 +47,16 @@ export default function Rating({
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     const dist = e.clientX - startX;
     calcRating(dist);
+    setIsLoading(true); // 데스크탑에서 별점 평가 후, 바로 마우스 leave 시 깜빡이는 현상 수정
+    setTimeout(() => setIsLoading(false), 200);
     if (!save) setSave((prev) => !prev);
   };
 
+  const handleMouseLeave = () => {
+    if (isLoading) return; // 데스크탑에서 별점 평가 후, 바로 마우스 leave 시 깜빡이는 현상 수정
+    if (!save) setRating(value);
+  };
+
   const handleTouchEnd = () => {
     if (!save) setSave((prev) => !prev);
   };
@@ -90,6 +98,7 @@ export default function Rating({
           onClick={handleClick}
           onMouseMove={handleHover}
           onTouchEnd={handleTouchEnd}
+          onMouseLeave={handleMouseLeave}
         />
       )}
       <BackStarContainer>

src/features/reviews/components/ReviewRating/index.tsx

@@ -2,6 +2,7 @@ import { AnimatePresence } from "framer-motion";
 import { useState } from "react";
 
 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 useDebounce from "@/hooks/useDebounce";
@@ -22,6 +23,7 @@ export default function ReviewRating({ animeId }: ReviewRatingProps) {
   const hasReview = true; // dev용 변수
 
   const { user } = useAuth();
+  const toast = useToast();
   const [isLoginModalVisible, setIsLoginModalVisible] = useState(false);
   const [isReviewModalVisible, setIsReviewModalVisible] = useState(false);
 
@@ -35,10 +37,15 @@ export default function ReviewRating({ animeId }: ReviewRatingProps) {
     }
     // 평가 추가 또는 기존과 다른 점수로 평가 수정 시에만 요청 수행
     if (evaluation?.score !== value)
-      evaluationMutation.mutate({
-        score: value,
-        hasPrevData: Boolean(evaluation),
-      });
+      evaluationMutation.mutate(
+        {
+          score: value,
+          hasPrevData: Boolean(evaluation),
+        },
+        {
+          onSuccess: () => toast.success({ message: "별점이 등록되었어요." }),
+        },
+      );
   }, DEBOUNCE_DELAY);
 
   return (