style : add change Modal

reBike · Aug 3, 2022 · 0cf3b88 · 0cf3b88
1 parent 8d183cc
commit 0cf3b88
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 25 deletions.
diff --git a/frontend/src/components/Mypage/ChangeInfo.tsx b/frontend/src/components/Mypage/ChangeInfo.tsx
@@ -54,9 +54,9 @@ function ChangeInfo() {
                         borderColor: "white",
                         justifyContent: "center",
                         height: "60vh",
-                        paddingTop: 50,
+                        paddingTop:50,
                         boxShadow: "1px 3px 3px #B0B09A",
-                    }}>
+                    }} sx={{ mt: 3 }}>
                     <Grid item xs={5}>
                         <Box>
                             <ChangeNickName />
@@ -79,7 +79,7 @@ function ChangeInfo() {
                     </Grid>
 
                 </Grid>
-            </ThemeProvider>
+        </ThemeProvider>
         </Container >
 
     );

diff --git a/frontend/src/components/Mypage/Change_nickname.tsx b/frontend/src/components/Mypage/Change_nickname.tsx
@@ -7,8 +7,9 @@ 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,
@@ -18,6 +19,40 @@ import {
   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 theme = createTheme({
   palette: {
@@ -27,7 +62,7 @@ const theme = createTheme({
   },
 });
 
-const UserInfoChange = styled(TextField)(({}) => ({
+const UserInfoChange = styled(TextField)(({ }) => ({
   borderRadius: 5,
   textAlign: "center",
   "&:hover": {
@@ -49,12 +84,32 @@ 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 onBlurInfo = async (props: Array<string>, event: any) => {
     const res = await Api.get(
       `/users/?case=${props[0]}&value=${props[1] as string}`
@@ -93,8 +148,8 @@ function ChangeNickName() {
           console.log("response", response.data);
           setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화
           setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화
-          alert("닉네임이 정상적으로 변경되었습니다!");
-          window.location.reload();
+          // window.location.reload();
+          handleOpen();
         })
         .catch((e) => {
           // 의도치 않는 오류
@@ -116,9 +171,9 @@ function ChangeNickName() {
     //오류 생길때는 활성화 X 화면 넘어가지 않도록
   };
 
-  React.useEffect(() => {}, [alias]);
+  React.useEffect(() => { }, [alias]);
   React.useEffect(() => {
-    console.log("newAccess",newAccess);
+    console.log("newAccess", newAccess);
   }, [newAccess]);
 
   return (
@@ -199,6 +254,37 @@ 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="/mainpage" sx={btnstyle}>
+                  OK
+                </Button>
+              </Box>
+            </Modal>
           </Box>
         </Container>
       </ThemeProvider>

diff --git a/frontend/src/components/Mypage/Change_password.tsx b/frontend/src/components/Mypage/Change_password.tsx
@@ -9,6 +9,8 @@ import { useState } from "react";
 import Api from "../../utils/customApi";
 
 import {
+    Modal,
+    Backdrop,
     FormHelperText,
     Typography,
     Container,
@@ -18,6 +20,39 @@ import {
     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 theme = createTheme({
     palette: {
@@ -49,13 +84,32 @@ 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 aliasChange = async (changePassword : string) => {
+    const [open, setOpen] = React.useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
+    const aliasChange = async (changePassword: string) => {
         const stringAccess: any = getAccess();
 
         if (stringAccess !== null) { // stringAccess if문 안써주면 코드 오류 발생
@@ -72,8 +126,7 @@ function ChangePassWord() {
                     console.log("response", response.data);
                     setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화
                     setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화
-                    alert("비밀번호가 정상적으로 변경되었습니다!");
-                    window.location.reload();
+                    handleOpen();
                 })
                 .catch((e) => { // 의도치 않는 오류
                     alert("로그인 정보에 오류가 생겼습니다.");
@@ -193,6 +246,37 @@ 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="/mainpage" sx={btnstyle}>
+                                    OK
+                                </Button>
+                            </Box>
+                        </Modal>
                     </Box>
                 </Container>
             </ThemeProvider>

diff --git a/frontend/src/components/Mypage/MyTrashChart.tsx b/frontend/src/components/Mypage/MyTrashChart.tsx
@@ -17,12 +17,14 @@ function MyTrashchart() {
         <Container
             style={{
                 border: "solid",
-                borderRadius: 5,
+                borderRadius: 8,
                 borderColor: "transparent",
                 minWidth: "100%",
                 height: "100vh",
             }}>
-            <Typography color="black" fontWeight="bold" sx={{ mt: 3, mb: 2, fontSize: "medium" }}>
+            <Typography color="black" fontWeight="bold" sx={{
+                mt: 1.2, mb: 1, fontSize: "medium"
+            }}>
                 내 쓰레기 통계
             </Typography>
             <Container

diff --git a/frontend/src/components/Mypage/MyTrashcan.tsx b/frontend/src/components/Mypage/MyTrashcan.tsx
@@ -104,10 +104,10 @@ function MyTrashcan(props: Props) {
     <Container
       style={{
         border: "solid",
-        borderRadius: 5,
+        borderRadius: 8,
         borderColor: "transparent",
         minWidth: "100%",
-        marginTop: 30,
+        marginTop: 20,
       }}
     >
       {" "}

diff --git a/frontend/src/components/chart/Date.tsx b/frontend/src/components/chart/Date.tsx
@@ -13,7 +13,7 @@ import { ReduxModule } from "../../modules/ReduxModule";
 const theme = createTheme({
   palette: {
     primary: {
-      main: "#759F98",
+      main: "#737458",
     },
   },
 });
@@ -118,7 +118,7 @@ function Dates({ onClickRetrieve }: { onClickRetrieve: any }) {
           >
             <Box margin="4px">
               <DatePicker
-                label="Start Date"
+                label="시작 날짜"
                 inputFormat="yyyy/MM/dd"
                 value={StartDate}
                 onChange={HandleStartChange as any}
@@ -138,7 +138,7 @@ function Dates({ onClickRetrieve }: { onClickRetrieve: any }) {
             </Box>
             <Box margin="4px">
               <DatePicker
-                label="End Date"
+                label="종료 날짜"
                 inputFormat="yyyy/MM/dd"
                 value={EndDate}
                 onChange={HandleEndChange as any}

diff --git a/frontend/src/components/mainpage/TrashCardView.tsx b/frontend/src/components/mainpage/TrashCardView.tsx
@@ -116,8 +116,8 @@ function MultiActionAreaCard() {
           margin: "auto",
           mt: 5
         }}>
-          <CardActionArea>
-            <CardMedia component="img" height="500" width="450" image={firstData?.images} />
+          <CardActionArea sx ={{borderRadius : 5}}>
+            <CardMedia component="img" height="500" width="450" image={firstData?.images} sx ={{borderRadius : 5}}/>
             <Typography
               fontSize={40}
               component="div"
@@ -160,8 +160,8 @@ function MultiActionAreaCard() {
           margin: "auto",
           mt: 5
         }}>
-          <CardActionArea>
-            <CardMedia component="img" height="500" width="450" image={secondData?.images} />
+          <CardActionArea sx ={{borderRadius : 5}}>
+            <CardMedia component="img" height="500" width="450" image={secondData?.images} sx ={{borderRadius : 5}}/>
             <Typography
               fontSize={40}
               component="div"
@@ -205,8 +205,8 @@ function MultiActionAreaCard() {
           margin: "auto",
           mt: 5
         }}>
-          <CardActionArea>
-            <img height="500" width="450" src={thridData?.images} />
+          <CardActionArea sx ={{borderRadius : 5}}>
+          <CardMedia component="img" height="500" width="450" image ={thridData?.images} sx ={{borderRadius : 5}} />
             <Typography
               fontSize={40}
               component="div"