Feat: create editProfilPage and connect button to page #11

src/pages/EditProfilPage.js

@@ -0,0 +1,19 @@
+import React from "react";
+import styled from "styled-components";
+import { Typography } from "@mui/material";
+import Avatar from "@mui/material/Avatar";
+import Default from "../assets/images/defaultavatar.svg";
+import { COLOR } from "../styles/color";
+
+const EditProfilPage = () => {
+  return <StEditProfilPage>
+    <h2>잘오셧습니다.</h2>
+  </StEditProfilPage>;
+};
+
+const StEditProfilPage = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+export default EditProfilPage;

src/pages/MypagePage.js

@@ -4,6 +4,7 @@ import { Typography } from "@mui/material";
 import Avatar from "@mui/material/Avatar";
 import Default from "../assets/images/defaultavatar.svg";
 import { COLOR } from "../styles/color";
+import { useNavigate } from "react-router-dom";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import ListItemButton from "@mui/material/ListItemButton";
@@ -12,10 +13,15 @@ import LogoutOutlinedIcon from "@mui/icons-material/LogoutOutlined";
 import DoDisturbOutlinedIcon from "@mui/icons-material/DoDisturbOutlined";
 
 const MypagePage = () => {
+  const navigate = useNavigate();
+
+  const goToEdit = () => {
+    navigate("/editprofil");
+  };
   const Menu = [
-    { icon: <ModifyIcon />, text: "프로필 편집" },
-    { icon: <LogoutIcon />, text: "로그아웃" },
-    { icon: <CancelIcon />, text: "계정 탈퇴" },
+    { icon: <ModifyIcon />, text: "프로필 편집", action: goToEdit },
+    { icon: <LogoutIcon />, text: "로그아웃", action: goToEdit },
+    { icon: <CancelIcon />, text: "계정 탈퇴", action: goToEdit },
   ];
   return (
     <StMyPagePage>
@@ -28,12 +34,12 @@ const MypagePage = () => {
         <MailP>[email protected]</MailP>
       </ProfilDiv>
       <MenuDiv>
-        <List>
+        <List sx={{width: "100%"}}>
           {Menu.map((it) => {
             return (
               <div key={it.text}>
                 <MenuLstItem disablePadding>
-                  <MenuLIBtn>
+                  <MenuLIBtn onClick={it.action}>
                     {it.icon}
                     <MenuP>{it.text}</MenuP>
                   </MenuLIBtn>
@@ -106,14 +112,14 @@ const MenuDiv = styled.div`
 `;
 
 const MenuLstItem = styled(ListItem)`
-  /* border: 1px solid black; */
   width: 100%;
   height: 5rem;
+  margin-left: 0.2rem 0rem 0.2rem 1.2rem;
 `;
 
 const MenuLIBtn = styled(ListItemButton)`
-  /* border: 1px solid blue; */
   display: flex;
+  width: 100%;
 `;
 
 const MenuP = styled.p`

src/routes/router.js

@@ -4,6 +4,7 @@ import LoginPage from "../pages/LoginPage";
 import JoinPage from "../pages/JoinPage";
 import CreateTripPage from "../pages/CreateTripPage";
 import MypagePage from "../pages/MypagePage";
+import EditProfilPage from "../pages/EditProfilPage";
 import React from "react";
 
 const Router = () => {
@@ -15,6 +16,7 @@ const Router = () => {
         <Route path="/join" element={<JoinPage />} />
         <Route path="/createTrip" element={<CreateTripPage />} />
         <Route path="/mypage" element={<MypagePage />} />
+        <Route path="/editprofil" element={<EditProfilPage />} />
       </Routes>
     </BrowserRouter>
   );