Board UI ver1.0(Board + BoardModal)

+const express = require("express");
+const bodyParser = require("body-parser");
+const router = express.Router();
+
+const {User}=require('../models');
+
+router.get('/',(req,res)=>{
+    
+});
+
+//로그아웃
+router.post('/',(req,res)=>{
+    req.session.id = null;
+    req.session.name = null;
+    req.session.personality = null;
+    req.session.status = null;
+    req.session.isAuthorized = null;
+    console.log("Logout");
+    res.sendStatus(200);
+})
+
+module.exports = router;
\ No newline at end of file

-import React, {useCallback, useState} from 'react';
+import React, { useState} from 'react';
 import '../style/Board.scss'
 import '../style/Board.scss'
-import {CKEditor} from "@ckeditor/ckeditor5-react";
-import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
-import {Button} from "semantic-ui-react";
 import ReactHtmlParser from 'react-html-parser';
 import ReactHtmlParser from 'react-html-parser';
 import BoardModal from "../Modal/BoardModal";
 import BoardModal from "../Modal/BoardModal";
 
 
@@ -13,19 +10,17 @@ function Board() {
     }
     }
     return (
     return (
         <div className="Board">
         <div className="Board">
-            <div className="contents-container">
-                {viewContent.map(element =>
-                    <div className="contents" >
+            <div className="write-button">
+                <BoardModal onViewContentHandler={onViewContentHandler}/>
+            </div>
+            {viewContent.map(element =>
+                    <div class="ui segment">
                         <h2>{element.title}</h2>
                         <h2>{element.title}</h2>
                         <div>
                         <div>
                             {ReactHtmlParser(element.content)}
                             {ReactHtmlParser(element.content)}
                         </div>
                         </div>
                     </div>
                     </div>
                 )}
                 )}
-            </div>
-            <div className="write-button">
-                <BoardModal viewContent = {viewContent} onViewContentHandler={onViewContentHandler}/>
-            </div>
         </div>
         </div>
 
 
     );
     );

@@ -13,7 +13,7 @@ function MainPage() {
         <div id="Main">
         <div id="Main">
             <div className="Main-header">
             <div className="Main-header">
                 <div className="title">
                 <div className="title">
-                    <h1>Tunnel</h1>
+                    <h1>"말하기 어려운 고민 여기에 털어놓으세요 :)"</h1>
                 </div>
                 </div>
                 <div className="None-title">
                 <div className="None-title">
                     <Button className="ui right floated button" onClick={()=>goToLogin()}>
                     <Button className="ui right floated button" onClick={()=>goToLogin()}>
@@ -23,7 +23,7 @@ function MainPage() {
             </div>
             </div>
             <div className="Main-body">
             <div className="Main-body">
                 <Board/>
                 <Board/>
-                <div className="user-container">
+                {/* <div className="user-container">
                     <div className="userInfo">
                     <div className="userInfo">
                         <h1>User ID</h1>
                         <h1>User ID</h1>
                     </div>
                     </div>
@@ -49,7 +49,7 @@ function MainPage() {
                             </div>
                             </div>
                         </div>
                         </div>
                     </div>
                     </div>
-                </div>
+                </div> */}
             </div>
             </div>
         </div>
         </div>
     );
     );

@@ -3,7 +3,7 @@ import { Button, Header, Image, Modal } from 'semantic-ui-react'
 import {CKEditor} from "@ckeditor/ckeditor5-react";
 import {CKEditor} from "@ckeditor/ckeditor5-react";
 import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
 
 
-function BoardModal({viewContent, onViewContentHandler}) {
+function BoardModal({onViewContentHandler}) {
     const handleClose = (event) => {
     const handleClose = (event) => {
         event.preventDefault();
         event.preventDefault();
         setOpen(false);
         setOpen(false);
@@ -57,7 +57,6 @@ function BoardModal({viewContent, onViewContentHandler}) {
                                     ...BoardContent,
                                     ...BoardContent,
                                     content: data,
                                     content: data,
                                 })
                                 })
-
                                 console.log(BoardContent);
                                 console.log(BoardContent);
                             }}
                             }}
                             onBlur={(event, editor) => {
                             onBlur={(event, editor) => {

@@ -3,9 +3,7 @@
   flex-direction: column;
   flex-direction: column;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
-  border: 2px solid #333;
   padding: 10px 0 30px 0;
   padding: 10px 0 30px 0;
-  border-radius: 30px;
 }
 }
 .title-input{
 .title-input{
   width: 500px;
   width: 500px;

 #Main{
 #Main{
-  margin-top: 30px;
+  background-color: beige;
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   .Main-header{
   .Main-header{
     display: flex;
     display: flex;
     flex-direction: row;
     flex-direction: row;
+    height: 70px;
     .title{
     .title{
       display: flex;
       display: flex;
       justify-content: center;
       justify-content: center;
+      align-items: center;
       width: 90%;
       width: 90%;
-      height: 60px;
       .h1{
       .h1{
+        font-family:Arial, Helvetica, sans-serif;
         font-size: 60px;
         font-size: 60px;
         font-weight: bold;
         font-weight: bold;
       }
       }
     }
     }
     .None-title{
     .None-title{
+      display: flex;
+      justify-content: center;
+      align-items: center;
       width: 10%;
       width: 10%;
       .ui button{
       .ui button{
         height: 40px;
         height: 40px;
@@ -32,7 +37,7 @@
       display: flex;
       display: flex;
       justify-content: flex-start;
       justify-content: flex-start;
       flex-direction: column;
       flex-direction: column;
-      width: 75%;
+      width: 100%;
       height: 100%;
       height: 100%;
     }
     }
     .user-container{
     .user-container{