refactor: useDragIndexCarousel 로 Carousel 컴포넌트 리팩터링

cau-likelion-org · May 10, 2024 · 6ab9750 · 6ab9750
1 parent 0f8338c
commit 6ab9750
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@next/font": "13.1.1",
     "@notionhq/client": "^2.2.3",
+    "@rapiders/react-hooks": "^1.2.1",
     "@types/gtag.js": "^0.0.18",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",

diff --git a/src/components/archiving/Carousel.tsx b/src/components/archiving/Carousel.tsx
@@ -1,50 +1,26 @@
-import { useState } from 'react';
+import { useEffect } from 'react';
 import Image from 'next/image';
 import styled from 'styled-components';
-import { AnimatePresence, motion, PanInfo } from 'framer-motion';
-import { useInterval } from 'src/hooks/useInterval';
-import useSlider from 'src/hooks/useSlider';
+import { useDragIndexCarousel, useInterval } from '@rapiders/react-hooks';
 
-const Carousel = ({ images }: { images: string[]; }) => {
-  const [index, direction, increase, decrease, animateVariant] = useSlider<string>(images, 0.1, 1000, false, 'tween');
-  const [timerBool, setTimerBool] = useState(true);
-  const [dragStartX, setdragStartX] = useState(0);
-  useInterval(increase, 3000, timerBool);
+const Carousel = ({ images }: { images: string[] }) => {
+  const { CarouselWrapper, ref, next, index, isDragging } = useDragIndexCarousel(images.length, { infinity: true });
+  const { stop, continueTimer } = useInterval(next, 3000);
+
+  useEffect(() => {
+    if (isDragging) stop();
+    else continueTimer();
+  }, [isDragging]);
 
-  const handleScroll = (_: any, info: PanInfo) => {
-    setTimerBool((prev) => (prev = true));
-    if (dragStartX > info.point.x) increase();
-    else decrease();
-  };
   return (
     <Wrapper>
-      <CarouselWrapper>
-        <AnimatePresence initial={false} custom={direction}>
-          <ImageWrapper
-            key={index}
-            variants={animateVariant}
-            initial="initial"
-            animate="visible"
-            exit="exit"
-            drag={images.length === 1 ? false : 'x'}
-            onDragStart={(_, info) => {
-              setTimerBool((prev) => (prev = false));
-              setdragStartX((prev) => (prev = info.point.x));
-            }}
-            onDragEnd={handleScroll}
-            custom={direction}
-          >
-            <CustomImage
-              src={images[index]}
-              alt="img"
-              layout="fill"
-              objectFit="contain"
-              objectPosition="center"
-            />
-          </ImageWrapper>
-        </AnimatePresence>
+      <CarouselWrapper ref={ref} className="carouselWrapper">
+        {images.map((img) => (
+          <div style={{ width: '100%', backgroundColor: 'white' }} key={img}>
+            <img src={img} draggable={false} style={{ objectFit: 'contain', width: '100%', height: '100%' }} />
+          </div>
+        ))}
       </CarouselWrapper>
-
       <DiamondWrapper>
         {Array.from({ length: images.length }, (_, i) => i).map((i) => (
           <Diamond key={i} color={index === i ? '#1a21bd' : '#F0F1FF'} />
@@ -67,31 +43,15 @@ const CustomImage = styled(Image)`
   cursor: pointer;
   -webkit-user-drag: none;
 `;
-const CarouselWrapper = styled.div`
-  position: relative;
-  width: 100%;
-  height: 50vh;
-  border-radius: 30px;
-  border: none;
-  overflow: hidden;
-  @media (max-width: 900px) {
-    height: 30vh;
-  }
-`;
+
 const DiamondWrapper = styled.div`
   display: flex;
   width: 100%;
   justify-content: center;
   align-items: center;
   margin-top: 20px;
 `;
-const ImageWrapper = styled(motion.div)`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-radius: 30px;
-  border: none;
-`;
+
 const Diamond = styled.div`
   width: 7px;
   height: 7px;

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -86,3 +86,15 @@ a {
 * {
   box-sizing: border-box;
 }
+
+.carouselWrapper {
+  position: relative;
+  width: 100%;
+  height: 50vh;
+  border-radius: 30px;
+  border: none;
+  overflow: hidden;
+  @media (max-width: 900px) {
+    height: 30vh;
+  }
+}
diff --git a/yarn.lock b/yarn.lock
@@ -1298,6 +1298,11 @@
   resolved "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
+"@rapiders/react-hooks@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@rapiders/react-hooks/-/react-hooks-1.2.1.tgz"
+  integrity sha512-IrD65nXCLMP5Z/KP3aoZAMdG58XvnHG/Twwk4GnUXygpqrAcenngnCyzrj2jx14kZbeehtu81sBPMWOjdjp+1g==
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz"
@@ -6331,7 +6336,7 @@ react-cookies@^0.1.1:
     cookie "^0.3.1"
     object-assign "^4.1.1"
 
-"react-dom@^17.0.2 || ^18.0.0-0", react-dom@^18.0.0, "react-dom@>= 16.8.0", [email protected]:
+"react-dom@^17.0.2 || ^18.0.0-0", react-dom@^18.0.0, react-dom@^18.2.0, "react-dom@>= 16.8.0", [email protected]:
   version "18.2.0"
   resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz"
   integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==