From 44a42249daee5a20d742928e9feb714aa5209451 Mon Sep 17 00:00:00 2001
From: Sinji <sinzi031012@naver.com>
Date: Sun, 11 Aug 2024 17:14:29 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EC=BA=90=EB=9F=AC=EC=85=80=20?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=82=AC=EC=9D=B4=EC=A6=88=20?=
 =?UTF-8?q?=EA=B3=A0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/main/components/carousel/Carousel.styled.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/pages/main/components/carousel/Carousel.styled.ts b/src/pages/main/components/carousel/Carousel.styled.ts
index ddba3ad5..fa1ab9e9 100644
--- a/src/pages/main/components/carousel/Carousel.styled.ts
+++ b/src/pages/main/components/carousel/Carousel.styled.ts
@@ -16,7 +16,8 @@ export const CarouselLayout = styled.div`
 
 export const CarouselContainer = styled.ul`
   display: flex;
-  width: 100%;
+  width: 37.5rem;
+  height: 48rem;
 `;
 
 export const CarouselItem = styled.button`

From 1493d261a1eb1e726f6ed6450031f0cbf53ff22a Mon Sep 17 00:00:00 2001
From: Sinji <sinzi031012@naver.com>
Date: Wed, 14 Aug 2024 01:01:54 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EC=BA=90=EB=9F=AC=EC=85=80=20?=
 =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20=ED=9A=A8=EA=B3=BC=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

이론상 맞는데... 모바일에서만 확인 가능하다네요... 다른 방법 일단
찾아보겠습니다!
---
 .../components/carousel/Carousel.styled.ts    |  2 +
 .../main/components/carousel/Carousel.tsx     | 52 ++++++++++++++++++-
 2 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/src/pages/main/components/carousel/Carousel.styled.ts b/src/pages/main/components/carousel/Carousel.styled.ts
index fa1ab9e9..7ff07c28 100644
--- a/src/pages/main/components/carousel/Carousel.styled.ts
+++ b/src/pages/main/components/carousel/Carousel.styled.ts
@@ -8,6 +8,8 @@ export const CarouselWarpper = styled.div`
 `;
 
 export const CarouselLayout = styled.div`
+  /* position: relative; */
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/src/pages/main/components/carousel/Carousel.tsx b/src/pages/main/components/carousel/Carousel.tsx
index ea3f1596..9ffa394c 100644
--- a/src/pages/main/components/carousel/Carousel.tsx
+++ b/src/pages/main/components/carousel/Carousel.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { TouchEventHandler, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import * as S from "./Carousel.styled";
 
@@ -12,6 +12,9 @@ interface PromotionComponentProps {
   promotionList: PromotionProps[];
 }
 
+let touchStartX: number;
+let touchEndX: number;
+
 const Carousel = ({ promotionList }: PromotionComponentProps) => {
   const navigate = useNavigate();
 
@@ -79,9 +82,54 @@ const Carousel = ({ promotionList }: PromotionComponentProps) => {
     };
   }, [currIndex]);
 
+  const handleSwipe = (direction: number) => {
+    const newIndex = currIndex + direction;
+
+    if (newIndex === carouselList.length + 1) {
+      moveToNthSlide(1);
+    } else if (newIndex === 0) {
+      moveToNthSlide(carouselList.length);
+    }
+
+    setCurrIndex((prev) => prev + direction);
+    if (carouselRef.current !== null) {
+      carouselRef.current.style.transition = "all 0.5s ease-in-out";
+    }
+  };
+
+  const handleTouchStart: TouchEventHandler<HTMLDivElement> = (e) => {
+    touchStartX = e.touches[0].clientX;
+    console.log(e.touches[0].clientX, "start!");
+  };
+
+  const handleTouchMove: TouchEventHandler<HTMLDivElement> = (e) => {
+    const currTouchX = e.nativeEvent.changedTouches[0].clientX;
+
+    if (carouselRef.current !== null) {
+      carouselRef.current.style.transform = `translateX(calc(-${currIndex}00% - ${
+        (touchStartX - currTouchX) * 2 || 0
+      }px))`;
+    }
+  };
+
+  const handleTouchEnd: TouchEventHandler<HTMLDivElement> = (e) => {
+    touchEndX = e.changedTouches[0].clientX;
+    console.log(e.changedTouches[0].clientX, "end!");
+
+    if (touchStartX >= touchEndX) {
+      handleSwipe(1);
+    } else {
+      handleSwipe(-1);
+    }
+  };
+
   return (
     <S.CarouselWarpper>
-      <S.CarouselLayout>
+      <S.CarouselLayout
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
         <S.CarouselContainer ref={carouselRef}>
           {currList?.map((image, idx) => {
             const key = `${image}-${idx}`;