From cac9ff7ed1f89fce73bdcbf10dbc56b3726fa68c Mon Sep 17 00:00:00 2001 From: RayLee Date: Mon, 1 Aug 2022 11:08:26 +0900 Subject: [PATCH 01/24] feat : add trashRanking API --- .../src/components/mainpage/PopularTrash.tsx | 16 -- .../src/components/mainpage/TrashCardView.tsx | 219 +++++++++++++++--- 2 files changed, 192 insertions(+), 43 deletions(-) diff --git a/frontend/src/components/mainpage/PopularTrash.tsx b/frontend/src/components/mainpage/PopularTrash.tsx index ea33892..e697c0d 100644 --- a/frontend/src/components/mainpage/PopularTrash.tsx +++ b/frontend/src/components/mainpage/PopularTrash.tsx @@ -1,7 +1,4 @@ import {Typography, Box} from "@mui/material"; -import FirstImg from '../../images/firstImg' -import SecondImg from '../../images/secondImg'; -import ThirdImg from '../../images/thirdImg'; import TrashCardView from "./TrashCardView"; import AutoGraphIcon from '@mui/icons-material/AutoGraph'; @@ -18,20 +15,7 @@ function PopularTrash(){ - - - - - - - - - - - - - ); diff --git a/frontend/src/components/mainpage/TrashCardView.tsx b/frontend/src/components/mainpage/TrashCardView.tsx index 100b8b7..5d2c4fd 100644 --- a/frontend/src/components/mainpage/TrashCardView.tsx +++ b/frontend/src/components/mainpage/TrashCardView.tsx @@ -1,41 +1,206 @@ import * as React from "react"; +import { useState, useEffect } from "react"; +import Api from "src/utils/customApi"; +import { rs } from "src/utils/types"; +import { setAccessToken, setRefreshToken } from "src/Auth/tokenManager"; import { Button, CardActionArea, CardActions, Card, + Box, CardContent, CardMedia, Typography, } from "@mui/material"; +import FirstImg from '../../images/firstImg' +import SecondImg from '../../images/secondImg'; +import ThirdImg from '../../images/thirdImg'; +import { decodeToken } from "src/Auth/tokenGetter"; +import axios from 'axios'; +import { response } from "express"; + +interface BaseContent { + kind: string; + images: any; +} + +const trashlist : BaseContent[] =[ + { + kind : "", + images: `` + }, + { + kind : "", + images: `` + }, + { + kind : "", + images: `` + }, +] + +const ranklist: BaseContent[] = +[ + { + kind : "GLASS", + images: `https://i.ibb.co/cXcx6Q5/2022-07-30-11-19-38.png` + }, + { + kind : "BIODEGRADABLE", + images: `https://i.ibb.co/0MHvQZr/2022-07-30-11-23-56.png` + }, + { + kind : "CARDBOARD", + images: `https://i.ibb.co/jHTxfbS/17457488-1837243389875287-7962009710514097503-n.jpg` + }, + { + kind : "PAPER", + images: `https://i.ibb.co/7XPdFc5/2558-B64255-CF58-B833.jpg` + }, + { + kind : "METAL", + images: `https://i.ibb.co/tsjSswc/2022-07-30-11-26-27.png` + }, + { + kind : "PLASTIC", + images: `https://i.ibb.co/xLm0vv2/2022-07-30-11-20-36.png` + }, +] + + +function MultiActionAreaCard() { + // const [newData, setNewData] = useState(''); + // const [Ranking, setRanking] = useState([]); + // const needRank : string[] = []; + const [firstData, setFirstData] = useState(null); + const [secondData, setSecondData] = useState(null); + const [thridData, setThirdData] = useState(null); + + const [firstImages, setFirstImages] = useState(null); + const [secondImages, setSecondImages] = useState(null); + const [thridImages, setThirdImages] = useState(null); + + axios + .get("http://localhost:8080/trash/statistics/ranking") + .then((response) => { + for (let i = 0; i < 3; i++) { + trashlist[i].kind = response.data[i].kind; + console.log("아 되는거?", trashlist[i].kind); + // setRanking((e) => [...e, newData]); + // setNewData(response.data[i].kind); + for(let j = 0; j<6; j++){ + if(ranklist[j].kind === trashlist[i].kind){ + trashlist[i].images = ranklist[j].images; + } + } + } + setFirstData(trashlist[0].kind); + setFirstImages(trashlist[0].images); + setSecondData(trashlist[1].kind); + setSecondImages(trashlist[1].images); + setThirdData(trashlist[2].kind); + setThirdImages(trashlist[2].images); + }) + .catch((error) => { + console.log("error", error.response); + }); + -export default function MultiActionAreaCard() { return ( - - - - - 물병 - - - - - - + + + + + + + + {firstData} + + + + + + + + + + + + + + + {secondData} + + + + + + + + + + + + + + + {thridData} + + + + + + + + + ); } + +export default MultiActionAreaCard; \ No newline at end of file From a30e10298bff9fd7384f6f6a6159649d4c16356b Mon Sep 17 00:00:00 2001 From: RayLee Date: Mon, 1 Aug 2022 11:31:46 +0900 Subject: [PATCH 02/24] chore : finish Ranking --- .../src/components/mainpage/TrashCardView.tsx | 113 +++++++++--------- 1 file changed, 54 insertions(+), 59 deletions(-) diff --git a/frontend/src/components/mainpage/TrashCardView.tsx b/frontend/src/components/mainpage/TrashCardView.tsx index 5d2c4fd..792a956 100644 --- a/frontend/src/components/mainpage/TrashCardView.tsx +++ b/frontend/src/components/mainpage/TrashCardView.tsx @@ -25,82 +25,77 @@ interface BaseContent { images: any; } -const trashlist : BaseContent[] =[ +const trashlist: BaseContent[] = [ { - kind : "", + kind: "", images: `` }, { - kind : "", + kind: "", images: `` }, { - kind : "", + kind: "", images: `` }, ] const ranklist: BaseContent[] = -[ - { - kind : "GLASS", - images: `https://i.ibb.co/cXcx6Q5/2022-07-30-11-19-38.png` - }, - { - kind : "BIODEGRADABLE", - images: `https://i.ibb.co/0MHvQZr/2022-07-30-11-23-56.png` - }, - { - kind : "CARDBOARD", - images: `https://i.ibb.co/jHTxfbS/17457488-1837243389875287-7962009710514097503-n.jpg` - }, - { - kind : "PAPER", - images: `https://i.ibb.co/7XPdFc5/2558-B64255-CF58-B833.jpg` - }, - { - kind : "METAL", - images: `https://i.ibb.co/tsjSswc/2022-07-30-11-26-27.png` - }, - { - kind : "PLASTIC", - images: `https://i.ibb.co/xLm0vv2/2022-07-30-11-20-36.png` - }, -] + [ + { + kind: "GLASS", + images: `https://i.ibb.co/cXcx6Q5/2022-07-30-11-19-38.png` + }, + { + kind: "BIODEGRADABLE", + images: `https://i.ibb.co/0MHvQZr/2022-07-30-11-23-56.png` + }, + { + kind: "CARDBOARD", + images: `https://i.ibb.co/jHTxfbS/17457488-1837243389875287-7962009710514097503-n.jpg` + }, + { + kind: "PAPER", + images: `https://i.ibb.co/7XPdFc5/2558-B64255-CF58-B833.jpg` + }, + { + kind: "METAL", + images: `https://i.ibb.co/tsjSswc/2022-07-30-11-26-27.png` + }, + { + kind: "PLASTIC", + images: `https://i.ibb.co/xLm0vv2/2022-07-30-11-20-36.png` + }, + ] function MultiActionAreaCard() { - // const [newData, setNewData] = useState(''); - // const [Ranking, setRanking] = useState([]); - // const needRank : string[] = []; - const [firstData, setFirstData] = useState(null); - const [secondData, setSecondData] = useState(null); - const [thridData, setThirdData] = useState(null); - - const [firstImages, setFirstImages] = useState(null); - const [secondImages, setSecondImages] = useState(null); - const [thridImages, setThirdImages] = useState(null); - + const [firstData, setFirstData] = useState(null); + const [secondData, setSecondData] = useState(null); + const [thridData, setThirdData] = useState(null); + axios .get("http://localhost:8080/trash/statistics/ranking") .then((response) => { for (let i = 0; i < 3; i++) { trashlist[i].kind = response.data[i].kind; - console.log("아 되는거?", trashlist[i].kind); - // setRanking((e) => [...e, newData]); - // setNewData(response.data[i].kind); - for(let j = 0; j<6; j++){ - if(ranklist[j].kind === trashlist[i].kind){ + for (let j = 0; j < 6; j++) { + if (ranklist[j].kind === trashlist[i].kind) { trashlist[i].images = ranklist[j].images; } } } - setFirstData(trashlist[0].kind); - setFirstImages(trashlist[0].images); - setSecondData(trashlist[1].kind); - setSecondImages(trashlist[1].images); - setThirdData(trashlist[2].kind); - setThirdImages(trashlist[2].images); + /* + trashlist.forEach(kindlist => { + kindlist.kind = response.data.kind + ranklist.forEach(imagelist => { + if (imagelist.kind === kindlist.kind) + kindlist.images = imagelist.images; + })}) + */ + setFirstData(trashlist[0]); + setSecondData(trashlist[1]); + setThirdData(trashlist[2]); }) .catch((error) => { console.log("error", error.response); @@ -116,7 +111,7 @@ function MultiActionAreaCard() { - {firstData} + {firstData?.kind} @@ -146,7 +141,7 @@ function MultiActionAreaCard() { - {secondData} + {secondData?.kind} @@ -176,7 +171,7 @@ function MultiActionAreaCard() { - {thridData} + {thridData?.kind} @@ -198,7 +193,7 @@ function MultiActionAreaCard() { - + ); } From f3542411b1c6afe18af0daed898fd9c0887f1fa2 Mon Sep 17 00:00:00 2001 From: Chaehy Date: Mon, 1 Aug 2022 16:33:40 +0900 Subject: [PATCH 03/24] chore: push --- frontend/src/App.tsx | 5 +- frontend/src/Page/HowtoPage.tsx | 3 +- frontend/src/Page/MyPage.tsx | 2 +- .../components/Mypage/MultiActionAreaCard.tsx | 17 ++++++- frontend/src/components/Mypage/MyTrashcan.tsx | 12 ++--- frontend/src/components/common/Footer.tsx | 50 +++++++++++++++---- frontend/src/images/moreIcon.tsx | 2 +- frontend/src/utils/types.tsx | 2 +- 8 files changed, 67 insertions(+), 26 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 8f865b4..d976c59 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -39,10 +39,7 @@ function App() { }> }> } /> - {/* } - /> */} + } /> } /> } /> } /> diff --git a/frontend/src/Page/HowtoPage.tsx b/frontend/src/Page/HowtoPage.tsx index c262dae..d5e0400 100644 --- a/frontend/src/Page/HowtoPage.tsx +++ b/frontend/src/Page/HowtoPage.tsx @@ -16,6 +16,7 @@ const HowtoPage = () => { const userIdToRedux = ReduxModule().decodeInfo?.id; const reduxKindAndImg = ReduxImgApi(itemID, userIdToRedux); + console.log(userIdToRedux); return ( @@ -67,7 +68,7 @@ const HowtoPage = () => { fontWeight: "bold", fontFamily: "Itim", padding: 100, - color: "black", + color: "#737458", fontSize: 30, }} > diff --git a/frontend/src/Page/MyPage.tsx b/frontend/src/Page/MyPage.tsx index b067cb3..6eb7a96 100644 --- a/frontend/src/Page/MyPage.tsx +++ b/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() { diff --git a/frontend/src/components/Mypage/MultiActionAreaCard.tsx b/frontend/src/components/Mypage/MultiActionAreaCard.tsx index bdc01c5..8c6ac53 100644 --- a/frontend/src/components/Mypage/MultiActionAreaCard.tsx +++ b/frontend/src/components/Mypage/MultiActionAreaCard.tsx @@ -9,6 +9,10 @@ import { styled, Link, } from "@mui/material"; +import { useDispatch } from "react-redux"; +import { save_ID } from "../../actions/ImgIDActions"; +import { useSelector } from "react-redux"; +import { RootReducerType } from "../../index"; const MyTrashcanBtn = styled(Button)(({}) => ({ backgroundColor: "#B0B09A", @@ -21,7 +25,15 @@ const MyTrashcanBtn = styled(Button)(({}) => ({ })); export default function MultiActionAreaCard({ image = "", id = 0 }) { - console.log(id); + const dispatch = useDispatch(); + const itemID = useSelector((state: RootReducerType) => state.ImgIDReducer); + console.log(itemID); + const onDispatch = () => { + dispatch(save_ID(id)); + + console.log(itemID); + }; + return ( @@ -46,7 +58,8 @@ export default function MultiActionAreaCard({ image = "", id = 0 }) { }} > 상세보기 diff --git a/frontend/src/components/Mypage/MyTrashcan.tsx b/frontend/src/components/Mypage/MyTrashcan.tsx index 5bae626..103ad90 100644 --- a/frontend/src/components/Mypage/MyTrashcan.tsx +++ b/frontend/src/components/Mypage/MyTrashcan.tsx @@ -34,7 +34,6 @@ function MyTrashcan(props: Props) { const [trashes, setTrashes] = useState(props.trashlist); const [more, setMore] = useState(false); const [page, setPage] = useState(1); - const [last, setLast] = useState(true); const fetchMyTrash = async () => { @@ -46,7 +45,6 @@ function MyTrashcan(props: Props) { if (res.data) { const newArray = trashes ? [...trashes, ...res.data] : res.data; setTrashes(newArray); - console.log(trashes); } else { setLast(false); } @@ -64,7 +62,9 @@ function MyTrashcan(props: Props) { } }, [page]); - useEffect(() => {}, [trashes]); + useEffect(() => { + // console.log(trashes); + }, [trashes]); return ( ( ))} @@ -149,13 +149,13 @@ function MyTrashcan(props: Props) { {last === true ? ( ) : ( - + no more data! )} diff --git a/frontend/src/components/common/Footer.tsx b/frontend/src/components/common/Footer.tsx index 05e0a56..dc7d003 100644 --- a/frontend/src/components/common/Footer.tsx +++ b/frontend/src/components/common/Footer.tsx @@ -50,20 +50,50 @@ function Footer() { color: "white", fontSize: 10, display: "flex", - flexDirection: "column", + flexDirection: "row", justifyContent: "center", alignItems: "center", + marginTop: 3, }} > -
FrontEnd
-
이채현
-
이정우
-
진호병
-
-
-
BackEnd
-
김용민
-
김유림
-
박성빈
+
+
FrontEnd
+
이채현
+
이정우
+
진호병
+
+
+ X +
+
+
BackEnd
+
김용민
+
김유림
+
박성빈
+
); diff --git a/frontend/src/utils/types.tsx b/frontend/src/utils/types.tsx index 23dd6f2..688b00f 100644 --- a/frontend/src/utils/types.tsx +++ b/frontend/src/utils/types.tsx @@ -16,7 +16,7 @@ export namespace rs { } export interface Trash { - uploaded_trash_image_id: number; + trash_image_id: number; image: string; } From 49db3dce7b927df8a8cb853736180ded170c79ea Mon Sep 17 00:00:00 2001 From: Chaehy Date: Mon, 1 Aug 2022 17:17:18 +0900 Subject: [PATCH 04/24] feat: mypage more --- frontend/src/App.tsx | 1 - frontend/src/Page/HowtoPage.tsx | 1 + frontend/src/actions/ImgIDActions.tsx | 1 + .../components/Mypage/MultiActionAreaCard.tsx | 19 +++++++++---------- frontend/src/components/Mypage/MyTrashcan.tsx | 2 +- frontend/src/utils/types.tsx | 2 +- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d976c59..aa6c606 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -39,7 +39,6 @@ function App() { }> }> } /> - } /> } /> } /> } /> diff --git a/frontend/src/Page/HowtoPage.tsx b/frontend/src/Page/HowtoPage.tsx index d5e0400..8e9f105 100644 --- a/frontend/src/Page/HowtoPage.tsx +++ b/frontend/src/Page/HowtoPage.tsx @@ -17,6 +17,7 @@ const HowtoPage = () => { const reduxKindAndImg = ReduxImgApi(itemID, userIdToRedux); console.log(userIdToRedux); + console.log(itemID); return ( diff --git a/frontend/src/actions/ImgIDActions.tsx b/frontend/src/actions/ImgIDActions.tsx index 1c46599..4e25b9e 100644 --- a/frontend/src/actions/ImgIDActions.tsx +++ b/frontend/src/actions/ImgIDActions.tsx @@ -1,4 +1,5 @@ export const save_ID = (id: any) => { + console.log(id); return { type: "SAVE_ID", payload: id, diff --git a/frontend/src/components/Mypage/MultiActionAreaCard.tsx b/frontend/src/components/Mypage/MultiActionAreaCard.tsx index 8c6ac53..eeb1978 100644 --- a/frontend/src/components/Mypage/MultiActionAreaCard.tsx +++ b/frontend/src/components/Mypage/MultiActionAreaCard.tsx @@ -13,6 +13,7 @@ import { useDispatch } from "react-redux"; import { save_ID } from "../../actions/ImgIDActions"; import { useSelector } from "react-redux"; import { RootReducerType } from "../../index"; +import { useNavigate } from "react-router-dom"; const MyTrashcanBtn = styled(Button)(({}) => ({ backgroundColor: "#B0B09A", @@ -24,14 +25,16 @@ const MyTrashcanBtn = styled(Button)(({}) => ({ }, })); -export default function MultiActionAreaCard({ image = "", id = 0 }) { +export default function MultiActionAreaCard({ image = "", id = "" }) { + const navigate = useNavigate(); + + console.log(id); const dispatch = useDispatch(); const itemID = useSelector((state: RootReducerType) => state.ImgIDReducer); console.log(itemID); const onDispatch = () => { dispatch(save_ID(id)); - - console.log(itemID); + navigate(`/howtopage`); }; return ( @@ -48,6 +51,7 @@ export default function MultiActionAreaCard({ image = "", id = 0 }) { - - 상세보기 - + 더보기 diff --git a/frontend/src/components/Mypage/MyTrashcan.tsx b/frontend/src/components/Mypage/MyTrashcan.tsx index 103ad90..dd11d13 100644 --- a/frontend/src/components/Mypage/MyTrashcan.tsx +++ b/frontend/src/components/Mypage/MyTrashcan.tsx @@ -63,7 +63,7 @@ function MyTrashcan(props: Props) { }, [page]); useEffect(() => { - // console.log(trashes); + console.log(trashes); }, [trashes]); return ( diff --git a/frontend/src/utils/types.tsx b/frontend/src/utils/types.tsx index 688b00f..2863c95 100644 --- a/frontend/src/utils/types.tsx +++ b/frontend/src/utils/types.tsx @@ -16,7 +16,7 @@ export namespace rs { } export interface Trash { - trash_image_id: number; + trash_image_id?: any; image: string; } From 67cd7b98468f5b4976b074f5fdfaa9fcdb3af9a4 Mon Sep 17 00:00:00 2001 From: RayLee Date: Mon, 1 Aug 2022 17:20:00 +0900 Subject: [PATCH 05/24] feat : api trashRanking HowPage --- frontend/src/App.tsx | 2 + frontend/src/Page/DefaultHowPage.tsx | 46 +++++++++++++++++++ .../src/components/mainpage/TrashCardView.tsx | 43 +++++++++++------ 3 files changed, 76 insertions(+), 15 deletions(-) create mode 100644 frontend/src/Page/DefaultHowPage.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 341732c..b730dd4 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -7,6 +7,7 @@ import MainPage from "./Page/MainPage"; import Header from "./components/common/Header"; import Register from "./Page/Register"; import HowtoPage from "./Page/HowtoPage"; +import DefaultHowPage from "./Page/DefaultHowPage"; import GreenBack from "./images/greenBack"; import MyTrashcan from "./components/Mypage/MyTrashcan"; @@ -33,6 +34,7 @@ function App() { } /> } /> } /> + } /> {/* mypage 에 접근 못하게 라우팅 */} diff --git a/frontend/src/Page/DefaultHowPage.tsx b/frontend/src/Page/DefaultHowPage.tsx new file mode 100644 index 0000000..0e29b4e --- /dev/null +++ b/frontend/src/Page/DefaultHowPage.tsx @@ -0,0 +1,46 @@ +import * as React from "react"; +import { Box } 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 ( + +
+ + + + + + +
+ + ); +}; + +export default HowtoPage; diff --git a/frontend/src/components/mainpage/TrashCardView.tsx b/frontend/src/components/mainpage/TrashCardView.tsx index 792a956..958f4b0 100644 --- a/frontend/src/components/mainpage/TrashCardView.tsx +++ b/frontend/src/components/mainpage/TrashCardView.tsx @@ -1,8 +1,6 @@ import * as React from "react"; import { useState, useEffect } from "react"; -import Api from "src/utils/customApi"; -import { rs } from "src/utils/types"; -import { setAccessToken, setRefreshToken } from "src/Auth/tokenManager"; +import { useNavigate } from "react-router-dom"; import { Button, CardActionArea, @@ -70,10 +68,13 @@ const ranklist: BaseContent[] = function MultiActionAreaCard() { + + let navigate = useNavigate(); + const [firstData, setFirstData] = useState(null); const [secondData, setSecondData] = useState(null); const [thridData, setThirdData] = useState(null); - + axios .get("http://localhost:8080/trash/statistics/ranking") .then((response) => { @@ -85,17 +86,17 @@ function MultiActionAreaCard() { } } } - /* - trashlist.forEach(kindlist => { - kindlist.kind = response.data.kind - ranklist.forEach(imagelist => { - if (imagelist.kind === kindlist.kind) - kindlist.images = imagelist.images; - })}) - */ - setFirstData(trashlist[0]); - setSecondData(trashlist[1]); - setThirdData(trashlist[2]); + /* + trashlist.forEach(kindlist => { + kindlist.kind = response.data.kind + ranklist.forEach(imagelist => { + if (imagelist.kind === kindlist.kind) + kindlist.images = imagelist.images; + })}) + */ + setFirstData(trashlist[0]); + setSecondData(trashlist[1]); + setThirdData(trashlist[2]); }) .catch((error) => { console.log("error", error.response); @@ -125,6 +126,10 @@ function MultiActionAreaCard() {
); diff --git a/frontend/src/Page/HowtoPage.tsx b/frontend/src/Page/HowtoPage.tsx index c262dae..343758e 100644 --- a/frontend/src/Page/HowtoPage.tsx +++ b/frontend/src/Page/HowtoPage.tsx @@ -37,7 +37,7 @@ const HowtoPage = () => { }} > diff --git a/frontend/src/components/mainpage/PopularTrash.tsx b/frontend/src/components/mainpage/PopularTrash.tsx index e697c0d..a44e9ed 100644 --- a/frontend/src/components/mainpage/PopularTrash.tsx +++ b/frontend/src/components/mainpage/PopularTrash.tsx @@ -1,22 +1,20 @@ -import {Typography, Box} from "@mui/material"; +import { Typography, Box } from "@mui/material"; import TrashCardView from "./TrashCardView"; import AutoGraphIcon from '@mui/icons-material/AutoGraph'; -function PopularTrash(){ - return( +function PopularTrash() { + return ( - - - - 인기 쓰레기 + + This Week's Ranking - - + + ); }; diff --git a/frontend/src/components/mainpage/TrashCardView.tsx b/frontend/src/components/mainpage/TrashCardView.tsx index ca0320b..86ddd3c 100644 --- a/frontend/src/components/mainpage/TrashCardView.tsx +++ b/frontend/src/components/mainpage/TrashCardView.tsx @@ -11,9 +11,6 @@ import { CardMedia, Typography, } from "@mui/material"; -import FirstImg from "../../images/firstImg"; -import SecondImg from "../../images/secondImg"; -import ThirdImg from "../../images/thirdImg"; import { decodeToken } from "src/Auth/tokenGetter"; import axios from "axios"; import { response } from "express"; @@ -103,23 +100,36 @@ function MultiActionAreaCard() { - - - + + 1st + + - + {firstData?.kind} - + - - - + + 2nd + + - + {secondData?.kind} - + - - - + + 3rd + + - + {thridData?.kind} - + ); From 8774bcefb4f64f70326ad6b0071581fb2805dea8 Mon Sep 17 00:00:00 2001 From: RayLee Date: Tue, 2 Aug 2022 02:16:09 +0900 Subject: [PATCH 10/24] feat : change chart API & UI --- .../src/components/Mypage/MyTrashChart.tsx | 15 +++-- frontend/src/components/chart/Chart.tsx | 21 ++++--- frontend/src/components/chart/Date.tsx | 63 ++++++++++++------- 3 files changed, 61 insertions(+), 38 deletions(-) diff --git a/frontend/src/components/Mypage/MyTrashChart.tsx b/frontend/src/components/Mypage/MyTrashChart.tsx index 9766de0..f7d8e03 100644 --- a/frontend/src/components/Mypage/MyTrashChart.tsx +++ b/frontend/src/components/Mypage/MyTrashChart.tsx @@ -20,20 +20,25 @@ function MyTrashchart() { borderRadius: 5, borderColor: "transparent", minWidth: "100%", - height: "80vh", + height: "100vh", }}> 내 쓰레기 통계 - - + + + + + + ); diff --git a/frontend/src/components/chart/Chart.tsx b/frontend/src/components/chart/Chart.tsx index 299ab0d..087dce1 100644 --- a/frontend/src/components/chart/Chart.tsx +++ b/frontend/src/components/chart/Chart.tsx @@ -2,8 +2,9 @@ import { slideAnimationDuration } from '@mui/x-date-pickers/CalendarPicker/Picke import React, { PureComponent, useState } from 'react'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; + interface Content { - trash_kind: string; + kind: string; cnt: number; } @@ -15,27 +16,27 @@ const trashlist: Contentlist = { list: [ { - trash_kind: "GLASS", + kind: "GLASS", cnt: 0 }, { - trash_kind: "BIODEGRADABLE", + kind: "BIODEGRADABLE", cnt: 0 }, { - trash_kind: "CARDBOARD", + kind: "CARDBOARD", cnt: 0 }, { - trash_kind: "PAPER", + kind: "PAPER", cnt: 0 }, { - trash_kind: "METAL", + kind: "METAL", cnt: 0 }, { - trash_kind: "PLASTIC", + kind: "PLASTIC", cnt: 0 }, ] @@ -74,7 +75,7 @@ function TrashChart({ list }: Contentlist) { else { // 그 외 데이터가 존재할 때 const tempList: Content[] = trashlist.list?.map((trashlist: any) => { list?.map((getlist: any) => { - if (getlist?.trash_kind === trashlist?.trash_kind) { + if (getlist?.kind === trashlist?.kind) { trashlist.cnt = getlist.cnt; console.log("같은 것을 발견"); } @@ -103,11 +104,11 @@ function TrashChart({ list }: Contentlist) { }} > - + - + ); diff --git a/frontend/src/components/chart/Date.tsx b/frontend/src/components/chart/Date.tsx index edc4aea..c5f1611 100644 --- a/frontend/src/components/chart/Date.tsx +++ b/frontend/src/components/chart/Date.tsx @@ -6,6 +6,8 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import axios from "axios"; +import { API_BASE_URL } from "src/utils/constants"; +import { getAccess } from "../../Auth/tokenManager"; const theme = createTheme({ palette: { @@ -61,22 +63,33 @@ function Dates({ onClickRetrieve }: { onClickRetrieve: any }) { } } - axios - .get( - `http://localhost:8080/trash/mypage/users/2c762f6e-b369-4985-96f9-29ccb4f9fc34/statistics${periodStr}${startDateStr}${endDateStr}` - ) - .then((response) => { - // Handle success. - const responseUserData = response.data; - console.log("data saved!"); - console.log(response.data); - onClickRetrieve(responseUserData); - }) - .catch((error) => { - // Handle error. - console.log("An error occurred:", error.response); - }); - }; + const getDate = async () => { + const stringAccess: any = getAccess(); + console.log("잘 온거?", stringAccess); + if (stringAccess !== null) { // stringAccess if문 안써주면 코드 오류 발생 + /* const access: rs.TokenInfo = JSON.parse(stringAccess); // string형태로 받는 토큰 JSON으로 만들어줌*/ + await axios + .get( + `${API_BASE_URL}/trash/users/e6ad3333-a947-4448-b484-f8209ed701a6/statistics${periodStr}${startDateStr}${endDateStr}`, { //patch : 바디 -> 변경할 alias & 헤더 -> 확인해야되는 토큰 + headers: { + Authorization: `${stringAccess.value}` + } + }) + .then((response) => { + // Handle success. + const responseUserData = response.data; + console.log("data saved!"); + console.log(response.data); + onClickRetrieve(responseUserData); + }) + .catch((error) => { + // Handle error. + console.log("An error occurred:", error.response); + }); + }; + } + getDate(); + } React.useEffect(() => { fetchUserData(); @@ -103,7 +116,7 @@ function Dates({ onClickRetrieve }: { onClickRetrieve: any }) { > - 조회 + Submit From ec5e333705ee3354725783adb82c14c2b13607f4 Mon Sep 17 00:00:00 2001 From: Chaehy Date: Tue, 2 Aug 2022 02:45:33 +0900 Subject: [PATCH 11/24] feat: mypage toggle --- frontend/src/Page/Login.tsx | 2 +- frontend/src/Page/Register.tsx | 17 +- .../components/Mypage/MultiActionAreaCard.tsx | 2 - .../src/components/Mypage/MyChallenge.tsx | 21 +-- frontend/src/components/Mypage/MyTrashcan.tsx | 150 +++++++++++++----- frontend/src/utils/autoSaveToggle.tsx | 34 ++++ frontend/src/utils/types.tsx | 6 +- 7 files changed, 168 insertions(+), 64 deletions(-) create mode 100644 frontend/src/utils/autoSaveToggle.tsx diff --git a/frontend/src/Page/Login.tsx b/frontend/src/Page/Login.tsx index 192e886..7b40c20 100644 --- a/frontend/src/Page/Login.tsx +++ b/frontend/src/Page/Login.tsx @@ -57,7 +57,7 @@ function Login() { const userLogin = async () => { const result = await Api.post(`/users/auth`, { name: data.get("name"), - pw: data.get("password"), + password: data.get("password"), }).then((res) => res.data as rs.UserAuth); setSaveInfo(result); console.log("받아온 결과1", result); diff --git a/frontend/src/Page/Register.tsx b/frontend/src/Page/Register.tsx index e842dce..0a766b1 100644 --- a/frontend/src/Page/Register.tsx +++ b/frontend/src/Page/Register.tsx @@ -81,7 +81,7 @@ const FormHelperTexts = styled(FormHelperText)` interface User { name: FormDataEntryValue | null; - pw: FormDataEntryValue | null; + password: FormDataEntryValue | null; alias: FormDataEntryValue | null; email: FormDataEntryValue | null; } @@ -114,27 +114,27 @@ const Register = () => { const user: User = { name: data.get("name"), - pw: data.get("password"), + password: data.get("password"), alias: data.get("alias"), email: data.get("email"), }; const rePassword = data.get("rePassword"); // 비밀번호 유효성 체크 - if (!passwordRegex.test(user.pw as string)) + if (!passwordRegex.test(user.password as string)) setPasswordState("비밀번호를 형식에 맞춰 입력해주세요!"); else setPasswordState(""); // 비밀번호 같은지 체크 - if (user.pw !== rePassword) + if (user.password !== rePassword) setPasswordError("비밀번호가 일치하지 않습니다."); else setPasswordError(""); // 모두 통과되면 완료출력 if ( emailRegex.test(user.email as string) && - passwordRegex.test(user.pw as string) && - (user.pw as string) === rePassword && + passwordRegex.test(user.password as string) && + (user.password as string) === rePassword && nameRegex.test(user.name as string) && aliasRegex.test(user.alias as string) ) { @@ -167,7 +167,7 @@ const Register = () => { setCheckName(""); } else { setNameError(""); - if (res.data.result == false) setCheckName("사용 중인 아이디입니다."); + if (res.data.result === false) setCheckName("사용 중인 아이디입니다."); else setCheckName("사용 가능한 아이디 입니다."); } } @@ -176,7 +176,8 @@ const Register = () => { setEmailError("올바른 이메일 형식이 아닙니다."); } else { setEmailError(""); - if (res.data.result == false) setCheckEmail("사용 중인 이메일 입니다."); + if (res.data.result === false) + setCheckEmail("사용 중인 이메일 입니다."); else setCheckEmail("사용 가능한 이메일 입니다."); } } diff --git a/frontend/src/components/Mypage/MultiActionAreaCard.tsx b/frontend/src/components/Mypage/MultiActionAreaCard.tsx index eeb1978..9ae3227 100644 --- a/frontend/src/components/Mypage/MultiActionAreaCard.tsx +++ b/frontend/src/components/Mypage/MultiActionAreaCard.tsx @@ -28,10 +28,8 @@ const MyTrashcanBtn = styled(Button)(({}) => ({ export default function MultiActionAreaCard({ image = "", id = "" }) { const navigate = useNavigate(); - console.log(id); const dispatch = useDispatch(); const itemID = useSelector((state: RootReducerType) => state.ImgIDReducer); - console.log(itemID); const onDispatch = () => { dispatch(save_ID(id)); navigate(`/howtopage`); diff --git a/frontend/src/components/Mypage/MyChallenge.tsx b/frontend/src/components/Mypage/MyChallenge.tsx index c074ce0..04571fc 100644 --- a/frontend/src/components/Mypage/MyChallenge.tsx +++ b/frontend/src/components/Mypage/MyChallenge.tsx @@ -13,23 +13,23 @@ interface Contentlist { const trashlist: Contentlist = { list: [ { - challenge_number: 1, + challenge_id: 1, type: false, }, { - challenge_number: 2, + challenge_id: 2, type: false, }, { - challenge_number: 3, + challenge_id: 3, type: false, }, { - challenge_number: 4, + challenge_id: 4, type: false, }, { - challenge_number: 5, + challenge_id: 5, type: false, }, ], @@ -40,6 +40,7 @@ function MyBadge() { const userIdtoRedux = ReduxModule().decodeInfo?.id; const [myChallenge, setMyChallenge] = useState(); + const fetchMyChallenge = async () => { const result = await Api.get(`/trash/users/${userIdtoRedux}/challenges`, { headers: { @@ -47,10 +48,10 @@ function MyBadge() { }, }).then((res) => res.data as rs.Challenge[]); const challengeList = result; - + console.log(result); const temptList: rs.Challenge[] = trashlist.list?.map((trashlist: any) => { challengeList?.map((getlist: any) => { - if (getlist?.challenge_number === trashlist.challenge_number) { + if (getlist?.challenge_id === trashlist.challenge_id) { trashlist.type = true; } return getlist; @@ -58,11 +59,13 @@ function MyBadge() { return trashlist; }); setMyChallenge(temptList); + console.log(temptList); return temptList; }; + useEffect(() => { fetchMyChallenge(); - }, [myChallenge]); + }, []); return ( ( diff --git a/frontend/src/components/Mypage/MyTrashcan.tsx b/frontend/src/components/Mypage/MyTrashcan.tsx index dd11d13..259a9b3 100644 --- a/frontend/src/components/Mypage/MyTrashcan.tsx +++ b/frontend/src/components/Mypage/MyTrashcan.tsx @@ -1,5 +1,13 @@ import { useState, useEffect, useRef } from "react"; -import { Box, Typography, Container, Button } from "@mui/material"; +import { + Box, + Typography, + Container, + Button, + Link, + styled, + Switch, +} from "@mui/material"; import MultiActionAreaCard from "./MultiActionAreaCard"; import Api from "../../utils/customApi"; import lottie from "lottie-web"; @@ -7,10 +15,23 @@ import MoreIcon from "../../images/moreIcon"; import { rs } from "src/utils/types"; import { getAccess } from "src/Auth/tokenManager"; import { ReduxModule } from "../../modules/ReduxModule"; +import { alpha } from "@mui/material/styles"; +import { isAutoSave, changeAutoSave } from "../../utils/autoSaveToggle"; interface Props { trashlist?: Array; } +const GreenSwitch = styled(Switch)(({ theme }) => ({ + "& .MuiSwitch-switchBase.Mui-checked": { + color: "#93C85B", + "&:hover": { + backgroundColor: alpha("#DAEEC5", theme.palette.action.hoverOpacity), + }, + }, + "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": { + backgroundColor: "#D9D9D9", + }, +})); const GetNoTrashLottie = () => { //lottie @@ -30,11 +51,11 @@ const GetNoTrashLottie = () => { function MyTrashcan(props: Props) { const what: any = getAccess(); const userIdtoRedux = ReduxModule().decodeInfo?.id; - + //=============MyTrashCan API================ const [trashes, setTrashes] = useState(props.trashlist); const [more, setMore] = useState(false); const [page, setPage] = useState(1); - const [last, setLast] = useState(true); + const [last, setLast] = useState(false); const fetchMyTrash = async () => { await Api.get(`/trash/users/${userIdtoRedux}/pages/${page}`, { @@ -45,8 +66,9 @@ function MyTrashcan(props: Props) { if (res.data) { const newArray = trashes ? [...trashes, ...res.data] : res.data; setTrashes(newArray); - } else { setLast(false); + } else { + setLast(true); } }); }; @@ -66,6 +88,18 @@ function MyTrashcan(props: Props) { console.log(trashes); }, [trashes]); + //=============MyTrashCan API================ + const isSaved = isAutoSave(); + const [checked, setChecked] = useState(true); + isSaved.then((e) => { + setChecked(e.user_autosave); + }); + + const switchHandler = (event: any) => { + setChecked(event.target.checked); + changeAutoSave(checked); + }; + return ( + {" "} + + + auto save + + + + {" "} - 쓰레기를 사진을 업로드 해보세요. + + fill your ReBIKE > + ) : ( - - {trashes && - Object.values(trashes)?.map((item: rs.Trash, index: any) => ( - - ))} - - )} - - {last === true ? ( - - ) : ( - - no more data! + {last ? ( + + ) : ( + + )} - )} - + + )} diff --git a/frontend/src/utils/autoSaveToggle.tsx b/frontend/src/utils/autoSaveToggle.tsx new file mode 100644 index 0000000..74cd89a --- /dev/null +++ b/frontend/src/utils/autoSaveToggle.tsx @@ -0,0 +1,34 @@ +import Api from "./customApi"; +import { getAccess } from "src/Auth/tokenManager"; +import { rs } from "../utils/types"; + +const what: any = getAccess(); +let user_autosave: rs.AutoSave; + +const isAutoSave = async () => { + await Api.get(`/users/autosave`, { + headers: { + Authorization: `${what.value}`, + }, + }).then((res) => { + user_autosave = res.data; + + return user_autosave; + }); + return user_autosave; +}; + +const changeAutoSave = async (isBoolean: boolean) => { + await Api.patch(`/users/autosave`, isBoolean, { + headers: { + Authorization: `${what.value}`, + }, + }).then((res) => { + user_autosave = res.data; + + return user_autosave; + }); + return user_autosave; +}; + +export { isAutoSave, changeAutoSave }; diff --git a/frontend/src/utils/types.tsx b/frontend/src/utils/types.tsx index 2863c95..28e3e6a 100644 --- a/frontend/src/utils/types.tsx +++ b/frontend/src/utils/types.tsx @@ -34,7 +34,7 @@ export namespace rs { } //❌ export interface Challenge { - challenge_number: number; + challenge_id: number; type: boolean; } export interface ChallengeInfo { @@ -43,4 +43,8 @@ export namespace rs { imgF: string; test: string; } + + export interface AutoSave { + user_autosave: boolean; + } } From 36070a02102bf8f874ed95cb52fb5da73ee0b3b8 Mon Sep 17 00:00:00 2001 From: Chaehy Date: Tue, 2 Aug 2022 10:21:34 +0900 Subject: [PATCH 12/24] style: add header --- frontend/src/components/common/Header.tsx | 127 ++++++++++++++++++---- 1 file changed, 104 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/common/Header.tsx b/frontend/src/components/common/Header.tsx index 3e162c7..c522997 100644 --- a/frontend/src/components/common/Header.tsx +++ b/frontend/src/components/common/Header.tsx @@ -1,11 +1,47 @@ import { useState, useRef, useEffect } from "react"; -import { Button, Container, Box, Link, CssBaseline } from "@mui/material"; +import { + Button, + Container, + Box, + Link, + CssBaseline, + List, + ListItem, + ListItemText, + MenuItem, + Menu, +} from "@mui/material"; import { createTheme, ThemeProvider } from "@mui/material/styles"; +import { useNavigate } from "react-router-dom"; + import { useSelector, useDispatch } from "react-redux"; import { RootReducerType } from "../../index"; import { fetchDecodeData } from "src/actions/DecodeActions"; import Logo from "../../images/header/headerLogo"; +const sidebarNavItems = [ + { + display: "내 분리수거함", + to: "/mypage", + }, + { + display: "내 쓰레기 통계", + to: "/mypage/myTrashChart", + }, + { + display: "도전! 재활용", + to: "/mypage/myChallenge", + }, + { + display: "내 정보 변경", + to: "/mypage/userInfo", + }, + { + display: "로그아웃", + to: "/mypage/logout", + }, +]; + const theme = createTheme({ palette: { primary: { @@ -31,18 +67,29 @@ function Header() { } }, []); - const [mouseOn, setMouseOn] = useState(false); + function deleteToken() { + localStorage.clear(); + } + + //============Mypage List============ + const navigate = useNavigate(); - const handlePopoverOpen = () => { - setMouseOn(true); + const [anchorEl, setAnchorEl] = useState(null); + const [selectedIndex, setSelectedIndex] = useState(1); + const open = Boolean(anchorEl); + const handleClickListItem = (event: any) => { + setAnchorEl(event.currentTarget); }; - const handlePopoverClose = () => { - setMouseOn(false); + + const handleMenuItemClick = (event: any, index: any, option: any) => { + setSelectedIndex(index); + setAnchorEl(null); + navigate(option.to); }; - function deleteToken() { - localStorage.clear(); - } + const handleClose = () => { + setAnchorEl(null); + }; return ( @@ -76,23 +123,57 @@ function Header() { {token ? ( // if IsLogin is true
-
+
- + - - - - - - - - ); From f4d8cd52c7cae6b90c4ba9ec26a628ac85806692 Mon Sep 17 00:00:00 2001 From: Chaehy Date: Tue, 2 Aug 2022 11:28:27 +0900 Subject: [PATCH 14/24] style: add mypage menu focus --- frontend/src/components/common/Header.tsx | 58 +++++++++++++++++++---- 1 file changed, 48 insertions(+), 10 deletions(-) diff --git a/frontend/src/components/common/Header.tsx b/frontend/src/components/common/Header.tsx index c522997..bcb9468 100644 --- a/frontend/src/components/common/Header.tsx +++ b/frontend/src/components/common/Header.tsx @@ -10,6 +10,7 @@ import { ListItemText, MenuItem, Menu, + styled, } from "@mui/material"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import { useNavigate } from "react-router-dom"; @@ -45,11 +46,26 @@ const sidebarNavItems = [ const theme = createTheme({ palette: { primary: { - main: "#737458", + main: "# v", }, }, }); +const MypageNavi = styled(MenuItem)(({}) => ({ + border: 4, + borderColor: "black", + fontSize: "small", + backgroundColor: "#B0B09A", + + "&:focus": { + color: "black", + }, + "&:active": { + color: "black", + backgroundColor: "black", + }, +})); + function Header() { const token = localStorage.getItem("access_token"); @@ -75,7 +91,7 @@ function Header() { const navigate = useNavigate(); const [anchorEl, setAnchorEl] = useState(null); - const [selectedIndex, setSelectedIndex] = useState(1); + const [selectedIndex, setSelectedIndex] = useState(0); const open = Boolean(anchorEl); const handleClickListItem = (event: any) => { setAnchorEl(event.currentTarget); @@ -127,12 +143,28 @@ function Header() { style={{ position: "relative", display: "inline-block", + borderCollapse: "collapse", + borderSpacing: 0, }} > - From e46c50db69458df50e1c21039e54ae037359163a Mon Sep 17 00:00:00 2001 From: RayLee Date: Tue, 2 Aug 2022 11:51:17 +0900 Subject: [PATCH 15/24] feat : update Ranking UI --- .../src/components/mainpage/TrashCardView.tsx | 32 ++++++++++--------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/mainpage/TrashCardView.tsx b/frontend/src/components/mainpage/TrashCardView.tsx index b167cc8..9adcad1 100644 --- a/frontend/src/components/mainpage/TrashCardView.tsx +++ b/frontend/src/components/mainpage/TrashCardView.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { + Grid, Button, CardActionArea, CardActions, @@ -97,17 +98,17 @@ function MultiActionAreaCard() { }); return ( - - + 1st - + How to Recycle this {firstData?.kind}?? - + - + 2nd - + + - + + sx={{ p: 2, width:"100%", marginRight:"20cm" }}> 3rd @@ -204,7 +206,7 @@ function MultiActionAreaCard() { mt: 5 }}> - + - + ); } From 26c53a6553e35f792d74b93e4fe928093b0e5bc8 Mon Sep 17 00:00:00 2001 From: Chaehy Date: Tue, 2 Aug 2022 14:12:14 +0900 Subject: [PATCH 16/24] style: menu padding disable --- frontend/src/Auth/tokenManager.tsx | 2 +- frontend/src/components/common/Header.tsx | 20 ++++++-------------- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/frontend/src/Auth/tokenManager.tsx b/frontend/src/Auth/tokenManager.tsx index 67e6297..7634b67 100644 --- a/frontend/src/Auth/tokenManager.tsx +++ b/frontend/src/Auth/tokenManager.tsx @@ -26,7 +26,7 @@ const setRefreshToken = (refreshtoken: string) => { // 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(); diff --git a/frontend/src/components/common/Header.tsx b/frontend/src/components/common/Header.tsx index bcb9468..2a55326 100644 --- a/frontend/src/components/common/Header.tsx +++ b/frontend/src/components/common/Header.tsx @@ -12,6 +12,7 @@ import { Menu, styled, } from "@mui/material"; + import { createTheme, ThemeProvider } from "@mui/material/styles"; import { useNavigate } from "react-router-dom"; @@ -53,16 +54,12 @@ const theme = createTheme({ const MypageNavi = styled(MenuItem)(({}) => ({ border: 4, - borderColor: "black", + borderColor: "#F7F8E9", fontSize: "small", + color: "#F7F8E9", backgroundColor: "#B0B09A", - - "&:focus": { - color: "black", - }, - "&:active": { + "&:hover": { color: "black", - backgroundColor: "black", }, })); @@ -186,17 +183,12 @@ function Header() { MenuListProps={{ "aria-labelledby": "lock-button", role: "listbox", - }} - style={{ - borderCollapse: "collapse", - borderSpacing: 0, - display: "block", - borderColor: "black", - border: 3, + disablePadding: true, }} > {sidebarNavItems.map((option, index) => ( Date: Tue, 2 Aug 2022 14:31:54 +0900 Subject: [PATCH 17/24] fix: Trash type name id --- frontend/src/components/Mypage/MultiActionAreaCard.tsx | 3 ++- frontend/src/components/Mypage/MyTrashcan.tsx | 2 +- frontend/src/utils/types.tsx | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/Mypage/MultiActionAreaCard.tsx b/frontend/src/components/Mypage/MultiActionAreaCard.tsx index 9ae3227..f5ca29e 100644 --- a/frontend/src/components/Mypage/MultiActionAreaCard.tsx +++ b/frontend/src/components/Mypage/MultiActionAreaCard.tsx @@ -29,8 +29,9 @@ export default function MultiActionAreaCard({ image = "", id = "" }) { const navigate = useNavigate(); const dispatch = useDispatch(); - const itemID = useSelector((state: RootReducerType) => state.ImgIDReducer); + //const itemID = useSelector((state: RootReducerType) => state.ImgIDReducer); const onDispatch = () => { + console.log(id); dispatch(save_ID(id)); navigate(`/howtopage`); }; diff --git a/frontend/src/components/Mypage/MyTrashcan.tsx b/frontend/src/components/Mypage/MyTrashcan.tsx index 259a9b3..db5cdbe 100644 --- a/frontend/src/components/Mypage/MyTrashcan.tsx +++ b/frontend/src/components/Mypage/MyTrashcan.tsx @@ -199,7 +199,7 @@ function MyTrashcan(props: Props) { Object.values(trashes)?.map((item: rs.Trash, index: any) => ( ))} diff --git a/frontend/src/utils/types.tsx b/frontend/src/utils/types.tsx index 28e3e6a..173788e 100644 --- a/frontend/src/utils/types.tsx +++ b/frontend/src/utils/types.tsx @@ -16,7 +16,7 @@ export namespace rs { } export interface Trash { - trash_image_id?: any; + id?: any; image: string; } From ad507cccf0113761082a37d095074c14cf1456b9 Mon Sep 17 00:00:00 2001 From: RayLee Date: Tue, 2 Aug 2022 14:51:00 +0900 Subject: [PATCH 18/24] style : update UI --- frontend/src/Auth/checkToken.ts | 2 +- frontend/src/Auth/tokenManager.tsx | 10 +- frontend/src/Page/Login.tsx | 4 +- frontend/src/Page/Register.tsx | 58 +---- .../src/components/Mypage/ChangeInfo copy.tsx | 130 +++++++++++ frontend/src/components/Mypage/ChangeInfo.tsx | 117 +++------- .../src/components/Mypage/Change_nickname.tsx | 192 ++++++++++++++++ .../src/components/Mypage/Change_password.tsx | 217 ++++++++++++++++++ 8 files changed, 590 insertions(+), 140 deletions(-) create mode 100644 frontend/src/components/Mypage/ChangeInfo copy.tsx create mode 100644 frontend/src/components/Mypage/Change_nickname.tsx create mode 100644 frontend/src/components/Mypage/Change_password.tsx diff --git a/frontend/src/Auth/checkToken.ts b/frontend/src/Auth/checkToken.ts index 9a4ee13..f3b6ae9 100644 --- a/frontend/src/Auth/checkToken.ts +++ b/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(); } diff --git a/frontend/src/Auth/tokenManager.tsx b/frontend/src/Auth/tokenManager.tsx index 67e6297..a528441 100644 --- a/frontend/src/Auth/tokenManager.tsx +++ b/frontend/src/Auth/tokenManager.tsx @@ -3,7 +3,10 @@ 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분 @@ -20,7 +23,10 @@ const setAccessToken = (accessToken: string) => { 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 diff --git a/frontend/src/Page/Login.tsx b/frontend/src/Page/Login.tsx index 7b40c20..35641a2 100644 --- a/frontend/src/Page/Login.tsx +++ b/frontend/src/Page/Login.tsx @@ -64,8 +64,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(); diff --git a/frontend/src/Page/Register.tsx b/frontend/src/Page/Register.tsx index baa6356..435bd7b 100644 --- a/frontend/src/Page/Register.tsx +++ b/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) => { @@ -163,19 +160,16 @@ 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("사용 중인 아이디입니다."); else setCheckName("사용 가능한 아이디 입니다."); } } if (props[0] === "email") { if (!emailRegex.test(email as string)) { - setEmailError("올바른 이메일 형식이 아닙니다."); + setCheckEmail("올바른 이메일 형식이 아닙니다."); } else { - setEmailError(""); if (res.data.result == false) setCheckEmail("사용 중인 이메일 입니다."); else setCheckEmail("사용 가능한 이메일 입니다."); } @@ -183,10 +177,8 @@ const Register = () => { 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("사용 가능한 닉네임 입니다."); @@ -245,18 +237,8 @@ const Register = () => { onBlur={(event) => { onBlurInfo(["name", name], event); }} - error={nameError !== "" || false} /> - - {checkName} - - {nameError} + {checkName} { label="Password" type="password" id="password" - error={passwordState !== "" || false} /> {passwordState} { label="Password Confirm" type="password" id="rePassword" - error={passwordError !== "" || false} /> {passwordError} @@ -292,19 +272,9 @@ const Register = () => { onBlur={(event) => { onBlurInfo(["email", email], event); }} - error={emailError !== "" || false} /> - - {checkEmail} - - {emailError} + {checkEmail} { onBlurInfo(["alias", alias], event); }} /> - - {checkAilas} - + {checkAilas} + + + + + + ); +} + +export default ChangeInfo; diff --git a/frontend/src/components/Mypage/ChangeInfo.tsx b/frontend/src/components/Mypage/ChangeInfo.tsx index 6c6d9b6..bc0f9b0 100644 --- a/frontend/src/components/Mypage/ChangeInfo.tsx +++ b/frontend/src/components/Mypage/ChangeInfo.tsx @@ -2,6 +2,7 @@ import * as React from "react"; import { createTheme, ThemeProvider } from "@mui/material/styles"; import { + Grid, Typography, Container, styled, @@ -10,117 +11,59 @@ import { Link, Button } from "@mui/material"; +import ChangePassWord from "./Change_password"; +import ChangeNickName from "./Change_nickname"; const theme = createTheme({ palette: { primary: { - main: "#759F98", + main: "#737458", }, }, }); -const UserInfoChange = styled(TextField)(({}) => ({ - "&:hover": { - color: "#759F98", - }, - "& .MuiOutlinedInput-root": { - "&:hover fieldset": { - borderColor: "#759F98", - }, - }, -})); - function ChangeInfo() { - return( + return ( - - - 내 정보 변경 - - - + + 내 정보 변경 + + + + height: "60vh", + paddingTop: 50 + }}> + + + + + + - - - - - - - + diff --git a/frontend/src/components/Mypage/Change_nickname.tsx b/frontend/src/components/Mypage/Change_nickname.tsx new file mode 100644 index 0000000..6767631 --- /dev/null +++ b/frontend/src/components/Mypage/Change_nickname.tsx @@ -0,0 +1,192 @@ +import * as React from "react"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; +import axios from "axios"; +import { rs } from "src/utils/types"; +import { API_BASE_URL } from "src/utils/constants"; +import { getAccess } from "../../Auth/tokenManager"; +import { setAccessToken, setRefreshToken } from "src/Auth/tokenManager"; +import { useState } from "react"; +import Api from "../../utils/customApi"; + +import { + Typography, + Container, + styled, + TextField, + Box, + Link, + Button +} from "@mui/material"; + +const theme = createTheme({ + palette: { + primary: { + main: "#737458", + }, + }, +}); + +const UserInfoChange = styled(TextField)(({ }) => ({ + "&:hover": { + color: "#737458", + }, + "& .MuiOutlinedInput-root": { + "&:hover fieldset": { + borderColor: "#737458", + }, + }, +})); + + +function ChangeNickName() { + const aliasRegex = /^[가-힣a-zA-Z0-9]+$/; + const [checkAilas, setCheckAlias] = useState(""); + const [alias, setAlias] = useState(""); + + const onBlurInfo = async (props: Array, event: any) => { + const res = await Api.get( + `/users/?case=${props[0]}&value=${props[1] as string}` + ); + if (props[0] == "alias") { + if (!aliasRegex.test(alias as string) || (alias as string).length < 1) { + setCheckAlias("올바른 닉네임을 입력해주세요."); + } else { + if (res.data.result == false) setCheckAlias("사용 중인 닉네임 입니다."); + else setCheckAlias("사용 가능한 닉네임 입니다."); + } + } + }; // 닉네임 유효성 체크 + + + const handleSubmit = (e: any) => { + const data = new FormData(e.currentTarget); + const changeAlias = data.get("alias"); + if (aliasRegex.test(changeAlias as string) && checkAilas === "사용 가능한 닉네임 입니다.") { // 닉네임 체크에 통과될 때 + const aliasChange = async () => { + const stringAccess : any = getAccess(); + + if (stringAccess !== null) { // stringAccess if문 안써주면 코드 오류 발생 + /* const access: rs.TokenInfo = JSON.parse(stringAccess); // string형태로 받는 토큰 JSON으로 만들어줌*/ + console.log("넘겨줄 토큰값", stringAccess); + + const changeData = await axios + .patch(`${API_BASE_URL}/users/`, { "value": { "alias": changeAlias } }, { //patch : 바디 -> 변경할 alias & 헤더 -> 확인해야되는 토큰 + headers: { + Authorization: `${stringAccess.value}`, + }, + }) + .then((response) => { + console.log("response", response.data); + setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화 + setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화 + alert("닉네임이 정상적으로 변경되었습니다!"); + }) + .catch((e) => { // 의도치 않는 오류 + alert("로그인 정보에 오류가 생겼습니다."); + }); + }; + } + aliasChange(); + } + else e.preventDefault(); + //오류 생길때는 활성화 X 화면 넘어가지 않도록 + } + + + + return ( + + + + 닉네임 변경 + + + + + + setAlias(e.target.value)} + onBlur={(event) => { + onBlurInfo(["alias", alias], event); + }} + /> +
+ {checkAilas} +
+ + + + + + + ); +} + +export default ChangeNickName; diff --git a/frontend/src/components/Mypage/Change_password.tsx b/frontend/src/components/Mypage/Change_password.tsx new file mode 100644 index 0000000..9e3eb2c --- /dev/null +++ b/frontend/src/components/Mypage/Change_password.tsx @@ -0,0 +1,217 @@ +import * as React from "react"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; +import axios from "axios"; +import { rs } from "src/utils/types"; +import { API_BASE_URL } from "src/utils/constants"; +import { getAccess } from "../../Auth/tokenManager"; +import { setAccessToken, setRefreshToken } from "src/Auth/tokenManager"; +import { useState } from "react"; +import Api from "../../utils/customApi"; + +import { + FormHelperText, + Typography, + Container, + styled, + TextField, + Box, + Link, + Button +} from "@mui/material"; + +const theme = createTheme({ + palette: { + primary: { + main: "#737458", + }, + }, +}); + +const UserInfoChange = styled(TextField)(({}) => ({ + borderRadius: 5, + textAlign: "center", + "&:hover": { + color: "#737458", + }, + + "& .MuiOutlinedInput-root": { + "&:hover fieldset": { + borderColor: "#737458", + }, + }, + })); + + const FormHelperTexts = styled(FormHelperText)` + width: 100%; + padding: "auto; + font-weight: 600; + color: #c65959; + font-size: 12px; +`; + + +function ChangePassWord() { + const [passwordState, setPasswordState] = useState(""); + const [passwordError, setPasswordError] = useState(""); + const passwordRegex = /^[가-힣a-zA-Z0-9]+$/; + + + + const handleSubmit = (e: any) => { + const data = new FormData(e.currentTarget); + const rePassword = data.get("rePassword"); + const changePassword = data.get("password"); + + // 비밀번호 유효성 체크 + if (!passwordRegex.test( changePassword as string)) + setPasswordState("비밀번호를 형식에 맞춰 입력해주세요!"); + else setPasswordState(""); + + // 비밀번호 같은지 체크 + if (changePassword !== rePassword) + setPasswordError("비밀번호가 일치하지 않습니다."); + else setPasswordError(""); + + if (passwordRegex.test(changePassword as string) && + (changePassword as string) === rePassword) { // 닉네임 체크에 통과될 때 + const aliasChange = async () => { + const stringAccess: any = getAccess(); + + if (stringAccess !== null) { // stringAccess if문 안써주면 코드 오류 발생 + /* const access: rs.TokenInfo = JSON.parse(stringAccess); // string형태로 받는 토큰 JSON으로 만들어줌*/ + console.log("넘겨줄 토큰값", stringAccess); + + const changeData = await axios + .patch(`${API_BASE_URL}/users/`, { "value": { "pw": changePassword } }, { //patch : 바디 -> 변경할 alias & 헤더 -> 확인해야되는 토큰 + headers: { + Authorization: `${stringAccess.value}`, + }, + }) + .then((response) => { + console.log("response", response.data); + setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화 + setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화 + alert("비밀번호가 정상적으로 변경되었습니다!"); + }) + .catch((e) => { // 의도치 않는 오류 + alert("로그인 정보에 오류가 생겼습니다."); + }); + }; + } + aliasChange(); + } + else e.preventDefault(); + //오류 생길때는 활성화 X 화면 넘어가지 않도록 + } + + + + return ( + + + + 비밀번호 변경 + + + + + + +
+ {passwordState} +
+ + +
+ {passwordError} +
+ + + + + + + ); +} + +export default ChangePassWord; From 690dc30d521ad70e41d0c53a0567279f9ecdba6d Mon Sep 17 00:00:00 2001 From: RayLee Date: Tue, 2 Aug 2022 16:59:47 +0900 Subject: [PATCH 19/24] style : finish Ranking & Chart API --- frontend/src/components/Mypage/ChangeInfo.tsx | 23 +++++++++-- .../src/components/Mypage/Change_nickname.tsx | 39 ++++++++++--------- .../src/components/Mypage/Change_password.tsx | 25 +++--------- .../src/components/Mypage/MyChallenge.tsx | 1 + .../src/components/Mypage/MyTrashChart.tsx | 5 ++- frontend/src/components/Mypage/MyTrashcan.tsx | 1 + .../src/components/Mypage/UserChallenge.tsx | 1 + .../src/components/mainpage/TrashCardView.tsx | 2 +- 8 files changed, 52 insertions(+), 45 deletions(-) diff --git a/frontend/src/components/Mypage/ChangeInfo.tsx b/frontend/src/components/Mypage/ChangeInfo.tsx index bc0f9b0..d1670b0 100644 --- a/frontend/src/components/Mypage/ChangeInfo.tsx +++ b/frontend/src/components/Mypage/ChangeInfo.tsx @@ -54,18 +54,33 @@ function ChangeInfo() { borderColor: "white", justifyContent: "center", height: "60vh", - paddingTop: 50 + paddingTop: 50, + boxShadow: "1px 3px 3px #B0B09A", }}> - + + + - + +
+ + + + - + ); } diff --git a/frontend/src/components/Mypage/Change_nickname.tsx b/frontend/src/components/Mypage/Change_nickname.tsx index 6767631..be2e0b7 100644 --- a/frontend/src/components/Mypage/Change_nickname.tsx +++ b/frontend/src/components/Mypage/Change_nickname.tsx @@ -9,6 +9,7 @@ import { useState } from "react"; import Api from "../../utils/customApi"; import { + FormHelperText, Typography, Container, styled, @@ -26,16 +27,27 @@ const theme = createTheme({ }, }); -const UserInfoChange = styled(TextField)(({ }) => ({ +const UserInfoChange = styled(TextField)(({}) => ({ + borderRadius: 5, + textAlign: "center", "&:hover": { - color: "#737458", + color: "#737458", }, + "& .MuiOutlinedInput-root": { - "&:hover fieldset": { - borderColor: "#737458", - }, + "&:hover fieldset": { + borderColor: "#737458", + }, }, -})); + })); + + const FormHelperTexts = styled(FormHelperText)` + width: 100%; + padding-left:6px; + font-weight: 600; + color: #c65959; + font-size: 12px; +`; function ChangeNickName() { @@ -137,7 +149,7 @@ function ChangeNickName() { flexDirection: "column", justifyContent: "center", alignItems: "center", - width: 300, + width: "auto", margin: "auto" }} @@ -156,16 +168,7 @@ function ChangeNickName() { onBlurInfo(["alias", alias], event); }} /> -
- {checkAilas} -
+ {checkAilas} From 425b85b36c780501b0c61497bcd4d6558f825946 Mon Sep 17 00:00:00 2001 From: Chaehy Date: Tue, 2 Aug 2022 17:03:57 +0900 Subject: [PATCH 20/24] chore: check branch --- frontend/src/Auth/tokenManager.tsx | 19 ++----------------- .../components/Mypage/MultiActionAreaCard.tsx | 11 +++++------ frontend/src/components/common/Header.tsx | 1 - 3 files changed, 7 insertions(+), 24 deletions(-) diff --git a/frontend/src/Auth/tokenManager.tsx b/frontend/src/Auth/tokenManager.tsx index 7634b67..e6e2690 100644 --- a/frontend/src/Auth/tokenManager.tsx +++ b/frontend/src/Auth/tokenManager.tsx @@ -1,18 +1,10 @@ -import axios from "axios"; import { rs } from "src/utils/types"; -import { decodeToken } from "./tokenGetter"; // 받아온 토큰을 만료일을 설정해 로컬 스토리지에 저장 const setAccessToken = (accessToken: string) => { 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, @@ -22,25 +14,18 @@ const setAccessToken = (accessToken: string) => { const setRefreshToken = (refreshtoken: string) => { 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 * 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"); diff --git a/frontend/src/components/Mypage/MultiActionAreaCard.tsx b/frontend/src/components/Mypage/MultiActionAreaCard.tsx index f5ca29e..95c138d 100644 --- a/frontend/src/components/Mypage/MultiActionAreaCard.tsx +++ b/frontend/src/components/Mypage/MultiActionAreaCard.tsx @@ -5,14 +5,11 @@ import { CardActions, Card, CardMedia, - Typography, styled, - Link, } from "@mui/material"; import { useDispatch } from "react-redux"; import { save_ID } from "../../actions/ImgIDActions"; -import { useSelector } from "react-redux"; -import { RootReducerType } from "../../index"; + import { useNavigate } from "react-router-dom"; const MyTrashcanBtn = styled(Button)(({}) => ({ @@ -31,13 +28,15 @@ export default function MultiActionAreaCard({ image = "", id = "" }) { const dispatch = useDispatch(); //const itemID = useSelector((state: RootReducerType) => state.ImgIDReducer); const onDispatch = () => { - console.log(id); + // console.log(id); dispatch(save_ID(id)); navigate(`/howtopage`); }; return ( - + Date: Tue, 2 Aug 2022 17:52:05 +0900 Subject: [PATCH 21/24] fix: mentor feedback --- .../src/components/Mypage/Change_nickname.tsx | 331 +++++++++--------- 1 file changed, 171 insertions(+), 160 deletions(-) diff --git a/frontend/src/components/Mypage/Change_nickname.tsx b/frontend/src/components/Mypage/Change_nickname.tsx index be2e0b7..ece9813 100644 --- a/frontend/src/components/Mypage/Change_nickname.tsx +++ b/frontend/src/components/Mypage/Change_nickname.tsx @@ -9,187 +9,198 @@ import { useState } from "react"; import Api from "../../utils/customApi"; import { - FormHelperText, - Typography, - Container, - styled, - TextField, - Box, - Link, - Button + FormHelperText, + Typography, + Container, + styled, + TextField, + Box, + Link, + Button, } from "@mui/material"; const theme = createTheme({ - palette: { - primary: { - main: "#737458", - }, + palette: { + primary: { + main: "#737458", }, + }, }); const UserInfoChange = styled(TextField)(({}) => ({ - borderRadius: 5, - textAlign: "center", - "&:hover": { - color: "#737458", + borderRadius: 5, + textAlign: "center", + "&:hover": { + color: "#737458", + }, + + "& .MuiOutlinedInput-root": { + "&:hover fieldset": { + borderColor: "#737458", }, - - "& .MuiOutlinedInput-root": { - "&:hover fieldset": { - borderColor: "#737458", - }, - }, - })); + }, +})); - const FormHelperTexts = styled(FormHelperText)` +const FormHelperTexts = styled(FormHelperText)` width: 100%; - padding-left:6px; + padding-left: 6px; font-weight: 600; color: #c65959; font-size: 12px; `; - function ChangeNickName() { - const aliasRegex = /^[가-힣a-zA-Z0-9]+$/; - const [checkAilas, setCheckAlias] = useState(""); - const [alias, setAlias] = useState(""); - - const onBlurInfo = async (props: Array, event: any) => { - const res = await Api.get( - `/users/?case=${props[0]}&value=${props[1] as string}` - ); - if (props[0] == "alias") { - if (!aliasRegex.test(alias as string) || (alias as string).length < 1) { - setCheckAlias("올바른 닉네임을 입력해주세요."); - } else { - if (res.data.result == false) setCheckAlias("사용 중인 닉네임 입니다."); - else setCheckAlias("사용 가능한 닉네임 입니다."); - } - } - }; // 닉네임 유효성 체크 - + const aliasRegex = /^[가-힣a-zA-Z0-9]+$/; + const [checkAilas, setCheckAlias] = useState(""); + const [alias, setAlias] = useState(""); - const handleSubmit = (e: any) => { - const data = new FormData(e.currentTarget); - const changeAlias = data.get("alias"); - if (aliasRegex.test(changeAlias as string) && checkAilas === "사용 가능한 닉네임 입니다.") { // 닉네임 체크에 통과될 때 - const aliasChange = async () => { - const stringAccess : any = getAccess(); - - if (stringAccess !== null) { // stringAccess if문 안써주면 코드 오류 발생 - /* const access: rs.TokenInfo = JSON.parse(stringAccess); // string형태로 받는 토큰 JSON으로 만들어줌*/ - console.log("넘겨줄 토큰값", stringAccess); - - const changeData = await axios - .patch(`${API_BASE_URL}/users/`, { "value": { "alias": changeAlias } }, { //patch : 바디 -> 변경할 alias & 헤더 -> 확인해야되는 토큰 - headers: { - Authorization: `${stringAccess.value}`, - }, - }) - .then((response) => { - console.log("response", response.data); - setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화 - setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화 - alert("닉네임이 정상적으로 변경되었습니다!"); - }) - .catch((e) => { // 의도치 않는 오류 - alert("로그인 정보에 오류가 생겼습니다."); - }); - }; - } - aliasChange(); - } - else e.preventDefault(); - //오류 생길때는 활성화 X 화면 넘어가지 않도록 + const onBlurInfo = async (props: Array, event: any) => { + const res = await Api.get( + `/users/?case=${props[0]}&value=${props[1] as string}` + ); + if (props[0] === "alias") { + if (!aliasRegex.test(alias as string) || (alias as string).length < 1) { + setCheckAlias("올바른 닉네임을 입력해주세요."); + } else { + if (res.data.result == false) setCheckAlias("사용 중인 닉네임 입니다."); + else setCheckAlias("사용 가능한 닉네임 입니다."); + } } + }; // 닉네임 유효성 체크 + + // 닉네임 체크에 통과될 때 + const aliasChange = async (changeAlias: string) => { + const stringAccess: any = getAccess(); + + if (stringAccess !== null) { + // stringAccess if문 안써주면 코드 오류 발생 + /* const access: rs.TokenInfo = JSON.parse(stringAccess); // string형태로 받는 토큰 JSON으로 만들어줌*/ + console.log("넘겨줄 토큰값", stringAccess); + + await axios + .patch( + `${API_BASE_URL}/users/`, + { value: { alias: changeAlias } }, + { + //patch : 바디 -> 변경할 alias & 헤더 -> 확인해야되는 토큰 + headers: { + Authorization: `${stringAccess.value}`, + }, + } + ) + .then((response) => { + console.log("response", response.data); + setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화 + setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화 + alert("닉네임이 정상적으로 변경되었습니다!"); + }) + .catch((e) => { + // 의도치 않는 오류 + alert("로그인 정보에 오류가 생겼습니다."); + }); + } + alert("닉네임"); + }; + + const handleSubmit = (e: any) => { + e.preventDefault(); + const data = new FormData(e.currentTarget); + const changeAlias = data.get("alias"); + if ( + aliasRegex.test(changeAlias as string) && + checkAilas === "사용 가능한 닉네임 입니다." + ) { + aliasChange(changeAlias as string); + } else e.preventDefault(); + //오류 생길때는 활성화 X 화면 넘어가지 않도록 + }; + + React.useEffect(() => {}, [alias]); + + return ( + + + + 닉네임 변경 + - - - return ( - - - 닉네임 변경 - - - - - - setAlias(e.target.value)} - onBlur={(event) => { - onBlurInfo(["alias", alias], event); - }} - /> - {checkAilas} - - - - + style={{ + backgroundColor: "white", + border: "solid", + borderRadius: 5, + borderColor: "white", + justifyContent: "center", + height: "auto", + paddingTop: 30, + }} + > + + setAlias(e.target.value)} + onBlur={(event) => { + onBlurInfo(["alias", alias], event); + }} + /> + {checkAilas} + + - - ); + + + ); } export default ChangeNickName; From f11319f016a69cdd695abee6bce02a65327fd39e Mon Sep 17 00:00:00 2001 From: RayLee Date: Wed, 3 Aug 2022 01:23:23 +0900 Subject: [PATCH 22/24] fix : fix error --- .../src/components/Mypage/ChangeInfo copy.tsx | 130 ------------------ .../src/components/Mypage/Change_nickname.tsx | 7 +- .../src/components/Mypage/Change_password.tsx | 70 +++++----- 3 files changed, 40 insertions(+), 167 deletions(-) delete mode 100644 frontend/src/components/Mypage/ChangeInfo copy.tsx diff --git a/frontend/src/components/Mypage/ChangeInfo copy.tsx b/frontend/src/components/Mypage/ChangeInfo copy.tsx deleted file mode 100644 index 6c6d9b6..0000000 --- a/frontend/src/components/Mypage/ChangeInfo copy.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import * as React from "react"; -import { createTheme, ThemeProvider } from "@mui/material/styles"; - -import { - Typography, - Container, - styled, - TextField, - Box, - Link, - Button -} from "@mui/material"; - -const theme = createTheme({ - palette: { - primary: { - main: "#759F98", - }, - }, -}); - -const UserInfoChange = styled(TextField)(({}) => ({ - "&:hover": { - color: "#759F98", - }, - "& .MuiOutlinedInput-root": { - "&:hover fieldset": { - borderColor: "#759F98", - }, - }, -})); - - -function ChangeInfo() { - - return( - - - - 내 정보 변경 - - - - - - - - - - - - - - - ); -} - -export default ChangeInfo; diff --git a/frontend/src/components/Mypage/Change_nickname.tsx b/frontend/src/components/Mypage/Change_nickname.tsx index ece9813..b9923de 100644 --- a/frontend/src/components/Mypage/Change_nickname.tsx +++ b/frontend/src/components/Mypage/Change_nickname.tsx @@ -53,6 +53,7 @@ function ChangeNickName() { const aliasRegex = /^[가-힣a-zA-Z0-9]+$/; const [checkAilas, setCheckAlias] = useState(""); const [alias, setAlias] = useState(""); + const [newAccess, getNewAccess] = useState(""); const onBlurInfo = async (props: Array, event: any) => { const res = await Api.get( @@ -93,13 +94,13 @@ function ChangeNickName() { setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화 setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화 alert("닉네임이 정상적으로 변경되었습니다!"); + window.location.reload(); }) .catch((e) => { // 의도치 않는 오류 alert("로그인 정보에 오류가 생겼습니다."); }); } - alert("닉네임"); }; const handleSubmit = (e: any) => { @@ -116,6 +117,9 @@ function ChangeNickName() { }; React.useEffect(() => {}, [alias]); + React.useEffect(() => { + console.log("newAccess",newAccess); + }, [newAccess]); return ( setAlias(e.target.value)} onBlur={(event) => { onBlurInfo(["alias", alias], event); diff --git a/frontend/src/components/Mypage/Change_password.tsx b/frontend/src/components/Mypage/Change_password.tsx index 264e4a8..d8036ed 100644 --- a/frontend/src/components/Mypage/Change_password.tsx +++ b/frontend/src/components/Mypage/Change_password.tsx @@ -27,21 +27,21 @@ const theme = createTheme({ }, }); -const UserInfoChange = styled(TextField)(({}) => ({ +const UserInfoChange = styled(TextField)(({ }) => ({ borderRadius: 5, textAlign: "center", "&:hover": { - color: "#737458", + color: "#737458", }, - + "& .MuiOutlinedInput-root": { - "&:hover fieldset": { - borderColor: "#737458", - }, + "&:hover fieldset": { + borderColor: "#737458", + }, }, - })); +})); - const FormHelperTexts = styled(FormHelperText)` +const FormHelperTexts = styled(FormHelperText)` width: 100%; padding-left:6px; font-weight: 600; @@ -55,6 +55,30 @@ function ChangePassWord() { const [passwordError, setPasswordError] = useState(""); const passwordRegex = /^[가-힣a-zA-Z0-9]+$/; + const aliasChange = async (changePassword : string) => { + const stringAccess: any = getAccess(); + + if (stringAccess !== null) { // stringAccess if문 안써주면 코드 오류 발생 + /* const access: rs.TokenInfo = JSON.parse(stringAccess); // string형태로 받는 토큰 JSON으로 만들어줌*/ + console.log("넘겨줄 토큰값", stringAccess); + + await axios + .patch(`${API_BASE_URL}/users/`, { "value": { password: changePassword } }, { //patch : 바디 -> 변경할 alias & 헤더 -> 확인해야되는 토큰 + headers: { + Authorization: `${stringAccess.value}`, + }, + }) + .then((response) => { + console.log("response", response.data); + setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화 + setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화 + alert("비밀번호가 정상적으로 변경되었습니다!"); + }) + .catch((e) => { // 의도치 않는 오류 + alert("로그인 정보에 오류가 생겼습니다."); + }); + }; + } const handleSubmit = (e: any) => { @@ -63,7 +87,7 @@ function ChangePassWord() { const changePassword = data.get("password"); // 비밀번호 유효성 체크 - if (!passwordRegex.test( changePassword as string)) + if (!passwordRegex.test(changePassword as string)) setPasswordState("비밀번호를 형식에 맞춰 입력해주세요!"); else setPasswordState(""); @@ -74,31 +98,7 @@ function ChangePassWord() { if (passwordRegex.test(changePassword as string) && (changePassword as string) === rePassword) { // 닉네임 체크에 통과될 때 - const aliasChange = async () => { - const stringAccess: any = getAccess(); - - if (stringAccess !== null) { // stringAccess if문 안써주면 코드 오류 발생 - /* const access: rs.TokenInfo = JSON.parse(stringAccess); // string형태로 받는 토큰 JSON으로 만들어줌*/ - console.log("넘겨줄 토큰값", stringAccess); - - const changeData = await axios - .patch(`${API_BASE_URL}/users/`, { "value": { "pw": changePassword } }, { //patch : 바디 -> 변경할 alias & 헤더 -> 확인해야되는 토큰 - headers: { - Authorization: `${stringAccess.value}`, - }, - }) - .then((response) => { - console.log("response", response.data); - setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화 - setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화 - alert("비밀번호가 정상적으로 변경되었습니다!"); - }) - .catch((e) => { // 의도치 않는 오류 - alert("로그인 정보에 오류가 생겼습니다."); - }); - }; - } - aliasChange(); + aliasChange(changePassword as string); } else e.preventDefault(); //오류 생길때는 활성화 X 화면 넘어가지 않도록 @@ -186,7 +186,7 @@ function ChangePassWord() { height: 50, color: "white", fontWeight: "bold", - borderRadius : 3 + borderRadius: 3 }} > 변경하기 From e1965b42033c9563190766698155be20393c6ff5 Mon Sep 17 00:00:00 2001 From: RayLee Date: Wed, 3 Aug 2022 01:27:33 +0900 Subject: [PATCH 23/24] fix : add reload --- frontend/src/components/Mypage/Change_password.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/Mypage/Change_password.tsx b/frontend/src/components/Mypage/Change_password.tsx index d8036ed..65761d4 100644 --- a/frontend/src/components/Mypage/Change_password.tsx +++ b/frontend/src/components/Mypage/Change_password.tsx @@ -73,6 +73,7 @@ function ChangePassWord() { setAccessToken(response.data.access_token, true); // 그 전의 access토큰 초기화 setRefreshToken(response.data.refresh_token, true); // 그 전의 refresh토큰 초기화 alert("비밀번호가 정상적으로 변경되었습니다!"); + window.location.reload(); }) .catch((e) => { // 의도치 않는 오류 alert("로그인 정보에 오류가 생겼습니다."); @@ -82,6 +83,7 @@ function ChangePassWord() { const handleSubmit = (e: any) => { + e.preventDefault(); const data = new FormData(e.currentTarget); const rePassword = data.get("rePassword"); const changePassword = data.get("password"); From 1f176973083ca01d4f96980f1c50d0ae8bdd07ee Mon Sep 17 00:00:00 2001 From: RayLee Date: Wed, 3 Aug 2022 01:51:37 +0900 Subject: [PATCH 24/24] chore : merge fix --- frontend/src/Page/DefaultHowPage.tsx | 2 +- frontend/src/components/Mypage/UserChallenge.tsx | 1 - frontend/src/components/chart/Date.tsx | 4 +++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/frontend/src/Page/DefaultHowPage.tsx b/frontend/src/Page/DefaultHowPage.tsx index 361d260..442dc37 100644 --- a/frontend/src/Page/DefaultHowPage.tsx +++ b/frontend/src/Page/DefaultHowPage.tsx @@ -57,7 +57,7 @@ const HowtoPage = () => { fontWeight: "bold", fontFamily: "Itim", padding: 100, - color: "black", + color: "#737458", fontSize: 30, }} > diff --git a/frontend/src/components/Mypage/UserChallenge.tsx b/frontend/src/components/Mypage/UserChallenge.tsx index 7c527cc..5bc4959 100644 --- a/frontend/src/components/Mypage/UserChallenge.tsx +++ b/frontend/src/components/Mypage/UserChallenge.tsx @@ -27,7 +27,6 @@ export default function UserChallenge({ num = 1, type }: Props) { flexDirection: "column", alignItems: "center", marginTop: 5, - boxShadow: "1px 3px 3px #B0B09A", }} > 008 diff --git a/frontend/src/components/chart/Date.tsx b/frontend/src/components/chart/Date.tsx index a671c26..a546a5e 100644 --- a/frontend/src/components/chart/Date.tsx +++ b/frontend/src/components/chart/Date.tsx @@ -8,6 +8,7 @@ import { createTheme, ThemeProvider } from "@mui/material/styles"; import axios from "axios"; import { API_BASE_URL } from "src/utils/constants"; import { getAccess } from "../../Auth/tokenManager"; +import { ReduxModule } from "../../modules/ReduxModule"; const theme = createTheme({ palette: { @@ -27,6 +28,7 @@ function formatDate(date: Date) { function Dates({ onClickRetrieve }: { onClickRetrieve: any }) { // 함수의 반환 : onClickRetrieve + const userIdtoRedux = ReduxModule().decodeInfo?.id; const [StartDate, setStartDate] = React.useState(null); const [StartLock, setStartLock] = React.useState(null); @@ -70,7 +72,7 @@ function Dates({ onClickRetrieve }: { onClickRetrieve: any }) { /* const access: rs.TokenInfo = JSON.parse(stringAccess); // string형태로 받는 토큰 JSON으로 만들어줌*/ await axios .get( - `${API_BASE_URL}/trash/users/e6ad3333-a947-4448-b484-f8209ed701a6/statistics${periodStr}${startDateStr}${endDateStr}`, { //patch : 바디 -> 변경할 alias & 헤더 -> 확인해야되는 토큰 + `${API_BASE_URL}/trash/users/${userIdtoRedux}/statistics${periodStr}${startDateStr}${endDateStr}`, { //patch : 바디 -> 변경할 alias & 헤더 -> 확인해야되는 토큰 headers: { Authorization: `${stringAccess.value}` }