chore : finish animation

reBike · Aug 3, 2022 · 97333eb · 97333eb
1 parent 9e260c7
commit 97333eb
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 23 deletions.
diff --git a/frontend/src/actions/useScrollFadeIn.jsx b/frontend/src/actions/useScrollFadeIn.jsx
@@ -6,13 +6,13 @@ const useScrollFadeIn = (direction = 'up', duration = 1, delay = 0) => {
   const handleDirection = (name) => {
     switch (name) {
       case 'up':
-        return 'translate3d(0, 50%, 0)';
+        return 'translate3d(0, 30%, 0)';
       case 'down':
-        return 'translate3d(0, -50%, 0)';
+        return 'translate3d(0, -30%, 0)';
       case 'left':
-        return 'translate3d(50%, 0, 0)';
+        return 'translate3d(30%, 0, 0)';
       case 'right':
-        return 'translate3d(-50%, 0, 0)';
+        return 'translate3d(-30%, 0, 0)';
       default:
         return;
     }
@@ -37,7 +37,7 @@ const useScrollFadeIn = (direction = 'up', duration = 1, delay = 0) => {
     let observer;
 
     if (element.current) {
-      observer = new IntersectionObserver(onScroll, { threshold: 0.7 });
+      observer = new IntersectionObserver(onScroll, { threshold: 0.3 });
       observer.observe(element.current);
     }
 

diff --git a/frontend/src/components/mainpage/PopularTrash.tsx b/frontend/src/components/mainpage/PopularTrash.tsx
@@ -1,6 +1,5 @@
 import { Typography, Box } from "@mui/material";
 import TrashCardView from "./TrashCardView";
-import AutoGraphIcon from '@mui/icons-material/AutoGraph';
 import useScrollFadeIn from '../../actions/useScrollFadeIn';
 
 

diff --git a/frontend/src/components/mainpage/SearchBar.tsx b/frontend/src/components/mainpage/SearchBar.tsx
@@ -22,12 +22,6 @@ const SearchBar = () => {
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    //const data = new FormData(e.currentTarget);
-    // console.log(input);
-    // if (input === "A") window.location.href = "../Howto";
-    // else alert("그런 검색어는 없어요ㅜ");
-    // setInput("");
-
     if (input === "paper") {
       searchHowTrash("cardboard");
     } else alert("그런 검색어는 없어요ㅜ");

diff --git a/frontend/src/components/mainpage/TrashCardView.tsx b/frontend/src/components/mainpage/TrashCardView.tsx
@@ -80,14 +80,8 @@ function MultiActionAreaCard() {
           }
         }
       }
-      /*
-      trashlist.forEach(kindlist => {
-       kindlist.kind = response.data.kind
-       ranklist.forEach(imagelist => {
-         if (imagelist.kind === kindlist.kind)
-         kindlist.images = imagelist.images;
-       })})
-       */
+
+
       setFirstData(trashlist[0]);
       setSecondData(trashlist[1]);
       setThirdData(trashlist[2]);
@@ -107,7 +101,7 @@ function MultiActionAreaCard() {
           sx={{ fontSize: 40, mt: 10, fontFamily: "Itim", color: "#737458" }}
         >1st
         </Typography>
-        <Box  {...useScrollFadeIn('up', 1)}>
+        <Box  {...useScrollFadeIn('up', 1, 0.1)}>
           <Box sx={{
             width: 800, border: 0,
             backgroundColor: "white",
@@ -153,7 +147,7 @@ function MultiActionAreaCard() {
           sx={{ fontSize: 40, mt: 10, fontFamily: "Itim", color: "#737458" }}
         >2nd
         </Typography>
-        <Box   {...useScrollFadeIn('up', 1)}>
+        <Box   {...useScrollFadeIn('left', 1, 0.1)}>
           <Box sx={{
             width: 650, border: 0,
             backgroundColor: "white",
@@ -200,7 +194,7 @@ function MultiActionAreaCard() {
           sx={{ fontSize: 40, mt: 10, fontFamily: "Itim", color: "#737458" }}
         >3rd
         </Typography>
-        <Box {...useScrollFadeIn('up', 1)}>
+        <Box {...useScrollFadeIn('right', 1, 0.1)}>
           <Box sx={{
             width: 450, border: 1,
             backgroundColor: "white",