From a6bd7a847286fd68b3c4cf0990e3f41accdda075 Mon Sep 17 00:00:00 2001
From: RayLee <wooo519@naver.com>
Date: Thu, 4 Aug 2022 00:56:21 +0900
Subject: [PATCH] chore : code cleaning

---
 ...seScrollFadeIn.jsx => useScrollFadeIn.tsx} | 22 +++--
 .../src/components/Mypage/Change_nickname.tsx | 96 ++----------------
 .../src/components/Mypage/Change_password.tsx | 95 ++----------------
 frontend/src/components/Mypage/OpenModal.tsx  | 98 +++++++++++++++++++
 .../src/components/mainpage/TrashCardView.tsx |  2 +-
 5 files changed, 125 insertions(+), 188 deletions(-)
 rename frontend/src/actions/{useScrollFadeIn.jsx => useScrollFadeIn.tsx} (64%)
 create mode 100644 frontend/src/components/Mypage/OpenModal.tsx

diff --git a/frontend/src/actions/useScrollFadeIn.jsx b/frontend/src/actions/useScrollFadeIn.tsx
similarity index 64%
rename from frontend/src/actions/useScrollFadeIn.jsx
rename to frontend/src/actions/useScrollFadeIn.tsx
index 0b98041..9421607 100644
--- a/frontend/src/actions/useScrollFadeIn.jsx
+++ b/frontend/src/actions/useScrollFadeIn.tsx
@@ -3,7 +3,7 @@ import { useRef, useEffect, useCallback } from 'react';
 const useScrollFadeIn = (direction = 'up', duration = 1, delay = 0) => {
   const element = useRef();
 
-  const handleDirection = (name) => {
+  const handleDirection = (name: string) => {
     switch (name) {
       case 'up':
         return 'translate3d(0, 30%, 0)';
@@ -19,22 +19,24 @@ const useScrollFadeIn = (direction = 'up', duration = 1, delay = 0) => {
   };
 
   const onScroll = useCallback(
-    ([entry]) => {
-      const { current } = element;
+    ([entry]: any[]) => {
+      const { current }: any = 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)';
+        if (current) {
+          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;
+    let observer: any;
 
     if (element.current) {
       observer = new IntersectionObserver(onScroll, { threshold: 0.3 });
diff --git a/frontend/src/components/Mypage/Change_nickname.tsx b/frontend/src/components/Mypage/Change_nickname.tsx
index 4c2e222..a894ac2 100644
--- a/frontend/src/components/Mypage/Change_nickname.tsx
+++ b/frontend/src/components/Mypage/Change_nickname.tsx
@@ -1,58 +1,22 @@
 import * as React from "react";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import axios from "axios";
-import { rs } from "src/utils/types";
 import { API_BASE_URL } from "src/utils/constants";
 import { getAccess } from "../../Auth/tokenManager";
 import { setAccessToken, setRefreshToken } from "src/Auth/tokenManager";
 import { useState } from "react";
 import Api from "../../utils/customApi";
 import {
-  Modal,
-  Backdrop,
   FormHelperText,
   Typography,
   Container,
   styled,
   TextField,
   Box,
-  Link,
   Button,
+  Hidden,
 } from "@mui/material";
-import lottie from "lottie-web";
-
-
-const style = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: 400,
-  bgcolor: "background.paper",
-  borderRadius: 3,
-  boxShadow: 24,
-  p: 4,
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "center",
-};
-
-const btnstyle = {
-  borderColor: "transparent",
-  backgroundColor: "#B0B09A",
-  color: "#ffffff",
-  height: "40px",
-  width: "300px",
-  marginTop: "25px",
-  textAlign: "center",
-  fontSize: "15px",
-  textDecoration: "none",
-  borderRadius: 4,
-  p: 1,
-  fontFamily: "Itim",
-  "&:hover": { backgroundColor: "#737458", color: "#ffffff" },
-};
-
+import OpenModal from "./OpenModal"
 
 const theme = createTheme({
   palette: {
@@ -84,30 +48,13 @@ const FormHelperTexts = styled(FormHelperText)`
   font-size: 12px;
 `;
 
-const Lottie = () => {
-  //lottie
-  const element = React.useRef<HTMLDivElement>(null);
-  React.useEffect(() => {
-    lottie.loadAnimation({
-      container: element.current as HTMLDivElement,
-      renderer: "svg",
-      loop: false,
-      autoplay: true,
-      animationData: require("../../images/TrashLottie.json"),
-    });
-  }, []);
-  return <Box ref={element} style={{ height: 300 }}></Box>;
-};
-
 function ChangeNickName() {
   const aliasRegex = /^[가-힣a-zA-Z0-9]+$/;
   const [checkAilas, setCheckAlias] = useState("");
   const [alias, setAlias] = useState("");
   const [newAccess, getNewAccess] = useState("");
 
-  const [open, setOpen] = React.useState(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
+  const [open, setOpen] = useState(false);
 
 
   const onBlurInfo = async (props: Array<string>, event: any) => {
@@ -148,8 +95,7 @@ function ChangeNickName() {
           console.log("response", response.data);
           setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화
           setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화
-          // window.location.reload();
-          handleOpen();
+          setOpen(true);
         })
         .catch((e) => {
           // 의도치 않는 오류
@@ -254,37 +200,9 @@ function ChangeNickName() {
             >
               변경하기
             </Button>
-
-            <Modal
-              aria-labelledby="modal-title"
-              aria-describedby="modal-description"
-              open={open}
-              onClose={handleClose}
-              closeAfterTransition
-              BackdropComponent={Backdrop}
-              BackdropProps={{
-                timeout: 700,
-              }}
-            >
-              <Box sx={style}>
-                <Typography
-                  id="modal-title"
-                  variant="h4"
-                  fontWeight="bold"
-                  component="h1"
-                  sx={{ mb: 3, color: "#737458", fontFamily: "Itim" }}
-                >
-                  NickName Changed!
-                </Typography>
-                <div style={{ marginTop: 15 }}>
-                  <Lottie />
-                </div>
-
-                <Button href="/mypage/userInfo" sx={btnstyle}>
-                  OK
-                </Button>
-              </Box>
-            </Modal>
+            <>
+              {open ? <OpenModal open={open} /> : Hidden}
+            </>
           </Box>
         </Container>
       </ThemeProvider>
diff --git a/frontend/src/components/Mypage/Change_password.tsx b/frontend/src/components/Mypage/Change_password.tsx
index ff1d597..6df9a64 100644
--- a/frontend/src/components/Mypage/Change_password.tsx
+++ b/frontend/src/components/Mypage/Change_password.tsx
@@ -1,58 +1,22 @@
 import * as React from "react";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import axios from "axios";
-import { rs } from "src/utils/types";
 import { API_BASE_URL } from "src/utils/constants";
 import { getAccess } from "../../Auth/tokenManager";
 import { setAccessToken, setRefreshToken } from "src/Auth/tokenManager";
 import { useState } from "react";
-import Api from "../../utils/customApi";
 
 import {
-    Modal,
-    Backdrop,
     FormHelperText,
     Typography,
     Container,
     styled,
     TextField,
     Box,
-    Link,
-    Button
+    Button,
+    Hidden
 } from "@mui/material";
-import lottie from "lottie-web";
-
-const style = {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    width: 400,
-    bgcolor: "background.paper",
-    borderRadius: 3,
-    boxShadow: 24,
-    p: 4,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-};
-
-const btnstyle = {
-    borderColor: "transparent",
-    backgroundColor: "#B0B09A",
-    color: "#ffffff",
-    height: "40px",
-    width: "300px",
-    marginTop: "25px",
-    textAlign: "center",
-    fontSize: "15px",
-    textDecoration: "none",
-    borderRadius: 4,
-    p: 1,
-    fontFamily: "Itim",
-    "&:hover": { backgroundColor: "#737458", color: "#ffffff" },
-};
-
+import OpenModal from "./OpenModal"
 
 const theme = createTheme({
     palette: {
@@ -84,30 +48,13 @@ const FormHelperTexts = styled(FormHelperText)`
   font-size: 12px;
 `;
 
-const Lottie = () => {
-    //lottie
-    const element = React.useRef<HTMLDivElement>(null);
-    React.useEffect(() => {
-        lottie.loadAnimation({
-            container: element.current as HTMLDivElement,
-            renderer: "svg",
-            loop: false,
-            autoplay: true,
-            animationData: require("../../images/TrashLottie.json"),
-        });
-    }, []);
-    return <Box ref={element} style={{ height: 300 }}></Box>;
-};
-
-
 function ChangePassWord() {
     const [passwordState, setPasswordState] = useState("");
     const [passwordError, setPasswordError] = useState("");
     const passwordRegex = /^[가-힣a-zA-Z0-9]+$/;
 
-    const [open, setOpen] = React.useState(false);
+    const [open, setOpen] = useState(false);
     const handleOpen = () => setOpen(true);
-    const handleClose = () => setOpen(false);
 
     const aliasChange = async (changePassword: string) => {
         const stringAccess: any = getAccess();
@@ -246,37 +193,9 @@ function ChangePassWord() {
                         >
                             변경하기
                         </Button>
-
-                        <Modal
-                            aria-labelledby="modal-title"
-                            aria-describedby="modal-description"
-                            open={open}
-                            onClose={handleClose}
-                            closeAfterTransition
-                            BackdropComponent={Backdrop}
-                            BackdropProps={{
-                                timeout: 700,
-                            }}
-                        >
-                            <Box sx={style}>
-                                <Typography
-                                    id="modal-title"
-                                    variant="h4"
-                                    fontWeight="bold"
-                                    component="h1"
-                                    sx={{ mb: 3, color: "#737458", fontFamily: "Itim" }}
-                                >
-                                    Password Changed!
-                                </Typography>
-                                <div style={{ marginTop: 15 }}>
-                                    <Lottie />
-                                </div>
-
-                                <Button href="/mypage/userInfo" sx={btnstyle}>
-                                    OK
-                                </Button>
-                            </Box>
-                        </Modal>
+                        <>
+                            {open ? <OpenModal open={open} /> : Hidden}
+                        </>
                     </Box>
                 </Container>
             </ThemeProvider>
diff --git a/frontend/src/components/Mypage/OpenModal.tsx b/frontend/src/components/Mypage/OpenModal.tsx
new file mode 100644
index 0000000..ee43bfa
--- /dev/null
+++ b/frontend/src/components/Mypage/OpenModal.tsx
@@ -0,0 +1,98 @@
+import * as React from "react";
+import { useState } from "react";
+import {
+    Modal,
+    Backdrop,
+    FormHelperText,
+    Typography,
+    Box,
+    Link,
+    Button,
+} from "@mui/material";
+import lottie from "lottie-web";
+
+const style = {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 400,
+    bgcolor: "background.paper",
+    borderRadius: 3,
+    boxShadow: 24,
+    p: 4,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+};
+
+const btnstyle = {
+    borderColor: "transparent",
+    backgroundColor: "#B0B09A",
+    color: "#ffffff",
+    height: "40px",
+    width: "300px",
+    marginTop: "25px",
+    textAlign: "center",
+    fontSize: "15px",
+    textDecoration: "none",
+    borderRadius: 4,
+    p: 1,
+    fontFamily: "Itim",
+    "&:hover": { backgroundColor: "#737458", color: "#ffffff" },
+};
+
+const Lottie = () => {
+    //lottie
+    const element = React.useRef<HTMLDivElement>(null);
+    React.useEffect(() => {
+        lottie.loadAnimation({
+            container: element.current as HTMLDivElement,
+            renderer: "svg",
+            loop: false,
+            autoplay: true,
+            animationData: require("../../images/TrashLottie.json"),
+        });
+    }, []);
+    return <Box ref={element} style={{ height: 300 }}></Box>;
+};
+
+function OpenModal(open : any) {
+
+    const [opens, setOpens] = useState(open);
+    const handleClose = () => setOpens(false);
+
+    return (
+        <Modal
+            aria-labelledby="modal-title"
+            aria-describedby="modal-description"
+            open={open}
+            onClose={handleClose}
+            closeAfterTransition
+            BackdropComponent={Backdrop}
+            BackdropProps={{
+                timeout: 700,
+            }}
+        >
+            <Box sx={style}>
+                <Typography
+                    id="modal-title"
+                    variant="h4"
+                    fontWeight="bold"
+                    component="h1"
+                    sx={{ mb: 3, color: "#737458", fontFamily: "Itim" }}
+                >
+                    Change Success!
+                </Typography>
+                <div style={{ marginTop: 15 }}>
+                    <Lottie />
+                </div>
+
+                <Link href="/mypage/userInfo" sx={btnstyle}>
+                    OK
+                </Link>
+            </Box>
+        </Modal>
+    )
+};
+export default OpenModal;
\ No newline at end of file
diff --git a/frontend/src/components/mainpage/TrashCardView.tsx b/frontend/src/components/mainpage/TrashCardView.tsx
index 12eb28d..73133ec 100644
--- a/frontend/src/components/mainpage/TrashCardView.tsx
+++ b/frontend/src/components/mainpage/TrashCardView.tsx
@@ -143,7 +143,7 @@ function MultiActionAreaCard() {
       </Grid>
 
       <Grid item
-        sx={{ p: 2, width: "100%", marginLeft: "15cm", justifyContent: "flex-end" }}>
+        sx={{ p: 2, width: "100%", marginLeft: "10cm", justifyContent: "flex-end" }}>
         <Typography
           sx={{ fontSize: 40, mt: 10, fontFamily: "Itim", color: "#737458" }}
         >2nd