Feature/#55 crop line 겹치는 현상 (#57)

* fix : 아이콘 겹치는 현상

#55

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

#55

* refactor : keyframe snake_case 사용

#55

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>
   );
 };

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%);
   }
 }