From 8e4f7382e24726cbe34b0a16bad5152ba8dd6bce Mon Sep 17 00:00:00 2001
From: Kim DoKyun <51306225+jasper200207@users.noreply.github.com>
Date: Mon, 19 Feb 2024 19:18:31 +0900
Subject: [PATCH] =?UTF-8?q?Feature/#55=20crop=20line=20=EA=B2=B9=EC=B9=98?=
 =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20(#57)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix : 아이콘 겹치는 현상

#55

* design : 아이콘 속도 20s로 설정

#55

* refactor : keyframe snake_case 사용

#55
---
 src/containers/main/CropLine/index.tsx |  7 +++-
 src/containers/main/CropLine/style.css | 54 +++++++++++++++++++++++---
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/src/containers/main/CropLine/index.tsx b/src/containers/main/CropLine/index.tsx
index 79e173c1..28eeb618 100644
--- a/src/containers/main/CropLine/index.tsx
+++ b/src/containers/main/CropLine/index.tsx
@@ -16,7 +16,7 @@ const cropImageList = [
 const CropLine = ({ reverse = false }: CropLineProps) => {
   const [cropListCount, setCropListCount] = useState<number>(0);
   useEffect(() => {
-    setCropListCount(Math.ceil(window.innerHeight / cropImageList.length) + 1);
+    setCropListCount(Math.ceil(window.innerHeight / 136 / cropImageList.length) + 1);
   }, []);
 
   const cropList = Array.from({ length: cropListCount * cropImageList.length }).map((_, index) => ({
@@ -31,6 +31,11 @@ const CropLine = ({ reverse = false }: CropLineProps) => {
           <Image key={crop.id} w="24" mb="10" alt="crop" src={crop.img} />
         ))}
       </Flex>
+      <Flex className={reverse ? 'rev_rolling_crop_clone' : 'rolling_crop_clone'} pos="absolute" direction="column">
+        {cropList.map((crop) => (
+          <Image key={crop.id} w="24" mb="10" alt="crop" src={crop.img} />
+        ))}
+      </Flex>
     </Box>
   );
 };
diff --git a/src/containers/main/CropLine/style.css b/src/containers/main/CropLine/style.css
index 6d66cd75..4d0f0e44 100644
--- a/src/containers/main/CropLine/style.css
+++ b/src/containers/main/CropLine/style.css
@@ -1,25 +1,69 @@
+:root {
+  --duration: 20s;
+}
+
 .rolling_crop {
-  animation: 1000s linear 0s infinite normal forwards running rolling_top;
+  animation: var(--duration, 10s) linear 0s infinite normal forwards running rollingtop;
+}
+.rolling_crop_clone {
+  animation: var(--duration, 10s) linear 0s infinite normal none running rollingtopclone;
 }
 
 .rev_rolling_crop {
-  animation: 1000s linear 0s infinite normal forwards running rolling_bottom;
+  animation: var(--duration, 10s) linear 0s infinite normal forwards running rollingbottom;
+}
+.rev_rolling_crop_clone {
+  animation: var(--duration, 10s) linear 0s infinite normal none running rollingbottomclone;
 }
 
 @keyframes rolling_top {
   0% {
-    transform: translateY(0%);
+    transform: translateY(0);
   }
   50% {
+    display: none;
+    transform: translateY(-100%);
+  }
+  50.1% {
+    display: none;
+    transform: translateY(99.8%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes rolling_top_clone {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
     transform: translateY(-100%);
   }
 }
 
 @keyframes rolling_bottom {
   0% {
-    transform: translateY(-99%);
+    transform: translateY(0);
+  }
+  50% {
+    display: none;
+    transform: translateY(100%);
+  }
+  50.1% {
+    display: none;
+    transform: translateY(-99.8%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes rolling_bottom_clone {
+  0% {
+    transform: translateY(-100%);
   }
   100% {
-    transform: translateY(1%);
+    transform: translateY(100%);
   }
 }