From 0cf3b8896c18a26177842ef19055d8621dfd94d0 Mon Sep 17 00:00:00 2001 From: RayLee Date: Wed, 3 Aug 2022 14:56:16 +0900 Subject: [PATCH] style : add change Modal --- frontend/src/components/Mypage/ChangeInfo.tsx | 6 +- .../src/components/Mypage/Change_nickname.tsx | 98 +++++++++++++++++-- .../src/components/Mypage/Change_password.tsx | 90 ++++++++++++++++- .../src/components/Mypage/MyTrashChart.tsx | 6 +- frontend/src/components/Mypage/MyTrashcan.tsx | 4 +- frontend/src/components/chart/Date.tsx | 6 +- .../src/components/mainpage/TrashCardView.tsx | 12 +-- frontend/src/images/TrashLottie.json | 1 + 8 files changed, 198 insertions(+), 25 deletions(-) create mode 100644 frontend/src/images/TrashLottie.json diff --git a/frontend/src/components/Mypage/ChangeInfo.tsx b/frontend/src/components/Mypage/ChangeInfo.tsx index d1670b0..6cfa2e1 100644 --- 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 }}> @@ -79,7 +79,7 @@ function ChangeInfo() { - + ); diff --git a/frontend/src/components/Mypage/Change_nickname.tsx b/frontend/src/components/Mypage/Change_nickname.tsx index b9923de..013259d 100644 --- 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(null); + React.useEffect(() => { + lottie.loadAnimation({ + container: element.current as HTMLDivElement, + renderer: "svg", + loop: false, + autoplay: true, + animationData: require("../../images/TrashLottie.json"), + }); + }, []); + return ; +}; + 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, 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() { > 변경하기 + + + + + NickName Changed! + +
+ +
+ + + + diff --git a/frontend/src/components/Mypage/Change_password.tsx b/frontend/src/components/Mypage/Change_password.tsx index 65761d4..33e4f50 100644 --- 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(null); + React.useEffect(() => { + lottie.loadAnimation({ + container: element.current as HTMLDivElement, + renderer: "svg", + loop: false, + autoplay: true, + animationData: require("../../images/TrashLottie.json"), + }); + }, []); + return ; +}; + 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() { > 변경하기 + + + + + Password Changed! + +
+ +
+ + + + diff --git a/frontend/src/components/Mypage/MyTrashChart.tsx b/frontend/src/components/Mypage/MyTrashChart.tsx index ba5cab3..84bafff 100644 --- a/frontend/src/components/Mypage/MyTrashChart.tsx +++ b/frontend/src/components/Mypage/MyTrashChart.tsx @@ -17,12 +17,14 @@ function MyTrashchart() { - + 내 쓰레기 통계 {" "} diff --git a/frontend/src/components/chart/Date.tsx b/frontend/src/components/chart/Date.tsx index a546a5e..810da25 100644 --- 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 }) { > - - + + - - + + - - + +