Merge pull request #30 from HowTrash/feature/26-FE-startpageUI

Feature/26 fe startpage UI
reBike · Aug 3, 2022 · ac8efd1 · ac8efd1
2 parents 1f17697 + 7287ebc
commit ac8efd1
Show file tree

Hide file tree

Showing 26 changed files with 25,345 additions and 13,205 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -5,8 +5,6 @@
   "dependencies": {
     "@babel/core": "^7.18.6",
     "@datepicker-react/styled": "^2.8.4",
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
     "@mui/icons-material": "^5.8.4",
     "@mui/lab": "^5.0.0-alpha.91",
     "@mui/material": "^5.8.7",
@@ -35,6 +33,7 @@
     "react-redux": "^7.2.8",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "react-spring": "^9.5.2",
     "recharts": "^2.1.12",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.1",

diff --git a/frontend/public/ggu.jpg b/frontend/public/ggu.jpg
diff --git a/frontend/public/ggu2.jpg b/frontend/public/ggu2.jpg
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -50,10 +50,8 @@ function App() {
             </Route>
           </Route>
         </Routes>
-      </Router>
-      <footer>
         <Footer />
-      </footer>
+      </Router>
     </div>
   );
 }

diff --git a/frontend/src/Page/HowtoPage.tsx b/frontend/src/Page/HowtoPage.tsx
@@ -1,16 +1,37 @@
 import * as React from "react";
-import { Box, Grid, Typography, Link } from "@mui/material";
+import { Box, Grid, Typography, Link, Modal, Backdrop } from "@mui/material";
 import SearchBar from "../components/mainpage/SearchBar";
 import ExplanationTrash from "../components/howtopage/ExplanationTrash";
 import { ReduxModule } from "../modules/ReduxModule";
 import { useSelector } from "react-redux";
 import { RootReducerType } from "../index";
 import ReduxImgApi from "../modules/ReduxImgApi";
+import { useLocation } from "react-router";
+import constants from "../utils/constants";
+import { useEffect, useState } from "react";
 
