diff --git a/src/components/Rating/index.tsx b/src/components/Rating/index.tsx index 27f1c486..b745558d 100644 --- a/src/components/Rating/index.tsx +++ b/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(null); // startX와 같은 이유로 필요 const handleTouchDrag = (e: React.TouchEvent) => { @@ -46,9 +47,16 @@ export default function Rating({ const handleClick = (e: React.MouseEvent) => { 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} /> )} diff --git a/src/features/reviews/components/ReviewRating/index.tsx b/src/features/reviews/components/ReviewRating/index.tsx index ca3648c7..e4f13934 100644 --- a/src/features/reviews/components/ReviewRating/index.tsx +++ b/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 (