From a4e4b38763b6525e7f628ccf773f669d11c7550e Mon Sep 17 00:00:00 2001 From: RayLee Date: Thu, 4 Aug 2022 17:54:27 +0900 Subject: [PATCH] style : add logout page --- frontend/src/App.tsx | 3 +- frontend/src/Page/MainPage.tsx | 1 - frontend/src/components/Mypage/LogOutPage.tsx | 125 ++++++++++++++++++ frontend/src/components/common/Header.tsx | 6 - .../src/components/mainpage/UploadImage.tsx | 1 - frontend/src/images/LogLottie.json | 1 + 6 files changed, 128 insertions(+), 9 deletions(-) create mode 100644 frontend/src/components/Mypage/LogOutPage.tsx create mode 100644 frontend/src/images/LogLottie.json diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8c00743..924e111 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -14,6 +14,7 @@ import MyTrashcan from "./components/Mypage/MyTrashcan"; import MyTrashChart from "./components/Mypage/MyTrashChart"; import MyChallenge from "./components/Mypage/MyChallenge"; import ChangeInfo from "./components/Mypage/ChangeInfo"; +import LogOut from "./components/Mypage/LogOutPage"; import UploadResult from "./components/mainpage/UploadResult"; import AuthRouter from "./Auth/AuthRouter"; import StartPage from "./Page/StartPage"; @@ -46,7 +47,7 @@ function App() { } /> } /> } /> - } /> + } /> diff --git a/frontend/src/Page/MainPage.tsx b/frontend/src/Page/MainPage.tsx index 35b13dc..89cf8e3 100644 --- a/frontend/src/Page/MainPage.tsx +++ b/frontend/src/Page/MainPage.tsx @@ -5,7 +5,6 @@ import UploadImage from "../components/mainpage/UploadImage"; import PopularTrash from "../components/mainpage/PopularTrash"; import { useRef, useEffect } from "react"; import lottie from "lottie-web"; -import StartPage from "./StartPage"; import StartLogo from "../images/startLogo"; import Animation from "src/modules/Animation"; import useMoveScroll from "src/modules/UseMoveScroll"; diff --git a/frontend/src/components/Mypage/LogOutPage.tsx b/frontend/src/components/Mypage/LogOutPage.tsx new file mode 100644 index 0000000..d29c198 --- /dev/null +++ b/frontend/src/components/Mypage/LogOutPage.tsx @@ -0,0 +1,125 @@ +import * as React from "react"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; +import { + Typography, + Container, + Box, + Button, + Link +} from "@mui/material"; +import lottie from "lottie-web"; + +const theme = createTheme({ + palette: { + primary: { + main: "#737458", + }, + }, +}); + +const btnstyle = { + backgroundColor: "#B0B09A", + color: "#ffffff", + marginTop: "25px", + fontSize: "15px", + textDecoration: "none", + borderRadius: 4, + p: 1, + fontFamily: "Itim", + "&:hover": { backgroundColor: "#737458", color: "#ffffff" }, +}; + +const Lottie = () => { + const element = React.useRef(null); + React.useEffect(() => { + lottie.loadAnimation({ + container: element.current as HTMLDivElement, + renderer: "svg", + loop: false, + autoplay: true, + animationData: require("../../images/LogLottie.json"), + }); + }, []); + return ; +}; + + +function LogOut() { + function deleteToken() { + localStorage.clear(); + } + + return ( + + + + + + + + + + + 로그아웃 하시겠습니까? + +
+ +
+ + + Log Out + + + + + + + + ); +} + +export default LogOut; diff --git a/frontend/src/components/common/Header.tsx b/frontend/src/components/common/Header.tsx index 7538feb..399bbb4 100644 --- a/frontend/src/components/common/Header.tsx +++ b/frontend/src/components/common/Header.tsx @@ -78,10 +78,6 @@ function Header() { } }, []); - function deleteToken() { - localStorage.clear(); - } - //============Mypage List============ const navigate = useNavigate(); @@ -206,8 +202,6 @@ function Header() {