[#46] markup - 개인정보 설정 페이지 디자인 수정

siliconValleyTeamA · Jan 13, 2021 · 33d63a5 · 33d63a5
1 parent a82212a
commit 33d63a5
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 65 deletions.
diff --git a/src/components/MyDetailPage/Header/Header.jsx b/src/components/MyDetailPage/Header/Header.jsx
@@ -8,7 +8,7 @@ import styles from './Header.module.scss';
 const cx = classNames.bind(styles);
 
 function Header(props) {
-  return <h1 className={cx('header')}> {props.header} </h1>;
+  return <div className={cx('header')}>{props.header} </div>;
 }
 
 export default Header;
diff --git a/src/components/MyDetailPage/Header/Header.module.scss b/src/components/MyDetailPage/Header/Header.module.scss
@@ -1,7 +1,7 @@
 .header {
   margin-bottom: 30px;
   font-size: 30px;
-  font-weight: 700;
+  font-weight: 800;
   text-align: center;
   margin-top: 1rem;
 }
diff --git a/src/components/Mypage/Menu/Menu.module.scss b/src/components/Mypage/Menu/Menu.module.scss
@@ -31,7 +31,7 @@ ol {
 
     .RiShoppingBag3Fill {
       font-size: 1.5rem;
-      color: $wadiz;
+      color: $green;
     }
 
     .BiWorld {
@@ -41,7 +41,7 @@ ol {
 
     .FaShoppingCart {
       font-size: 1.5rem;
-      color: $green;
+      color: $wadiz;
     }
 
     .RiArrowRightSLine {

diff --git a/src/pages/MyCartPage/MyCartPage.module.scss b/src/pages/MyCartPage/MyCartPage.module.scss
@@ -7,7 +7,7 @@
   align-items: center;
 
   .FaShoppingCart {
-    color: $green;
+    color: $wadiz;
     font-size: 3.5rem;
     margin-top: 2rem;
   }

diff --git a/src/pages/MyHistoryPage/MyHistoryPage.module.scss b/src/pages/MyHistoryPage/MyHistoryPage.module.scss
@@ -7,7 +7,7 @@
   align-items: center;
 
   .RiShoppingBag3Fill {
-    color: $wadiz;
+    color: $green;
     font-size: 3.5rem;
     margin-top: 2rem;
   }

diff --git a/src/pages/SetProfilePage/SetProfilePage.js b/src/pages/SetProfilePage/SetProfilePage.js
@@ -6,30 +6,44 @@ import { BiWorld } from 'react-icons/bi';
 /* Internal dependencies */
 import styles from './SetProfilePage.module.scss';
 import SetCountry from 'components/Mypage/SetCountry/SetCountry';
+import BackButton from 'components/Global/BackButton';
+import Header from 'components/MyDetailPage/Header';
 
 const cx = classNames.bind(styles);
 
 function SetProfilePage() {
   return (
     <div className={cx('setcountry')}>
-      <h1 className={cx('title')}>국가 설정 및 포인트 관리</h1><br></br>
-        <div className={cx('profilediv')}>
-          <img className={cx('picture')} src="https://img-cf.kurly.com/shop/data/goods/1589438976172z0.jpg" alt="snsProfile"/>
-          <div className={cx('userinfo')}>
-            <p>유창헌님</p><br/>
-            <p>(깃허브로 로그인 중)</p>
-          </div>
-        </div> 
-        <div className={cx('subtitle')}>국가 설정</div>
-        <div className={cx('country')}>
-          <BiWorld className={cx('BiWorld')}/>&emsp;            
-          <label>국가 :</label>&ensp;          
-            <SetCountry className={cx('countrylist')}></SetCountry>
+      <BackButton />
+      <BiWorld className={cx('BiWorld')} />
+      <Header header="개인정보 설정" />
+      <div className={cx('profile')}>
+        <img
+          className={cx('picture')}
+          src="https://img-cf.kurly.com/shop/data/goods/1589438976172z0.jpg"
+          alt="snsProfile"
+        />
+        <div className={cx('userinfo')}>
+          <div className={cx('user-name')}>Noh Gi Jin님</div>
+          <div className={cx('user-login')}>깃허브로 로그인중</div>
         </div>
-        <div className={cx('subtitle')}>포인트 관리</div>
-        <div className={cx('point')}>       
-          잔여 포인트: 10000P
+      </div>
+
+      <div className={cx('country')}>
+        <div className={cx('row')}>
+          <span className={cx('edit')}>국가 수정</span>
+          <span className={cx('delete')}>삭제</span>
+        </div>
+        <div className={cx('content')}>한국</div>
+      </div>
+
+      <div className={cx('point')}>
+        <div className={cx('row')}>
+          <span className={cx('edit')}>포인트 수정</span>
+          <span className={cx('delete')}>초기화</span>
         </div>
+        <div className={cx('content')}>10,000 포인트</div>
+      </div>
     </div>
   );
 }

diff --git a/src/pages/SetProfilePage/SetProfilePage.module.scss b/src/pages/SetProfilePage/SetProfilePage.module.scss
@@ -1,53 +1,77 @@
 @import 'styles/_palette.scss';
 
 .setcountry {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 90vh;
+
+  .BiWorld {
+    color: $purple;
+    font-size: 3.5rem;
+    margin-top: 2rem;
+  }
+
+  .title {
+    font-size: 2rem;
+    margin: 50px;
+    padding: 10px;
+  }
+
+  .profile {
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 90vh;
-    .title{
-      font-size: 2rem;
-      margin:50px;
-      padding:10px;
+
+    .picture {
+      min-height: 300px;
+      max-width: 400px;
+      border-radius: 20px;
     }
-    .profilediv{
-      display: flex;
-      flex-direction: row;
-      .userinfo{
-        margin-top: 50px;
-        font-size: x-large;
-        font-weight: bold;
+
+    .userinfo {
+      margin-top: 20px;
+      font-weight: bold;
+
+      .user-name {
+        text-align: center;
+        font-size: 1.2rem;
+        font-weight: 700;
       }
-      .picture{
-        margin-right:50px;
-        margin-top: auto;
-        width: 10rem;
-        height: 10rem;
-        border-radius: 100%;
-      }    
-    }   
-    .country{
-      display: flex;
-      margin:auto 20px;
-      flex-direction: row;      
-      font-size: x-large;
-      font-weight: bold;    
-      .BiWorld{       
-        color: $purple;
+
+      .user-login {
+        text-align: center;
+        font-size: 1.2rem;
+        margin-top: 0.5rem;
+        margin-bottom: 1.5rem;
       }
-    }    
-    .point{
-      display: flex;
-      margin:auto 20px;
-      flex-direction: column;      
-      font-size: x-large;
-      font-weight: bold;
     }
+  }
+
+  .country,
+  .point {
+    box-sizing: border-box;
+    background: $light-gray;
+    border-radius: 10px;
+    padding: 15px;
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    font-weight: 700;
+    width: 100%;
+    margin-bottom: 2rem;
+
+    .edit,
+    .delete {
+      margin-right: 0.8rem;
+      color: $gray;
+    }
+
+    .content {
+      margin-top: 1.8rem;
+    }
+    .delete {
+      color: red;
+    }
+  }
 }
-.subtitle{
-  margin: auto 10px;
-  padding: 20px;
-  font-size: xx-large;
-  font-weight: bold; 
-}