From 9e260c7efbb2add92fac7c65face65fec9645dbf Mon Sep 17 00:00:00 2001
From: RayLee <wooo519@naver.com>
Date: Wed, 3 Aug 2022 18:01:33 +0900
Subject: [PATCH] style : add animation

---
 frontend/src/actions/useScrollFadeIn.jsx      |  53 ++++
 .../src/components/Mypage/UserChallenge.tsx   |   2 +-
 .../src/components/mainpage/PopularTrash.tsx  |   3 +-
 .../src/components/mainpage/TrashCardView.tsx | 232 +++++++++---------
 4 files changed, 175 insertions(+), 115 deletions(-)
 create mode 100644 frontend/src/actions/useScrollFadeIn.jsx

diff --git a/frontend/src/actions/useScrollFadeIn.jsx b/frontend/src/actions/useScrollFadeIn.jsx
new file mode 100644
index 0000000..bb68d6d
--- /dev/null
+++ b/frontend/src/actions/useScrollFadeIn.jsx
@@ -0,0 +1,53 @@
+import { useRef, useEffect, useCallback } from 'react';
+
+const useScrollFadeIn = (direction = 'up', duration = 1, delay = 0) => {
+  const element = useRef();
+
+  const handleDirection = (name) => {
+    switch (name) {
+      case 'up':
+        return 'translate3d(0, 50%, 0)';
+      case 'down':
+        return 'translate3d(0, -50%, 0)';
+      case 'left':
+        return 'translate3d(50%, 0, 0)';
+      case 'right':
+        return 'translate3d(-50%, 0, 0)';
+      default:
+        return;
+    }
+  };
+
+  const onScroll = useCallback(
+    ([entry]) => {
+      const { current } = element;
+      if (entry.isIntersecting) {
+        current.style.transitionProperty = 'all';
+        current.style.transitionDuration = `${duration}s`;
+        current.style.transitionTimingFunction = 'cubic-bezier(0, 0, 0.2, 1)';
+        current.style.transitionDelay = `${delay}s`;
+        current.style.opacity = 1;
+        current.style.transform = 'translate3d(0, 0, 0)';
+      }
+    },
+    [delay, duration],
+  );
+
+  useEffect(() => {
+    let observer;
+
+    if (element.current) {
+      observer = new IntersectionObserver(onScroll, { threshold: 0.7 });
+      observer.observe(element.current);
+    }
+
+    return () => observer && observer.disconnect();
+  }, [onScroll]);
+
+  return {
+    ref: element,
+    style: { opacity: 0, transform: handleDirection(direction) },
+  };
+};
+
+export default useScrollFadeIn;
\ No newline at end of file
diff --git a/frontend/src/components/Mypage/UserChallenge.tsx b/frontend/src/components/Mypage/UserChallenge.tsx
index a553d84..5bc4959 100644
--- a/frontend/src/components/Mypage/UserChallenge.tsx
+++ b/frontend/src/components/Mypage/UserChallenge.tsx
@@ -26,7 +26,7 @@ export default function UserChallenge({ num = 1, type }: Props) {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        marginTop: 20,
+        marginTop: 5,
       }}
     >
       <img src={whatChallenge?.imgT} alt="008" style={{ width: 250 }} />
diff --git a/frontend/src/components/mainpage/PopularTrash.tsx b/frontend/src/components/mainpage/PopularTrash.tsx
index a44e9ed..30310e6 100644
--- a/frontend/src/components/mainpage/PopularTrash.tsx
+++ b/frontend/src/components/mainpage/PopularTrash.tsx
@@ -1,12 +1,13 @@
 import { Typography, Box } from "@mui/material";
 import TrashCardView from "./TrashCardView";
 import AutoGraphIcon from '@mui/icons-material/AutoGraph';
