From 594a6e040030b358a4f09b371944b65133a00193 Mon Sep 17 00:00:00 2001 From: SeungYeon Date: Thu, 4 Apr 2024 18:09:51 +0900 Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BA=90=EB=9F=AC=EC=85=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EC=8A=AC?= =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/carousel/eventCarousel.tsx | 45 +++++++++++++++++++++-- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/src/components/carousel/eventCarousel.tsx b/src/components/carousel/eventCarousel.tsx index 8aaf8517..367e6041 100644 --- a/src/components/carousel/eventCarousel.tsx +++ b/src/components/carousel/eventCarousel.tsx @@ -23,16 +23,50 @@ function EventCarousel({ const [currList, setCurrList] = useState<(string | StaticImageData)[]>([]); // 화면에 표시될 이미지 리스트 (버퍼 이미지 제외) const [ButtonActiveIndex, setButtonActiveIndex] = useState(0); const carouselRef = useRef(null); + const touchStartRef = useRef(null); + const touchEndRef = useRef(null); + let noEventImage: StaticImageData | string; + // 버튼 클릭시 보여줄 이미지와 button 상태 변경 함수 const updateIndex = (index: number) => { - // 버튼 클릭시 보여줄 이미지와 button 상태 변경 setCurrIndex(index + 1); setButtonActiveIndex(index); }; + // 터치 이벤트 함수 + const handleTouchStart = (e: React.TouchEvent) => { + touchStartRef.current = e.touches[0].clientX; + }; + + const handleTouchMove = (e: React.TouchEvent) => { + touchEndRef.current = e.touches[0].clientX; + }; + + const handleTouchEnd = () => { + if (touchStartRef.current !== null && touchEndRef.current !== null) { + const diff = touchStartRef.current - touchEndRef.current; + const sensitivity = 50; // 터치 이벤트 감지 감도 (좌우 이동 거리) + if (diff > sensitivity) { + // 오른쪽으로 슬라이드 + const newIndex = + currIndex === currList.length ? currIndex : currIndex + 1; + setCurrIndex(newIndex); + setButtonActiveIndex(newIndex - 1); + } else if (diff < -sensitivity) { + // 왼쪽으로 슬라이드 + const newIndex = currIndex === 1 ? 1 : currIndex - 1; + setCurrIndex(newIndex); + setButtonActiveIndex(newIndex - 1); + } + } + // 터치 이벤트 초기화 + touchStartRef.current = null; + touchEndRef.current = null; + }; + + // 브라우저 사이즈에 따라 pc/mobile용 이미지를 currList에 저장 useEffect(() => { - // 브라우저 사이즈에 따라 pc/mobile용 이미지를 currList에 저장 const updateImageLists = () => { const width = window.innerWidth; const isMobile = width < 768; @@ -58,8 +92,8 @@ function EventCarousel({ }; }, [eventImages.mobile, eventImages.pc]); + // 이미지 슬라이드 기능 useEffect(() => { - // 이미지 슬라이드 기능 const carousel = carouselRef.current; if (carousel) { carousel.style.transition = 'transform 0.5s ease-in-out'; @@ -93,7 +127,10 @@ function EventCarousel({
    + ref={carouselRef} + onTouchStart={handleTouchStart} + onTouchMove={handleTouchMove} + onTouchEnd={handleTouchEnd}> {fullImageList.map((image, idx) => (
  • Date: Thu, 4 Apr 2024 18:13:50 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=EB=93=9C=EB=9E=98=EA=B7=B8=20?= =?UTF-8?q?=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EB=AC=B4=ED=95=9C?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=8F=8C=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/carousel/eventCarousel.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/carousel/eventCarousel.tsx b/src/components/carousel/eventCarousel.tsx index 367e6041..632ef342 100644 --- a/src/components/carousel/eventCarousel.tsx +++ b/src/components/carousel/eventCarousel.tsx @@ -49,13 +49,12 @@ function EventCarousel({ const sensitivity = 50; // 터치 이벤트 감지 감도 (좌우 이동 거리) if (diff > sensitivity) { // 오른쪽으로 슬라이드 - const newIndex = - currIndex === currList.length ? currIndex : currIndex + 1; + const newIndex = currIndex === currList.length ? 1 : currIndex + 1; setCurrIndex(newIndex); setButtonActiveIndex(newIndex - 1); } else if (diff < -sensitivity) { // 왼쪽으로 슬라이드 - const newIndex = currIndex === 1 ? 1 : currIndex - 1; + const newIndex = currIndex === 1 ? currList.length : currIndex - 1; setCurrIndex(newIndex); setButtonActiveIndex(newIndex - 1); } From da3077b67382db1c8d4a1542e1f2daae54e56795 Mon Sep 17 00:00:00 2001 From: SeungYeon Date: Fri, 12 Apr 2024 18:01:33 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=EB=B2=84=ED=8A=BC=20=EB=A7=88?= =?UTF-8?q?=EC=9A=B0=EC=8A=A4=EC=98=A4=EB=B2=84=20=EC=8A=A4=ED=83=80?= =?UTF-8?q?=EC=9D=BC=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/carousel/eventCarousel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/carousel/eventCarousel.tsx b/src/components/carousel/eventCarousel.tsx index 632ef342..b86f172d 100644 --- a/src/components/carousel/eventCarousel.tsx +++ b/src/components/carousel/eventCarousel.tsx @@ -118,7 +118,7 @@ function EventCarousel({
    {currList.map((_, idx) => (