Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 2 commits into from
Nov 16, 2020
+288 −11
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ad91eed
Merge pull request #51 from GriGni/feature32
GriGni Nov 15, 2020
f467132
[client] / #11,13,14,15 / Implement Mypage Layout
Nov 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion my-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy":"https://api.unsplash.com",
"proxy": "https://api.unsplash.com",
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.1",
Expand Down
212 changes: 212 additions & 0 deletions my-app/src/routes/Mypage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
.mypage_page {
display: block;
/* border: 2px solid black; */
width: 100%;
height: auto;
background-color: white;
}
.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;
}
.Mypage_logo {
margin: 0 auto;
vertical-align: bottom;
max-width: 110px;
max-height: 60px;
}
/* 회원정보칸 */
.mypage_userinfo {
/* background-color: #fff; */
position: static;
top: 0;
align-content: center;
padding-left: 55px;
padding-right: 55px;
padding-top: 20px;
padding-bottom: 20px;
}
.mypage_userinfo_frame {
height: 300px;
border: 2px solid #937666;
border-radius: 10px;
padding-left: 20px;
padding: 20px;
height: auto;
}
.mypage_userinfo_content_box {
overflow: hidden;
/* border: 2px solid black; */
height: auto;
padding: 20px;
}
.mypage_profile_photo {
/* box-sizing: border-box; */
overflow: hidden;
float: left;
/* border: 2px solid black; */
height: 180px;
width: 190px;
padding: 10px;
}
#mypage_profile_photo {
overflow: hidden;
width: 160px;
height: 160px;
}
.mypage_profile {
overflow: hidden;
box-sizing: border-box;
float: left;
/* border: 2px solid black; */
height: 180px;
width: 70%;
padding: 20px;
}
.mypage_profile_name {
position: static;
display: block;
/* vertical-align: middle; */
padding: 0px;
height: auto;
margin: 0;
margin-bottom: 10px;
}
.mypage_profile_email {
display: block;
position: static;
padding: 0px;
height: auto;
margin: 0;
margin-bottom: 10px;
}
.mypage_profile_phone {
display: block;
position: static;
padding: 0px;
height: auto;
margin: 0;
margin-bottom: 10px;
}
#mypage_profile_name {
margin-right: 72px;
}
#mypage_profile_email {
margin-right: 55px;
}
#mypage_profile_phone {
margin-right: 20px;
}
dl {
display: flex;
}
dt {
display: block;
}
dd {
display: block;
}
.mypage_profile_edit {
position: static;
width: 100%;
}
#mypage_edit_btn {
float: right;
cursor: pointer;
text-align: center;
display: block;
height: auto;
width: 20%;
font-size: 13px !important;
font-weight: 700;
padding: 9px 12px;
box-sizing: border-box;
border-radius: 5px;
background: 0;
background-color: #e9ad17;
color: #fff !important;
/* text-shadow: none; */
border: 1px solid transparent;
}
/* 내 ToGoList칸 */
.mypage_mylist {
position: static;
/* border: 2px solid black; */
padding-left: 55px;
padding-right: 55px;
padding-top: 20px;
padding-bottom: 20px;
height: auto;
margin: 0 auto;
}
.mypage_mycontent_box {
height: 600px;
border: 2px solid #937666;
border-radius: 10px;
padding: 20px;
}
.mypage_mycontent_frame {
height: auto;
border: 2px solid #937666;
border-radius: 10px;
padding: 10px;
}
.mypage_mycontent_map {
width: 100%;
height: 100px;
border: 2px solid #937666;
border-radius: 10px;
margin-bottom: 10px;
}
.mypage_mycontent_content {
width: 100%;
height: auto;
border: 2px solid #937666;
border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
.mypage_mycontent_tag {
width: 100%;
height: auto;
border: 2px solid #937666;
border-radius: 10px;
padding: 10px;
}
/* 계정삭제 */
.mypage_deleteinfo {
position: fixed static;
bottom: 0;
height: 50px;
}
#delete_myinfo {
cursor: pointer;
display: block;
height: auto;
margin-left: auto;
margin-right: auto;
width: 20%;
font-size: 13px !important;
font-weight: 700;
padding: 9px 12px;
box-sizing: border-box;
border-radius: 5px;
background: 0;
background-color: #e9ad17;
color: #fff !important;
/* text-shadow: none; */
border: 1px solid transparent;
}
73 changes: 69 additions & 4 deletions my-app/src/routes/Mypage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,72 @@
/* eslint-disable */
import React from "react";

function Mypage(){
return (<span> mypage!!</span>);
import { Link, Route, Redirect } from "react-router-dom"
import './Mypage.css'
class Mypage extends React.Component{
constructor(props) {
super(props)
this.state = {
}
}
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>
</div>
)
}
}

export default Mypage;
6 changes: 3 additions & 3 deletions my-app/src/routes/Signin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
vertical-align: top;
width: auto;
height: auto;
max-width: 50px;
max-height: 50px;
max-width: 110px;
max-height: 70px;
}
.signin_form {
box-sizing: border-box;
Expand Down Expand Up @@ -214,7 +214,7 @@ p {
margin-inline-end: 0px;
}

.signup_link {
.mainpage_link {
color: #937666;
text-decoration: none;
}
Expand Down
6 changes: 3 additions & 3 deletions my-app/src/routes/Signin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,10 +109,10 @@ class Signin extends React.Component{
<SigninEmptyModal onClose={this.showModal} show={ this.state.show }>이메일과 비밀번호를 입력해 주세요</ SigninEmptyModal>
<div className="signin_frame">
<div className="login_logo">
<Link to='/' className="signup_link">
<img className="signin_page_logo" src="http://penzim.synology.me/image/To-Go_List-logo-black.png" />
<Link to='/' className="mainpage_link">
<img className="signin_page_logo" src="http://penzim.synology.me/image/firstProject/icon/To-Go_List-logo-black.png" />
</Link>
<Link to='/' className="logo-name" >To-Go_List</Link>
{/* <Link to='/' className="logo-name" >To-Go_List</Link> */}
</div>
<div className="signin_form">
<h1 className="signin_h1">로그인</h1>
Expand Down