+import useScrollFadeIn from '../../actions/useScrollFadeIn';
 
 
 function PopularTrash() {
     return (
         <Box textAlign={"center"} >
-            <Box sx={{ mt: 15, mb: 7 }}>
+            <Box sx={{ mt: 15, mb: 7 }} {...useScrollFadeIn('down', 1)}>
                 <Typography
                     sx={{ fontSize: 50, mt: 10, fontFamily: "Itim", color: "#737458" }}
                 >This Week's Ranking
diff --git a/frontend/src/components/mainpage/TrashCardView.tsx b/frontend/src/components/mainpage/TrashCardView.tsx
index 24c628a..6ac8dbd 100644
--- a/frontend/src/components/mainpage/TrashCardView.tsx
+++ b/frontend/src/components/mainpage/TrashCardView.tsx
@@ -12,9 +12,8 @@ import {
   CardMedia,
   Typography,
 } from "@mui/material";
-import { decodeToken } from "src/Auth/tokenGetter";
 import axios from "axios";
-import { response } from "express";
+import useScrollFadeIn from '../../actions/useScrollFadeIn';
 
 interface BaseContent {
   kind: string;
@@ -99,139 +98,146 @@ function MultiActionAreaCard() {
 
   return (
     <Grid container
-      sx={{ display: "flex", direction:"column", flexWrap: "wrap"}}
+      sx={{ display: "flex", direction: "column", flexWrap: "wrap" }}
     >
-      <Grid item 
-        sx={{ p: 2, width:"100%", justifyContent : "flex-start"}}>
+      <Grid item
+        sx={{ p: 2, width: "100%", justifyContent: "flex-start" }}
+      >
         <Typography
           sx={{ fontSize: 40, mt: 10, fontFamily: "Itim", color: "#737458" }}
         >1st
         </Typography>
-        <Box sx={{
-          width: 800, border: 0,
-          backgroundColor: "white",
-          borderColor: "#759F98",
-          borderRadius: 5,
-          boxShadow: "1px 3px 3px #B0B09A",
-          margin: "auto",
-          mt: 5
-        }}>
-          <CardActionArea sx ={{borderRadius : 5}}>
-            <CardMedia component="img" height="500" width="450" image={firstData?.images} sx ={{borderRadius : 5}}/>
-            <Typography
-              fontSize={40}
-              component="div"
-              margin={1}
-              marginTop={2}
-              sx={{ fontFamily: "Itim", color: "#737458" }}
-            >
-              {firstData?.kind}
-            </Typography>
-          </CardActionArea>
+        <Box  {...useScrollFadeIn('up', 1)}>
+          <Box sx={{
+            width: 800, border: 0,
+            backgroundColor: "white",
+            borderColor: "#759F98",
+            borderRadius: 5,
+            boxShadow: "1px 3px 3px #B0B09A",
+            margin: "auto",
+            mt: 5,
+          }}>
+            <CardActionArea sx={{ borderRadius: 5 }} >
+              <CardMedia component="img" height="500" width="450" image={firstData?.images} sx={{ borderRadius: 5 }} />
+              <Typography
+                fontSize={40}
+                component="div"
+                margin={1}
+                marginTop={2}
+                sx={{ fontFamily: "Itim", color: "#737458" }}
+              >
+                {firstData?.kind}
+              </Typography>
+            </CardActionArea>
+          </Box>
+          <Button
+            variant="text"
+            onClick={() => {
+              navigate(`/defaulthowpage`, {
+                state: {
+                  needKind: firstData?.kind,
+                  needImages: firstData?.images,
+                },
+              });
+            }}
+            sx={{ mt: 3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
+          >
+            How to Recycle this {firstData?.kind}??
+          </Button>
         </Box>
-        <Button
-          variant="text"
-          onClick={() => {
-            navigate(`/defaulthowpage`, {
-              state: {
-                needKind: firstData?.kind,
-                needImages: firstData?.images,
-              },
-            });
-          }}
-          sx={{ mt:3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
-        >
-          How to Recycle this {firstData?.kind}??
-        </Button>
       </Grid>
 
       <Grid item
-        sx={{ p: 2, width:"100%", marginLeft:"15cm",justifyContent:"flex-end"}}>
+        sx={{ p: 2, width: "100%", marginLeft: "15cm", justifyContent: "flex-end" }}>
         <Typography
           sx={{ fontSize: 40, mt: 10, fontFamily: "Itim", color: "#737458" }}
         >2nd
         </Typography>
-        <Box sx={{
-          width: 650, border: 0,
-          backgroundColor: "white",
-          borderColor: "#759F98",
-          borderRadius: 5,
-          boxShadow: "1px 3px 3px #B0B09A",
-          margin: "auto",
-          mt: 5
-        }}>
-          <CardActionArea sx ={{borderRadius : 5}}>
-            <CardMedia component="img" height="500" width="450" image={secondData?.images} sx ={{borderRadius : 5}}/>
-            <Typography
-              fontSize={40}
-              component="div"
-              margin={1}
-              marginTop={2}
-              sx={{ fontFamily: "Itim", color: "#737458" }}
-            >
-              {secondData?.kind}
-            </Typography>
-          </CardActionArea>
-        </Box>
+        <Box   {...useScrollFadeIn('up', 1)}>
+          <Box sx={{
+            width: 650, border: 0,
+            backgroundColor: "white",
+            borderColor: "#759F98",
+            borderRadius: 5,
+            boxShadow: "1px 3px 3px #B0B09A",
+            margin: "auto",
+            mt: 5,
+          }}>
+            <CardActionArea sx={{ borderRadius: 5 }}>
+              <CardMedia component="img" height="500" width="450" image={secondData?.images} sx={{ borderRadius: 5 }} />
+              <Typography
+                fontSize={40}
+                component="div"
+                margin={1}
+                marginTop={2}
+                sx={{ fontFamily: "Itim", color: "#737458" }}
+              >
+                {secondData?.kind}
+              </Typography>
+            </CardActionArea>
+          </Box>
 
-        <Button
-              variant="text"
-              onClick={() => {
-                navigate(`/defaulthowpage`, {
-                  state: {
-                    needKind: secondData?.kind,
-                    needImages: secondData?.images,
-                  },
-                });
-              }}
-              sx={{ mt:3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
-            >
-              How to Recycle this {secondData?.kind}??
-            </Button>
+          <Button
+            variant="text"
+            onClick={() => {
+              navigate(`/defaulthowpage`, {
+                state: {
+                  needKind: secondData?.kind,
+                  needImages: secondData?.images,
+                },
+              });
+            }}
+            sx={{ mt: 3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
+          >
+            How to Recycle this {secondData?.kind}??
+          </Button>
+        </Box>
       </Grid>
 
       <Box
-        sx={{ p: 2, width:"100%", marginRight:"20cm" }}>
+        sx={{ p: 2, width: "100%", marginRight: "20cm" }}>
         <Typography
           sx={{ fontSize: 40, mt: 10, fontFamily: "Itim", color: "#737458" }}
         >3rd
         </Typography>
-        <Box sx={{
-          width: 450, border: 1,
-          backgroundColor: "white",
-          borderColor: "white",
-          borderRadius: 5,
-          boxShadow: "1px 3px 3px #B0B09A",
-          margin: "auto",
-          mt: 5
-        }}>
-          <CardActionArea sx ={{borderRadius : 5}}>
-          <CardMedia component="img" height="500" width="450" image ={thridData?.images} sx ={{borderRadius : 5}} />
-            <Typography
-              fontSize={40}
-              component="div"
-              margin={1}
-              marginTop={2}
-              sx={{ fontFamily: "Itim", color: "#737458" }}
-            >
-              {thridData?.kind}
-            </Typography>
-          </CardActionArea>
+        <Box {...useScrollFadeIn('up', 1)}>
+          <Box sx={{
+            width: 450, border: 1,
+            backgroundColor: "white",
+            borderColor: "white",
+            borderRadius: 5,
+            boxShadow: "1px 3px 3px #B0B09A",
+            margin: "auto",
+            mt: 5
+          }}>
+            <CardActionArea sx={{ borderRadius: 5 }}>
+              <CardMedia component="img" height="500" width="450" image={thridData?.images} sx={{ borderRadius: 5 }} />
+              <Typography
+                fontSize={40}
+                component="div"
+                margin={1}
+                marginTop={2}
+                sx={{ fontFamily: "Itim", color: "#737458" }}
+              >
+                {thridData?.kind}
+              </Typography>
+            </CardActionArea>
+          </Box>
+          <Button
+            variant="text"
+            onClick={() => {
+              navigate(`/defaulthowpage`, {
+                state: {
+                  needKind: thridData?.kind,
+                  needImages: thridData?.images,
+                },
+              });
+            }}
+            sx={{ mt: 3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
+          >
+            How to Recycle this {thridData?.kind}??
+          </Button>
         </Box>
-        <Button
-              variant="text"
-              onClick={() => {
-                navigate(`/defaulthowpage`, {
-                  state: {
-                    needKind: thridData?.kind,
-                    needImages: thridData?.images,
-                  },
-                });
-              }}
-              sx={{ mt:3, margin: "auto", fontFamily: "Itim", color: "#737458", fontSize: 20 }}
-            >
-              How to Recycle this {thridData?.kind}??
-            </Button>
       </Box>
     </Grid>
   );