정의왕

MainPage ver1.0

1 -import { Button, Input } from "semantic-ui-react" 1 +import {Button, Grid, Image, Segment} from "semantic-ui-react"
2 import "../style/MainPage.scss"; 2 import "../style/MainPage.scss";
3 function MainPage() { 3 function MainPage() {
4 return ( 4 return (
...@@ -8,17 +8,60 @@ function MainPage() { ...@@ -8,17 +8,60 @@ function MainPage() {
8 <h1>Tunnel</h1> 8 <h1>Tunnel</h1>
9 </div> 9 </div>
10 <div className="None-title"> 10 <div className="None-title">
11 - <Button class="ui button"> 11 + <Button className="ui right floated button">
12 Logout 12 Logout
13 </Button> 13 </Button>
14 </div> 14 </div>
15 </div> 15 </div>
16 <div className="Main-body"> 16 <div className="Main-body">
17 - <div className="contents"> 17 + <div className="contents-container">
18 - <h1>a</h1> 18 + <div className="write-button">
19 + <Button className="ui animated button"
20 + tabIndex="0">
21 + <div className="visible content"> 고민 작성하기</div>
22 + <div className="hidden content">
23 + <i className="pencil alternate icon"></i>
24 + </div>
25 + </Button>
26 + </div>
27 + <div className="contents">
28 + <div className="ui segment">
29 + <p>a</p>
30 + </div>
31 + <div className="ui segment">
32 + <p>a</p>
33 + </div>
34 + <div className="ui segment">
35 + <p>a</p>
36 + </div>
37 + </div>
19 </div> 38 </div>
20 - <div className="user"> 39 + <div className="user-container">
21 - <h1>a</h1> 40 + <div className="userInfo">
41 + <h1>User ID</h1>
42 + </div>
43 + <div className="checkIssue-button">
44 + <Button size="Big" className="ui animated button"
45 + tabIndex="0">
46 + <div className="visible content">도착한 </div>
47 + <div className="hidden content">
48 + <i className="pencil alternate icon"></i>
49 + </div>
50 + </Button>
51 + </div>
52 + <div className="user">
53 + <div className="Answer">
54 + <div className="ui segment">
55 + <p>a</p>
56 + </div>
57 + <div className="ui segment">
58 + <p>a</p>
59 + </div>
60 + <div className="ui segment">
61 + <p>a</p>
62 + </div>
63 + </div>
64 + </div>
22 </div> 65 </div>
23 </div> 66 </div>
24 </div> 67 </div>
......
1 #Main{ 1 #Main{
2 - margin: 30px; 2 + margin-top: 30px;
3 display: flex; 3 display: flex;
4 flex-direction: column; 4 flex-direction: column;
5 - justify-content: center;
6 - align-items: center;
7 .Main-header{ 5 .Main-header{
8 display: flex; 6 display: flex;
9 flex-direction: row; 7 flex-direction: row;
10 - height: 30%;
11 .title{ 8 .title{
12 display: flex; 9 display: flex;
13 justify-content: center; 10 justify-content: center;
14 width: 90%; 11 width: 90%;
15 - height: 50px; 12 + height: 60px;
16 .h1{ 13 .h1{
17 - font-size: 40px; 14 + font-size: 60px;
18 - color: white;
19 font-weight: bold; 15 font-weight: bold;
20 - text-align: center;
21 - margin-bottom: 60px;
22 } 16 }
23 } 17 }
24 .None-title{ 18 .None-title{
25 - display: flex;
26 - justify-content: right;
27 width: 10%; 19 width: 10%;
20 + .ui button{
21 + height: 40px;
22 + }
28 } 23 }
29 } 24 }
30 .Main-body{ 25 .Main-body{
31 display: flex; 26 display: flex;
32 flex-direction: row; 27 flex-direction: row;
33 - width: 100%;
34 height: 100vh; 28 height: 100vh;
35 - .contents{ 29 + .contents-container{
36 display: flex; 30 display: flex;
37 - justify-content: center; 31 + justify-content: flex-start;
38 - align-items: center; 32 + flex-direction: column;
39 - width: 70%; 33 + width: 75%;
34 + height: 100%;
35 + border: 2px solid black;
36 + .write-button{
37 + height: 70px;
38 + display: flex;
39 + justify-content: center;
40 + align-items: center;
41 + }
42 + .contents{
43 + display: flex;
44 + flex-direction: column;
45 + justify-content: center;
46 + align-items: center;
47 + .Grid{
48 + display: flex;
49 + justify-content: center;
50 + align-items: center;
51 + }
52 + }
40 } 53 }
41 - .user{ 54 + .user-container{
42 display: flex; 55 display: flex;
43 - justify-content: center; 56 + flex-direction: column;
44 - align-items: center; 57 + width: 25%;
45 - width: 30%; 58 + border: 2px solid black;
59 + .userInfo{
60 + display: flex;
61 + justify-content: center;
62 + align-items: center;
63 + }
64 + .checkIssue-button{
65 + height: 70px;
66 + display: flex;
67 + justify-content: center;
68 + align-items: center;
69 + }
46 } 70 }
47 } 71 }
48 } 72 }
......