From 97333eb0dd75ba67047a953d4ce10a71e4bdf33b Mon Sep 17 00:00:00 2001
From: RayLee <wooo519@naver.com>
Date: Wed, 3 Aug 2022 22:59:25 +0900
Subject: [PATCH] chore : finish animation

---
 frontend/src/actions/useScrollFadeIn.jsx         | 10 +++++-----
 .../src/components/mainpage/PopularTrash.tsx     |  1 -
 frontend/src/components/mainpage/SearchBar.tsx   |  6 ------
 .../src/components/mainpage/TrashCardView.tsx    | 16 +++++-----------
 4 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/frontend/src/actions/useScrollFadeIn.jsx b/frontend/src/actions/useScrollFadeIn.jsx
index bb68d6d..0b98041 100644
--- 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
index 30310e6..0f19a82 100644
--- 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
index 4784f7e..35d1205 100644
--- 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
index 6ac8dbd..6e3f72c 100644
--- 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",