From fbfb1a540d8ab4d449f7a53efabb0e2d8f5b4f42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=B0=EC=B1=84=EA=B2=B8?= Date: Tue, 17 Nov 2020 11:08:48 +0900 Subject: [PATCH] [client] / #11,13,14,15 / Implement Mypage Modal --- .../src/components/Mypage/EditInfoModal.css | 40 ++++++++++++++++++ my-app/src/components/Mypage/EditInfoModal.js | 42 +++++++++++++++++++ .../Mypage/EditInfoPasswordModal.css | 33 +++++++++++++++ .../Mypage/EditInfoPasswordModal.js | 33 +++++++++++++++ my-app/src/components/Mypage/Nav.js | 22 ++++++++-- my-app/src/components/Mypage/UserInfo.js | 3 +- my-app/src/routes/Mypage.js | 31 ++++++++++++-- my-app/src/routes/Signin.js | 3 +- 8 files changed, 198 insertions(+), 9 deletions(-) create mode 100644 my-app/src/components/Mypage/EditInfoModal.css create mode 100644 my-app/src/components/Mypage/EditInfoModal.js create mode 100644 my-app/src/components/Mypage/EditInfoPasswordModal.css create mode 100644 my-app/src/components/Mypage/EditInfoPasswordModal.js diff --git a/my-app/src/components/Mypage/EditInfoModal.css b/my-app/src/components/Mypage/EditInfoModal.css new file mode 100644 index 0000000..7bb0aca --- /dev/null +++ b/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; +} diff --git a/my-app/src/components/Mypage/EditInfoModal.js b/my-app/src/components/Mypage/EditInfoModal.js new file mode 100644 index 0000000..ec3229c --- /dev/null +++ b/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 (
+
+
+ +
+
+
이메일
+ +
+
+
패스워드
+ +
+
+ + +
+
+
+ ) + } +} diff --git a/my-app/src/components/Mypage/EditInfoPasswordModal.css b/my-app/src/components/Mypage/EditInfoPasswordModal.css new file mode 100644 index 0000000..5d50cbb --- /dev/null +++ b/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%; +} diff --git a/my-app/src/components/Mypage/EditInfoPasswordModal.js b/my-app/src/components/Mypage/EditInfoPasswordModal.js new file mode 100644 index 0000000..0cbae6b --- /dev/null +++ b/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 (
+
+
+
{this.props.children}
+ + +
+
+
+ ) + } +} diff --git a/my-app/src/components/Mypage/Nav.js b/my-app/src/components/Mypage/Nav.js index fe2d037..b07e052 100644 --- a/my-app/src/components/Mypage/Nav.js +++ b/my-app/src/components/Mypage/Nav.js @@ -1,6 +1,8 @@ /* 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) { @@ -8,8 +10,22 @@ class Nav extends React.Component { 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 (
@@ -19,9 +35,9 @@ class Nav extends React.Component {
- +
diff --git a/my-app/src/components/Mypage/UserInfo.js b/my-app/src/components/Mypage/UserInfo.js index e4e467a..0b218ee 100644 --- a/my-app/src/components/Mypage/UserInfo.js +++ b/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 {
- +
diff --git a/my-app/src/routes/Mypage.js b/my-app/src/routes/Mypage.js index 1ab7e70..fcaf497 100644 --- a/my-app/src/routes/Mypage.js +++ b/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,7 +18,10 @@ class Mypage extends React.Component{ this.state = { email: '', username: '', - phonenum: '' + phonenum: '', + editInfoCheck: false, + editInfoModalShow: false, + deleteinfoModalShow: false } } @@ -24,7 +29,7 @@ class Mypage extends React.Component{ 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 (
+ + 정보를 수정하기 위해서 비밀번호를 입력해 주세요 + + + 된거냐 +
diff --git a/my-app/src/routes/Signin.js b/my-app/src/routes/Signin.js index 4e3bdd3..54e6520 100644 --- a/my-app/src/routes/Signin.js +++ b/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) }) };