diff --git a/my-app/src/components/Mypage/Footer.js b/my-app/src/components/Mypage/Footer.js new file mode 100644 index 0000000..d159bef --- /dev/null +++ b/my-app/src/components/Mypage/Footer.js @@ -0,0 +1,20 @@ +import React from "react"; + +class Footer extends React.Component { + constructor(props) { + super(props) + this.state = { + + } + } + + render() { + return ( + <footer className="mypage_deleteinfo"> + <button id="delete_myinfo">계정삭제</button> + </footer> + ) + } +} + +export default Footer \ No newline at end of file diff --git a/my-app/src/components/Mypage/MyToGoList.js b/my-app/src/components/Mypage/MyToGoList.js new file mode 100644 index 0000000..cbbf7d2 --- /dev/null +++ b/my-app/src/components/Mypage/MyToGoList.js @@ -0,0 +1,27 @@ +import React from "react"; + + +class MyToGoList extends React.Component { + constructor(props) { + super(props) + this.state = { + + } + } + + render() { + return ( + <section className="mypage_mylist"> + <div className="mypage_mycontent_box"> + <div className="mypage_mycontent_frame"> + <div className="mypage_mycontent_map"></div> + <div className="mypage_mycontent_content">내용이 들어갈 겁니다!</div> + <div className="mypage_mycontent_tag">태그태그</div> + </div> + </div> + </section> + ) + } +} + +export default MyToGoList \ No newline at end of file diff --git a/my-app/src/components/Mypage/Nav.js b/my-app/src/components/Mypage/Nav.js new file mode 100644 index 0000000..fe2d037 --- /dev/null +++ b/my-app/src/components/Mypage/Nav.js @@ -0,0 +1,32 @@ +/* eslint-disable */ +import React from "react"; +import { Link, Route, Redirect } from "react-router-dom" + +class Nav extends React.Component { + constructor(props) { + super(props) + this.state = { + + } + } + + render() { + return ( + <div className="mypage_nav"> + <div className="mypage_logo_box"> + <Link to='/' className="mainpage_link"> + <img className="Mypage_logo" src="http://penzim.synology.me/image/firstProject/icon/To-Go_List-logo-black.png" /> + </Link> + </div> + <div className="Mypage_logout_btn_box"> + <button className="Mypage_logout_btn"> + 로그아웃 + </button> + </div> + + </div> + ) + } +} + +export default Nav \ No newline at end of file diff --git a/my-app/src/components/Mypage/UserInfo.js b/my-app/src/components/Mypage/UserInfo.js new file mode 100644 index 0000000..e4e467a --- /dev/null +++ b/my-app/src/components/Mypage/UserInfo.js @@ -0,0 +1,52 @@ +import React from "react"; + +class UserInfo extends React.Component { + constructor(props) { + super(props) + this.state = { + + } + } + + render() { + return ( + <div className="mypage_userinfo"> + <div className="mypage_userinfo_frame"> + <h2>회원정보</h2> + <div className="mypage_userinfo_content_box"> + <div className="mypage_profile_photo"> + <img id="mypage_profile_photo" src="http://penzim.synology.me/image/firstProject/icon/common_photo.png" /> + </div> + <div> + <div className="mypage_profile"> + <div className="mypage_profile_name"> + <dl> + <dt><span id="mypage_profile_name">이름</span></dt> + <dd><span>이름이 올겁니다</span></dd> + </dl> + </div> + <div className="mypage_profile_email"> + <dl> + <dt><span id="mypage_profile_email">이메일</span></dt> + <dd><span>이메일이 올겁니다</span></dd> + </dl> + </div> + <div className="mypage_profile_phone"> + <dl> + <dt><span id="mypage_profile_phone">휴대폰 번호</span></dt> + <dd><span>휴대폰 번호가 올겁니다</span></dd> + </dl> + </div> + </div> + </div> + <div className="mypage_profile_edit"> + <button id="mypage_edit_btn">편집</button> + </div> + </div> + </div> + </div> + ) + } +} + +export default UserInfo \ No newline at end of file diff --git a/my-app/src/routes/Mypage.css b/my-app/src/routes/Mypage.css index 24afcb7..ef8b692 100644 --- a/my-app/src/routes/Mypage.css +++ b/my-app/src/routes/Mypage.css @@ -7,27 +7,35 @@ } .mypage_nav { position: static; - box-sizing: border-box; height: 50px; top: 0; - display: flex; - align-items: center; width: 100vw; padding-left: 42px; padding-right: 42px; background-color: #e9ad17; } .mypage_logo_box { - box-sizing: border-box; - display: block; - margin: auto 0; + width: 200px; + float: left; + transform: translateY(10%); } .Mypage_logo { - margin: 0 auto; - vertical-align: bottom; max-width: 110px; max-height: 60px; } +.Mypage_logout_btn_box { + float: right; + display: inline-block; + height: 60%; + width: 10%; + border: 2px solid #937666; + border-radius: 2px; + transform: translateY(30%); + text-align: center; +} +.Mypage_logout_btn { + text-align: center; +} /* 회원정보칸 */ .mypage_userinfo { /* background-color: #fff; */ diff --git a/my-app/src/routes/Mypage.js b/my-app/src/routes/Mypage.js index d39e249..1ab7e70 100644 --- a/my-app/src/routes/Mypage.js +++ b/my-app/src/routes/Mypage.js @@ -1,70 +1,50 @@ /* eslint-disable */ import React from "react"; import { Link, Route, Redirect } from "react-router-dom" +import axios from "axios"; import './Mypage.css' +import Nav from '../components/Mypage/Nav' +import UserInfo from '../components/Mypage/UserInfo' +import MyToGoList from '../components/Mypage/MyToGoList' +import Footer from '../components/Mypage/Footer' + +axios.defaults.withCredentials = true; + class Mypage extends React.Component{ constructor(props) { super(props) this.state = { + email: '', + username: '', + phonenum: '' } } + + componentDidMount() { + console.log("didmount중입니다") + axios({ + method: 'get', + url: 'http://13.209.21.127:3001/user/info', + } + ) + .then((res) => { + this.setState({ + email: res.email, + username: res.username, + phonenum: res.phonenum + }) + console.log("나오는거야 뭐야",res) + }) + } + + render(){ return ( <div className="mypage_page"> - <div className="mypage_nav"> - <div className="mypage_logo_box"> - <Link to='/' className="mainpage_link"> - <img className="Mypage_logo" src="http://penzim.synology.me/image/firstProject/icon/To-Go_List-logo-black.png" /> - </Link> - </div> - </div> - <div className="mypage_userinfo"> - <div className="mypage_userinfo_frame"> - <h2>회원정보</h2> - <div className="mypage_userinfo_content_box"> - <div className="mypage_profile_photo"> - <img id="mypage_profile_photo" src="http://penzim.synology.me/image/firstProject/icon/common_photo.png" /> - </div> - <div> - <div className="mypage_profile"> - <div className="mypage_profile_name"> - <dl> - <dt><span id="mypage_profile_name">이름</span></dt> - <dd><span>이름이 올겁니다</span></dd> - </dl> - </div> - <div className="mypage_profile_email"> - <dl> - <dt><span id="mypage_profile_email">이메일</span></dt> - <dd><span>이메일이 올겁니다</span></dd> - </dl> - </div> - <div className="mypage_profile_phone"> - <dl> - <dt><span id="mypage_profile_phone">휴대폰 번호</span></dt> - <dd><span>휴대폰 번호가 올겁니다</span></dd> - </dl> - </div> - </div> - </div> - <div className="mypage_profile_edit"> - <button id="mypage_edit_btn">편집</button> - </div> - </div> - </div> - </div> - <section className="mypage_mylist"> - <div className="mypage_mycontent_box"> - <div className="mypage_mycontent_frame"> - <div className="mypage_mycontent_map"></div> - <div className="mypage_mycontent_content">내용이 들어갈 겁니다!</div> - <div className="mypage_mycontent_tag">태그태그</div> - </div> - </div> - </section> - <footer className="mypage_deleteinfo"> - <button id="delete_myinfo">계정삭제</button> - </footer> + <Nav /> + <UserInfo /> + <MyToGoList /> + <Footer /> </div> ) } diff --git a/my-app/src/routes/Signin.js b/my-app/src/routes/Signin.js index c60dd41..4e3bdd3 100644 --- a/my-app/src/routes/Signin.js +++ b/my-app/src/routes/Signin.js @@ -28,13 +28,15 @@ class Signin extends React.Component{ name: '', provider: '', data: '', - googletoken: '' + googletoken: '', + userinfo: '' } this.handleInputValue = this.handleInputValue.bind(this) this.keepLoggedInCheckedChange = this.keepLoggedInCheckedChange.bind(this) } + responseKakao = (res) => { console.log(res) this.setState({ @@ -56,7 +58,7 @@ class Signin extends React.Component{ responseGoogle = (res) => { const { email, name, id, googletoken } = this.state - // console.log(res) + console.log(res) this.setState({ id: res.googleId, username: res.profileObj.name, @@ -118,18 +120,20 @@ class Signin extends React.Component{ password } }) - .then((data) => { + .then((res) => { if (this.state.keepLoggedInChecked) { localStorage.setItem('isLogin', true) } - this.props.history.push("/start"); + this.props.history.push("/mypage"); }) .catch((err) => { + console.dir(err) if (this.state.show === false && err.response.status === 401) { this.setState({incorrectInfo : true}) } }) }; + @@ -138,6 +142,7 @@ class Signin extends React.Component{ return ( <div className="signin_page"> + {localStorage.isLogin ? <Redirect to="/start" /> : ''} <SigninEmptyModal onClose={this.showModal} show={ this.state.show }>이메일과 비밀번호를 입력해 주세요</ SigninEmptyModal> <div className="signin_frame">