Merge pull request #8 from SoluxProject/feature/#7

회원정보 수정 구현
SoluxProject · Aug 14, 2021 · 2c0e869 · 2c0e869
2 parents a2af177 + 4018bc6
commit 2c0e869
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 15 deletions.
diff --git a/src/component/EditMyPage.js b/src/component/EditMyPage.js
@@ -2,6 +2,7 @@ import "../EditMyPage.css"
 import React , {useState, useEffect,useCallback} from 'react';
 import axios from "axios";
 import { RiEdit2Fill } from "react-icons/ri";
+import { FaCrown } from "react-icons/fa";
 
 export default function EditMyPage({location}){
 
@@ -10,10 +11,29 @@ export default function EditMyPage({location}){
     const pw=location.state.pw;
     const email=location.state.email;
     const major=location.state.major;
+    const tel=location.state.tel;
 
+    const [boolChangePw,setBoolChangePw]=useState(false);
+    const [newPw, setNewPw]=useState(pw);
     const [newEmail, setNewEmail]=useState(email);
     const [newMajor, setNewMajor]=useState(major);
+    const [newTel, setNewTel]=useState(tel);
 
+    const newUser ={
+        id:id,
+        name: name,
+        email:newEmail,
+        major:newMajor,
+        pw: boolChangePw ? newPw : pw ,
+        tel:newTel
+    }
+
+    const changePw=useCallback(
+        (e) => {
+            setNewPw(e.target.value);
+        },
+        []
+    );
     const changeEmail=useCallback(
         (e) => {
             setNewEmail(e.target.value);
@@ -26,24 +46,42 @@ export default function EditMyPage({location}){
         },
         []
     );
+    const changeTel=useCallback(
+        (e) => {
+            setNewTel(e.target.value);
+        },
+        []
+    );
+
 
-    const editEmail=(id, {data})=>{
-        console.log(data);
+    const editPw=(id ,name, newPw)=>{
+        setBoolChangePw(true);
+        axios.post('/mypage/changePw',{
+            id:id,
+            name: name, 
+            newPw: newPw
+        })
+    }
+
+    const editEmail=(id, newUser)=>{
         axios.post('/mypage/changeEmail',{
             id:id,
-            newEmail:data,
+            newEmail:newUser,
         })
-
-
     }
-    const editMajor=(id, {data})=>{
+    const editMajor=(id,newUser )=>{
 
         axios.post('/mypage/changeMajor',{
             id:id,
-            newMajor:data,
+            newMajor:newUser,
+        })
+    }
+    const editTel=(id, newUser)=>{
+        axios.post('/mypage/changeTel',{
+            id:id,
+            newTel:newUser,
         })
     }
-
     return(
         <div className="EditMyPage">
             <div className="EditMyPageTitle">
@@ -56,21 +94,26 @@ export default function EditMyPage({location}){
                         <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>
+                            <input autoFocus placeholder="변경할 비밀번호를 입력하세요" onChange={changePw}></input>
+                            <button className="EditMyPageEditBtn" onClick={()=>editPw(id, name, newPw)}><RiEdit2Fill /></button>
+                        </div>
+                        <div className="EditMyPageInputBtn">
+                            <input defaultValue={newEmail} onChange={changeEmail}></input>
+                            <button className="EditMyPageEditBtn" onClick={()=>editEmail(id, newUser)}><RiEdit2Fill /></button>
                         </div>
                         <div className="EditMyPageInputBtn">
-                            <input value={newEmail} onChange={changeEmail}></input>
-                            <button className="EditMyPageEditBtn" onClick={editEmail(id, newEmail)}><RiEdit2Fill /></button>
+                            <input defaultValue={newMajor} onChange={changeMajor}></input>
+                            <button className="EditMyPageEditBtn" onClick={()=>editMajor(id, newUser)}><RiEdit2Fill /></button>
                         </div>
                         <div className="EditMyPageInputBtn">
-                            <input value={newMajor} onChange={changeMajor}></input>
-                            <button className="EditMyPageEditBtn" onClick={editMajor(id, newMajor)}><RiEdit2Fill /></button>
+                            <input defaultValue={newTel} onChange={changeTel}></input>
+                            <button className="EditMyPageEditBtn" onClick={()=>editTel(id, newUser)}><RiEdit2Fill /></button>
                         </div>
 
                     </div>

diff --git a/src/component/Home.js b/src/component/Home.js
@@ -126,9 +126,12 @@ function Home() {
 
                     <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
@@ -33,13 +33,15 @@ export default function MyPage(){
                         <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>{user.tel}</div>
                     </div> 
                 </div>
 
@@ -51,7 +53,8 @@ export default function MyPage(){
                             id:user.id,
                             pw:user.pw,
                             email:user.email,
-                            major:user.major
+                            major:user.major,
+                            tel: user.tel
                         }
                     }}>
                         <button className="MyPageBtn MyPageEditBtn">회원정보 수정</button>