Design last UI

@@ -35,9 +35,5 @@ module.exports = class Post extends Sequelize.Model {
 
     static associate(db) {
         db.Post.belongsTo(db.User,{foreignKey: 'userid', targetKey:'name' });
-<<<<<<< HEAD
-        //db.Post.hasMany(db.Post,{foreignKey: 'postid', sourceKey:'id' });
-=======
->>>>>>> a7a00ce3dcec95df5fd17594f215fe752568dfa5
     }
 };
\ No newline at end of file

@@ -12,11 +12,7 @@ const {Comment}=require('../models');
 router.post('/reply',auth,(req,res)=>{
 
     Comment.findAll({
-<<<<<<< HEAD
-        where:{postid: req.params.id},
-=======
         where:{postid: req.body.id},
->>>>>>> a7a00ce3dcec95df5fd17594f215fe752568dfa5
         order: [['created_at', 'ASC']],
      })
      .then((result)=>{
@@ -40,11 +36,7 @@ router.post('/write',auth,(req,res)=>{
     try{
     Comment.create({
         userid : req.session.name,
-<<<<<<< HEAD
-        postid : req.body.id,
-=======
         postid : req.body.postid,
->>>>>>> a7a00ce3dcec95df5fd17594f215fe752568dfa5
         comment : req.body.comment,
     })
     console.log("게시");

@@ -10,11 +10,7 @@ const {Post}=require('../models'); //게시물정보 db연결
 router.get('/',auth,(req,res)=>{
     Post.findAll({
         // where:{userid: req.session.name},
-<<<<<<< HEAD
-        // order: [['created_at', 'DESC']],
-=======
         order: [['created_at', 'DESC']],
->>>>>>> a7a00ce3dcec95df5fd17594f215fe752568dfa5
      })
      .then((result)=>{
         //console.log(result);

 import Axios from 'axios';
 import React, { useState, useEffect} from 'react';
 import '../style/Board.scss'
-
-import BoardModal from "../Modal/BoardModal";
 import ContentModal from '../Modal/ContentModal';
 
 function Board() {
@@ -16,9 +14,6 @@ function Board() {
       },[viewContent])
     return (
         <div className="Board">
-            <div className="write-button">
-                <BoardModal/>
-            </div>
             <div className="contents">
              {viewContent&&viewContent.map(element =>{
                 return <div className="ui segment">

@@ -4,6 +4,7 @@ import "../style/MainPage.scss";
 import { useNavigate } from "react-router-dom";
 import Board from "../Board/Board"
 import React from "react";
+import BoardModal from "../Modal/BoardModal";
 
 function MainPage(props) {
     const navigate = useNavigate();
@@ -19,44 +20,22 @@ function MainPage(props) {
     return (
         <div id="Main">
             <div className="Main-header">
-                <div className="title">
-                    <h1>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1>
+                <div className="wrapper">
+                    <div className="title">
+                        <h1 style={{color: 'white'}}>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1>
+                    </div>
+                    <div className="None-title">
+                        <Button className="ui right floated button" onClick={()=>onLogout()}>
+                            Logout
+                        </Button>
+                    </div>
                 </div>
-                <div className="None-title">
-                    <Button className="ui right floated button" onClick={()=>onLogout()}>
-                        Logout
-                    </Button>
+                <div className="write-btn">
+                    <BoardModal/>
                 </div>
             </div>
             <div className="Main-body">
                 <Board/>
-                {/* <div className="user-container">
-                    <div className="userInfo">
-                        <h1>User ID</h1>
-                    </div>
-                    <div className="checkIssue-button">
-                        <Button className="ui animated button"
-                                tabIndex="0">
-                            <div className="visible content">도착한 글</div>
-                            <div className="hidden content">
-                                <i className="paper plane 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>
     );

@@ -51,12 +51,9 @@ function BoardModal() {
             onClose={() => setOpen(false)}
             onOpen={() => setOpen(true)}
             open={open}
-            trigger={<Button className="ui animated button" tabIndex="0">
-                <div className="visible content">게시글 작성하기</div>
-                <div className="hidden content">
-                    <i className="pencil alternate icon"></i>
-                </div>
-            </Button>}
+            trigger={<Button className="ui right floated button" tabIndex="0" >
+                게시글 작성하기
+            </Button>}  
         >
             <Modal.Header>고민이 있나요?</Modal.Header>
             <Modal.Content >

@@ -42,8 +42,8 @@ function ContentModal({element}) {
             onClose={() => setOpen(false)}
             onOpen={() => setOpen(true)}
             open={open}
-            trigger={<Button basic color='purple' className="ui animated button" tabIndex="0">
-                <div className="visible content">보기</div>
+            trigger={<Button basic color='purple' className="ui floated button" tabIndex="0">
+                보기
             </Button>}
         >
             <Modal.Header><h2>{element.title}</h2></Modal.Header>
@@ -57,7 +57,7 @@ function ContentModal({element}) {
             <Modal.Content>
                 {viewComment&&viewComment.map(elem =>{  
                     return <div className="ui segment">
-                                <h2>{elem.userid}</h2>
+                                <h4>{elem.userid}</h4>
                                  <h4>{elem.comment}</h4>
                             </div>}
                         )}

@@ -11,18 +11,22 @@
   margin: 10px;
 }
 .write-button{
+  margin-bottom: 30px;
   height: 70px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .contents{
+  background-color: rgb(36, 83, 121);
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   .ui.segment{
-    width: 40%;
+    padding: 20px;
+    width: 67%;
+    text-align: center;
 
   }
 }
\ No newline at end of file

@@ -5,5 +5,5 @@
 }
 .content{
     height: fit-content;
-    text-align: center;
+    text-align: left;
 }
\ No newline at end of file

 #Main{
-  background-color: beige;
   display: flex;
-  flex-direction: column;
   justify-content: center;
   align-items: center;
   .Main-header{
+    background-color: rgb(77, 62, 161);
+    position: fixed;  
+    top: 0; 
+    left: 0;
+    z-index: 10;
     text-align: center;
     display: flex;
-    flex-direction: row;
-    height: 70px;
-    
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 120px;
+    .wrapper{
+      display: flex;
+      flex-direction: row;
+      margin-bottom: 20px;
+      width:100%;
+    }
     .title{
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 90%;
+      width: 100%;
       .h1{
         font-family:Arial, Helvetica, sans-serif;
         font-size: 60px;
@@ -23,47 +34,25 @@
     }
     .None-title{
       display: flex;
-      justify-content:start;
+      justify-content:right;
       align-items: center;
       width: 10%;
       .ui button{
         height: 40px;
       }
     }
+    
   }
   .Main-body{
+    padding-top: 120px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    width: 80%;
-    height: 100vh;
-    border: 3px solid black;
+    width: 100%;
     .Board{
-      text-align: center;
-      display: flex;
-      justify-content: flex-start;
-      flex-direction: column;
       width: 100%;
-      height: 100%;
+      
     }
-    .user-container{
-      display: flex;
-      flex-direction: column;
-      width: 25%;
-      border: 2px solid black;
-      padding: 10px 0 30px 0;
-      .userInfo{
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-      .checkIssue-button{
-        height: 70px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-  }
+  }  
 }