-interface trashType {
-  type: string;
+interface TypeChallenge {
+  state: {
+    challenge_id: string;
+    challenge_content: string;
+  };
 }
 
+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 HowtoPage = () => {
   const itemID = useSelector((state: RootReducerType) => state.ImgIDReducer);
   const userIdToRedux = ReduxModule().decodeInfo?.id;
@@ -19,6 +40,33 @@ const HowtoPage = () => {
   console.log(userIdToRedux);
   console.log(itemID);
 
+  const { state } = useLocation() as TypeChallenge;
+
+  console.log("state가 뭔대ㅔ요 ... ", state);
+  //❌
+
+  const [challengeText, setChallengeText] = useState("");
+  const [challengeImgURL, setChallengeImgURL] = useState("");
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  //❌
+
+  useEffect(() => {
+    if (state.challenge_id !== "NONE") {
+      handleOpen();
+      console.log("challenge가 뭔데요 ...", state.challenge_id);
+      const x = state.challenge_id; // 형변환
+      console.log("x가 뭔대ㅔ요 ... ", x);
+      var y: number = +x;
+      console.log("y가 뭔데요 ㅠㅠ", y);
+      setChallengeImgURL(constants.CHALLENGE[y].imgT);
+      setChallengeText(constants.CHALLENGE[y].test);
+    }
+  }, []);
+
+  //none이 아니면 state.challenge를 인덱스로 state.challenge_content 를 갯수로
+
   return (
     <Box textAlign={"center"}>
       <div>
@@ -76,6 +124,36 @@ const HowtoPage = () => {
             {" "}
             Go To Mypage{" 👉"}{" "}
           </Link>
+
+          {/* //❌ */}
+          <Modal
+            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" }}
+              >
+                도전 과제 달성 !!
+              </Typography>
+              <div style={{ marginTop: 15, marginBottom: 30 }}>
+                <img width={200} height={200} src={challengeImgURL}></img>
+              </div>
+
+              <Typography>{challengeText}</Typography>
+            </Box>
+          </Modal>
+
+          {/* //❌ */}
         </Grid>
       </div>
     </Box>

diff --git a/frontend/src/Page/Login.tsx b/frontend/src/Page/Login.tsx
@@ -14,11 +14,8 @@ import {
   Typography,
   Container,
   Link,
-  styled,
 } from "@mui/material";
-import { checkAccessToken, checkRefreshToken } from "src/Auth/checkToken";
 import { decodeToken } from "src/Auth/tokenGetter";
-import Footer from "src/components/common/Footer";
 
 const theme = createTheme({
   palette: {
@@ -28,17 +25,6 @@ const theme = createTheme({
   },
 });
 
-// const UserInfoTf = styled(TextField)(({}) => ({
-//   "&:hover": {
-//     color: "#B0B09A",
-//   },
-//   "& .MuiOutlinedInput-root": {
-//     "&:hover fieldset": {
-//       borderColor: "#B0B09A",
-//     },
-//   },
-// }));
-
 function Login() {
   const userInfo = [] as unknown as rs.UserAuth;
 

diff --git a/frontend/src/Page/MainPage.tsx b/frontend/src/Page/MainPage.tsx
@@ -1,13 +1,74 @@
 import * as React from "react";
-import { Box } from "@mui/material";
+import { Box, Link } from "@mui/material";
 import SearchBar from "../components/mainpage/SearchBar";
 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";
+
+const MainLottie = () => {
+  //lottie
+  const element = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    lottie.loadAnimation({
+      container: element.current as HTMLDivElement,
+      renderer: "svg",
+      loop: true,
+      autoplay: true,
+      animationData: require("../images/mainbike.json"),
+    });
+  }, []);
+  return <Box ref={element} style={{ marginTop: 30, height: 180 }}></Box>;
+};
 
 const MainPage = () => {
+  const { element, onMoveToElement } = useMoveScroll();
+
   return (
     <Box textAlign={"center"}>
       <div>
+        <Box
+          textAlign={"center"}
+          style={{
+            backgroundImage: "url(ggu.jpg)",
+            backgroundPosition: "center",
+            width: "100wh",
+            height: "100vh",
+            backgroundRepeat: "no-repeat",
+            display: "flex",
+            justifyContent: "space-evenly",
+          }}
+        >
+          <Box
+            display={"flex"}
+            textAlign={"center"}
+            style={{ height: "30vh", width: "30wh" }}
+            flexDirection="column"
+            margin={"auto"}
+          >
+            <StartLogo />
+
+            <Link
+              onClick={onMoveToElement}
+              style={{
+                textDecoration: "none",
+                fontWeight: "bold",
+                fontFamily: "IrishGrover",
+                color: "white",
+              }}
+            >
+              <Animation />
+            </Link>
+          </Box>
+        </Box>
+        {/* <StartPage /> */}
+        <div ref={element}></div>
+
+        <MainLottie />
         <SearchBar />
         <UploadImage />
         <PopularTrash />

diff --git a/frontend/src/Page/Register.tsx b/frontend/src/Page/Register.tsx
@@ -135,7 +135,9 @@ const Register = () => {
       nameRegex.test(user.name as string) &&
       aliasRegex.test(user.alias as string)
     ) {
-      Api.post<User>(`users/`, user)
+
+      Api.post<User>(`/users/`, user)
+
         .then((response) => {
           // Handle success.
           handleOpen();
@@ -172,7 +174,9 @@ const Register = () => {
       if (!emailRegex.test(email as string)) {
         setCheckEmail("올바른 이메일 형식이 아닙니다.");
       } else {
+
         if (res.data.result === false) setCheckEmail("사용 중인 이메일 입니다.");
+
         else setCheckEmail("사용 가능한 이메일 입니다.");
       }
     }

diff --git a/frontend/src/Page/StartPage.tsx b/frontend/src/Page/StartPage.tsx
@@ -1,55 +1,43 @@
-import { useState, useEffect, useRef } from "react";
 import { Box, Button, Link } from "@mui/material";
-import lottie from "lottie-web";
-import Main from "../images/mainBacl";
-
-const MainPageLottie = () => {
-  //lottie
-  const element = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    lottie.loadAnimation({
-      container: element.current as HTMLDivElement,
-      renderer: "svg",
-      loop: false,
-      autoplay: true,
-      animationData: require("../images/mainLottie.json"),
-    });
-  }, []);
-  return <Box ref={element} style={{ height: 300 }}></Box>;
-};
+import StartLogo from "../images/startLogo";
+import Animation from "src/modules/Animation";
+import useMoveScroll from "src/modules/UseMoveScroll";
 
 const StartPage = () => {
+  const { element, onMoveToElement } = useMoveScroll();
+
   return (
     <Box
-      display="flex"
       textAlign={"center"}
       style={{
-        position: "absolute",
-        backgroundColor: "white",
-        zIndex: 100,
-        width: "100vw",
+        backgroundImage: "url(ggu.jpg)",
+        backgroundPosition: "center",
+        width: "100wh",
         height: "100vh",
+        backgroundRepeat: "no-repeat",
+        display: "flex",
+        justifyContent: "space-evenly",
       }}
     >
-      <Main />
       <Box
-        position={"absolute"}
         display={"flex"}
+        textAlign={"center"}
+        style={{ height: "30vh" }}
         flexDirection="column"
-        justifyContent={"center"}
-        alignSelf="center"
-        zIndex={90}
+        margin={"auto"}
       >
-        <MainPageLottie />
+        <StartLogo />
+
         <Link
-          href="/mainpage"
-          display={"flex"}
-          flexDirection="column"
-          justifyContent={"center"}
-          alignSelf="center"
-          style={{ margin: "auto", textDecoration: "none", fontWeight: "bold" }}
+          onClick={onMoveToElement}
+          style={{
+            textDecoration: "none",
+            fontWeight: "bold",
+            fontFamily: "IrishGrover",
+            color: "white",
+          }}
         >
-          <Button>메인 페이지로 간드앙</Button>
+          <Animation />
         </Link>
       </Box>
     </Box>

diff --git a/frontend/src/components/common/Footer.tsx b/frontend/src/components/common/Footer.tsx
@@ -20,7 +20,7 @@ function Footer() {
           maxWidth: "1920px",
           backgroundColor: "#737458",
           padding: 0,
-          marginTop: 70,
+          // marginTop: 70,
         }}
       >
         <div

diff --git a/frontend/src/components/mainpage/SearchBar.tsx b/frontend/src/components/mainpage/SearchBar.tsx
@@ -46,7 +46,7 @@ const SearchBar = () => {
         borderRadius: 3,
         boxShadow: "1px 3px 3px #B0B09A",
         margin: "auto",
-        mt: 25,
+        mt: 2,
         width: "58ch",
       }}
     >