Merge branch 'master' into feature/26-FE-startpageUI

frontend/src/App.tsx

@@ -7,6 +7,9 @@ import Header from "./components/common/Header";
 import Register from "./Page/Register";
 import HowtoPage from "./Page/HowtoPage";
 import ErrorPage from "./components/common/ErrorPage";
+import DefaultHowPage from "./Page/DefaultHowPage";
+
+import GreenBack from "./images/greenBack";
 import MyTrashcan from "./components/Mypage/MyTrashcan";
 import MyTrashChart from "./components/Mypage/MyTrashChart";
 import MyChallenge from "./components/Mypage/MyChallenge";
@@ -33,16 +36,13 @@ function App() {
             <Route path="/mainpage/resultpage" element={<UploadResult />} />
             <Route path="/mainpage" element={<MainPage />} />
             <Route path="/howtopage" element={<HowtoPage />} />
+            <Route path="/defaulthowpage" element={<DefaultHowPage />} />
           </Route>
 
           {/* mypage 에 접근 못하게 라우팅 */}
           <Route element={<AuthRouter authAble={true} />}>
             <Route path="/mypage" element={<MyPage />}>
               <Route index element={<MyTrashcan />} />
-              {/* <Route
-                path={`/mypage/trashNum/:trashNum/howTo`}
-                element={<HowtoResult />}
-              /> */}
               <Route path="/mypage/myTrashChart" element={<MyTrashChart />} />
               <Route path="/mypage/myChallenge" element={<MyChallenge />} />
               <Route path="/mypage/userInfo" element={<ChangeInfo />} />

frontend/src/Auth/checkToken.ts

@@ -81,7 +81,7 @@ const getRefreshToken = async () => {
 
     localStorage.removeItem("access_token");
     if (accessToken !== null) {
-      setAccessToken(accessToken);
+      setAccessToken(accessToken,false);
       window.location.reload();
     }
 

frontend/src/Auth/tokenManager.tsx

@@ -1,46 +1,37 @@
-import axios from "axios";
 import { rs } from "src/utils/types";
-import { decodeToken } from "./tokenGetter";
 
 // 받아온 토큰을 만료일을 설정해 로컬 스토리지에 저장
-const setAccessToken = (accessToken: string) => {
+const setAccessToken = (accessToken: string, changeToken: boolean) => {
+  if (changeToken = true) {
+    localStorage.removeItem("access_token");
+  }
   const today = new Date();
   const accessExpires = new Date().setTime(today.getTime() + 1000 * 60 * 30); // 만료 30분
 
-  // const accessExpires = new Date();
-
-  // accessExpires.setTime(today.getTime() + 1000 * 60 * 30); // 30 minute
-
-  // decodeToken(accessToken);
-
   const accessStorage: rs.TokenInfo = {
     value: accessToken,
     expiry: accessExpires,
   };
   localStorage.setItem("access_token", JSON.stringify(accessStorage));
 };
 
-const setRefreshToken = (refreshtoken: string) => {
+const setRefreshToken = (refreshtoken: string, changeToken: boolean) => {
+  if (changeToken = true) {
+    localStorage.removeItem("refresh_token");
+  }
   const today = new Date();
-  // const refreshExpires = new Date().setTime(
-  //   today.getTime() + 1000 * 60 * 60 * 24 * 14
-  // );
+
   const refreshExpires = new Date().setTime(
-    today.getTime() + 1000 * 60 * 24 * 14
+    today.getTime() + 1000 * 60 * 60 * 24 * 14
   );
 
-  // const refreshExpires = new Date();
-
-  // refreshExpires.setTime(today.getTime() + 1000 * 60 * 60 * 24 * 7); // 7 day
-
-  // decodeToken(accessToken);
-
   const refreshStorage = {
     value: refreshtoken,
     expiry: refreshExpires,
   };
   localStorage.setItem("refresh_token", JSON.stringify(refreshStorage));
 };
+
 // 로컬 스토리지에 있는 토큰을 확인
 const getToken = () => {
   const access = localStorage.getItem("access_token");

frontend/src/Page/DefaultHowPage.tsx

@@ -0,0 +1,73 @@
+import * as React from "react";
+import { Box, Grid, Typography, Link } from "@mui/material";
+import SearchBar from "../components/mainpage/SearchBar";
+import ExplanationTrash from "../components/howtopage/ExplanationTrash";
+
+import { useLocation } from 'react-router-dom';
+
+const HowtoPage = () => {
+
+  const item = useLocation();
+  const itemform = item?.state as any;
+
+  const itemImage = itemform.needImages;
+  const itemKind = itemform.needKind;
+
+  return (
+    <Box textAlign={"center"}>
+      <div>
+        <SearchBar />
+        <Box
+          sx={{
+            borderRadius: 3,
+            backgroundColor: "white",
+            width: 700,
+            height: 350,
+            margin: "auto",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: "1px 3px 3px #B0B09A",
+            mt: 7,
+            mb: 10,
+          }}>
+          <img src={itemImage} style={{ maxWidth: 500, maxHeight: 250 }} />
+
+        </Box>
+
+        <Grid
+          container
+          direction="column"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Typography
+            sx={{ fontSize: 50, mt: 10, fontFamily: "Itim", color: "#737458" }}
+          >
+            How to recycle?
+          </Typography>
+          <ExplanationTrash
+            kind={itemKind}
+          />
+
+          <Link
+            href="/mainpage"
+            style={{
+              textDecoration: "none",
+              fontWeight: "bold",
+              fontFamily: "Itim",
+              padding: 100,
+              color: "#737458",
+              fontSize: 30,
+            }}
+          >
+            {" "}
+            Go To Mainpage{" 👉"}{" "}
+          </Link>
+        </Grid>
+      </div>
+    </Box>
+  );
+};
+
+export default HowtoPage;

frontend/src/Page/HowtoPage.tsx

@@ -37,6 +37,8 @@ const HowtoPage = () => {
   const userIdToRedux = ReduxModule().decodeInfo?.id;
 
   const reduxKindAndImg = ReduxImgApi(itemID, userIdToRedux);
+  console.log(userIdToRedux);
+  console.log(itemID);
 
   const { state } = useLocation() as TypeChallenge;
 
@@ -85,7 +87,7 @@ const HowtoPage = () => {
           }}
         >
           <img
-            style={{ maxWidth: 500, maxHeight: 250 }}
+            style={{ width: 600, height: 320 }}
             src={reduxKindAndImg.imgUrl as string}
           />
         </Box>
@@ -115,7 +117,7 @@ const HowtoPage = () => {
               fontWeight: "bold",
               fontFamily: "Itim",
               padding: 100,
-              color: "black",
+              color: "#737458",
               fontSize: 30,
             }}
           >

frontend/src/Page/Login.tsx

@@ -50,8 +50,8 @@ function Login() {
       console.log("받아온 결과2", result.refresh_token);
 
       if (result.access_token !== null) {
-        setAccessToken(result.access_token);
-        setRefreshToken(result.refresh_token);
+        setAccessToken(result.access_token,false);
+        setRefreshToken(result.refresh_token,false);
         alert("로그인 성공♻️");
 
         // checkAccessToken();

frontend/src/Page/MyPage.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import MyPageNavigation from "../components/Mypage/MyPageNavigation";
-import { Box, Container } from "@mui/material";
+import { Container } from "@mui/material";
 import { Outlet } from "react-router-dom";
 
 function MyPage() {

frontend/src/Page/Register.tsx

@@ -73,7 +73,7 @@ const UserInfoTf = styled(TextField)(({}) => ({
 
 const FormHelperTexts = styled(FormHelperText)`
   width: 100%;
-  padding: "auto;
+  padding:6px;
   font-weight: 600;
   color: #c65959;
   font-size: 12px;
@@ -87,11 +87,8 @@ interface User {
 }
 
 const Register = () => {
-  const [emailError, setEmailError] = useState("");
   const [passwordState, setPasswordState] = useState("");
   const [passwordError, setPasswordError] = useState("");
-  const [nameError, setNameError] = useState("");
-  const [aliasError, setAliasError] = useState("");
 
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
@@ -102,9 +99,9 @@ const Register = () => {
 
   const emailRegex =
     /([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
-  const passwordRegex = /^[가-힣a-zA-Z]+$/;
-  const nameRegex = /^[가-힣a-zA-Z]+$/;
-  const aliasRegex = /^[가-힣a-zA-Z]+$/;
+  const passwordRegex = /^[가-힣a-zA-Z0-9]+$/;
+  const nameRegex = /^[가-힣a-zA-Z0-9]+$/;
+  const aliasRegex = /^[가-힣a-zA-Z0-9]+$/;
 
   //form 비교
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -138,7 +135,9 @@ const Register = () => {
       nameRegex.test(user.name as string) &&
       aliasRegex.test(user.alias as string)
     ) {
+
       Api.post<User>(`/users/`, user)
+
         .then((response) => {
           // Handle success.
           handleOpen();
@@ -163,31 +162,29 @@ const Register = () => {
 
     if (props[0] === "name") {
       if (!nameRegex.test(name as string) || (name as string).length < 1) {
-        setNameError("올바른 이름을 입력해주세요.");
-        setCheckName("");
+        setCheckName("올바른 이름을 입력해주세요.");
       } else {
-        setNameError("");
-        if (res.data.result == false) setCheckName("사용 중인 아이디입니다.");
+
+        if (res.data.result === false) setCheckName("사용 중인 아이디입니다.");
+
         else setCheckName("사용 가능한 아이디 입니다.");
       }
     }
     if (props[0] === "email") {
       if (!emailRegex.test(email as string)) {
-        setEmailError("올바른 이메일 형식이 아닙니다.");
+        setCheckEmail("올바른 이메일 형식이 아닙니다.");
       } else {
-        setEmailError("");
-        if (res.data.result === false)
-          setCheckEmail("사용 중인 이메일 입니다.");
+
+        if (res.data.result === false) setCheckEmail("사용 중인 이메일 입니다.");
+
         else setCheckEmail("사용 가능한 이메일 입니다.");
       }
     }
 
     if (props[0] === "alias") {
       if (!aliasRegex.test(alias as string) || (alias as string).length < 1) {
-        setAliasError("올바른 이름을 입력해주세요.");
-        setCheckName("");
+        setCheckAlias("올바른 이름을 입력해주세요.");
       } else {
-        setAliasError("");
         if (res.data.result === false)
           setCheckAlias("사용 중인 닉네임 입니다.");
         else setCheckAlias("사용 가능한 닉네임 입니다.");
@@ -246,18 +243,8 @@ const Register = () => {
                 onBlur={(event) => {
                   onBlurInfo(["name", name], event);
                 }}
-                error={nameError !== "" || false}
               />
-              <span
-                style={{
-                  color: "red",
-                  fontSize: 13,
-                  marginLeft: 8,
-                }}
-              >
-                {checkName}
-              </span>
-              <FormHelperTexts>{nameError}</FormHelperTexts>
+              <FormHelperTexts>{checkName}</FormHelperTexts>
               <UserInfoTf
                 margin="normal"
                 required
@@ -266,7 +253,6 @@ const Register = () => {
                 label="Password"
                 type="password"
                 id="password"
-                error={passwordState !== "" || false}
               />
               <FormHelperTexts>{passwordState}</FormHelperTexts>
               <UserInfoTf
@@ -277,7 +263,6 @@ const Register = () => {
                 label="Password Confirm"
                 type="password"
                 id="rePassword"
-                error={passwordError !== "" || false}
               />
               <FormHelperTexts>{passwordError}</FormHelperTexts>
 
@@ -293,19 +278,9 @@ const Register = () => {
                 onBlur={(event) => {
                   onBlurInfo(["email", email], event);
                 }}
-                error={emailError !== "" || false}
               />
-              <span
-                style={{
-                  color: "red",
-                  fontSize: 13,
-                  marginLeft: 8,
-                }}
-              >
-                {checkEmail}
-              </span>
 
-              <FormHelperTexts>{emailError}</FormHelperTexts>
+              <FormHelperTexts>{checkEmail}</FormHelperTexts>
               <UserInfoTf
                 margin="normal"
                 required
@@ -319,15 +294,7 @@ const Register = () => {
                   onBlurInfo(["alias", alias], event);
                 }}
               />
-              <span
-                style={{
-                  color: "red",
-                  fontSize: 13,
-                  marginLeft: 8,
-                }}
-              >
-                {checkAilas}
-              </span>
+              <FormHelperTexts>{checkAilas}</FormHelperTexts>
 
               <React.Fragment>
                 <Button

frontend/src/actions/ImgIDActions.tsx

@@ -1,4 +1,5 @@
 export const save_ID = (id: any) => {
+  console.log(id);
   return {
     type: "SAVE_ID",
     payload: id,