Showing
2 changed files
with
86 additions
and
19 deletions
| 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-container"> | ||
| 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> | ||
| 17 | <div className="contents"> | 27 | <div className="contents"> |
| 18 | - <h1>a</h1> | 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> | ||
| 38 | + </div> | ||
| 39 | + <div className="user-container"> | ||
| 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> | ||
| 19 | </div> | 51 | </div> |
| 20 | <div className="user"> | 52 | <div className="user"> |
| 21 | - <h1>a</h1> | 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; |
| 29 | + .contents-container{ | ||
| 30 | + display: flex; | ||
| 31 | + justify-content: flex-start; | ||
| 32 | + flex-direction: column; | ||
| 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 | + } | ||
| 35 | .contents{ | 42 | .contents{ |
| 36 | display: flex; | 43 | display: flex; |
| 44 | + flex-direction: column; | ||
| 37 | justify-content: center; | 45 | justify-content: center; |
| 38 | align-items: center; | 46 | align-items: center; |
| 39 | - width: 70%; | 47 | + .Grid{ |
| 48 | + display: flex; | ||
| 49 | + justify-content: center; | ||
| 50 | + align-items: center; | ||
| 51 | + } | ||
| 40 | } | 52 | } |
| 41 | - .user{ | 53 | + } |
| 54 | + .user-container{ | ||
| 55 | + display: flex; | ||
| 56 | + flex-direction: column; | ||
| 57 | + width: 25%; | ||
| 58 | + border: 2px solid black; | ||
| 59 | + .userInfo{ | ||
| 42 | display: flex; | 60 | display: flex; |
| 43 | justify-content: center; | 61 | justify-content: center; |
| 44 | align-items: center; | 62 | align-items: center; |
| 45 | - width: 30%; | 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 | } | ... | ... |
-
Please register or login to post a comment