Merge branch 'register' into 'master'

Register



See merge request !4

-import { Button, Input } from "semantic-ui-react"
+import {Button, Grid, Image, Segment} from "semantic-ui-react"
 import "../style/MainPage.scss";
 function MainPage() {
     return (
@@ -8,17 +8,60 @@ function MainPage() {
                     <h1>Tunnel</h1>
                 </div>
                 <div className="None-title">
-                    <Button class="ui button">
+                    <Button className="ui right floated button">
                         Logout
                     </Button>
                 </div>
             </div>
             <div className="Main-body">
-                <div className="contents">
-                    <h1>a</h1>
+                <div className="contents-container">
+                    <div className="write-button">
+                        <Button className="ui animated button"
+                                tabIndex="0">
+                            <div className="visible content">새 고민 작성하기</div>
+                            <div className="hidden content">
+                                <i className="pencil alternate icon"></i>
+                            </div>
+                        </Button>
+                    </div>
+                    <div className="contents">
+                        <div className="ui segment">
+                            <p>a</p>
+                        </div>
+                        <div className="ui segment">
+                            <p>a</p>
+                        </div>
+                        <div className="ui segment">
+                            <p>a</p>
+                        </div>
+                    </div>
                 </div>
-                <div className="user">
-                    <h1>a</h1>
+                <div className="user-container">
+                    <div className="userInfo">
+                        <h1>User ID</h1>
+                    </div>
+                    <div className="checkIssue-button">
+                        <Button size="Big" className="ui animated button"
+                                tabIndex="0">
+                            <div className="visible content">도착한 글</div>
+                            <div className="hidden content">
+                                <i className="pencil alternate icon"></i>
+                            </div>
+                        </Button>
+                    </div>
+                    <div className="user">
+                        <div className="Answer">
+                            <div className="ui segment">
+                                <p>a</p>
+                            </div>
+                            <div className="ui segment">
+                                <p>a</p>
+                            </div>
+                            <div className="ui segment">
+                                <p>a</p>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

 #Main{
-  margin: 30px;
+  margin-top: 30px;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   .Main-header{
     display: flex;
     flex-direction: row;
-    height: 30%;
     .title{
       display: flex;
       justify-content: center;
       width: 90%;
-      height: 50px;
+      height: 60px;
       .h1{
-        font-size: 40px;
-        color: white;
+        font-size: 60px;
         font-weight: bold;
-        text-align: center;
-        margin-bottom: 60px;
       }
     }
     .None-title{
-      display: flex;
-      justify-content: right;
       width: 10%;
+      .ui button{
+        height: 40px;
+      }
     }
   }
   .Main-body{
     display: flex;
     flex-direction: row;
-    width: 100%;
     height: 100vh;
-    .contents{
+    .contents-container{
       display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 70%;
+      justify-content: flex-start;
+      flex-direction: column;
+      width: 75%;
+      height: 100%;
+      border: 2px solid black;
+      .write-button{
+        height: 70px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .contents{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .Grid{
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+      }
     }
-    .user{
+    .user-container{
       display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 30%;
+      flex-direction: column;
+      width: 25%;
+      border: 2px solid black;
+      .userInfo{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .checkIssue-button{
+        height: 70px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
     }
   }
 }