[client] / #11,13,14,15 / Implement Mypage Modal

my-app/src/components/Mypage/EditInfoModal.css

@@ -0,0 +1,40 @@
+.modal_page {
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+}
+.modal_frame {
+  /* margin: 200px 0; */
+  border: 2px solid #937666;
+  /* box-sizing: border-box; */
+  box-shadow: 5px 5px 4px 5px rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+  background: #fff;
+  padding: 50px;
+  text-align: center;
+  line-height: 50px;
+  overflow: hidden;
+  height: fit-content;
+  width: auto;
+}
+
+.empty_modal_close_btn {
+  vertical-align: middle;
+  background: 0;
+  background-color: #e9ad17;
+  border-radius: 3px;
+  color: #fff !important;
+  text-shadow: none;
+  border: 1px solid transparent;
+  width: 30%;
+}
+
+.editinfo_email {
+  float: left;
+}

my-app/src/components/Mypage/EditInfoModal.js

@@ -0,0 +1,42 @@
+/* eslint-disable */
+import React from "react";
+import './EditInfoModal.css'
+
+export default class EditInfoModal extends React.Component {
+
+    handleInputValue = (key) => (e) => {
+        this.setState({ [key]: e.target.value, incorrectInfo:false });
+    };
+
+    render() {
+        {console.log('프롭스 뱉어라',this.props)}
+        if (!this.props.show) {
+          return null
+        }
+
+
+
+        return (<div className="modal_page">
+            <div className="modal_frame">
+            <div className="modal-main">
+
+                    <div className="general_login_form">
+                            <div className="field">
+                                <div className="editinfo_email">이메일</div>
+                                <input className="input_email" type="email" onChange={this.handleInputValue("email")}></input>
+                            </div>
+                            <div className="field">
+                                <div className="editinfo_label">패스워드</div>
+                                <input className="input_password" type="password" onChange={this.handleInputValue("password")}></input>
+                            </div>
+                            </div>
+
+                    <button className="empty_modal_close_btn" onClick={() => { this.props.onClose() }}>
+                    닫기
+                </button>
+                </div>
+                </div>
+            </div>
+        )
+  }
+}

my-app/src/components/Mypage/EditInfoPasswordModal.css

@@ -0,0 +1,33 @@
+.modal_page {
+  display: flex;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+}
+.modal_frame {
+  margin: 400px 0;
+  border: 2px solid #937666;
+  box-sizing: border-box;
+  box-shadow: 5px 5px 4px 5px rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+  background: #fff;
+  padding: 50px;
+  text-align: center;
+  line-height: 50px;
+}
+
+.empty_modal_close_btn {
+  vertical-align: middle;
+  background: 0;
+  background-color: #e9ad17;
+  border-radius: 3px;
+  color: #fff !important;
+  text-shadow: none;
+  border: 1px solid transparent;
+  width: 30%;
+}

my-app/src/components/Mypage/EditInfoPasswordModal.js

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import React from "react";
+import './EditInfoPasswordModal.css'
+
+export default class EditInfoPasswordModal extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            password : ''
+        }
+    }
+
+
+
+    render() {
+        {console.log('프롭스 뱉어라',this.props)}
+        if (!this.props.show) {
+          return null
+      }
+        return (<div className="modal_page">
+            <div className="modal_frame">
+            <div className="modal-main">
+                    <div>{this.props.children}</div>
+                    <input type="password" />
+            <button className="empty_modal_close_btn" onClick={() => { this.props.onClose(), this.props.onShow() }}>
+                닫기
+            </button>
+                </div>
+                </div>
+            </div>
+        )
+  }
+}

my-app/src/components/Mypage/Nav.js

@@ -1,15 +1,31 @@
 /* eslint-disable */
 import React from "react";
 import { Link, Route, Redirect } from "react-router-dom"
