Merge pull request #161 from hang-log-design-system/feature/#160

모바일 환경에서 StarRatingInput 호버 문제 수정
hang-log-design-system · Sep 5, 2023 · 47de5a7 · 47de5a7
2 parents 2a7f357 + 803f7f3
commit 47de5a7
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/src/components/StarRatingInput/StarRatingInput.tsx b/src/components/StarRatingInput/StarRatingInput.tsx
@@ -12,6 +12,7 @@ import SupportingText from '@components/SupportingText/SupportingText';
 const STAR_RATING_EMPTY_LENGTH = 10;
 
 export interface StarRatingInputProps {
+  isMobile: boolean;
   label?: string;
   supportingText?: string;
   required?: boolean;
@@ -26,6 +27,7 @@ export interface StarRatingInputProps {
 
 const StarRatingInput = (
   {
+    isMobile = false,
     label,
     supportingText,
     required = false,
@@ -54,10 +56,10 @@ const StarRatingInput = (
                     onStarClick(index);
                   }}
                   onMouseOver={() => {
-                    onStarHover(index);
+                    if (!isMobile) onStarHover(index);
                   }}
                   onMouseOut={() => {
-                    onStarHoverOut(index);
+                    if (!isMobile) onStarHoverOut(index);
                   }}
                   key={Math.random()}
                 >
@@ -71,10 +73,10 @@ const StarRatingInput = (
                   onStarClick(index);
                 }}
                 onMouseOver={() => {
-                  onStarHover(index);
+                  if (!isMobile) onStarHover(index);
                 }}
                 onMouseOut={() => {
-                  onStarHoverOut(index);
+                  if (!isMobile) onStarHoverOut(index);
                 }}
                 key={Math.random()}
               >
@@ -90,10 +92,10 @@ const StarRatingInput = (
                   onStarClick(index);
                 }}
                 onMouseOver={() => {
-                  onStarHover(index);
+                  if (!isMobile) onStarHover(index);
                 }}
                 onMouseOut={() => {
-                  onStarHoverOut(index);
+                  if (!isMobile) onStarHoverOut(index);
                 }}
                 key={Math.random()}
               >
@@ -107,10 +109,10 @@ const StarRatingInput = (
                 onStarClick(index);
               }}
               onMouseOver={() => {
-                onStarHover(index);
+                if (!isMobile) onStarHover(index);
               }}
               onMouseOut={() => {
-                onStarHoverOut(index);
+                if (!isMobile) onStarHoverOut(index);
               }}
               key={Math.random()}
             >

diff --git a/src/stories/StarRatingInput.stories.tsx b/src/stories/StarRatingInput.stories.tsx
@@ -19,6 +19,10 @@ const meta = {
       control: { type: 'number' },
       description: 'gap',
     },
+    isMobile: {
+      control: { type: 'boolean' },
+      description: 'isMobile',
+    },
   },
   args: {
     label: '별점',