style : add logout page

reBike · Aug 4, 2022 · a4e4b38 · a4e4b38
1 parent 86bba2b
commit a4e4b38
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 9 deletions.
diff --git 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() {
               <Route path="/mypage/myTrashChart" element={<MyTrashChart />} />
               <Route path="/mypage/myChallenge" element={<MyChallenge />} />
               <Route path="/mypage/userInfo" element={<ChangeInfo />} />
-              <Route path="/mypage/logout" element={<ChangeInfo />} />
+              <Route path="/mypage/logout" element={<LogOut />} />
             </Route>
           </Route>
         </Routes>

diff --git 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
@@ -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<HTMLDivElement>(null);
+    React.useEffect(() => {
+        lottie.loadAnimation({
+            container: element.current as HTMLDivElement,
+            renderer: "svg",
+            loop: false,
+            autoplay: true,
+            animationData: require("../../images/LogLottie.json"),
+        });
+    }, []);
+    return <Box ref={element} style={{ height: 300 }}></Box>;
+};
+
+
+function LogOut() {
+    function deleteToken() {
+        localStorage.clear();
+    }
+
+    return (
+        <Container
+            style={{
+                border: "solid",
+                borderRadius: 5,
+                borderColor: "transparent",
+                minWidth: "100%",
+                marginTop: 20,
+            }}
+        >
+            <ThemeProvider theme={theme}>
+                <Typography
+                    color="black"
+                    fontWeight="bold"
+                    sx={{ mt: 1.2, mb: 1, fontSize: "medium" }}
+                >
+
+                </Typography>
+                <Container
+                    style={{
+                        borderRadius: 8,
+                        backgroundColor: "white",
+                        boxShadow: "1px 3px 3px #B0B09A",
+                    }}
+                    sx={{ mt: 5, mb: 3, pb: 5 }}
+                >
+                    <Container
+                        style={{
+                            border: "solid",
+                            borderRadius: 5,
+                            borderColor: "transparent",
+                            minWidth: "100%",
+                            height: "auto",
+                        }}
+                    >
+
+                        <Container
+                            style={{
+                                backgroundColor: "white",
+                                border: "solid",
+                                borderRadius: 5,
+                                borderColor: "white",
+                                justifyContent: "center",
+                                height: "auto",
+                                paddingTop: 30,
+                                alignItems: "center",
+                            }}
+                        >
+                            <Typography
+                                id="modal-title"
+                                variant="h4"
+                                fontWeight="bold"
+                                component="h1"
+                                sx={{ textAlign: "center", mb: 3, mt: 5, color: "#737458", fontFamily: "Itim", }}
+                            >
+                                로그아웃 하시겠습니까?
+                            </Typography>
+                            <div style={{ marginTop: 25 }}>
+                                <Lottie />
+                            </div>
+                            <Container sx={{alignItems:"center", justifyContent:"center"}}>
+                                <Link href="/mainpage" onClick={deleteToken} sx={btnstyle}>
+                                    Log Out
+                                </Link>
+                            </Container>
+                        </Container>
+                    </Container>
+                </Container>
+            </ThemeProvider>
+        </Container >
+    );
+}
+
+export default LogOut;
diff --git 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() {
               </div>
               <Button>
                 <Link
-                  href="/mainpage"
-                  onClick={deleteToken}
                   sx={{
                     textDecoration: "none",
                     color: "#F7F8E9",

diff --git a/frontend/src/components/mainpage/UploadImage.tsx b/frontend/src/components/mainpage/UploadImage.tsx
@@ -115,7 +115,6 @@ function UploadImage() {
           .catch((error) => {
             // 분류 안됐을때
             clearInterval(timer);
-            alert(error);
             navigate("/errorpage");
           });
       };

diff --git a/frontend/src/images/LogLottie.json b/frontend/src/images/LogLottie.json