From 8ebd823bb3346bbde434a9665bcacaf9ca63e98f Mon Sep 17 00:00:00 2001
From: chaeminseok <minseok23491@naver.com>
Date: Wed, 10 Jul 2024 01:54:45 +0900
Subject: [PATCH] =?UTF-8?q?bug=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../homePage/eventCarousel/EventCarousel.tsx  | 113 ++++++++----------
 1 file changed, 52 insertions(+), 61 deletions(-)

diff --git a/src/pages/homePage/eventCarousel/EventCarousel.tsx b/src/pages/homePage/eventCarousel/EventCarousel.tsx
index 4759d920..cd4fb65d 100644
--- a/src/pages/homePage/eventCarousel/EventCarousel.tsx
+++ b/src/pages/homePage/eventCarousel/EventCarousel.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { useNavigate } from "react-router-dom";
 
 import * as S from "./EventCarousel.style";
@@ -12,102 +13,92 @@ interface EventItem {
   title1: string;
   title2: string;
 }
+
 interface EventCarouselProps {
   EventCarouselContents: EventItem[];
   arrows?: boolean;
   height?: number;
   infinite?: boolean;
-  innerShadow?: boolean;
   draggable?: boolean;
-  auto?: boolean;
 }
+
 const EventCarousel: React.FC<EventCarouselProps> = ({
   EventCarouselContents,
   arrows,
-  height,
-  infinite,
-  draggable,
+  height = 300,
+  infinite = true,
+  draggable = true,
 }) => {
   const navigate = useNavigate();
   const { slideWidth, sliderRef } = useCarouselSize();
   const slideList = infinite
     ? [
-        EventCarouselContents.at(-1),
+        EventCarouselContents.slice(-1)[0],
         ...EventCarouselContents,
-        EventCarouselContents.at(0),
+        EventCarouselContents[0],
       ]
     : EventCarouselContents;
+
   const {
     currentIndex,
     getSliderStyle,
     handleSliderNavigationClick,
-    handleSliderTransitionEnd,
     handlerSliderMoueDown,
     handleSliderTouchStart,
+    handleSliderTransitionEnd,
   } = useCarousel({
     slideLength: slideList.length,
     infinite,
     slideWidth,
   });
+
   const onClickHandler = (id: number) => {
     navigate(`${PATH.MAIN_DETAIL}?id=${id}`);
   };
 
   return (
-    <>
-      <S.Container $height={height}>
-        <S.SliderContainer
-          ref={sliderRef}
-          style={getSliderStyle()}
-          data-testid={`slide-${currentIndex}`}
-          onMouseDown={draggable ? handlerSliderMoueDown : undefined}
-          onTouchStart={draggable ? handleSliderTouchStart : undefined}
-          onTransitionEnd={draggable ? handleSliderTransitionEnd : undefined}
-        >
-          {slideList?.map((content, index) => (
-            <S.ImageWrapper key={index} $height={height}>
-              <img
-                src={content?.image}
-                onClick={() => onClickHandler(content?.id ?? 0)}
-              />
-              <S.Title>
-                <div>{content?.title1}</div>
-                <div>{content?.title2}</div>
-                <div>바로 예약하러 가기</div>
-              </S.Title>
-            </S.ImageWrapper>
-          ))}
-        </S.SliderContainer>
-        {arrows && (
-          <S.ButtonContainer>
-            <S.LeftButton
-              aria-label="뒤로가기"
-              onClick={handleSliderNavigationClick(currentIndex - 1)}
-              $visible={infinite || currentIndex > 0}
-            >
-              <S.LeftIcon />
-            </S.LeftButton>
-            <S.RightButton
-              aria-label="앞으로가기"
-              onClick={handleSliderNavigationClick(currentIndex + 1)}
-              $visible={infinite || currentIndex < slideList.length - 1}
-            >
-              <S.RightIcon />
-            </S.RightButton>
-          </S.ButtonContainer>
-        )}
-      </S.Container>
-    </>
+    <S.Container $height={height}>
+      <S.SliderContainer
+        ref={sliderRef}
+        style={getSliderStyle()}
+        onMouseDown={draggable ? handlerSliderMoueDown : undefined}
+        onTouchStart={draggable ? handleSliderTouchStart : undefined}
+        onTransitionEnd={draggable ? handleSliderTransitionEnd : undefined}
+      >
+        {slideList.map((content, index) => (
+          <S.ImageWrapper key={index} $height={height}>
+            <img
+              src={content?.image}
+              onClick={() => onClickHandler(content?.id ?? 0)}
+            />
+            <S.Title>
+              <div>{content?.title1}</div>
+              <div>{content?.title2}</div>
+              <div>바로 예약하러 가기</div>
+            </S.Title>
+          </S.ImageWrapper>
+        ))}
+      </S.SliderContainer>
+      {arrows && (
+        <S.ButtonContainer>
+          <S.LeftButton
+            aria-label="뒤로가기"
+            onClick={() => handleSliderNavigationClick(currentIndex - 1)}
+            $visible={infinite || currentIndex > 0}
+          >
+            Left
+          </S.LeftButton>
+          <S.RightButton
+            aria-label="앞으로가기"
+            onClick={() => handleSliderNavigationClick(currentIndex + 1)}
+            $visible={infinite || currentIndex < slideList.length - 1}
+          >
+            Right
+          </S.RightButton>
+        </S.ButtonContainer>
+      )}
+    </S.Container>
   );
 };
 
-EventCarousel.defaultProps = {
-  height: 300,
-  arrows: true,
-  infinite: true,
-  draggable: true,
-  innerShadow: false,
-  auto: false,
-};
-
 export default EventCarousel;