From f467132ed75dfe24af5e4c92f4cec4d8c2f4360b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=B0=EC=B1=84=EA=B2=B8?=
 <bae-chaegyeom@baechaegyeoms-MacBook-Pro.local>
Date: Mon, 16 Nov 2020 01:03:09 +0900
Subject: [PATCH] [client] / #11,13,14,15 / Implement Mypage Layout

---
 my-app/package.json          |   2 +-
 my-app/src/routes/Mypage.css | 212 +++++++++++++++++++++++++++++++++++
 my-app/src/routes/Mypage.js  |  73 +++++++++++-
 my-app/src/routes/Signin.css |   6 +-
 my-app/src/routes/Signin.js  |   6 +-
 5 files changed, 288 insertions(+), 11 deletions(-)
 create mode 100644 my-app/src/routes/Mypage.css

diff --git a/my-app/package.json b/my-app/package.json
index bebd2c6..b2e5146 100644
--- a/my-app/package.json
+++ b/my-app/package.json
@@ -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",
diff --git a/my-app/src/routes/Mypage.css b/my-app/src/routes/Mypage.css
new file mode 100644
index 0000000..24afcb7
--- /dev/null
+++ b/my-app/src/routes/Mypage.css
@@ -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;
+}
diff --git a/my-app/src/routes/Mypage.js b/my-app/src/routes/Mypage.js
index 55e0a3a..d39e249 100644
--- a/my-app/src/routes/Mypage.js
+++ b/my-app/src/routes/Mypage.js
@@ -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;
\ No newline at end of file
diff --git a/my-app/src/routes/Signin.css b/my-app/src/routes/Signin.css
index 56feb55..474849c 100644
--- a/my-app/src/routes/Signin.css
+++ b/my-app/src/routes/Signin.css
@@ -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;
@@ -214,7 +214,7 @@ p {
   margin-inline-end: 0px;
 }
 
-.signup_link {
+.mainpage_link {
   color: #937666;
   text-decoration: none;
 }
diff --git a/my-app/src/routes/Signin.js b/my-app/src/routes/Signin.js
index 3135df7..2005873 100644
--- a/my-app/src/routes/Signin.js
+++ b/my-app/src/routes/Signin.js
@@ -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>