refactor: Carousel 컴포넌트 이벤트 버블링 방지 코드 추가 (#170)

hang-log-design-system · Jan 7, 2024 · 9192b39 · 9192b39
1 parent 603ca2d
commit 9192b39
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/components/GeneralCarousel/Dots.tsx b/src/components/GeneralCarousel/Dots.tsx
@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import type { MouseEvent } from 'react';
 
 import { Theme } from '@styles/Theme';
 
@@ -20,15 +21,21 @@ const Dots = ({ imageLength, activeNumber, moveImage }: DotsProps) => {
               type="button"
               key={crypto.randomUUID()}
               css={dotStyle(true)}
-              onClick={() => moveImage(index)}
+              onClick={(e: MouseEvent<HTMLButtonElement>) => {
+                e.stopPropagation();
+                moveImage(index);
+              }}
             />
           );
         return (
           <button
             type="button"
             key={crypto.randomUUID()}
             css={dotStyle(false)}
-            onClick={() => moveImage(index)}
+            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+              e.stopPropagation();
+              moveImage(index);
+            }}
           />
         );
       })}

diff --git a/src/components/GeneralCarousel/GeneralCarousel.tsx b/src/components/GeneralCarousel/GeneralCarousel.tsx
@@ -18,6 +18,7 @@ export interface useGeneralCarouselProps {
   width: number;
   height: number;
   items: React.FC<React.SVGProps<SVGSVGElement>>[] | string[];
+  showNavigationOnHover?: boolean;
   showArrows?: boolean;
   showDots?: boolean;
 }
@@ -26,6 +27,7 @@ const GeneralCarousel = ({
   width,
   height,
   items,
+  showNavigationOnHover = true,
   showArrows = true,
   showDots = true,
 }: useGeneralCarouselProps) => {
@@ -38,7 +40,7 @@ const GeneralCarousel = ({
         <Dots imageLength={items.length} activeNumber={viewIndex} moveImage={handleMoveImage} />
       )}
       {showArrows && items.length !== 1 && (
-        <div css={getButtonContainerStyling(true)}>
+        <div css={getButtonContainerStyling(showNavigationOnHover)}>
           <button type="button" css={leftButtonStyling} onClick={handleClickLeft}>
             <LeftIcon />
           </button>

diff --git a/src/hooks/useGeneralCarousel.ts b/src/hooks/useGeneralCarousel.ts
@@ -1,4 +1,5 @@
 import { useRef, useState } from 'react';
+import type { MouseEvent } from 'react';
 import { flushSync } from 'react-dom';
 
 const useGeneralCarousel = (items: React.FC<React.SVGProps<SVGSVGElement>>[] | string[]) => {
@@ -20,7 +21,8 @@ const useGeneralCarousel = (items: React.FC<React.SVGProps<SVGSVGElement>>[] | s
     }
   };
 
-  const handleClickLeft = () => {
+  const handleClickLeft = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     if (itemRef.current) {
       flushSync(() => {
         if (viewIndex === 0) setViewIndex(0);
@@ -35,7 +37,8 @@ const useGeneralCarousel = (items: React.FC<React.SVGProps<SVGSVGElement>>[] | s
     }
   };
 
-  const handleClickRight = () => {
+  const handleClickRight = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     if (itemRef.current) {
       flushSync(() => {
         if (viewIndex === items.length - 1) setViewIndex(viewIndex);