SoluxProject · Sae-byeol · Aug 12, 2021 · Aug 10, 2021 · Aug 10, 2021 · Aug 10, 2021
diff --git a/src/App.js b/src/App.js
@@ -7,6 +7,8 @@ import Todo from './component/Todo';
 import Dday from './component/Dday';
 import Search from './component/Search';
 import Dailynote from './component/Dailynote';
+import MyPage from './component/MyPage';
+import EditMyPage from './component/EditMyPage';
 
 function App() {
   return (
@@ -19,6 +21,8 @@ function App() {
           <Route exact path="/dday" component={Dday} />
           <Route exact path="/dailynote" component={Dailynote} />
           <Route exact path="/auth/search" component={Search} />
+          <Route exact path="/mypage" component={MyPage}/>
+          <Route exact path="/editMyPage" component={EditMyPage}/>
       </div>
     </BrowserRouter>
   );

diff --git a/src/EditMyPage.css b/src/EditMyPage.css
@@ -0,0 +1,65 @@
+.EditMyPageTitle h1{
+    color: #456268;
+    font-weight: bold;
+    font-size: 38px;
+}
+.EditMyPage{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 100px;
+}
+
+.EditMyPageUser{
+    display: flex;
+    flex-direction: row;
+    margin-top: 45px;   
+    font-size: 18px;
+}
+.EditMyPageContent {
+    display: flex;
+    flex-direction: column;
+    margin-left: 40px;
+}
+.EditMyPageCont{
+    margin-bottom: 43px;
+}
+.EditMyPageInputBtn input{
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #dee2e6;
+    outline: none;
+    font-size: 15px;
+    width: 250px;
+}
+
+.EditMyPageContentTitle{
+    font-size: 20px;
+    font-weight: bold;
+    margin-right: 40px;
+
+}
+.EditMyPageContentTitle div{
+    margin-bottom: 40px;
+}
+
+.EditMyPageEditBtn{
+    color: #456268;
+    background-color: transparent;
+    width: 40px;
+    height: 40px;
+    font-size: 25px;
+    border: none;
+    outline: none;  
+    position: relative;
+    margin-left: 20px;
+}
+
+.EditMyPageEditBtn :hover {
+    opacity: 0.5;
+}
+.EditMyPageInputBtn{
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 25px;
+}
diff --git a/src/MyPage.css b/src/MyPage.css
@@ -0,0 +1,65 @@
+.MyPage{
+}
+.MyPageContent{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 30px;
+}
+.MyPageTitle h1{
+    color: #456268;
+    font-weight: bold;
+    font-size: 38px;
+}
+.MyPageImage{
+    width: 170px;
+    height: 170px;
+    border-radius: 70%;
+    background-color: white;
+    overflow: hidden;
+    margin-top: 45px;
+}
+.MyPageUser{
+    display: flex;
+    flex-direction: row;
+    margin-top: 25px;
+}
+.MyPageUserContent{
+    display: flex;
+    flex-direction: column;
+    font-size: 18px;
+
+}
+.MyPageUserContent div{
+    margin-bottom: 4px;
+}
+
+.MyPageUserContentTitle{
+    font-size: 20px;
+    font-weight: bold;
+    margin-right: 15px;
+}
+.MyPageBtns{
+    margin-top: 40px;
+}
+.MyPageBtn {
+    color:#FCF8EC;
+    background-color:#456268;
+    border-color:#456268;
+    padding: 1rem 1.75rem;
+    font-size: 1.25rem;
+    margin-right: 1rem;
+    display: inline-block;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    background-color: #456268;
+    border: 0.125rem solid transparent;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    border-radius: 0.5rem;
+ }
+
diff --git a/src/component/EditMyPage.js b/src/component/EditMyPage.js
@@ -0,0 +1,80 @@
+import "../EditMyPage.css"
+import React , {useState, useEffect,useCallback} from 'react';
+import axios from "axios";
+import { RiEdit2Fill } from "react-icons/ri";
+
+export default function EditMyPage({location}){
+
+    const id=location.state.id;
+    const name=location.state.name;
+    const pw=location.state.pw;
+    const email=location.state.email;
+    const major=location.state.major;
+
+    const [newEmail, setNewEmail]=useState(email);
+    const [newMajor, setNewMajor]=useState(major);
+
+    const changeEmail=useCallback(
+        (e) => {
+            setNewEmail(e.target.value);
+        },
+        []
+    );
+    const changeMajor=useCallback(
+        (e) => {
+            setNewMajor(e.target.value);
+        },
+        []
+    );
+
+    const editEmail=(id, {data})=>{
+        console.log(data);
+        axios.post('/mypage/changeEmail',{
+            id:id,
+            newEmail:data,
+        })
+
+
+    }
+    const editMajor=(id, {data})=>{
+
+        axios.post('/mypage/changeMajor',{
+            id:id,
+            newMajor:data,
+        })
+    }
+
+    return(
+        <div className="EditMyPage">
+            <div className="EditMyPageTitle">
+                    <h1>회원정보 수정</h1>
+            </div>
+            <div className="EditMyPageUser">
+                    <div className="EditMyPageContentTitle">
+                        <div>이름</div>
+                        <div>아이디</div>
+                        <div>비밀번호</div>
+                        <div>이메일</div>
+                        <div>전공</div>
+                    </div>
+                    <div className="EditMyPageContent">
+                        <div className="EditMyPageCont">{name}</div>
+                        <div className="EditMyPageCont">{id}</div>
+                        <div className="EditMyPageInputBtn">
+                            <input value={pw}></input>
+                            <button className="EditMyPageEditBtn"><RiEdit2Fill /></button>
+                        </div>
+                        <div className="EditMyPageInputBtn">
+                            <input value={newEmail} onChange={changeEmail}></input>
+                            <button className="EditMyPageEditBtn" onClick={editEmail(id, newEmail)}><RiEdit2Fill /></button>
+                        </div>
+                        <div className="EditMyPageInputBtn">
+                            <input value={newMajor} onChange={changeMajor}></input>
+                            <button className="EditMyPageEditBtn" onClick={editMajor(id, newMajor)}><RiEdit2Fill /></button>
+                        </div>
+
+                    </div>
+            </div>
+        </div>
+    )
+}
diff --git a/src/component/Home.js b/src/component/Home.js
@@ -97,9 +97,11 @@ function Home() {
                     </div>
                     <div className="item column" id="login">
                       <div id="box">
+                      <Link to="/mypage">
                         <a href="" target="_self">
                           <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEzLjMyMyA1MTMuMzIzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTMuMzIzIDUxMy4zMjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjU2LjY2MSwyNTcuMzIzYy0xMzUuMjc1LDAtMjQ1LjMzMywxMTAuMDU5LTI0NS4zMzMsMjQ1LjMzM2MwLDUuODg4LDQuNzc5LDEwLjY2NywxMC42NjcsMTAuNjY3DQoJCQlzMTAuNjY3LTQuNzc5LDEwLjY2Ny0xMC42NjdjMC0xMjMuNTIsMTAwLjQ4LTIyNCwyMjQtMjI0czIyNCwxMDAuNDgsMjI0LDIyNGMwLDUuODg4LDQuNzc5LDEwLjY2NywxMC42NjcsMTAuNjY3DQoJCQljNS44ODgsMCwxMC42NjctNC43NzksMTAuNjY3LTEwLjY2N0M1MDEuOTk1LDM2Ny4zNiwzOTEuOTM2LDI1Ny4zMjMsMjU2LjY2MSwyNTcuMzIzeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjU2LjY2MSwwYy02NC42ODMsMC0xMTcuMzMzLDUyLjYyOS0xMTcuMzMzLDExNy4zMzNzNTIuNjUxLDExNy4zMzMsMTE3LjMzMywxMTcuMzMzczExNy4zMzMtNTIuNjI5LDExNy4zMzMtMTE3LjMzMw0KCQkJUzMyMS4zNDQsMCwyNTYuNjYxLDB6IE0yNTYuNjYxLDIxMy4zMzNjLTUyLjkyOCwwLTk2LTQzLjA3Mi05Ni05NnM0My4wNzItOTYsOTYtOTZjNTIuOTI4LDAsOTYsNDMuMDcyLDk2LDk2DQoJCQlTMzA5LjU4OSwyMTMuMzMzLDI1Ni42NjEsMjEzLjMzM3oiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==" />
                         </a>
+                        </Link>
                       </div>
                         {!isLoggedIn ?
                           (

diff --git a/src/component/MyPage.js b/src/component/MyPage.js
@@ -0,0 +1,67 @@
+import "../MyPage.css"
+import Navbr from "./Navbar";
+import React , {useState, useEffect} from 'react';
+import Axios from 'axios';
+import {Link} from 'react-router-dom';
+
+export default function MyPage(){
+    const [user,setUser]=useState([]);
+
+    useEffect(() => {    
+    Axios.get("/mypage/info")
+    .then(res => {
+      console.log(res.data.data[0]);
+      setUser(res.data.data[0]);
+    })
+    }, [])
+
+    return(
+        <div className="MyPage">
+            <div className="MyPageNavbar">
+                    <Navbr page="MyPage"></Navbr>
+            </div>
+            <div className="MyPageContent">
+                <div className="MyPageTitle">
+                    <h1>My Page</h1>
+                </div>
+                <div className="MyPageImage">
+                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEzLjMyMyA1MTMuMzIzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTMuMzIzIDUxMy4zMjM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjU2LjY2MSwyNTcuMzIzYy0xMzUuMjc1LDAtMjQ1LjMzMywxMTAuMDU5LTI0NS4zMzMsMjQ1LjMzM2MwLDUuODg4LDQuNzc5LDEwLjY2NywxMC42NjcsMTAuNjY3DQoJCQlzMTAuNjY3LTQuNzc5LDEwLjY2Ny0xMC42NjdjMC0xMjMuNTIsMTAwLjQ4LTIyNCwyMjQtMjI0czIyNCwxMDAuNDgsMjI0LDIyNGMwLDUuODg4LDQuNzc5LDEwLjY2NywxMC42NjcsMTAuNjY3DQoJCQljNS44ODgsMCwxMC42NjctNC43NzksMTAuNjY3LTEwLjY2N0M1MDEuOTk1LDM2Ny4zNiwzOTEuOTM2LDI1Ny4zMjMsMjU2LjY2MSwyNTcuMzIzeiIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjU2LjY2MSwwYy02NC42ODMsMC0xMTcuMzMzLDUyLjYyOS0xMTcuMzMzLDExNy4zMzNzNTIuNjUxLDExNy4zMzMsMTE3LjMzMywxMTcuMzMzczExNy4zMzMtNTIuNjI5LDExNy4zMzMtMTE3LjMzMw0KCQkJUzMyMS4zNDQsMCwyNTYuNjYxLDB6IE0yNTYuNjYxLDIxMy4zMzNjLTUyLjkyOCwwLTk2LTQzLjA3Mi05Ni05NnM0My4wNzItOTYsOTYtOTZjNTIuOTI4LDAsOTYsNDMuMDcyLDk2LDk2DQoJCQlTMzA5LjU4OSwyMTMuMzMzLDI1Ni42NjEsMjEzLjMzM3oiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==" />
+                </div>
+                <div className="MyPageUser">
+                    <div className="MyPageUserContentTitle">
+                        <div>이름</div>
+                        <div>아이디</div>
+                        <div>이메일</div>
+                        <div>전공</div>
+                    </div>
+
+                    <div className="MyPageUserContent">
+                        <div>{user.name}</div>
+                        <div>{user.id}</div>
+                        <div>{user.email}</div>
+                        <div>{user.major}</div>
+                    </div> 
+                </div>
+
+                <div className="MyPageBtns">
+                    <Link to={{
+                        pathname: "/editMyPage",
+                        state:{
+                            name:user.name,
+                            id:user.id,
+                            pw:user.pw,
+                            email:user.email,
+                            major:user.major
+                        }
+                    }}>
+                        <button className="MyPageBtn MyPageEditBtn">회원정보 수정</button>
+
+                </Link>
+
+                    <button className="MyPageBtn MyPageExamBtn">시험일정 관리</button>
+                    <button className="MyPageBtn MyPageTimeBtn">공부시간 관리</button>
+                </div>
+            </div>
+        </div>
+    )
+}