Merge pull request #168 from hang-log-design-system/refactor/#167

StarRating 컴포넌트 개선
hang-log-design-system · Jan 5, 2024 · e6224d3 · e6224d3
2 parents fbce6a6 + 6c2fc01
commit e6224d3
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 19 deletions.
diff --git a/src/components/StarRatingInput/StarRatingInput.style.ts b/src/components/StarRatingInput/StarRatingInput.style.ts
@@ -13,3 +13,7 @@ export const inputContainerStyling = (size: number, gap: number) => {
     },
   });
 };
+
+export const starItemStyling = css({
+  cursor: 'pointer',
+});
diff --git a/src/components/StarRatingInput/StarRatingInput.tsx b/src/components/StarRatingInput/StarRatingInput.tsx
@@ -6,7 +6,10 @@ import { forwardRef } from 'react';
 import type { ForwardedRef } from 'react';
 
 import Label from '@components/Label/Label';
-import { inputContainerStyling } from '@components/StarRatingInput/StarRatingInput.style';
+import {
+  inputContainerStyling,
+  starItemStyling,
+} from '@components/StarRatingInput/StarRatingInput.style';
 import SupportingText from '@components/SupportingText/SupportingText';
 
 const STAR_RATING_EMPTY_LENGTH = 10;
@@ -61,9 +64,9 @@ const StarRatingInput = (
                   onMouseOut={() => {
                     if (!isMobile) onStarHoverOut(index);
                   }}
-                  key={Math.random()}
+                  key={crypto.randomUUID()}
                 >
-                  <HalfFilledLeftStar />
+                  <HalfFilledLeftStar css={starItemStyling} />
                 </div>
               );
             return (
@@ -78,9 +81,9 @@ const StarRatingInput = (
                 onMouseOut={() => {
                   if (!isMobile) onStarHoverOut(index);
                 }}
-                key={Math.random()}
+                key={crypto.randomUUID()}
               >
-                <HalfEmptyLeftStar width={size / 2} height={size} />
+                <HalfEmptyLeftStar width={size / 2} height={size} css={starItemStyling} />
               </div>
             );
           }
@@ -97,9 +100,9 @@ const StarRatingInput = (
                 onMouseOut={() => {
                   if (!isMobile) onStarHoverOut(index);
                 }}
-                key={Math.random()}
+                key={crypto.randomUUID()}
               >
-                <HalfFilledRightStar width={size / 2} height={size} />
+                <HalfFilledRightStar width={size / 2} height={size} css={starItemStyling} />
               </div>
             );
           return (
@@ -114,9 +117,9 @@ const StarRatingInput = (
               onMouseOut={() => {
                 if (!isMobile) onStarHoverOut(index);
               }}
-              key={Math.random()}
+              key={crypto.randomUUID()}
             >
-              <HalfEmptyRightStar width={size / 2} height={size} />
+              <HalfEmptyRightStar width={size / 2} height={size} css={starItemStyling} />
             </div>
           );
         })}

diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export const useDebounce = <T>(value: T, delay: number = 500): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
diff --git a/src/hooks/useStarRatingInput.ts b/src/hooks/useStarRatingInput.ts
@@ -1,12 +1,20 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
+
+import { useDebounce } from '@hooks/useDebounce';
 
 type InitialRateType = 0 | 0.5 | 1 | 1.5 | 2 | 2.5 | 3 | 3.5 | 4 | 4.5 | 5;
 
 export const useStarRatingInput = (initialRate: InitialRateType, onClick?: CallableFunction) => {
-  const [starRate, setStarRate] = useState(initialRate);
-  const [hookStarRate, setHookStarRate] = useState(initialRate);
-  const [prevStarRate, setPrevStarRate] = useState(initialRate);
-  const [isHoveredBefore, setIsHoveredBefore] = useState(false);
+  const [tempStarRate, setStarRate] = useState(initialRate);
+  const starRate = useDebounce(tempStarRate, 50);
+
+  const [tempHookStarRate, setHookStarRate] = useState(initialRate);
+  const hookStarRate = useDebounce(tempHookStarRate, 50);
+
+  const [tempPrevStarRate, setPrevStarRate] = useState(initialRate);
+  const prevStarRate = useDebounce(tempPrevStarRate, 50);
+
+  const hoverState = useRef(false);
 
   const handleStarClick = useCallback(
     (index: number) => {
@@ -24,23 +32,23 @@ export const useStarRatingInput = (initialRate: InitialRateType, onClick?: Calla
         onClick?.(newRate);
       }
     },
-    [hookStarRate, setHookStarRate, onClick]
+    [hookStarRate, onClick]
   );
 
   const handleStarHover = useCallback((index: number) => {
     const newRate = ((index + 1) / 2) as InitialRateType;
 
     setStarRate(newRate);
-    setIsHoveredBefore(true);
+    hoverState.current = true;
   }, []);
 
   const handleStarHoverOut = useCallback(() => {
-    if (isHoveredBefore) {
+    if (hoverState.current) {
       setStarRate(prevStarRate as InitialRateType);
     }
 
-    setIsHoveredBefore(false);
-  }, [prevStarRate, isHoveredBefore]);
+    hoverState.current = false;
+  }, [prevStarRate]);
 
   return {
     starRate,
-Original file line number
+Diff line change
@@ Expand Up @@
         },
       });
     };
+    export const starItemStyling = css({
+      cursor: 'pointer',
+    });