+import axios from "axios";
+axios.defaults.withCredentials = true;
 
 class Nav extends React.Component {
     constructor(props) {
         super(props)
         this.state = {
 
         }
+        this.handleLogout = this.handleLogout.bind(this)
     }
-
+    handleLogout() {
+
+        // axios({
+        //     method: 'post',
+        //     url: 'http://13.209.21.127:3001/user/signout',
+        // }
+        // ).then(res => {
+        //     this.props.history.push("/")
+        // }
+
+        // )
+        // this.props.history.push("/")
+    }
+
     render() {
         return (
             <div className="mypage_nav">
@@ -19,9 +35,9 @@ class Nav extends React.Component {
                  </Link>
                 </div>
                 <div className="Mypage_logout_btn_box">
-                <button className="Mypage_logout_btn">
+                    <Link to='/' className="Mypage_logout_btn" onClick={this.handleLogout()}>
                         로그아웃
-                </button>
+                </Link>
                 </div>
 
             </div>

my-app/src/components/Mypage/UserInfo.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React from "react";
 
 class UserInfo extends React.Component {
@@ -40,7 +41,7 @@ class UserInfo extends React.Component {
                                 </div>
                                 </div>
                             <div className="mypage_profile_edit">
-                                <button id="mypage_edit_btn">편집</button>
+                                <button id="mypage_edit_btn" onClick={() => this.props.passwordcheck()}>편집</button>
                             </div>
                         </div>
                 </div>

my-app/src/routes/Mypage.js

@@ -7,6 +7,8 @@ import Nav from '../components/Mypage/Nav'
 import UserInfo from '../components/Mypage/UserInfo'
 import MyToGoList from '../components/Mypage/MyToGoList'
 import Footer from '../components/Mypage/Footer'
+import EditInfoPasswordModal from '../components/Mypage/EditInfoPasswordModal'
+import EditInfoModal from '../components/Mypage/EditInfoModal'
 
 axios.defaults.withCredentials = true;
 
@@ -16,15 +18,18 @@ class Mypage extends React.Component{
         this.state = {
             email: '',
             username: '',
-            phonenum: ''
+            phonenum: '',
+            editInfoCheck: false,
+            editInfoModalShow: false,
+            deleteinfoModalShow: false
         }
     }
 
     componentDidMount() {
         console.log("didmount중입니다")
         axios({
             method: 'get',
-            url: 'http://13.209.21.127:3001/user/info',
+            url: 'http://13.209.99.91:3001/user/info',
         }
         )
             .then((res) => {
@@ -36,13 +41,31 @@ class Mypage extends React.Component{
             console.log("나오는거야 뭐야",res)
           })
     }
-
 
+    //유저정보를 수정하기 위해서 비밀번호확인하는 모달창을 띄우게 할지 state 변경하는 함수
+    editInfoPasswordShow = e => {
+        this.setState({
+            editInfoCheck : !this.state.editInfoCheck
+        })
+    }
+    //유저정보 수정을 위해 비밀번호 확인이 통과되었을 때 모달창을 띄울 수 있도록 state를 변경하는 함수
+    editInfoPasswordShowModal = e => {
+        this.setState({
+            editInfoModalShow : !this.state.editInfoModalShow
+        })
+    }
+
     render(){
         return (
             <div className="mypage_page">
+                <EditInfoPasswordModal onClose={this.editInfoPasswordShow} show={this.state.editInfoCheck} onShow={this.editInfoPasswordShowModal}>
+                    정보를 수정하기 위해서 비밀번호를 입력해 주세요
+                </EditInfoPasswordModal>
+                <EditInfoModal onClose={this.editInfoPasswordShowModal} show={this.state.editInfoModalShow}>
+                    된거냐
+                </EditInfoModal>
                 <Nav />
-                <UserInfo />
+                <UserInfo passwordcheck={this.editInfoPasswordShow}/>
                 <MyToGoList />
                 <Footer />
             </div>

my-app/src/routes/Signin.js

@@ -114,7 +114,7 @@ class Signin extends React.Component{
 
         axios({
           method: 'post',
-          url: 'http://13.209.21.127:3001/user/signin',
+          url: 'http://13.209.99.91:3001/user/signin',
           data: {
             email,
             password
@@ -131,6 +131,7 @@ class Signin extends React.Component{
                 if (this.state.show === false && err.response.status === 401) {
                     this.setState({incorrectInfo : true})
                 }
+                console.log(err)
             })
     };